/*
 * 2020.1.16  
 * VAR Kaoru師匠
 * HPSmart.css
 * スマホ用
 * 
 */

@charset "UTF-8";
/* 文字コード設定 */

.slider{
    margin: 0 auto;
    width: 80%;
}

img
{
	max-width:100%;
}

p
{
	margin: 5% 5%;
}
/*段落へマージンを適用。上下左右に余白を設ける。*/

#page
{
	border-radius: 25px;
	width: 100%;
	margin: 7% auto 15% auto;
	background-color: rgb(255,255,255);
}
/***********************************************************************
 * #を付けることで独自設定が可能。後ろの名前も任意でおｋ
 * widthはページ全体の幅。
 * margin: 0 auto 0 auto;は上下0pxの余白、左右はセンタリングする事を示す。
 * marginは余白の定義で「上 右 下 左」の順で記述。
 * 上の例では左右でautoを指定しているため中央にセンタリング。
 * これがないとページ全体が左に寄る。
 * background-colorでpage内の背景。
 ***********************************************************************/


#site_title
{
	width: 50%;
	margin: 0% auto 10% auto;
}
/*マージンを下に10%余白をつけて、下と重ならないようにする。*/

.KaoruRogo
{

display: bla;
width: 50px;
margin: 0% auto 10% auto;
}


#site_title h1
{
	margin: 0% 0% 0% 0%;
}
/*h1がすでに余白を持っているため、すべて0。*/

#header
{
	width: 90%;
	margin: 0 auto 10% auto;
}

/*画像を乗せる部分。*/

#MainCenter
{
	width:85%
	padding: 10%;
}

/**********************************
 * カテゴリートップを纏めたボックス
 * 現状は三つのカテゴリーに分ける
 **********************************/
#categoriesbox
{
	width: 80%;
	margin: 0% auto 10% auto;
}

/* 左のボックス */
#categories-left
{
	width: 80%
	float: none;
	margin: 0% 10% 0% 10%;
	
	
}

/* 中央のボックス */
#categories-center
{
	width: 80%
	float: none;
	margin: 0% 10% 0% 10%;
}

/* 右のボックス */
#categories-right
{
	width: 80%
	float: none;
	margin: 0% 10% 0% 10%;
}

.line
{
	width: 100%;
	border-bottom: 1px rgb(0,0,0) dashed;
}

/***********************************
 * 他のカテゴリーのコンテンツの表示
 ************************************/
#anotherbox
{
	width: 90%;
	float: none;
	margin: 0% 5% 0% 5%;
	padding: 0%;
	
}
#another-center
{
	width: 80%;
	margin: 0% 10% 10% 10%;
	float: none;
}

#anotehr-left
{
	width: 80%;
	margin: 0 10% 10% 10%;
	float: none;
	
}

#right
{
	width: 80%;
	margin: 0 10% 10% 10%;
	float: none;
}


.clear
{
	clear:both;
}
/* float: right;の解除 */

#footer
{
	padding: 2% 0% 2% 0%;
	border-top: 1px rgb(0,176,240) solid;
	text-align: center;
}

/**************************************************************
 * marginは外側の余白。paddingは内側の余白。
 * border-topは上の線。solidは実線、1pxは線の太さ。
 * solid以外にもdotted(点線)、double(二重線)等が指定出来る。
 * 文字通りテキストであればtext-align: center;でセンタリング可能。
 ****************************************************************/

/********************************/
/* メインコンテンツのクラス情報 */
/********************************/

.maincontents
{
	margin: 0% auto 10% auto;
	border: 1px rgb(191,191,191) solid;
	border-radius: 25px;
	overflow:hidden;
	background-color: rgb(250,252,216);
	text-align:center
}

.maincontents h2
{
	margin: 0%;
	padding: 3% 2% 3% 2%;
	background-color: rgb(237,246,99);
	text-align: center;
}

.maincontents ul
{
	margin: 4% 0%;
	padding: 0% 4%;
}

/******************************************************************************************
 * maincontentsの中で<ul>タグを使った場合の定義
 * タグはリスト項目を囲うようにして使われ、デフォルトではリスト項目の頭に・を付けて表示。
 * marginでは上下の余白を指定。paddingによって枠に寄り過ぎないように左右4px余白を設けている。
 * paddingやmarginは○px △pxと記述すると上下、左右の定義になる。
 ******************************************************************************************/

.maincontents li
{
	margin: 0% 0% 4% 0%;
	padding: 0%;
	list-style-type: none;
	float: none;
}


/*************************************/
/* サブコンテンツのクラス情報。枠組み*/
/*************************************/
.subcontents
{
	margin: 0% 0% 10% 0%;
	overflow:hidden;
}

/* サブコンテンツの表題。パディングで内側の余白を指定し、文字が箱の枠に寄りすぎないようにしている。 */
.subcontents h2
{
	margin: 0% 0% 10% 0%;
	text-align: center;
}

.subcontents ul
{
	margin: 4% 0%;
	padding: 0% 4%;
}

.subcontents li
{
	padding: 2% 0%;
	list-style-type: none;
}

.pickup
{
	margin: 0% auto 10% auto;
	border: 1px rgb(248,138,140) solid;
	background-color: rgb(252,216,216);
	border-radius: 25px;
	overflow:hidden;
}

.pickup h2
{
	margin: 0%;
	padding: 3% 2% 3% 2%;
	background-color: rgb(248,138,140);
}

.news
{
	margin: 0% auto 10% auto;
	border: 1px rgb(187,220,214) solid;
	background-color: rgb(235,253,250);
	border-radius: 25px;
	overflow:hidden;
}

.news h2
{
	margin: 0%;
	padding: 3% 2% 3% 2%;
	background-color: rgb(161,246,232);
}

.news ul
{
	margin: 4% 0% ;
	padding: 0% 4%;
}

.news li
{
	padding: 2% 0%;
	list-style-type: none;
}



.advertisement
{
	margin: 0% 0% 10% 0%;
}

/* 広告用ボックス */

.sitedescription
{
	margin: 0% 0% 10% 0%;
	border-radius: 25px;
	overflow:hidden;
	border: 1px rgb(50,200,200) solid;
}

.sitedescription h2
{
	margin: 0%;
	padding: 3% 2% 3% 2%;
	text-align: center;
	background-color: rgb(150,255,255);;
}