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



.custom-header {
	background: #ffffff;
}

.single-featured-image-header
{
      background-color: #ffffff;
}

button,
input[type="button"],
input[type="submit"] {
	background-color: #9CF;
}


.align {
	text-align: center;
}



.home .entry-title{
	color: #99CCFF;
 display:none;
}


.page-title{
	color: #99CCFF;
}

/*
.panel-content{
	color: #99CCFF;
}
*/

.entry-title{
	color: #99CCFF;
}




/* Container */
.container {
  margin: 0 auto;
  padding: 0px;
  width: 100%;
  background-color: #fff;
  column-count: 2;
  column-gap: 1;
}
.grid {
  padding: 0px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
@media (max-width: 48em) {
  .container {
    column-count: 1;
  }
}


/* 画像に文字を重ねる */

.example {
  position: relative;

  }

.example p {
	color:#333333;
	font-size:18px;
  position: absolute;
  top: 0%;
  left: 0%;
	background: #ffffff;	/*背景色追加*/
	opacity : 0.8;		/*透明度追加*/
  line-height: 1;		/*行高は1に*/
  padding: 3px 3px;		/*文字周りの余白*/
  border-radius: 0px;		/*角丸追加*/
  }
.example p2 {
	color:#ffffff;
	font-size:20px;
  position: absolute;
  right: 5%;
  bottom: 5%;
	background: #aaaaaa;	/*背景色追加*/
	opacity : 0.8;		/*透明度追加*/
  line-height: 1;		/*行高は1に*/
  padding: 5px 15px;		/*文字周りの余白*/
  border-radius: 10px;		/*角丸追加*/
  }
.example p3 {
	color:#ffffff;
	font-size:20px;
	background: #aaaaaa;
	opacity: 0.8;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  line-height: 1;		/*行高は1に*/
  padding: 5px 5px;		/*文字周りの余白*/
	border: solid 1.5px #ffffff;
  border-radius: 6px;		/*角丸追加*/
  }


a.white:link {
text-decoration : none;
color : #ffffff;
}
a.white:visited {
text-decoration : none;
color : #ffffff;
}
a.white:active {
text-decoration : none;
color : #ffffff;
}
a.white:hover {
text-decoration : none;
color : #ffffff;
}

.box1 {
	background: #cccccc;
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #ffffff;
}
.box1 p {
    margin: 0; 
    padding: 0;
}


.example img {
  width: 100%;
  }



.btn1 {
	font-size: 18px;
	text-decoration: none;
	margin: 10px auto 10px auto;
	padding: 6px 20px 4px 20px;
  position: relative;
  display: inline-block;
  font-weight: normal;
  color: #FFF;
  background: #99CCFF;
  transition: .4s;
  border-radius: 8px;
}

.btn1 {
  background: #99CCFF;
}


.btn1p {
  text-decoration: none;
}




/*
.home header {
margin :-2em;
}
*/


h1.site-title{
	color: #99CCFF;
}



/*記事タイトルの文字*/
h1 {
	color: #99CCFF;
	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: #FFF;/*h2色*/
	font-size: 20px;/*h2大きさ*/
	font-size: 1.25rem;/*h2大きさ*/
	font-weight: 300;/*h2太さ*/
}
h3 {
	color: #6495ED;/*h3色*/
	font-size: 18px;/*h3大きさ*/
	font-size: 1.125rem;/*h3大きさ*/
	font-weight: 300;/*h3太さ*/
}
h4 {
	color: #6495ED;/*h4色*/
	font-size: 16px;/*h4大きさ*/
	font-size: 1rem;/*h4大きさ*/
	font-weight: 800;/*h4太さ*/
}
h5 {
	color: #99CCFF;/*h5色*/
	font-size: 13px;/*h5大きさ*/
	font-size: 0.8125rem;/*h5大きさ*/
	font-weight: 800;/*h5太さ*/
}
h6 {
	color: #99CCFF;/*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大きさ*/
	}
}




p {
	margin: 0 0 1.5em;
	padding: 0;
}






/* (4)左の線と背景色で飾る場合

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; }
}



/*見出しのデザイン

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;
	}


}







/**/
.page .panel-content .entry-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
	color: #6495ED;
	font-size: 26px;
	font-size: 1.625rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}







