@charset "utf-8";

/* News */

.newsWrap { display: table; table-layout: fixed;}

/*---- article ----*/
.newsWrap article#articleWrap { display: table-cell; padding-right: 75px; vertical-align: top; text-align: left;}

.h1news { width: 100%; margin-bottom: 40px; border-bottom: 2px #48C4CB solid;}
.h1news::before { display: inline-block; color: #48C4CB; font-size: 24px; content: '■';}
.h1news h1 { display: inline-block; font-size: 24px; font-weight: bold;}

/* archive */

.newsList ul { margin-bottom: 80px;}
.newsList ul li { display: table; table-layout: fixed; width: 100%; padding: 20px 0; border-bottom: 2px #333 dotted;}
.newsList ul li .date { display: table-cell; width: 120px; text-align: center; vertical-align: top; color: #48C4CB;}
.newsList ul li .cate { display: table-cell; width: 140px; text-align: center; vertical-align: top;}
.newsList ul li .cate span { display: inline-block; width: 120px; border: 1px #48C4CB solid; color: #48C4CB;}
.newsList ul li .title { display: table-cell; padding-left: 20px; text-align: left;}
.newsList ul li .title a { color: #333;}

.wp-pagenavi { text-align: center;}
.wp-pagenavi span { display: inline-block; min-width: 40px; height: 40px; margin: 0 2px; padding: 0 8px; background: #48C4CB; color: #fff; text-align: center; line-height: 40px;}
.wp-pagenavi a { display: inline-block; min-width: 40px; height: 40px; margin: 0 2px; padding: 0 2px; background: #fff; border: 1px #48C4CB solid; color: #48C4CB; text-align: center; line-height: 40px;}

/* detail */

.metaBox .date { display: table-cell; width: 120px; text-align: center; vertical-align: top; color: #48C4CB;}
.metaBox .cate { display: table-cell; text-align: center; vertical-align: top;}
.metaBox .cate span { display: inline-block; min-width: 120px; padding: 0 1em; margin-left: 0.5em; border: 1px #48C4CB solid; color: #48C4CB;}

.thumBox { width: 100%; margin-bottom: 60px;}

.postBox .alignnone { display: inline;}
.postBox .aligncenter { display: block; margin: 0 auto;}
.postBox .alignright { display: block; float: right;}
.postBox .alignleft { display: block; float: left;}
.postBox h2 { font-size: 24px; font-weight: bold; margin: 10px 0; border-bottom: 2px #999 solid; line-height: 36px;}
.postBox h3 { font-size: 20px; font-weight: bold; margin: 10px 0; border-bottom: 1px #999 solid; line-height: 30px;}
.postBox h4 { font-size: 18px; font-weight: bold; margin: 10px 0; line-height: 26px;}
.postBox h5, .postBox h6 { font-size: 16px; font-weight: bold; margin: 10px 0; line-height: 24px;}

.postBox table { max-width: 100%; margin: 20px 0;}
.postBox table th, .postBox table td { padding: 15px; border: 1px #999 solid;}
.postBox table th { background: #eee;}

.postBox p + p { margin-top: 1em;}
.postBox ul { list-style-type: disc;}
.postBox ul li { margin-left: 1em; }
.postBox em { font-style: italic;}

.wpPrevNext { margin: 40px 0; text-align: center;}
.wpPrevNext a { display: inline-block; padding: 0 20px; margin: 0 0.5em; color: #48C4CB; border: 1px #48C4CB solid;}
.wpPrevNext a[rel="prev"] { padding-left: 1em; background: url(../images/news/prev_arrow.png) left center no-repeat;}
.wpPrevNext a[rel="next"] { padding-right: 1em; background: url(../images/news/next_arrow.png) right center no-repeat;}

/*---- aside ----*/
.newsWrap aside#asideWrap { display: table-cell; width: 275px; vertical-align: top;}

.menuBox { width: 100%; background: #F4F4F4;}
.menuBox .h2menu { width: 100%; height: 44px; background: #DABF5F url("../images/news/h2menu-bg.png") top right repeat-y; color: #fff; font-size: 22px; font-weight: bold; line-height: 44px;}
.menuBox .box { padding: 25px 30px 30px 30px; text-align: left;}
.menuBox .box ul li { width: 100%; padding: 5px 0; border-bottom: 1px #333 dotted;}
.menuBox .box ul li a { color: #333; font-size: 15px;}
.menuBox .box ul.children { padding-left: 0.5em;}
.menuBox .box ul.children li { border: none;}
.menuBox .box select { width: 100%; height: 50px; padding: 0 15px; border: 1px #48C4CB solid; border-radius: 5px; font-size: 16px; line-height: 50px;}


@media screen and (max-width: 767px){
	.newsWrap article#articleWrap { display: block; width: 100%; padding-right: 0; margin-bottom: 60px;}
	.newsWrap aside#asideWrap { display: block; width: 100%;}
}
@media screen and (max-width: 479px){
	.newsList ul li .date { display: inline-block; width: 120px; margin-bottom: 10px; text-align: left;}
	.newsList ul li .cate { display:inline-block; margin-bottom: 10px;}
	.newsList ul li .title { display: block; padding-left: 0;}
}


/* CSS memo
 
Font Awesome
https://fontawesome.com/icons?d=gallery&m=free

角丸
border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; 

テキストシャドウ
text-shadow:1px 1px 3px #666;
text-shadow:1px 1px 3px #666; text-shadow:-1px 1px 3px #666; text-shadow:1px -1px 3px #666; text-shadow:-1px -1px 3px #666;

ボックスシャドウ
-moz-box-shadow: 1px 1px 3px #666; -webkit-box-shadow: 1px 1px 3px #666; box-shadow: 1px 1px 3px #666;
 
ボックスシャドウ内側
-moz-box-shadow: inset 1px 1px 3px #666; -webkit-box-shadow: inset 1px 1px 3px #666; box-shadow: inset 1px 1px 3px #666;

トランジション
-webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; transition: 1.5s;
 
要素全部を透明
filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25;
 
背景のみ透明
background-color:rgba(255,255,255,0.2);
 
:first-child
:last-child
:nth-child(odd)　･･･　奇数番目の要素に適用
:nth-child(even)　･･･　偶数番目の要素に適用
:nth-child(n)　･･･　n番目の要素に適用
:nth-child(2n+1)　･･･　奇数番目の要素に適用
:nth-child(2n)　･･･　偶数番目の要素に適用
:nth-child(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用 


テキスト省略
.container { overflow: hidden; width: 100%;}
.container  p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

可変Youtube埋め込み
.youtube { position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

要素を横スクロール
.scroll { width: 100%; padding-bottom: 10px; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch;}

その他メモ JavaScript
javascript:void(0);
javascript:history.back();

画像の縦長自動調整
img { max-width: 100%; max-height: 100%; height: 100vh; width: auto\9; margin: 0 auto;}

WPページナビ
.wp-pagenavi { text-align: center;}
.wp-pagenavi span, .wp-pagenavi a { display: inline-block; width: 32px; height: 32px; border: 1px #2E7BB1 solid; color: #2E7BB1; font-size: 14px; text-align: center; line-height: 32px;}
.wp-pagenavi span.pages { width: auto; padding: 0 8px;}
.wp-pagenavi .current { background: #2E7BB1; color: #fff;}

背景を左右で分ける（左から0～50％と50％～100％）
background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);

CSS memo */