/*
Theme Name: 17_child
Template: twentyseventeen
*/
 
@import url('../twentyseventeen/style.css');


/* agrijob.cropfirst.com */


/* 左の線と背景色で飾る場合 */
h2 {
    padding: 0.25em 0.5em;
    border-left: solid 5px #050;
} 

.entry-content a {
	color: #00f;/*記事中のリンク文字を変更*/
}
a:hover,
a:active {
	color: #f00;
}

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 0px 0 rgba(15, 15, 15, 1);/*下線の太さと色*/
	box-shadow: inset 0 0px 0 rgba(15, 15, 15, 1);/*下線の太さと色*/
}


.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #f00;/*マウスオーバー時の文字色*/
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 0, 0, 1);/*マウスオーバー時の下線の太さと色*/
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 0, 0, 1);/*マウスオーバー時の下線の太さと色*/
}


/*以下、�@背景色など*/
.line-bc {
  padding: 20px 10px;
  max-width: 450px;
  margin: 15px auto;
  text-align: right;
  font-size: 14px;
  background: #7da4cd;

}


/*以下、�@背景色など*/
.line-bc {
  padding: 20px 10px;
  max-width: 450px;
  margin: 15px auto;
  text-align: right;
  font-size: 14px;
  background: #7da4cd;

}

/*以下、�A左側のコメント*/
.balloon6 {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
}

.balloon6 .faceicon {
  float: left;
  margin-right: -50px;
  width: 40px;
}

.balloon6 .faceicon img{
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.balloon6 .chatting {
  width: 100%;
  text-align: left;
}
.says {
  display: inline-block;
  position: relative; 
  margin: 0 0 0 50px;
  padding: 10px;
  max-width: 250px;
  border-radius: 12px;
  background: #edf1ee;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px; 
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #edf1ee;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.says p {
  margin: 0;
  padding: 0;
}

/*以下、�B右側の緑コメント*/
.mycomment {
  margin: 10px 0;
}
.mycomment p {
  display: inline-block;
  position: relative; 
  margin: 0 10px 0 0;
  padding: 8px;
  max-width: 250px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}

.mycomment p:after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}


table{
  box-sizing: border-box;
  border-collapse:collapse;
  margin: 0 auto;
  text-align: center;
  width: 650px;
}
table th,
table td{
  border: 1px solid #999;
  padding: .5em 1em;
}
table th{
  background: #fff;
}


@media (max-width: 650px) {
    table{
      width: 100%;
    }
    table th,
    table td{
      display: block;
    }
    table th,
    table td{
      border-top: none; /* 一旦、すべてのborder-topを削除 */
    }
    table tr:first-child th{
      border-top: 1px solid #999; /* 一番上にあるthだけborder-topを追加 */
    }
  }



table {
table-layout: fixed;
width: 100%;
}


@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}


.example {/*親div*/
  position: relative;/*相対配置*/
  }

.example p {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: em;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 20%;
  left: 5%;
  }

@media screen and (min-width: 650px){	
  font-size: 3px;
}

.example img {
  width: 100%;
  }


/*見出しのデザイン

h2 {
  position: relative;
  padding: 0.5em;
  background: #00CC33;
  color: white;
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

*/


/*取り消しカラーa6d3c8*/

/*左右にボーダー*/

.s1 {
	color: #050;
	font-size: 28px;
	display: flex;
	align-items: center;
}
.s1:before, .s1:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #050;
	display: block;
}
.s1:before {
	margin-right: .4em;
}
.s1:after {
	margin-left: .4em;
}


.s2 {
	color: #050;
	font-size: 28px;
	display: flex;
	align-items: center;
}
.s2:before, .s2:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	display: block;
}
.s2:before {
	margin-right: .4em;
	background: linear-gradient(-90deg, #050, transparent);
}
.s2:after {
	margin-left: .4em;
	background: linear-gradient(90deg, #050, transparent);
}


/* コンテンツ中身の背景色 */

.site-content .wrap {
	background-color:#ffffff;
        padding-top:0.5em;
}


/* 見出し付きの箱 */
.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 28px;
    line-height: 25px;
    font-size: 20px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}


/* 2つの箱を重ねる */
.bg_test {
    height: 150px;                  /* 高さ指定 */
    padding:  20px;                 /* 余白指定 */
    font-size: 24px;                /* 文字サイズ指定 */
    color: #555;
    background-color: #e0edff;   /* 背景色指定 */
}
 
.bg_test2 {
    color:  #696969;                   /* 文字色指定 */
    height: 300px;                  /* 高さ指定 */
    width:  250px;                  /* 幅指定 */
    font-size:  22px;               /* 文字サイズ指定 */
    background-color: #afeeee;         /* 背景色指定 */
    padding:  30px;                 /* 余白指定 */
    float:  center;                  /* 位置指定 */
    position:  relative;            /* 位置指定 */
    top: 20px;                     /* 位置指定 */
}


/* 横長の吹き出し１ */
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 22px;
  background: #e0edff;
  border-radius: 15px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}


