@charset "utf-8";

/*** ウェブフォントの読み込み***/

@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700|Quicksand:500|Schoolbell');


/*** 全体設定 ***/

body{
color:#333333;
font-family: 'Lato', 'Noto Sans JP', sans-serif;
/*font-family: -apple-system, 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', Arial, 'Yu Gothic Medium', 'メイリオ', Sans-Serif;*/
font-size:1.2rem;
line-height:180%;
cursor:default;
margin:0;
padding:0;
}

*, *:before, *:after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

main{
display:block; /*IE対策*/
width:800px;
margin-left:auto;
margin-right:auto;
}

div.wrapper{
width:800px;
margin-left:auto;
margin-right:auto;
}

/*** OFF-LEFT が必要な要素の設定 ***/

.off-left{
position:absolute;
left:-9999em;
}

/*** 区切り線 ***/

hr{
clear:both;
border:1px #f5f5f5 solid;
margin-top:2rem;
margin-bottom:2rem;
}

hr.header{
display:none;
}

hr.search_and_navi{
border-color:#4e454a;
}

hr.aside{
border:1px #655960 solid;
margin-top:0em;
margin-bottom:2rem;
}

hr.footer{
border:1px #655960 solid;
width:800px;
margin-left:auto;
margin-right:auto;
margin-bottom:1.5em;
}

/*** リンクテキストの基本設定 ****/

a{
color:#33568a;
text-decoration:none;
border-bottom:1px #33568a solid;
}

a:focus{
background-color:#33568a;
color:#ffffff;
}

div.see_detail a{
/*font-weight:bold;*/
border-bottom:none;
padding-left:1.2rem;
background-image:url(/icons/angle_right.svg);
background-repeat: no-repeat;
background-position: center left;
background-size:0.9rem;
}

div.see_detail a:focus{
background-image:url(/icons/angle_right_focused.svg);
background-repeat: no-repeat;
background-position: center left;
background-size:0.9rem;
}


/*** リスト ***/

article ul, article ol{
margin-left:0rem;
margin-right:1rem;
}

article li{
line-height:170%;
padding-top:0.3rem;
padding-bottom:0.3rem;
}

/*** 画像 ***/

article figure{
margin-top:2rem;
margin-bottom:2rem;
margin-left:0rem;
margin-right:0rem;
}

figcaption{
font-size:0.9rem;
font-weight:700;
color:#3c3c3c;
line-height:130%;
margin-bottom:0.5rem;
}

article img{
display:block;
padding:2px;
margin-top:0rem;
margin-bottom:0rem;
border:3px #cccccc solid;
max-width:100%;
height:auto;
}

article a:hover img{
border:3px #33568a solid;
}

article a:focus img{
border:3px #33568a solid;
}

/*** YouTube 動画プレーヤーの埋め込み ***/

/* responsive に幅を可変にする */
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 50px;
height: 0;
overflow: hidden;
}

.video-container iframe, 
.video-container object, 
.video-container embed {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%; /*ここを auto にしたら表示が潰れる*/
padding: 2px;
border:3px #cccccc solid;
}

/*** HTML5 Video の埋め込み ***/

div.html5-video-container{
position: relative;
padding-top: 56.25%;
}

.html5-video-container video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto; /*ここは auto にしないと Mac Safari で微妙に崩れる*/
padding: 2px;
border:3px #cccccc solid;
}


/*** 見出し ***/

h1{
font-size:3rem;
font-weight:700;
color:#000000;
line-height: 130%;
margin-top:2rem;
margin-bottom:1rem;
}

h1.fixed_page{
margin-bottom:2rem;
}

h2{
margin-top:3rem;
margin-bottom:2rem;
padding-bottom:0.5rem;
font-size: 2rem;
font-weight:700;
color:#000000;
line-height:150%;
border-bottom:3px #ebebeb solid;
}

h2.noborder{
border-bottom:none;
}

h3{
margin-top:2.5rem;
margin-bottom:1rem;
font-size:1.7rem;
font-weight:700;
color:#000000;
line-height:150%;
}

h4{
margin-top:2rem;
margin-bottom:1rem;
font-size:1.3rem;
font-weight:700;
color:#000000;
line-height:150%;
}


/* ホーム、カテゴリー、検索結果における冒頭の見出し */

h1.category_and_search{
font-size:1rem;
font-weight:400;
margin-top:3rem;
margin-bottom:3rem;
}

h2.whats_new{
font-size:1rem;
font-weight:700;
border-bottom:none;
margin-bottom:0.5rem;
text-align:center;
}


