@CHARSET "utf-8";






/* PC版ブログ用ページ用CSS */

div.container {
	width: 980px;
}

.blogMainContainer{
	width:640px;
	float:left;
}


.blogSideContainer{
	width:320px;
	float:right;
}






.articleUnitWrapper{
	border-bottom:6px solid #cccccc;
	padding:60px 0;
}

h1.articleHeadline{
	color:#333333;
	padding:20px 0 40px;
	font-size:32px;
	font-weight:normal;
}


h2.articleHeadline{
	padding:8px 16px 8px 0px;
	color:#333333;
	font-size:26px;
}

.postedDate{
	margin-bottom:40px;
	padding:0 0 10px;
	text-align:right;
	color:#666666;
	border-bottom:2px dotted #dddddd;
}


.readDetailArticle{
	text-align:center;
	padding:20px;
}

.readDetailArticle a:link,
.readDetailArticle a:visited{
	display:inline-block;
	background:url('../img/icon/arrow_white.png') #6c9bd2 no-repeat;
	background-position:98% center;
	padding:12px 40px 12px;
	font-size:18px;
	text-align:center;
	border-radius:6px;
	color:#ffffff;
	font-weight:bold;
	text-decoration:none;
}

.readDetailArticle a:hover,
.readDetailArticle a:active{
	background:url('../img/icon/arrow_white.png') #dd8822 no-repeat;
	background-position: 98% center;
}


.articleCategoryList{
	background:#eeeeee;
	margin:60px 80px 20px;
	padding:20px 20px 10px;
}

.articleCategoryList dt{
	color:#333333;
	font-weight:bold;
	padding-bottom:20px;
}

.articleCategoryList dd{
}

.articleCategoryList dd ul li{
	float:left;
	margin:0 20px 20px 0;
	list-style:none;
}

.articleCategoryList dd ul li a:link,
.articleCategoryList dd ul li a:visited{
	display:inline-block;
	background:url('../img/icon/arrow_white.png') #6c9bd2 no-repeat;
	background-position:98% center;
	padding:8px 28px 8px 14px;
	text-align:center;
	border-radius:6px;
	color:#ffffff;
	font-weight:bold;
	text-decoration:none;
}

.articleCategoryList dd ul li a:hover,
.articleCategoryList dd ul li a:active{
	background:url('../img/icon/arrow_white.png') #dd8822 no-repeat;
	background-position: 98% center;
}


.pagingList{
	margin:60px 0;
	text-align:center;
}

.pagingList li{
	display:inline-block;
	margin:20px;
}

.pagingList li a:link,
.pagingList li a:visited{
	display:block;
	background:url('../img/icon/arrow_white.png') #6c9bd2 no-repeat;
	background-position:98% center;
	padding:12px 40px 12px;
	font-size:18px;
	text-align:center;
	border-radius:6px;
	color:#ffffff;
	font-weight:bold;
	text-decoration:none;
}

.pagingList li a:hover,
.pagingList li a:active{
	background:url('../img/icon/arrow_white.png') #dd8822 no-repeat;
	background-position: 98% center;
}


.thumbnailArticleList{
	border-top:1px dotted #bbbbbb;
}

.thumbnailArticleList li{
	border-bottom:1px dotted #bbbbbb;
	list-style:none;
}

.thumbnailArticleList li a:link,
.thumbnailArticleList li a:visited{
	display:block;
	background:url('../img/icon/arrow_orange.png') no-repeat;
	background-position:98% center;
	padding:20px;
}

.thumbnailArticleList li:nth-of-type(even) a:link,
.thumbnailArticleList li:nth-of-type(even) a:visited{
	background:url('../img/icon/arrow_orange.png') no-repeat #fdfaee;
	background-position:98% center;
	padding:20px;
}

.thumbnailArticleList li a:hover,
.thumbnailArticleList li a:active{
	display:block;
	background:url('../img/icon/arrow_orange.png') no-repeat #ffeecc;
	background-position:96% center;
	padding:20px;
	color:#dd8822;
	font-weight:bold;
}

.thumbnailArticleList li:nth-of-type(even) a:hover,
.thumbnailArticleList li:nth-of-type(even) a:active{
	display:block;
	background:url('../img/icon/arrow_orange.png') no-repeat #ffeecc;
	background-position:96% center;
	padding:20px;
	color:#dd8822;
	font-weight:bold;
}

.thumbnailArticleList li dl dt{
	float:right;
	width:400px;
	font-size:20px;
	padding:20px 0;
}

.thumbnailArticleList li dl dd{
	float:left;
	width:180px;
}



	/* カテゴリー一覧 */
	
.categoryListContainer ul.categoryList{
	display:flex;
	flex-wrap:wrap;
}

.categoryListContainer ul.categoryList li{
	list-style:none;
	width:33.33%;
	width:calc( 100% / 3 );
}

