@charset "utf-8";


/*ボックスの表示非表示切り替え
---------------------------------------------------------------------------*/

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 50px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width:95%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 40px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

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

/*モーダルウィンドウ
---------------------------------------------------------------------------*/

#contents {
    margin: 0 auto;
    padding: 10px 0 50px 0;
    width: 100%;
}
 
p {
    padding: 10px 0;
}
 
#open01,#open02,#open03,#open04,#open05,#open06,
#open11,#open12,#open13,#open14,#open15,#open16{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
 
.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;

    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}
 
.modal_window {

  top: -45%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
    width: 80%;
    height: 38%;
    text-align: center;
    display: block;
    background: #fff;
    position: absolute;
    z-index: 10;
    -webkit-transform: scale(0);
}
 
.modal_window h2 {
    margin-bottom: 20px;
    width: 400px;
    height: 50px;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    background: #000;
}
 
.modal_window p {
    padding: 0 15px 15px 15px;
    font-size: 13px;
    line-height: 200%;
    text-align: left;
}
 
 
/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
    0% {opacity: 0;display: block;}
    100% {opacity: 1;}
}
 
div#modal div:target {
    -webkit-animation-name: modalFadeIn;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display: block;
}
 
@-webkit-keyframes modalScale {
    0% {opacity: 0;display: block; -webkit-transform:scale(0);}
    100% {opacity: 1; -webkit-transform:scale(1);}
}
 
div#modal div:target .modal_window {
    -webkit-animation-name: modalScale;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform:scale(1);
    opacity: 1;
    display: block;
}


/*ボックスの回り込み
---------------------------------------------------------------------------*/

.kakomi-maru1 {
    margin: 0.5em auto;  
    width: 42%;		/*compactタイプの幅*/
	float: left;		/*ボックスを左に回り込み*/
	height: auto;		/*compactタイプの高さ*/
	margin-left: 3.5%;	/*ボックス間の余白*/
	padding: 1em;

		
 color: #666666; /*文字色*/
 background-color: #f7f7f7; /*背景色*/

 border-radius: 8px; /*角の丸み*/ 
}

.online-link {

    width: 42%;		/*compactタイプの幅*/
	float: left;		/*ボックスを左に回り込み*/
	height: auto;		/*compactタイプの高さ*/
	margin-left: 3.5%;	/*ボックス間の余白*/

	text-align:center
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
    
.kakomi-maru1 {
	width: 100% !important;
	float: none;
	height: auto;
	margin-left: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.online-link {
	width: 100% !important;
	float: none;
	height: auto;
	margin-left: 0;


}