/* 横長の吹き出し２ */
.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 22px;
  background: #acd879;
  border-radius: 15px;
}

.balloon2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #acd879;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}


/* 左上の丸い吹き出し */
.balloon3-right-btm {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #62c1ce;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-right-btm:before {
  content: "";
  position: absolute;
  bottom: -8px;
  right: -8px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #62c1ce;
  z-index: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* 布風のボックス１ */
.box14{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
  font-size: 22px;
  color: #555;
}
.box14 p {
    margin: 0; 
    padding: 0;
}


/* 布風のボックス２ */
.box15{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #acd879;
    box-shadow: 0px 0px 0px 10px #acd879;
    border: dashed 2px white;
  font-size: 22px;
  color: #050;
}
.box15 p {
    margin: 0; 
    padding: 0;
}


/* リボン１ */
.ribbon3 {
  display: inline-block;
  position: relative;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 7px 0;
  font-size: 18px;
  background: #acd879;
  color: #005500;
  box-sizing: border-box;
}

.ribbon3 h3 {
  margin: 0;
  padding: 0 30px;
  border-top: dashed 2px rgba(255, 255, 255, 0.5);
  border-bottom: dashed 2px rgba(255, 255, 255, 0.5);
  line-height: 42px;
}

.ribbon3:before, .ribbon3:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon3:before {
  /*左の山形*/
  top: 0;
  left: 0;
  border-width: 30px 0px 30px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon3:after {
  /*右の山形*/
  top: 0;
  right: 0;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}


/* リボン２ */
.ribbon13-wrapper {  
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 10px 0;
  width: 300px;
  background: #f1f1f1;
  }

.ribbon13 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 0;
  margin: 0 0 0 -20px;
  width: calc(100% + 20px);
  color: white;
  background: #70a6ff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.ribbon13 p {
  margin: 0;
  padding: 0 30px 0 15px;
  border-top: dashed 1px #FFF;
  border-bottom: dashed 1px #FFF;
  font-size: 20px;
  line-height: 46px;
}

.ribbon13:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #f1f1f1 transparent transparent;
  border-style: solid;
}

.ribbon13:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #6081b7;
}


/* リボン３ */
.ribbon6 {
  display: inline-block;
  position: relative;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 7px 0;
  font-size: 18px;
  background: #32cd32;
  color: #FFF;
  box-sizing: border-box;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.ribbon6 p {
  margin: 0;
  padding: 0 30px;
  border-top: dashed 2px rgba(255, 255, 255, 0.5);
  border-bottom: dashed 2px rgba(255, 255, 255, 0.5);
  line-height: 42px;
}

.ribbon6:before, .ribbon6:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon6:before {
  top: -2px;
  left: -2px;
  border-width: 32px 0px 32px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon6:after {
  top: -2px;
  right: -2px;
  border-width: 32px 15px 32px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}


/* 影付きの箱 */
.box13 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #fff;
    background: #32cd32;
    border-bottom: solid 6px #acd879;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.box13 p {
    margin: 0; 
    padding: 0;
}

#footer, #siteBottom{
background: initial; 　　　　　　 /* フッター部分の背景画像を初期化する */
background-color: #ffffff;　　　/* 任意の色を指定 */
}


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


}
.site-footer {
	background-color: #ffffff);/*記事周りの背景色�C*/
}


/* ライン風のボックス２ */
/*以下、�@背景色など*/
.line-bc {
  padding: 20px 10px;
  max-width: 450px;
  margin: 15px auto;
  text-align: right;
  font-size: 14px;
  background: #7da4cd;

}

/*以下、�A左側のコメント*/
.balloon6 {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
}

.balloon6 .faceicon {
  float: left;
  margin-right: -50px;
  width: 40px;
}

