/*Copyright（c）2014 『 素材とテンプレートを無料で配布 EasyBuild イージービルド 』 All rights reserved. */


/*--- 基本 -------------------------*/

* {margin: 0;padding: 0;}



/* 基本背景と余白 */

body {
background-color: #ffffff;
font-size:100%;  /*基本となるフォントサイズ*/
font-family: Verdana,Arial,Helvetica,sans-serif,'ＭＳ Ｐゴシック',Osaka;  /*フォント種類*/
color: #555555; /* フォント色 */
line-height: 170%;  /* 改行高さ */
font-family:'Lucida Grande', Meiryo, sans-serif;
}



/* 画像のリンクに枠線ナシ */

a img {
border-style:none;
}



/* 画像の横幅を可変 最小300px */
/* 『html』内の『img』タグにて『class="frex"』を追記すると画像が可変となります */

img.frex {
max-width: 96%;
min-width: 300px;
height: auto;
}



/* 画像を中央寄せ */

#center-img
{
margin-top:15px;
margin-left:auto;
margin-right:auto;
text-align: center;
}



/* h1タグ */

h1.type1
{
font-size:70%;
color: #bcbcbc; /* フォント色 */
text-align: center;
}



/* h2タグ */

h2.type-pink
{
font-size:110%;
color: #ff5cbf;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); 
}

h2.type-blue
{
font-size:110%;
color: #8b93ff;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); 
}

h2.type-gray
{
font-size:110%;
color: #5b5b5b;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); 
}



/* h3タグ */

h3.type-pink
{
font-size:100%;
color: #ff5cbf;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); 
}

h3.type-blue
{
font-size:100%;
color: #8b93ff;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); 
}

h3.type-gray
{
font-size:100%;
color: #5b5b5b;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); 
}



.font-small
{
font-size:80%;
}



/* ヘッダーメニュー */

#menu-box
{
text-align: center;
border-top: 3px double #7c7c7c;
border-bottom: 3px double #7c7c7c;
overflow: hidden;
}

#menu-inline
{
width:960px;
max-width: 96%;
min-width: 300px;
margin-left:auto;
margin-right:auto;
padding: 3px 0px 3px 0px;
}



/* ヘッダーメニューボタン擬似クラス */
.btn{  
color:#7c7c7c;
font-weight: bold;
padding: 3px 10px 3px 10px;
text-decoration: none;
} 

a.btn:hover{
color: #ffffff;
font-weight: bold;
background-color: #dcdcdc;
}



/* 背景 */
#back
{
background-image: url(img/tp001-back-100-100.jpg);
background-repeat: repeat;
overflow: hidden;
}



/* コンテンツ外枠 */
/* 両脇にボーダー 上下パディング */
#main-box
{
width: 960px;
max-width: 96%;
min-width: 300px;
margin-left:auto;
margin-right:auto;
padding: 5px 0px 15px 0px;
border-left: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
background-color: #ffffff;
overflow: hidden;
}



/* 右カラム */
#right-box
{
max-width:575px;
max-width:610px;
max-width: 97%;
min-width: 300px;
float:right;
margin-right:1.5%;
}

/* 右カラム用見出し 背景ブルー */
#right-box-590-title-blue
{
max-width:588px;
margin-top:15px;
border-top: 1px solid #cccccc;
border-bottom: 3px double #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
border-top-left-radius: 8px 8px;
border-top-right-radius: 8px 8px;
background-color: #f0ffff;
overflow: hidden;
}

/* 右カラム用見出し 背景グレー */
#right-box-590-title-gray
{
max-width:588px;
margin-top:15px;
border-top: 1px solid #cccccc;
border-bottom: 3px double #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
border-top-left-radius: 8px 8px;
border-top-right-radius: 8px 8px;
background-color: #ebebee;
overflow: hidden;
}

/* 右カラム用見出し 背景ピンク */
#right-box-590-title-pink
{
max-width:588px;
margin-top:15px;
border-top: 1px solid #cccccc;
border-bottom: 3px double #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
border-top-left-radius: 8px 8px;
border-top-right-radius: 8px 8px;
background-color: #fff0f5;
overflow: hidden;
}

/* 右カラム用見出し 枠なし */
#right-box-590-title-clear
{
max-width:590px;
margin-top:20px;
padding: 8px 10px 3px 10px;
overflow: hidden;
}

/* 右カラムコンテンツ */
#right-box-590-content
{
max-width:588px;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
overflow: hidden;
}

/* 右カラムコンテンツ 背景グレー */
#right-box-590-content-gray
{
max-width:588px;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
background-color: #fafafa;
overflow: hidden;
}

/* 右カラムコンテンツ 背景ブルー */
#right-box-590-content-blue
{
max-width:588px;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
background-color: #fbffff;
overflow: hidden;
}

/* 右カラムコンテンツ 背景ピンク */
#right-box-590-content-pink
{
max-width:588px;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
background-color: #fffaf6;
overflow: hidden;
}

/* 右カラムコンテンツ 枠なし */
#right-box-590-content-clear
{
max-width:590px;
padding: 8px 10px 13px 10px;
overflow: hidden;
}



/* 左カラム */
#left-box
{
width:285px;
width:310px;
max-width: 97%;
float:left;
margin-left:1.5%;
}

/* 左カラム用見出し アイボリー */
#left-box-300-title-ivory
{
max-width:288px;
max-width: 100%;
margin-top:15px;
border-top: 1px solid #cccccc;
border-bottom: 3px double #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
border-top-left-radius: 8px 8px;
border-top-right-radius: 8px 8px;
background-color: #fffff0;
}

