@charset "utf-8";
/****************************************************************/
/* テレワーク移住 */
/* 2021年07月29日 */
/****************************************************************/
/* トップページ *************************************************/
#telework h1,
#telework h2{
	line-height: 170%;
	letter-spacing: 1px;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 24px 0 24px 0;
	color: #333;
}
#telework h1{font-size: 2.2em;}
#telework h2{font-size: 2.0em;}
h1#ws_title{
	text-align: center;
	font-weight: normal;
	font-size: 2.2em;
	line-height: 150%;
	
	border-bottom: 1px solid #333;
	margin: 32px 0 64px 0;
	padding: 0 0 8px 0;
	background: none;
	color: #333;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	box-shadow: none;
}
.lead{
	line-height: 200%;
	margin: 0 0 40px 0;
}
/* つくばエリアならではの魅力 */
#allure_img img{
	border-radius: 16px;
}
.alluer_btn{
	text-align: center;
}
.alluer_btn a{
	padding: 4px 32px;
	border: 2px solid #73bd22;
	border-radius: 8px;
	
	display: inline-block;
	font-weight: bold;
	color: #73bd22;
	text-decoration: none;
}
.alluer_btn a:hover{
	background: #73bd22;
	color: #fff;
}
/* 仕事ができる場所 */
.ws_wrap{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 0px;
}
.ws_spot{
	padding: 0;
	width: 30%;
	background-color: #fff;
}
.ws_spot .city,
.ws_data .city{
	clear: both;
	background: #73bd22;
	color: #fff;
	font-size: 0.7em;
	line-height: 150%;
	padding: 2px 24px;
	margin: 0 8px 16px 0;
	border-radius: 4px;
	display: inline-block;
}
.dropin{
	background: #fd9306;
	color: #fff;
	font-size: 0.7em;
	line-height: 150%;
	padding: 2px 20px;
	margin: 0 0 16px 0;
	border-radius: 4px;
	display: inline-block;
}
.attention{
	margin: 0 0 24px 0;
	background: #f6f6f6;
	padding: 8px 16px 0 16px;
	border-radius: 4px;
}
#telework .attention{
	margin: 8px 0 0 0;
}
.attention span{
	vertical-align: 10%;
}
.ws_wrap h3{
	background: none;
	border: none;
	padding: 0;
	font-size: 1.1em;
}
.ws_wrap h3 a{
	color: #333 !important;
	text-decoration: none;
}
.ws_wrap h3 a:hover{ color: #e6001c !important; }
/* スポット情報 ***************************************************/
.ws_data {
	margin: 0 0 120px 0;
}
.ws_data h2{
	line-height: 170%;
	font-size: 1.8em;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	color: #333;
	margin: 0 0 24px 0;
}
.ws_data .ws_photo{
	margin: 0 0 32px 0;
}
.ws_data .ws_lead{
	font-size: 0.95em;
	line-height: 170%;
	margin: 0 0 32px 0;
}
.ws_data h3{
	background: none;
	border: none;
	color: #333;
	font-size: 1.4em;
	text-align: center;
	font-weight: bold;
}
/* 小写真 */
.ws_img_wrap{}
.ws_img_l{
	float: left;
	width: 324px;
	margin: 0 24px 16px 0;
}
.ws_img_r{
	float: right;
	width: 324px;
	margin: 0 0 16px 24px;
}
.ws_img_wrap img,
.ws_img_r img{
	width: 324px;
	height: 200px;
	border-radius: 4px;
}
/* 施設データ */
.ws_data .spot_data{
	clear: both;
	margin: 0 0 40px 0;
}
.ws_data .spot_data th{
	font-weight: bold;
}
.ws_data .spot_data td{
	word-break: break-all;
}
.link_btn {
	margin: 40px 0 64px 0;
	text-align: center;
}
.link_btn a {
	width: 80%;
	color: #333;
	cursor: pointer;
	box-sizing: border-box;
	display: inline-block;
	border: 2px solid #333;
	border-radius: 24px;
	padding: 4px 16px;
	margin: 0 auto;
	text-decoration: none;
}
.link_btn a:hover{
 background: #333;
 color: #fff;
}
.link_btn.ws{
	margin-top: 0 !important;
	margin-bottom: 160px !important;
}
/* 魅力紹介 *****************************************************/
.acv_lead{
}
.link_btn.ts{
	margin-bottom: 120px !important;
}
.comment_ma,
.comment_mb,
.comment_f{	padding-right: 120px;}
.comment_ma{background: url("../special/telework/images/comment_ma96.png") right 12px no-repeat;}
.comment_mb{background: url("../special/telework/images/comment_mb96.png") right 12px no-repeat;}
.comment_f{background: url("../special/telework/images/comment_f96.png") right 12px no-repeat;}
.balloon1-right {
	position: relative;
	display: inline-block;
	margin: 0 0 0 0;
	padding: 12px 16px;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #f0f0f0;
	border-radius: 8px;
}
.balloon1-right:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid #f0f0f0;
}
.balloon1-right p {
	margin: 0;
	padding: 0;
}
/****************************************************************/
/****************************************************************/
/* レスポンシブ <span class="naked_sign">◆</span><span class="naked_aural">だいやまーく</span>751px以上(PC)<span class="naked_sign">◆</span><span class="naked_aural">だいやまーく</span> *****************************/
/****************************************************************/
@media print, screen and ( min-width: 751px) {
	
/* トップページ *************************************************/
	#allure h1{
	}
	#allure{
		width: 960px;
		margin: 32px 0 64px 0;
		
	}
		
	#allure .lead{
		box-sizing: border-box;
		width: 440px;
		margin-right: 40px;
		float: left;
	}
	#allure .sp_top_index{
		box-sizing: border-box;
		width: 440px;
		margin: 0 40px 32px 0;
		float: left;
		border-color: #999;
		border-radius: 4px;
	}
	.alluer_btn{
		float: left;
		text-align: center;
		margin: 0 40px;
	}
	
	.alluer_btn a{
		width: 240px;
	}
		
	#allure_img{
		float: right;
		width: 440px;
		margin: 0 0 40px 40px;
	}
	
	
	