/* ホーム、カテゴリー、検索結果における各記事タイトルの見出し */
article.post_list h2, article.post_list h3{
font-size:2rem;
font-weight:700;
line-height:130%;
border-bottom:none; /* h2 全般設定の打ち消し */
margin-top:2rem;  /* h2、h3 全般設定の打ち消し */
margin-bottom:1rem;
}

article.post_list a{
border-bottom:none;
}


/*** 段落 ***/

p{
margin-top:1.5rem;
margin-bottom:1.5rem;
}

small{
display:block;
font-size:0.9rem;
font-weight:400;
line-height:160%;
color:#3c3c3c;
margin-top:1rem;
margin-bottom:1rem;
margin-left:1rem;
margin-right:1rem;
}

small.form_note{
margin-left:0em; /*フォームの入力欄の注釈*/
}

/*** 強調 ***/

em{
font-style:italic;
font-weight:700;
color:#606060;
}

strong{
font-weight:700;
color:#000000;
}


/*** リストの例外 (ホーム、カテゴリー、検索結果、各記事におけるメタ情報) ***/

ul.info, ul.info_singlepost{
list-style:none;
font-size:0.8rem;
padding-left:0px;
}

ul.info_singlepost{
margin-bottom:3rem;
}

li.date{
padding-top:0rem;
}

li.category{
padding-top:0rem;
}

/*** 定義リスト ***/

dt{
margin-top:1rem;
margin-left:1rem;
font-weight:700;
color:#3c3c3c;
font-size:1.2rem;
}

dd{
margin-left:2rem;
margin-right:2rem;
}

/*** フォーム ***/

span#powered_by_me{
font-size:0.7rem;
}

div.form-group{
margin-top:1rem;
margin-bottom:2rem;
}

div.alert{
background-color:#f6dccd;
color:#a12800;
font-weight:400;
font-size:1rem;
padding:1rem;
margin-top:1rem;
border-radius:5px;
}

span.error_message{
font-size:1rem;
font-weight:700;
color:#a12800;
}

label{
font-weight:400;
font-size:1rem;
}

button{
background-color:#0E70AE;
color:#ffffff;
font-weight:400;
font-size:1rem;
cursor:pointer;
border-radius:3px;
border:none;
margin-top:1rem;
margin-bottom:1rem;
padding:1rem 3rem 1rem 3rem;
-webkit-appearance: none;
}

button:focus{
background-color:#28436C;
border:none;
}

input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="password"],input[type="date"],input[type="time"], textarea{
width:100%;
padding:0.5rem;
border:1px solid #545454;
-webkit-appearance: none;
font-family:NotoSansCJKjp, sans-serif;
font-size:1rem;
}

input:focus, textarea:focus{
border:1px solid #33568a;
background:#ffffdd;
}

input[type="checkbox"]:focus+label, input[type="radio"]:focus+label{
color:#ffffff;
background:#33568a;
border-top:3px #33568a solid;
border-bottom:3px #33568a solid;
}

fieldset{
border:none;
margin-top:1rem;
margin-bottom:1rem;
}

legend{
font-size:1rem;
font-weight:700;
}

button, input, select, textarea{
font-family:inherit;
}

/** 検索窓 **/

/* reset webkit search input browser style */

input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size:1rem;
display:block;
margin:0 auto;
font-family:NotoSansCJKjp, sans-serif;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}

/* search input field */

input[type=search]#serpsearch {
background: rgba(255,255,255,1) url(/icons/search_black.svg) no-repeat 1rem center / 1.2rem;
border: 2px solid #c3c3c4;
margin-bottom:3rem;
padding: 0.8rem 0rem 0.8rem 3rem;
width: 85%;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
}

input[type=search]#serpsearch:focus {
background-color: #ffffdd;
}

input[type=search]#footersearch {
background: rgba(78,69,74,1) url(/icons/search_white.svg) no-repeat 1rem center / 1.2rem;
border: 2px solid #c3c3c4;
margin-top:2rem;
margin-bottom:2rem;
padding: 0.8rem 0rem 0.8rem 3rem;
width:75%;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
color:#4e454a;
}

input[type=search]#footersearch:focus {
background:rgba(255,255,221,1) url(/icons/search_black.svg) no-repeat 1rem center / 1.2rem;
border:2px solid #ffffdd;
color:#000000;
}

