@charset "utf-8";
/* CSS Document */

/* 全体の背景 */
body { background-color: #A9BCF5;}

/* サイトのデザイン */
.indexpc{
	width : 1000px;　
	max-width: 100%;
	height: auto;
	margin: 0px auto 0px ;
	background-color: aliceblue;
	}

.rogo{
	float : left;
}
/* snsレイアウト */
.snslayout{
	
	width: 300px;
	height: 100px;
	float : right;
	margin: 0px 0px 0px 0px ;
	background-color: coral;
	
}
/* snsレイアウト 子要素*/
/* facebook*/
.snslayout1{
	position: absolute;
	display: inline;
	width: 280px;
	height: 60px;
    margin: 35px 0px 100px 8px ;
	padding: 0px 0px 0px 0px ;
}

.facebookcolor{
	color:#305097 ;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

/* twitter*/
.twittercolor{
	color:#00aced ;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
/* hatena*/
.snslayout1 > .hatenalayout{
	
	margin: -59px 0px 0px 185px;
}


/* insta*/

.insta_btn3 {/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: absolute;
	
  margin: 5px 0px 0px 6px ;
  padding: 0px 0px 0px 0px ;
  display: inline-block;
  height: 56px;/*高さ*/
  width: 56px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  font-size: 10px;/*文字のサイズ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn3 div {
  position: relative;
}

.insta_btn3 .fa-instagram {
    font-size: 40px;/*アイコンサイズ*/
    position: relative;
	margin: -10px 0px 0px 0px;
    display:inline-block;
    transition: .5s
}

.insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
/* insta 終わり*/

/* ナビ　*/

#navpc {
	width: 100%;
    margin: 0px 0px -40px 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	background-color: aliceblue;
	}

.navbatonpc{
		width: 13%;
	    margin: 5px 0px 0px 0px;
	    text-align: center;
	}	

/* ナビ　終わり　*/

/* クリア　*/
.clear {
    clear:both;　/*floatの解除、ここがポイント*/
}
/* クリア　終わり　*/

/* サイドバー　*/
.sidebarlayout{
	background-color: aliceblue;
	width: 170px;
	height: auto;
	float: left;
	padding: 0px 0px 0px 0px ;
	margin: 0px 0px 0px 0px ;
}

.sidebar {
	background-color: aqua;
	width: 150px;
	height: auto;
	float: left;
	padding: 0px 0px 0px 0px ;
	margin: 16px 0px 20px 10px ;
}
/* サイドバー終わり　*/

/* サイドバーimg　*/
.sidebar > .sidebarimg1{
	width: 140px;
	padding: 0px 0px 0px 0px ;
	margin: 5px 0px 0px 5px ;
}

.sidebar > .sidebarimg{
	width: 140px;
	padding: 0px 0px 0px 0px ;
	margin: 0px 0px 0px 5px ;
}

/* サイドバーimg終わり　*/

/*lineエリア*/

.linearea{
	max-width: 500px;
	max-height:   400px;
	overflow-y: scroll;
}
/*lineエリア*/

/*line風会話*/
.line-bc {
  padding: 20px 10px;
  width: 500px;
  height: 259px;
  margin: 16px 0px 0px 165px;
  text-align: right;
  font-size: 14px;
  background: #7da4cd;
  overflow-y: scroll;	

}

/*以下、②左側のコメント*/
.balloon6 {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
}

.balloon6 .faceicon {
  float: left;
  margin-right: -50px;
  width: 70px;
  
}

.balloon6 .faceicon img{
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.balloon6 .chatting {
  width: 100%;
  text-align: left;
}
.says {
  display: inline-block;
  position: relative; 
  margin: 10px 0 0 60px;
  padding: 10px;
  max-width: 250px;
  border-radius: 12px;
  background: #edf1ee;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px; 
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #edf1ee;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.says p {
  margin: 0;
  padding: 0;
}


/*テスト以下、右側のコメント*/
.balloon5 {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: right;
  margin-left: -50px;
  width: 70px;
  
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.balloon5 .chatting {
  width: 100%;
  text-align: right;
}
.says1 {
  display: inline-block;
  position: relative; 
  margin: 15px 65px 0 0;
  padding: 10px;
  max-width: 250px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}

.says1:after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}
.says1 p {
  display: inline-block;
  position: relative; 
  margin: 0 0px 0 0;
  padding: 0px;
  max-width: 250px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}


/*以下、③右側の緑コメント*/
.mycomment {
  margin: 10px 0;
}
.mycomment p {
  display: inline-block;
  position: relative; 
  margin: 0 10px 0 0;
  padding: 8px;
  max-width: 250px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}

.mycomment p:after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}

/*右側のコメント終わり*/

/*line風会話終わり*/

/*line風会話終わり*/

/*タブ切り替え全体のスタイル*/
.tabs {
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: relative;	
  width: 520px;
  height: 500px;
  margin: -10px 0px 0px 165px;
  overflow-y: scroll;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  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;
　word-wrap: normal;	
  padding: 20px 10px 0;
  clear: both;
  overflow: hidden;
}


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

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

/*右サイド*/

.leftsidebar{
	
	width: 300px;
	margin: -836px 0px 0px 860px;
    padding: 1px; 
	float: left;
}
/*右サイド検索ボックス*/
.leftsideaffiliate1{
	background-color: blue;
	text-align: top;
    padding: 1px; 
	width: 300px;
	height: 40px;
	
}

#search {
	position: relative;
}

#keyword {
	position: absolute;
	top: 1;
	left: 0;
	width: 255px;
	height: 38px;
	border: 1px solid #D9D9D9;
	font-size: 15px;
	color: #999;
}