/* 左カラム用見出し グレー */
#left-box-300-title-gray
{
max-width:288px;
max-width: 100%;
margin-top:15px;
border-top: 1px solid #cccccc;
border-bottom: 3px double #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
border-top-left-radius: 8px 8px;
border-top-right-radius: 8px 8px;
background-color: #ebebee;
}

/* 左カラムコンテンツ */
#left-box-300-content
{
max-width:288px;
max-width: 100%;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
overflow: hidden;
}

/* 左カラム中央寄せコンテンツ */
#left-box-300-content-center
{
max-width:288px;
max-width: 100%;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding: 8px 10px 3px 10px;
overflow: hidden;
text-align: center;
}

/* 左カラム画像 幅270pxまで */
#left-img
{
margin-left:auto;
margin-right:auto;
}



/* トップへ戻るリンク */
#top-link
{
font-size:85%;
text-align: center;
padding: 20px 0px 0px 0px;
clear:both;
}



/* 最下部コピーライト */
#copy-write
{
font-size:70%;
color: #bcbcbc;
text-align: center;
padding: 8px 0px 8px 0px;
}

p{
margin: 15px 0 15px 0;
}

.markerDeepOrange{
background:linear-gradient(transparent 50%, #ffcc66 0%);
font-weight:700;
}

/* 以下、1020pxより小さいディスプレイ向け */
/* 左右カラムのフロート解除 */

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

	/* 右カラム */
	#right-box
	{
	max-width:900px;
	min-width: 320px;
	max-width: 97%;
	float : none;
	margin-left:auto;
	margin-right:auto;
	}

	/* 右カラム用見出し 背景ブルー */
	#right-box-590-title-blue
	{
	max-width:900px;
	}

	/* 右カラム用見出し 背景グレー */
	#right-box-590-title-gray
	{
	max-width:900px;
	}

	/* 右カラム用見出し 背景ピンク */
	#right-box-590-title-pink
	{
	max-width:900px;
	}

	/* 右カラム用見出し 枠なし */
	#right-box-590-title-clear
	{
	max-width:900px;
	}

	/* 右カラムコンテンツ */
	#right-box-590-content
	{
	max-width:900px;
	}

	/* 右カラムコンテンツ 背景グレー */
	#right-box-590-content-gray
	{
	max-width:900px;
	}

	/* 右カラムコンテンツ 背景グレー */
	#right-box-590-content-blue
	{
	max-width:900px;
	}

	/* 右カラムコンテンツ 背景ピンク */
	#right-box-590-content-pink
	{
	max-width:900px;
	}

	/* 右カラムコンテンツ 枠なし */
	#right-box-590-content-clear
	{
	max-width:900px;
	}

	/* 左カラム */
	#left-box
	{
	width:900px;
	min-width: 320px;
	max-width: 97%;
	float : none;
	margin-left:auto;
	margin-right:auto;
	}

	/* 左カラム用見出し アイボリー */
	#left-box-300-title-ivory
	{
	max-width:900px;
	}

	/* 左カラム用見出し グレー */
	#left-box-300-title-gray
	{
	max-width:900px;
	}

	/* 左カラムコンテンツ */
	#left-box-300-content
	{
	max-width:900px;
	}


}



/* 以下、700pxより小さいディスプレイ向け */
/* 下部広告のフロート解除 */

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

		#footer-ad
		{
		max-width:700px;
		min-width: 350px;
		max-width: 97%;
		}

		#footer-ad-inline-right
		{
		float:none;
		}

		#footer-ad-inline-left
		{
		float:none;
		}

}
#right-box-590-content h2{
padding: 10px;
background: #E0E0E0;
border-left:5px solid #00B0FF;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9);
margin-bottom: 20px;
}
#right-box-590-content h3{
padding: 10px;
background: #E0E0E0;
position: relative;
margin-bottom: 35px;
}
#right-box-590-content h3:after {
content: "";
position: absolute;
top: 100%;
left: 5%;
border: 0.5em solid transparent;
border-top: 1.3em solid #E0E0E0;
}
#right-box-590-content ul, ol {
  background: #fcfcfc;/*背景色*/
  padding: 0.9em 0.5em 0.9em 2.3em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
  
}

#right-box-590-content ul li, ol li {
  line-height: 0.6; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
}
.balloon2-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius: 15px;
}

.balloon2-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.balloon2-left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

.balloon2-left p {
  margin: 0;
  padding: 0;
}
bold{font-weight: 700;}

.markerbrown{
background:linear-gradient(transparent 50%, #cc9966 0%);
font-weight:700;
}
.markergray{
background:linear-gradient(transparent 50%, #ddd 0%);
font-weight:700;
}


.markeryellow{
background:linear-gradient(transparent 50%, #ccff33 0%);
font-weight:700;
}

.markerblue{
background:linear-gradient(transparent 50%, #99ccff 0%);
font-weight:700;
}
.markerpink{
background:linear-gradient(transparent 50%, #ff99cc 0%);
font-weight:700;
}

#menu-box{background-color: #000;}
#menu-box a{color: #fff;}
#copy-write{background-color:#777777 ;}
#copy-write{color: #fff;}
#copy-write a{color: #fff;}
img{margin-bottom: 20px;}
.my_link_btn{
  display: inline-flex;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transition: box-shadow 0.5s;
  border-radius: 5px; 
  background: #FFA500; 
  font-weight: bold;
  box-shadow: 0px 3px 6px #855;  
  margin-bottom: 30px;
}
.my_link_btn a{
  color: white;
  text-decoration: none;
  padding: 15px 18px; 
}
.my_link_btn:hover{
  box-shadow: 0px 9px 12px #855;  
}