::-webkit-input-placeholder{color:#4e454a; font-size:1rem;}
:-ms-input-placeholder{color:#4e454a; font-size:1rem;}
::-moz-placeholder{color:#4e454a; opacity:1; font-size:1rem;}


/*** 囲み ***/

div.box{
margin-top:1rem;
margin-bottom:1rem;
padding-left:20px;
padding-right:20px;
border:1px #a9a9a9 solid;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
position:relative;
}

div.box_postscript{
margin-top:1rem;
margin-bottom:1rem;
padding-top:0.5rem;
padding-bottom:0.5rem;
padding-left:20px;
padding-right:20px;
border:1px #a9a9a9 solid;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
position:relative;
background-image:url(/icons/pencil.svg);
background-repeat: no-repeat;
background-position: 5px 5px;
background-size:1.7rem;
}

blockquote{
margin-top:1rem;
margin-bottom:1rem;
margin-left:0px;
margin-right:0px;
padding-top:0.5rem; /*引用符の画像の分だけ余白を空ける*/
padding-bottom:0.5rem; /*引用符の画像の分だけ余白を空ける*/
padding-left:20px;
padding-right:20px;
border:1px solid #a9a9a9;
background-image:url(https://website-usability.info/icons/quote_left.svg), url(https://website-usability.info/icons/quote_right.svg);
background-repeat: no-repeat;
background-position: top left, bottom right;
background-size:1.7rem, 1.7rem;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
position:relative;
}

blockquote cite{
font-style:normal;
font-size:0.9rem;
}

div.box h2, div.box h3, div.box h4, blockquote h2, blockquote h3, blockquote h4{
margin-top:1rem;
border-bottom:none; /*h2 全般設定の左ボーダーをリセット*/
}

div.box ul, blockquote ul, div.box ol, blockquote ol{
padding-left:30px;
}


/*** テーブル ***/
div.table_responsive_scroll{
width:100%;
overflow-x:scroll;
-webkit-overflow-scrolling:touch;
}

table{
margin-top:1rem;
margin-bottom:2rem;
margin-left:0;
margin-right:0;
border: 1px solid #cccccc;
background-color:#cccccc;
}

caption{
padding-top:1rem;
padding-bottom: 0.3rem;
text-align:left;
font-weight:700;
}

th, td{
padding-top:0.3rem;
padding-bottom:0.3rem;
padding-left:10px;
padding-right:10px;
border-collapse:separate;
border-spacing:1px;
}

th{
background-color: #f5f5f5;
font-weight:700;
}

td{
background-color:#ffffff;
}

/* JIS X8341-3 チェックリスト */
table.jis_checklist{
font-size:1rem;
line-height:150%;
width:100%;
word-break:break-all;
}

table.jis_checklist th{
text-align:left;
}


/*** ソースコード記述 (pre 要素) での折り返し設定 ***/

pre{
white-space: pre-wrap;
word-wrap: break-word;
overflow: auto;
}


/*** ヘッダー特有のスタイル ***/

header{
background-color:#4e454a;
padding-top:5rem;
padding-bottom:5rem;
}

header div.logo{
font-size:3rem;
letter-spacing:0.08em;
line-height:120%;
font-family:'Quicksand', sans-serif;
font-weight:500;
text-align:center;
}

header div.header_copy{
font-family:"Schoolbell", cursive;
font-size:1.2rem;
color:#bdbdbd;
margin-top:1rem;
line-height:120%;
text-align:center;
}

a.header{
color:#ffffff;
text-decoration:none;
}

a.header:focus header{
background-color:#33568a;
}


/*** ホーム、カテゴリー、検索結果ページ特有のスタイル ***/

div#home_introduction{
background-image:url("https://website-usability.info/images/home_introduction_01.jpg");
background-size:cover;
background-position:50% 37%;
}

div#home_introduction_inner{
padding-top:6.5rem;
padding-bottom:6.5rem;
background-color:rgba(77,69,74,0.7);
}

div#home_introduction_inner p{
width:720px;
margin-left:auto;
margin-right:auto;
color:#ffffff;
font-size:1.0rem;
line-height:160%;
}

/* 個々の記事の囲み  */
article.post_list{
padding-bottom:3rem;
}

div.more{
text-align:right;
}

div.more a{
font-size:1rem;
border-bottom:none;
padding-left:1rem;
background-image:url(/icons/angle_right.svg);
background-repeat: no-repeat;
background-position: center left;
background-size:0.9rem;
}

div.more a:focus{
background-image:url(/icons/angle_right_focused.svg);
background-repeat: no-repeat;
background-position: center left;
background-size:0.9rem;
}

/* WP-PageNavi */

div.wp-pagenavi{
padding-top:2rem;
border-top:1px #bdbdbd dotted;
text-align:center;
font-size:1.2rem;
}

div.wp-pagenavi a{
margin-right:1rem;
border-bottom:none;
}

div.wp-pagenavi span.current{
margin-right:1rem;
font-weight:700;
}

div.wp-pagenavi a.previouspostslink{
padding-left:1.3rem;
background-image:url(/icons/angle_left.svg);
background-repeat: no-repeat;
background-position: center left;
background-size:1rem;
margin-right:2rem;
}

div.wp-pagenavi a.previouspostslink:focus{
background-image:url(/icons/angle_left_focused.svg);
background-repeat: no-repeat;
background-position: center left;
background-size:1rem;
}

div.wp-pagenavi a.nextpostslink{
padding-right:1.3rem;
background-image:url(/icons/angle_right.svg);
background-repeat: no-repeat;
background-position: center right;
background-size:1rem;
margin-left:1rem;
}

div.wp-pagenavi a.nextpostslink:focus{
background-image:url(/icons/angle_right_focused.svg);
background-repeat: no-repeat;
background-position: center right;
background-size:1rem;
}


/*** 個別記事ページ特有のスタイル ***/

ul.info_singlepost a{
border-bottom:none;
}

h3.widget-title{
padding-top:2rem;
border-top:3px solid #ebebeb;
}

div#share_article img{
display:inline;
border:none;
background-color:#ffffff;
}