.categoryListContainer ul.categoryList li a:link,ul.categoryList li a:visited{
	display:block;
	margin:15px;
	text-decoration:none;
	padding:30px;
	background:#ffeecc url('../img/icon/arrow_orange.png') no-repeat;
	background-position:98% center;
	color:#dd8822;
	font-weight:bold;
	text-align:center;
}

.categoryListContainer ul.categoryList li a:hover,ul.categoryList li a:active{
	background:#dd8822 url('../img/icon/arrow_orange.png') no-repeat;
	background-position:96% center;
	color:#ffffff;
}

.categoryListContainer ul.categoryList li dl{
}

.categoryListContainer ul.categoryList li dl dt{
	margin-bottom:10px;
}

.categoryListContainer ul.categoryList li dl dd{
}




/********************** サイド部分 ************************/

dl.sideContents > dt{
	border-bottom:4px solid #dd8822;
	background:#ffeecc;
	color:#333333;
	font-size:20px;
	padding:10px 20px;
}

dl.sideContents > dd{
	padding:20px 0 40px;
}



.blogSideContainer .recentArticleList li{
	list-style:none;
}

.blogSideContainer .recentArticleList li{
	list-style:none;
}


.blogSideContainer .recentArticleList li{
	border-bottom:1px dotted #bbbbbb;
	list-style:none;
}

.blogSideContainer .recentArticleList li a:link,
.blogSideContainer .recentArticleList li a:visited{
	display:block;
	background:url('../img/icon/arrow_orange.png') no-repeat;
	background-position:98% center;
	padding:10px;
}

.blogSideContainer .recentArticleList li:nth-of-type(even) a:link,
.blogSideContainer .recentArticleList li:nth-of-type(even) a:visited{
	background:url('../img/icon/arrow_orange.png') no-repeat #fdfaee;
	background-position:98% center;
	padding:10px;
}

.blogSideContainer .recentArticleList li a:hover,
.blogSideContainer .recentArticleList li a:active{
	display:block;
	background:url('../img/icon/arrow_orange.png') no-repeat #ffeecc;
	background-position:96% center;
	padding:10px;
	color:#dd8822;
	font-weight:bold;
}

.blogSideContainer .recentArticleList li:nth-of-type(even) a:hover,
.blogSideContainer .recentArticleList li:nth-of-type(even) a:active{
	display:block;
	background:url('../img/icon/arrow_orange.png') no-repeat #ffeecc;
	background-position:96% center;
	padding:10px;
	color:#dd8822;
	font-weight:bold;
}

.blogSideContainer .recentArticleList li dl dt{
	float:right;
	width:210px;
}

.blogSideContainer .recentArticleList li dl dd{
	float:left;
	width:80px;
}





.blogSideContainer .categoryList li{
	list-style:none;
}

.blogSideContainer .categoryList li{
	list-style:none;
}


.blogSideContainer .categoryList li{
	border-bottom:1px dotted #bbbbbb;
	list-style:none;
}

.blogSideContainer .categoryList li a:link,
.blogSideContainer .categoryList li a:visited{
	display:block;
	background:url('../img/icon/arrow_orange.png') no-repeat;
	background-position:98% center;
	padding:10px;
}

.blogSideContainer .categoryList li:nth-of-type(even) a:link,
.blogSideContainer .categoryList li:nth-of-type(even) a:visited{
	background:url('../img/icon/arrow_orange.png') no-repeat #fdfaee;
	background-position:98% center;
	padding:10px;
}

.blogSideContainer .categoryList li a:hover,
.blogSideContainer .categoryList li a:active{
	display:block;
	background:url('../img/icon/arrow_orange.png') no-repeat #ffeecc;
	background-position:96% center;
	padding:10px;
	color:#dd8822;
	font-weight:bold;
}

.blogSideContainer .categoryList li:nth-of-type(even) a:hover,
.blogSideContainer .categoryList li:nth-of-type(even) a:active{
	display:block;
	background:url('../img/icon/arrow_orange.png') no-repeat #ffeecc;
	background-position:96% center;
	padding:10px;
	color:#dd8822;
	font-weight:bold;
}

.blogSideContainer .categoryList li dl dt{
	float:right;
	width:140px;
}

.blogSideContainer .categoryList li dl dd{
	float:left;
	width:150px;
}




/* 記事部分 */

.articleContainer .youtubeWrapper{
	margin:20px 0;
}

.articleContainer .youtubeWrapper .youtube{
	clear:both;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.articleContainer .youtubeWrapper .youtube iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.articleContainer .youtubeShortWrapper{
	width:360px;
	margin:20px auto;
}

.articleContainer .youtubeShortWrapper .youtubeShort{
	clear:both;
	position: relative;
	padding-bottom: 177.77%;
	height: 0;
	overflow: hidden;
}

.articleContainer .youtubeShortWrapper .youtubeShort iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}