@charset "UTF-8";
/*  Document */


/* 見出し https://qiita.com/noqua/items/df58ce8bb55db099bd8f#%E3%81%9D%E3%81%AE4*/
.midashi-d {
    padding:10px;
    background:#7abcff; /* グラデーション非対応の古いブラウザ用の単色 */
    background:linear-gradient(to right,  #7abcff 0%,#248AF3 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE8以下対応用 */
}

.midashi01-2{
padding: 0.25em 1em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #cccccc;/*下線*/
font-size:18pt;/*フォントサイズ*/
font-weight:bold;
}


/* 見出し https://uxmilk.jp/52953*/
.demo {
width: 100%;
  margin: 0 auto;
padding: 0.25em 0em;/*上下 左右の余白*/
  font-family: sans-serif;
  font-size: 20px;
  color:#3cb3e4;
}
.heading {
  margin: 10px 0
}
.demo7 .heading {
  position: relative;
  height: 50px;
  padding: 0;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #3cb3e4;
  line-height: 50px;
}
.demo7 .heading .caption{
    position: absolute;
    right: -1px;
    top: 1px;
    padding-left: 25px;
    padding-right: 40px;
    background: #3cb3e4;
    color: #fff;
    width: 604px;
}
.demo7 .heading .caption:before{
  display: block;
  content: ' ';
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  right: 99.9%;
  top: 0;
  border: 0 solid transparent;
  border-width: 50px 37px 0 0;
  border-right-color:#3cb3e4;
}
.demo7 .heading .title{
	    width: auto;
  float: left;
  padding-left: 20px;
background: #000003;
color: #fff;
	
}


/* 見出し https://www.nxworld.net/tips/50-css-heading-styling.html*/
.midashi01{
padding: 0.25em 1em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #cccccc;/*下線*/
font-size:24pt;/*フォントサイズ*/
font-weight:bold;
}


/* 記事用 */

.Conts-sdgs {
  width: 98%;
  height: auto;
	margin-top: 1em;
	padding-right:20px;
  background-color: #ffffff;	
  font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size:1.0em;
line-height: 1.5em;
text-justify:auto;
}

.Conts-sdgs img{
	  width: 98%;
	padding-left:10px;
}


.Conts-sdgs dt{
	width: 98%;
	border-bottom: 0px solid #eeeeee;
	font-size:1.5em;
	font-weight: bold;
	padding-left:10px;
	padding-bottom:0px;
	margin: 10;
}
.Conts-sdgs dt::first-letter{
	font-size: 1.6em;
}

.Conts-sdgs dd{
	margin: 1em 0;
	padding-left:20px;
	padding-right:20px;
}


/* */
.sengen6 {
	margin-left:1.2em; 
}
.sengen6 p{
	font-size: 1.0em; 
	line-height: 1.5em;
	color:#0E0057;
}







@media only screen and (max-width: 767px) {


	/*  記事用 */

.Conts-sdgs {
  width: 99%;
  height: auto;
	margin-top: 1em;
	padding-right:1.3em;
  background-color: #ffffff;	

font-family: "Noto Sans CJK JP DemiLight","MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

	font-size:1.0em;
line-height: 1.5em;
}

.Conts-sdgs img{
	  width: 98%;
	padding-left:10px;
}

.Conts-sdgs dt{
	width: 98%;
	border-bottom: 1px solid #eeeeee;
	font-size:1.5em;
	font-weight: bold;
	padding-left:10px;
	padding-bottom:10px;
	margin: 10;
}
.Conts-sdgs dt::first-letter{
	font-size: 1.6em;
}

.Conts-sdgs dd{
	margin: 1em 0;
	padding-left:20px;
	padding-right:20px;
}
	}

/* flex 3段組み SP*/
.items3 {
	  width:96%;
  display: flex;
		/*flex-direction: column;*/
	flex-wrap: wrap;
	  box-sizing: border-box;
		text-decoration: none;
	margin-left:10px;
}
.items3 .item3 {
  width:33%;
	margin-top: 20px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
.item-img3 {
margin: 0;
  padding: 0;
}
.item-body3 {
  margin: 20;
	 padding: 10 0;
	border-bottom:solid 1px #CCCCCC;

}
figure {
	float:center;
	margin: 0;
	width: 100%;
}
figure img {
	max-width: 280px;
}

/* シンプル 枠 1*/
.kakomi-box1 {
 margin: 2em auto;
 padding: 1em;
 width: 100%;
 background-color: #fff; /* 背景色 */
 border: 1px solid #ccc; /* 枠線 */
}

/* タイトル付　枠　1　*/
.kakomi-box11 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #555555; /* 枠線の太さ・色 */
 width: 95%;
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}


.box30 {
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 1.2em;
    background: #5fc2f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}