/* 仕事ができる場所 */
	#telework h2{
		clear: both;
	}
	.ws_spot{
		margin-bottom: 64px;
	}
	
	.ws_img{
		width: 288px;
	}
	img.ws_img{
		width: 288px;
		height: 200px;
		border-radius: 8px;
		margin-bottom: 24px;
	}
	
	
	
	#movie_main{
		width: 696px;
		height: 400px;
		margin: 0 auto 80px auto;
	}
	
	.linkto{
		text-align: center;
		margin-bottom: 80px;
	}
	
	/* スポット情報 *************************************************/
	.ws_data .ws_photo img{
		width: 696px;
		height: 400px;
		border-radius: 4px;
			
	}
	.ws_data .spot_data th,
	.ws_data .spot_data td{
		border-bottom: 1px solid #ccc;
		box-sizing: border-box;
		padding: 12px 12px;
	}
	.ws_data .spot_data th{
		width: 160px;
		text-align: left;
	}
	.ws_data .spot_data td{
		width: 532px;
	}
	
	
}
/****************************************************************/
/****************************************************************/
/* レスポンシブ <span class="naked_sign">◆</span><span class="naked_aural">だいやまーく</span>750px以下(スマートフォン)<span class="naked_sign">◆</span><span class="naked_aural">だいやまーく</span> ******************/
/****************************************************************/
@media only screen and ( max-width: 750px) {
	/* 強制非表示 */
 #pkz{
 	display: none !important;
 }
 
	.cts_1col,
	.cts_2col_l{
		margin: 0 8px;
	}
/* トップページ *************************************************/
	#allure{
		margin-bottom: 64px;
	}
	#allure_img{
		margin-bottom: 40px;
	}	
	.ws_spot{
		width: 100%;
	}
	.ws_spot:not(:last-child) {
		margin-bottom: 30px;
	}
	img.ws_img{
		border-radius: 8px;
		margin-bottom: 24px;
	}
}</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://www.tsukuba-style.jp/css/telework.css">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://www.tsukuba-style.jp/css/telework.css" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>