#search_btn {
	position: absolute;
	padding: 1px 1px 1px 1px;
	left: 258px;
	top:-1px;
	cursor: pointer;
}
/*右サイド検索ボックス終わり*/
/*右サイドアフィリエイト*/
.leftsideaffiliate2{
	
	text-align: top;
	margin: 5px 0px 0px 0px;
    padding: 1px; 
	width: 300px;
	height: 250px;
	
}

.thumbnail{
	background-color: blue;
	text-align: top;
	margin: 5px 0px 0px 0px;
    padding: 1px; 
	width: 300px;
	height: 70px;
}

.leftsideaffiliate3{
	background-color: blue;
	text-align: top;
	margin: 5px 0px 0px 0px;
    padding: 1px; 
	width: 300px;
	height: 250px;
	
}

/*shareページ*/
.affiliatelayout{
	margin: 15px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
	
	background-color: aliceblue;
	
}

.affiliatecontents{
	width: 830px;
	float: right;
	height: auto;
	background-color: aliceblue;
	margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.jyunni{
	margin: 0px 0px 0px 10px;
    padding: 0px 0px 0px 0px;
	width: 70px;
	
	
}

.affiliatename{
	width: 500px;
	margin: 10px 240px 0px 10px;
    padding: 0px 0px 0px 0px;
	text-align: left;
	float: right;
	font-size: 35px;
	font-family: "Osaka-mono", "MS Gothic", "monospace";
	
}

.affiliatelayout1{
	
	margin: -20px 0px 10px 90px;
    padding: 0px 0px 0px 0px;
	width: 300px;
	height: 250px;
	text-align: left;
}

.affiliatedate{
	width: 400px;
	height: 250px;
	float: left;
	margin: -260px 0px 20px 400px;
    padding: 0px 0px 0px 0px;
}

.affiliatedatecatego{
	font-size: 25px;
	
}

.sayssetumei{
	display: inline-block;
  position: relative; 
  margin: 10px 0 0 60px;
  padding: 10px;
  max-width: 600px;
  border-radius: 12px;
  background: #fff;
}

.sayssetumei:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px; 
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #fff;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.sayssetumei p {
  margin: 0;
  padding: 0;
}

.sayssetumei1 {
  display: inline-block;
  position: relative; 
  margin: 15px 65px 0 0;
  padding: 10px;
  max-width: 600px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}

.sayssetumei1:after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}
.sayssetumei1 p {
  display: inline-block;
  position: relative; 
  margin: 0 0px 0 0;
  padding: 0px;
  max-width: 600px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}

.affiliatesetumei{
	width: 700px;
	margin: 0px 30px 0px 0px;
    padding: 0px 5px 0px 5px;
	float: right;
	background-color: bisque;
}

.setumei {
	background-color: #A9E2F3;
	border-radius: 12px;
	margin: 15px 15px 15px 15px;
  padding: 10px;
}

.setumei > img{
	width: 100%;  
}




.affiliatesetumeimidashi{
	font-size: 20px;
	margin: 0px 30px 0px 0px;
    padding: 0px;
}

/*priceページ*/
/*タブ切り替え全体のスタイル*/
.pricetabs {
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: relative;	
  width: 820px;
  height: auto;
  margin: 10px 0px 0px 165px;
  overflow: hidden;
}

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

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

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


/*選択されているタブのコンテンツのみを表示*/
#priceall:checked ~ #pricesimsetumei,
#priceprogramming:checked ~ #priceprogramming_content{
  display: block;
}

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

.priceichiran{
	margin: 10px 0px 0px 10px;
}
.jyunni1{
	margin: 0px 0px 0px 10px;
    padding: 0px 0px 0px 0px;
	width: 70px;
	}

.pricelayout{
	width: auto;
	float: right;
	height: auto;
	background-color: aliceblue;
	margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}