div#share_article a{
border-bottom:none;

opacity:0.65;
}

div#share_article a:focus{
background-color:#ffffff;
opacity:1;
}

div#prev_next{
margin-top:5rem;
}

div#prev_next a{
border-bottom:none;
}

div#prev_next span.prev{
font-size:0.8rem;
line-height:150%;
padding-left:1rem;
width:40%;
float:left;
background-image:url(/icons/angle_left.svg);
background-repeat: no-repeat;
background-position: 0% 3px;
background-size:0.8rem;
}

div#prev_next span.next{
font-size:0.8rem;
line-height:150%;
padding-right:1rem;
width:40%;
float:right;
text-align:right;
background-image:url(/icons/angle_right.svg);
background-repeat: no-repeat;
background-position: 100% 3px;
background-size:0.8rem;
}

div#prev_next span.em_label{
font-size:0.9rem;
}

div.cta{
text-align:left;
margin-top:2rem;
margin-bottom:3rem;
}

div.cta a{
font-size:1rem;
font-weight:700;
/*border-bottom:none;*/
border:3px #33568a solid;
padding-top:1rem;
padding-bottom:1rem;
padding-left:1rem;
padding-right:3rem;
background-image:url(/icons/angle_right.svg);
background-repeat: no-repeat;
background-position: 90% 50%;
background-size:0.9rem;
}

div.cta a:focus{
background-image:url(/icons/angle_right_focused.svg);
background-repeat: no-repeat;
background-position: 90% 50%;
background-size:0.9rem;
}

/*** nav 要素、aside 要素 (sidebar.php) および footer 要素 (footer.php) のスタイル ***/

div.footer_color{
background-color:#4e454a;
}

nav{
padding-bottom:1rem;
color:#655960; /*リンク間の区切り線の色。リンクラベル自体は別途 nav a で #ffffff に指定。*/
font-size:1rem;
}

aside{
width:50%;
float:left;
padding-bottom:1rem;
padding-left:0rem;
padding-right:3rem;
}

nav h2, aside h2{
margin-top:1rem;
margin-bottom:1rem;
padding-bottom:0rem;
padding-left:0;
border-bottom:none;
font-size:1.2rem;
font-weight:700;
color:#ffffff;
text-align:left;
}

aside p{
margin-top:1rem;
font-size:0.9rem;
color:#ffffff;
line-height:175%;
}

aside ul{
font-size:1rem;
padding-left:0px;
}

aside ul li{
font-size:0.9rem;
line-height:180%;
padding-bottom:0.7rem;
list-style:none;
}

aside ul li a{
padding-left:1.2rem;
border-bottom:none;
background-image:url(/icons/footer_angle_right.svg);
background-repeat: no-repeat;
background-position: center left;
background-size:0.7rem;
}

nav a, aside a{
color:#ffffff;
}

nav a{
border-bottom:none;
white-space:nowrap;
}

nav a:focus, aside a:focus{
background-color:#ffffff;
color:#4e454a;
text-decoration:none;
border-top:3px #ffffff solid;
border-bottom:3px #ffffff solid;
}

footer{
padding-bottom:1.5rem;
color:#ffffff;
text-align:center;
font-size:0.8rem;
}

footer a{
color:#ffffff;
border-bottom:none;
font-size:1.1rem;
}

footer a.inquiry{
padding-left:1.3rem;
background-image:url(/icons/footer_envelope.svg);
background-repeat: no-repeat;
background-position: center left;
background-size:1.1rem;
}

footer a:focus{
background-color:#ffffff;
color:#4e454a;
text-decoration:none;
border-top:3px #ffffff solid;
border-bottom:3px #ffffff solid;
}