.wrap1 {
  display: block;
  position: relative;
  margin: 50px auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 10px;
  padding-left: 20px;
  background: #99CCFF;
}



.wrap2 {
	width:  500px;                 /* 幅指定 */
  display: block;
  position: relative;
  margin: 30px auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 10px;
  padding-left: 30px;
  background: #e6ffe9;
	border-radius: 25px;
}

.wrap2-5 {
-webkit-appearance:none;
  display: block;
  position: relative;
	margin-top: 10px;		/* 追加 */
	margin-bottom: 10px;		/* 追加 */
	margin-left: -500%;		/* 追加 */
	margin-right: -500%;		/* 追加 */
	padding-top: 10px;
	padding-bottom: 30px;
	padding-left: 500%;		/* 追加 */
	padding-right: 500%;		/* 追加 */
/*padding-right: 10px;
  padding-left: 20px;*/
  background: #e6ffe9;
}



.wrap3 {
  display: block;
  position: relative;
  margin: 50px auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 10px;
  padding-left: 20px;
  background: #d9e5ff;
}





.bg1 {
    height: 100px;              /* 高さ指定 */
	padding-top: 30px;
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
	margin-top: 30px;	/* 上余白追加 */
	margin-bottom: 30px;	/* 下余白追加 */
    font-size: 25px;            /* 文字サイズ指定 */
    background-color: #99CCFF;  /* 背景色指定 */
}
.bg2 {
    color:  #ffffff;                  /* 文字色指定 */
    height: 200px;                 /* 高さ指定 */
    width:  600px;                 /* 幅指定 */
    font-size:  23px;              /* 文字サイズ指定 */
    background-color: #ffad90;     /* 背景色指定 */
    padding:  20px;                /* 余白指定 枠内の上端からのマージン*/
    position:  relative;           /* 位置指定 */
    top: 20px;                     /* 位置指定 背景色の上端からのマージン*/
    margin-left: 0px;             /* 余白指定 枠内の左端からのマージン　ゼロに変更*/
}
.bg3 {
    height: 250px;              /* 高さ指定 */
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
	margin-top: 30px;	/* 上余白追加 */
	margin-bottom: 30px;	/* 下余白追加 */
    font-size: 25px;            /* 文字サイズ指定 */
    background-color: #8eb8ff;  /* 背景色指定 */
}
.bg4 {
    color:  #ffffff;               /* 文字色指定 */
    height: 200px;                 /* 高さ指定 */
    width:  600px;                 /* 幅指定 */
    font-size:  23px;              /* 文字サイズ指定 */
    background-color: #8eb8ff;     /* 背景色指定 */
    padding:  20px;                /* 余白指定 枠内の上端からのマージン*/
    position:  relative;           /* 位置指定 */
    top: 20px;                     /* 位置指定 背景色の上端からのマージン*/
    margin-left: 0px;             /* 余白指定 枠内の左端からのマージン　ゼロに変更*/
}
.bg5 {
    height: 250px;              /* 高さ指定 */
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
	margin-top: 10px;	/* 上余白追加 */
	margin-bottom: 30px;	/* 下余白追加 */
    font-size: 25px;            /* 文字サイズ指定 */
    background-color: #62c1ce;  /* 背景色指定 */
}
.bg6 {
    color:  #ffffff;               /* 文字色指定 */
    height: 200px;                 /* 高さ指定 */
    width:  600px;                 /* 幅指定 */
    font-size:  23px;              /* 文字サイズ指定 */
    background-color: #62c1ce;     /* 背景色指定 */
    padding:  20px;                /* 余白指定 枠内の左上端からのマージン*/
    position:  relative;           /* 位置指定 */
    top: 20px;                     /* 位置指定 背景色の上端からのマージン*/
	margin-top: 20px;
    margin-left: 20px;             /* 余白指定 枠内の左端からのマージン　ゼロに変更*/
}
@media (max-width: 650px) {	/* スマホの改行 */
    .bg2{
      width: 100%;
    }
@media (max-width: 650px) {	/* スマホの改行 */
    .bg4{
      width: 100%;
    }
@media (max-width: 650px) {	/* スマホの改行 */
    .bg6{
      width: 100%;
    }
@media (max-width: 650px) {	/* スマホの改行 */
    .wrap2{
      width: 100%;
    }