レシポンシブc4

レシポンシブc4

* {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

body {
	font-size: 18px; /***menu文字サイズ*16px***/		
	background: #eee;
	padding-top: 90px; 
	font-family: 'Roboto',Arial, Helvetica, Sans-serif;
  overflow-x:hidden;
}

.navigation {
	top: 0;
	left: 0;
	padding: 0 10%; /*****10%*****/
	width: 100%;
	position: fixed;
	color: #fff;
	box-sizing: border-box;
	background: #363636;
	text-align: center;
}
.navigation a {
	color: inherit;
	margin: 35px 5px;
	line-height: 100%; /****150%*****/	
	padding: 0 5px 0 20px;
	display: inline-block;
	text-decoration: none;
	border-left: 1px solid #fff;
} 
.navigation a.active { color: yellow; }
.navigation a:first-child { border: 0; }
.box {
	width: 100vw;
	height: 200vh; /****全ての記事枠高さ**/
	font-size: 13vw;
	padding-top: 100px;
	text-align: center;	
	background: #4CD2DA;
}
.box:nth-child(2) { background: #59DAE2; }
.box:nth-child(3) { background: #4372A6; }
.box:nth-child(4) { background: #D8E0E3; }
.box:nth-child(5) { background: #4B565A; }
/*******************************************/
/********* https://himakan.net/web/css/css_style_waku ******/
/******************************************/
/**************************吾輩はねこ****************/
.bbox{
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;  background-color: #fafafa;
font-size: 16px; /***menu文字サイズ**ok**/
border: 2px solid #ccc; /**1px**テキスト枠****/
  border-radius: 5px;
  padding: 0 0 1%;
margin-left: 5px;　 /****ok******/
}
.bbox h1{
  margin: 0;
  padding: 2% 3% 1.5%;
  background-color: #eee;
  border-bottom: 1px dashed #ccc;
  font-size: 1.1em;
  font-weight: normal;
  color: #333;
}
.bbox p{
width: 80vw;
  padding: 0 5%; /****3%****/
  line-height: 2em;
  color: #333;
}
/****************追加 四国*****bboxに同じ************************************/
.xbox{
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;  background-color: #fafafa;
font-size: 16px; /***menu文字サイズ**ok**/
border: 2px solid #ccc; /****テキスト枠****/
  border-radius: 5px;
  padding: 0 0 1%;　/*paddingはborderで指定された境界とその中のコンテンツの間の余白を設定するプロパティです。marginがborderの外側の余白なのに対して、paddingはborderの内側の余白となります。***/
margin-left: 5px;　 /**5px**ok******/
}
.xbox h1{
  margin: 0;
  padding: 2% 3% 1.5%;
  background-color: #eee;
  border-bottom: 1px dashed #ccc;
  font-size: 1.1em;
  font-weight: normal;
  color: #333;
}
.xbox p{
width: 80vw;
  padding: 0 3%; /****3%**5**/
  line-height: 2em;
  color: #333;
}
/***********************************************************************************/
/*************************************************************/
/****************https://www.sejuku.net/blog/76864***********************/
/*****main-contentsの文字色を指定********************************************************/
/*************************************************************/

.main-contents {
    background-color: #fff; /*****ok******/
}
p {
    color: #000000; /*****ok******/
}
/**************************************************************/
/*css*/
/* 回り込みを終了する定型表現。 */
/*clearfix*/	
.clearfix {
  zoom: 1;
font-size: 0.9em; /*************/
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;	
}
/*画像と文書を並べて表示時する*/
  .inner {     
	float: left ;　 /*左側に配置する*/
	}
  .inner p{
	float:right; 　 /*右側に配置する*/
   }
/**********************新規**********追加実験*****20191120*******************************************/


/* ボディ */
body
{
  
/* スマホだけに適用するCSS */
@media screen and (max-width:500px) /****479px**変化なし*/
{
	/* ボディ */
	xxxbody
	{
		font-size: 15px ;	/* 文字サイズ スマホだけok*/
	}
}

/* ヘッダー */
.xxxheader
{
	border-bottom: 0px solid #888 ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ center*/
	padding: 3em 0 ; 			/* 1em 上下の余白 */
	margin-bottom: 2em ;			/* 他のブロックとのスペース */
	background: #e8e8e8 ;			/* 背景色(確認用) */
}

/* ロゴ画像を囲むh1 */
.logo-wrapper
{
	margin: 0 ;
	padding: 0 ;
	line-height: 1 ;
}

/* ロゴ画像 */
.logo
{
	width: 400px ;
	height: auto ;
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* ロゴ画像 */
	.logo
	{
		width: 200px ; /****OK**150px**/
	}
}

/* フッター */
.xxxfooter
{
	border-top: 0px solid #888 ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	margin-top: 2em ;			/* 他のブロックとのスペース */
	padding: 1em 0 ;			/* 上下の余白 */
	background: #e8e8e8 ;
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.xxxwrapper
{
	width: 1000px ; /**1000px**/
	margin: 0 auto ;		/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 0 ;			/* 上下左右の余白を0にしておく */
}

/* スマホだけに適用するCSS */
@media screen and (max-width:500px) /*479px***/
{
	.xxxwrapper
	{
		width: auto ;
		padding: 0 10px ;/*0**10px***/
	}
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.xxmain
{
	width: 680px ;   /*680*/
	padding: 10px ;	/*******10******** 上下左右に20pxの余白 */
	border: 0px solid rgba(0,0,0,.1) ;		/* 枠線 */
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.xxmain
	{
		width: auto ;
		padding: 40 ;		/*40* 余白 0*/
		border: none ;		/* 枠線 */
	}


	{
		width: auto ;
	}
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.xxmain
{
	float: left ;		/* 左に寄せるleft */
}


/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.xxmain , .xxside
	{
		float: none ;
	}
}