/*
Theme Name: twentyseventeenの子テーマ
Template: twentyseventeen
*/

/* Typography for Japanese Font */

html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea {
        font-family: Lato,"Noto Sans JP","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif
} 

/* パンくずリスト */

.breadcrumbs {
    margin: 1.5em 0
}

.breadcrumbs a {
    color: #ffffff;
    font-weight:bold;
    font-size:small;
    background-color : #04b486;
    border-radius:4px;
    padding:4px 12px;
    margin:0 5px;
}

.breadcrumbs a:hover {
    color: #000000;
    background-color : #7eb5a0;
}

.breadcrumbs span[typeof="ListItem"]:last-child span[property="name"] {
    display: none ;
}

/* dashiconsを付けたいクラス　*/

.dashilink:before {
    font-family: "dashicons";
    content: "\f504";
}

.mailtoicon:before {
    font-family: "dashicons";
    content: "\f465";
    font-size: x-large;
}

/* 画像に枠線を入れる */
.fuchituke {
	border: solid 3px #a9a9a9 !important;
}

/* 段落を囲うスタイル */
.replace-well{
background-color:#F5F5F5;
padding: 2%;
border: 2px dotted #A9A9A9;
margin-top: 0.5ex;
margin-bottom: 0.5ex;
}

.replace-alert{
background-color:#FFF5EE;
padding: 2%;
border: 2px dotted #FF8C00;
margin-top: 0.5ex;
margin-bottom: 0.5ex;
}

.replace-info{
background-color:#E0FFFF;
padding: 2%;
border: 2px dotted #6495ED;
margin-top: 0.5ex;
margin-bottom: 0.5ex;
}

/* 見出し */
.entry-content h2,
.entry-content h3 {
position: relative;
padding-bottom: 5px;
}

.single-post .entry-content h2:before,
.single-post .entry-content h3:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
margin: 0 auto;
text-align: center;
background-position: center;
background-repeat: no-repeat;
}

.single-post .entry-content h2:before {
height: 3px;
background-image: -webkit-linear-gradient(left,gray,white 90%);
background-image: linear-gradient(to right,gray,white 90%);
}

.single-post .entry-content h3:before {
height: 2px;
background-image: -webkit-linear-gradient(left,gold,white 70%);
background-image: linear-gradient(to right,gold,white 70%);
}

/*埋め込みに枠線を入れる */
.embedly-card {
        border: solid 1px #a9a9a9;
	padding: 2% ;
	max-width: 500px ;
}

/* Jetpack 共有タイトル */
.entry-content h3.sd-title {
        font-size:large!important;
}

.sharedaddy h3.sd-title::before {
        margin-bottom: 2em!important;
}

.entry-content h3.sd-title::before {
        background-image: none;
}

h3.sd-title span[id*="i-"]::before {
        font-family: "dashicons";
        content: "\f240";
        margin-right: 5px ;
}

/* yuzo_related_postsのh3スタイル非表示 */
.yuzo_related_post h3::before {
    background-image: none!important;
}

/* サイドバーのアイコンフォント　*/
h2.widget-title {
        font-size:large;
}

section[id="rommeled_image-2"] h2.widget-title:before  {
        font-family: "FontAwesome";
        content: "\f007";
        margin-right: 5px ;
}

section[id="search-2"] h2.widget-title:before  {
        font-family: "dashicons";
        content: "\f179";
        margin-right: 5px ;
}

section[id="top-posts-3"] h2.widget-title:before  {
        font-family: "dashicons";
        content: "\f313";
        margin-right: 5px ;
}

.rpwwt-widget h2.widget-title:before  {
        font-family: "dashicons";
        content: "\f317";
        margin-right: 5px ;
}

.widget_categories h2.widget-title:before  {
        font-family: "FontAwesome";
        content: "\f02c";
        margin-right: 5px ;
}

section[id="jal_widget-2"] h2.widget-title:before  {
        font-family: "dashicons";
        content: "\f318";
        margin-right: 5px ;
}

.widget_decent_comments_widget h2.widget-title:before  {
        font-family: "dashicons";
        content: "\f125";
        margin-right: 5px ;
}

section[id="text-5"] h2.widget-title:before  {
        font-family: "dashicons";
        content: "\f488";
        margin-right: 5px ;
}

/* デフォルトの公開日と投稿者を非表示　*/

.entry-meta .posted-on{
	display: none ;
}

/* 公開日と最終更新日の表示 */

.koukai-day,
.koushin-day {
        margin:0 0 10px 0;
        padding:2px 8px;
        font-weight: bold; 
        border-width:0 0 0 5px;
        border-color:#FFFFFF;
        border-style:solid;
        background:#CCCCCC;
        line-height:140%;
        font-size:small;
        color: hsl(0, 50%, 40%);
}

.ikt-koushinjouhou {
        text-align: right ;
}

.koukai-day:before {
    font-family: "dashicons";
    content: "\f145";
    vertical-align: middle;
    color: hsl(0, 50%, 40%);
}

.koushin-day:before {
    font-family: "dashicons";
    content: "\f321";
    vertical-align: middle;
    color: hsl(0, 50%, 40%);
}

/* 引用部分 */
blockquote{
	background-color:#ddd;
	padding:1em 1em 1em 3em;
	position:relative;
	border-left:3px solid #333;
}

blockquote:before{
	content:"“";
	font-size:300%;
	line-height:1em;
	color:#999;
	position:absolute;
	left:0;
	top:0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.site-footer .widget-area ul li a,
.widget_authors a strong {
        -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0);
        box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0);
}

.entry-content a,
.entry-summary a,
.comment-content a {
        color: #0000ff;
}