.balloon6 .faceicon img{
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.balloon6 .chatting {
  width: 100%;
  text-align: left;
}
.says {
  display: inline-block;
  position: relative; 
  margin: 0 0 0 50px;
  padding: 10px;
  max-width: 250px;
  border-radius: 12px;
  background: #edf1ee;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px; 
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #edf1ee;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.says p {
  margin: 0;
  padding: 0;
}


/*以下、�B右側の緑コメント*/
.mycomment {
  margin: 10px 0;
}
.mycomment p {
  display: inline-block;
  position: relative; 
  margin: 0 10px 0 0;
  padding: 8px;
  max-width: 250px;
  border-radius: 12px;
  background: #30e852;
  font-size: 15px:
}

.mycomment p:after {
  content: "";
  position: absolute;
  top: 3px; 
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #30e852;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}


.btn-stitch {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  color: #FFF;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 5px #668ad8;
  border: dashed 1px #FFF;
}

.btn-stitch:hover {
  border: dotted 1px #FFF;
}


.btn-gradient-3d-simple {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #5e7fca;
}

.btn-gradient-3d-simple:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}


.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #32cd32;/*ボタン色*/
  color: #FFF!important;
  border-bottom: solid 4px #008000;
  border-radius: 3px;
}
.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}


.btn-gradient-radius {
  display: inline-block;
  padding: 7px 20px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF!important;
  background-image: linear-gradient(45deg, #008000 0%, #008000 100%);
  transition: .4s;
}

.btn-gradient-radius:hover {
  background-image: linear-gradient(45deg, #008000 0%, #008000 100%);
}


.sankaku{
	width: 0;
	height: 0;
	border-top: 30px solid #0f9;
	border-right: 120px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 120px solid transparent;
}


#breadcrumb {
  margin:0 auto;
  width:900px;/* 下の白背景と同じサイズ */
}


<!--表示 CSS (スタイル)の ：例-->
<style>
#breadcrumbs {
    text-align: -webkit-center;
    color: red;
}
</style>


/* アコーデオン */
/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#228b22;
    font-weight: bold;
    background :#eeeeee;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#eeeeee;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: #eeeeee;
    opacity: 1;
}


@media screen and (min-width: 48em) {

	.site-description {
		font-size: 30px;
		font-size: 1.875rem;
	}
}


/*記事タイトルの文字*/
h1 {
	color: #050;/*h1色*/
	font-size: 24px;/*大きさ*/
	font-size: 1.5rem;/*大きさ*/
	font-weight: 300;/*太さ*/
}
@media screen and (min-width: 30em) {
	h1 {
		font-size: 30px;/*大きさ*/
		font-size: 1.875rem;/*大きさ*/
	}
}
@media screen and (min-width: 48em) {
	.single-post .entry-title,
	.page .entry-title {
		font-size: 26px;/*大きさ*/
		font-size: 1.625rem;/*大きさ*/
	}
}


/*見出し文字*/
h2 {
	/*h2はトップページやアーカイブページの記事タイトルにも使われている*/
	color: #050;/*h2色*/
	font-size: 20px;/*h2大きさ*/
	font-size: 1.25rem;/*h2大きさ*/
	font-weight: 300;/*h2太さ*/
}
h3 {
	color: #050;/*h3色*/
	font-size: 18px;/*h3大きさ*/
	font-size: 1.125rem;/*h3大きさ*/
	font-weight: 300;/*h3太さ*/
}
h4 {
	color: #050;/*h4色*/
	font-size: 16px;/*h4大きさ*/
	font-size: 1rem;/*h4大きさ*/
	font-weight: 800;/*h4太さ*/
}
h5 {
	color: #767676;/*h5色*/
	font-size: 13px;/*h5大きさ*/
	font-size: 0.8125rem;/*h5大きさ*/
	font-weight: 800;/*h5太さ*/
}
h6 {
	color: #333;/*h6色*/
	font-size: 15px;/*h6大きさ*/
	font-size: 0.9375rem;/*h6大きさ*/
	font-weight: 800;/*h6太さ*/
}
@media screen and (min-width: 30em) {
	h2,
	.page .panel-content .recent-posts .entry-title {
		/*h2はトップページやアーカイブページの記事タイトルにも使われている*/
		font-size: 26px;/*h2大きさ*/
		font-size: 1.625rem;/*h2大きさ*/
	}
	h3 {
		font-size: 22px;/*h3大きさ*/
		font-size: 1.375rem;/*h3大きさ*/
	}
	h4 {
		font-size: 18px;/*h4大きさ*/
		font-size: 1.125rem;/*h4大きさ*/
	}
	h5 {
		font-size: 13px;/*h5大きさ*/
		font-size: 0.8125rem;/*h5大きさ*/
	}
	h6 {
		font-size: 16px;/*h6大きさ*/
		font-size: 1rem;/*h6大きさ*/
	}
}


/* Layout */

.wrap {
    max-width: 1000px;
    padding-left: 2em;
    padding-right: 2em;
}

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

.has-sidebar #secondary {
    float: right;
    padding-top: 30px;
	padding-right: 30px;
    width: 25%;
}

.error404 #primary {
    float: none;
}