.entry-content a:visited,
.entry-summary a:visited,
.comment-content a:visited {
        color:#934C7B;
}

/* テーブルに線と均等幅*/
table,
th,
td {
	border: 1px solid #d1d1d1;
}

table {
	table-layout: fixed;
}

th:first-child,
td:first-child {
	padding-left: 0.4em;
}

/* アドセンスにスポンサーリンク表示 */
.googlepublisherpluginad:before {
        content: "スポンサーリンク";
}

/* グローバルナビメニューの背景色 */
.navigation-top,
.navigation-top .sub-menu,
.navigation-top .toggled-on .menu {
	background-color:#465656;
}

/* グローバルナビメニューの文字色 */
.navigation-top a,
.main-navigation .menu-toggle,
.main-navigation .dropdown-toggle,
.site-header .navigation-top .menu-scroll-down {
	color: #FFFFFF;
}

/* コンテンツ部分の背景色 */
.site-content {
	background-color:#abbaba;
}

/* コンテンツ中身の背景色 */
.site-content .wrap {
	background-color:#FFFFFF;
        padding-top:0.5em;
}

/* フッターの背景色 */
.site-footer {
	background-color:#9bcccc;
}

/* contentの幅を1200pxに変更 */
@media screen and (min-width: 79em) {
	.wrap {
		max-width: 1200px;
		padding-left: 5em;
		padding-right: 5em;
	}

	.has-sidebar:not(.error404) #primary {
		width: 60.0%;
	}

	.has-sidebar #secondary {
		width: 31.3%;
	}
	.navigation-top .wrap {
		max-width: 1120px;
	}
	.site-footer .wrap {
		padding-left: 10em;
		padding-right: 8em;
	}
}

/* Jetpackの人気の投稿のサムネイルサイズ */ .widget_top-posts .widgets-list-layout-blavatar {
  max-width: 100px !important;
}

/* 最近の投稿　プラグイン用 */ 
.decent-comments .comment-avatar{
    float: left;
}
.decent-comments .comment-author{
    display: inline;
    line-height: 40px;
    vertical-align: middle;
    font-size:small;
}
.decent-comments .comment-date, 
.decent-comments .comment-link, 
.decent-comments .comment-excerpt{
    display: block;
}

/* プラグイン PZ-LinkCardの画像サイズ */
.linkcard .lkc-thumbnail{
    text-align:center;
}

.linkcard .lkc-thumbnail-img{
    max-width: 200px;
    max-height: 120px;
}

@media screen and (max-width: 600px)  {
    .linkcard .lkc-thumbnail {
        max-width: 360px;
        max-height:110px;
    }
.linkcard .lkc-thumbnail-img {
    max-width: 160px;
    max-height: 100px;
    }
}

@media screen and (max-width: 480px)  {
    .linkcard .lkc-thumbnail {
        max-width: 240px;
        max-height:85px;
    }
    .linkcard .lkc-thumbnail-img {
        max-width: 120px;
        max-height: 75px;
    }
}

@media screen and (max-width: 320px)  {
    .linkcard .lkc-thumbnail {
        max-width: 200px;
        max-height: 75px;
    }
    .linkcard .lkc-thumbnail-img {
        max-width: 100px;
        max-height: 62px;
    }
}

/* cryayonプラグインやめる */
pre.lang\:default,
pre.lang\:batch {
    font-family: monaco;
    background-color:#f5f5dc;
    color:#000;
    padding:1em;
    border: 1px solid #808080;
}

pre.lang\:default.theme\:dark-terminal,
pre.lang\:batch.theme\:dark-terminal {
    background-color:#000;
    color:#fff;
}

span.crayon-inline {
    font-family:monaco;
    background-color:#f5f5dc;
    border-radius: 6px;
	padding: 0 0.5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

/* ボーダーボックス上にラベル注意の赤 */
.box-alert1 {
    position: relative;
    margin: 3em 0 2em 0;
    padding: 1em 1em 0em 1em;
    border: solid 3px #dc143c;
}
.box-alert1 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #dc143c;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

/* ボーダーボックス上にラベルPOINTの緑 */
.box-point1 {
    position: relative;
    margin: 3em 0 2em 0;
    padding: 1em 1em 0em 1em;
    border: solid 3px #00ff7f;
}
.box-point1 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #00ff7f;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

/* 画像ブロックで画像にボーダー */ 
.wp-block-image.imgborder img{
        border: solid 3px #a9a9a9!important;
}

/* Listテンプレート　カスタマイズ分*/
.amazon-products-container-list .amazon-auto-links-product {
    border: 2px solid #d4d4c4;
    padding: 0.5em;
}
 
.amazon-products-container-list .amazondekau {
    border: 2px solid #d4d4c4;
    border-bottom: 0px;
    padding: 0.2em;
    font-size: small;
    background: #EEE8AA;
}

.amazon-products-container-list .amazon-product-title {
    font-size: 150%;
    font-weight: bold;
}

/* コードブロック用 */
pre.wp-block-code {
        font-family: monaco;
        background-color:#f5f5dc;
        color:#000;
        padding:1em;
        border: 1px solid #808080;
        }
pre.wp-block-code > code {
        border: 0px solid transparent;
        }
pre.wp-block-code.black-theme {
        background-color:#000;
        color:#fff;
        }
pre.wp-block-code.black-theme > code {
        color: #ffffff;
        border: 0px solid transparent;
        }
pre.wp-block-code.powershell {
        background-color:#191970;
        color:#fff;
        }
pre.wp-block-code.powershell > code {
        color: #ffffff;
        border: 0px solid transparent;
        }