@charset "utf-8";

/* =Reset default browser CSS.

-------------------------------------------------------------- */


/* 追加style
------------------------------------------------------------*/

/*PC電話No*/
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}


.clearfloat {
	font-size: 1px;
	line-height: 0px;
	height: 0px;
	clear: both;
}

.bright a:hover img{
 filter: alpha(opacity=50);
-moz-opacity:0.5;
 opacity:0.5;
}

a:hover img {
  filter: alpha(opacity=70);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

p.indent-1 {
padding-left:1em;
text-indent:-1em;
}

p.indent-1grn {
padding-left:1em;
text-indent:-1em;
color: #009999;
}

p.indent-2 {
padding-left:2em;
text-indent:-2em;
}

.pan {
font-size: 90%;
line-height: 180%;
}

/* スムーズスクロール */
html{
  scroll-behavior: smooth;
}

/* フォント */
.red_b {
	color: #FF3366;
	font-weight: bold;
}

.futo_b {
  font-weight: bold;
}

.futo_b2 {
  font-weight: bold;
  font-size: 110%;
}

.futo_b2_migi {
  font-weight: bold;
  font-size: 110%;
  text-align: right;
  line-height: 130%;
}

.futo_b3 {
  font-weight: bold;
  font-size: 120%;
}

.futo_b3_migi {
  font-weight: bold;
  font-size: 120%;
  text-align: right;
  line-height: 130%;
}

.migi_moji2 {
	line-height: 150%;
	text-align: right;
}

.futo_b3red {
  font-weight: bold;
  font-size: 120%;
  color: #cc0000;
}

.futo_b3pnk {
  font-weight: bold;
  font-size: 120%;
  color: #dc143c;
}

.futo_b3blue {
  font-weight: bold;
  font-size: 120%;
  color: #225fab;
}

.futo_c3blue {
  font-weight: bold;
  font-size: 120%;
  color: #0033cc;
  text-align:center
}

.futo_b3grn {
  font-weight: bold;
  font-size: 120%;
  color: #669900;
}

.futo_dred {
	font-weight: bold;
	color: #C33;
}

.blue_b {
	font-weight: bold;
	color: #36C;
}

.brown_b {
	font-weight: bold;
	font-size: 120%;
	color: #663300;
}

.brown_b2 {
	font-weight: bold;
	font-size: 110%;
	color: #663300;
}

.brown_b3 {
	font-weight: bold;
	color: #663300;
}

.grn_b2 {
	font-weight: bold;
	font-size: 120%;
	color: #006400;
}


.liteblue {
	color: #0099ff;
	font-size: 110%;
	line-height: 170%;
}

.liteblue2 {
	color: #0099ff;
	font-size: 110%;
	line-height: 170%;
	text-align: center;
}

.pnk_center {
	color: #cc3333;
	font-size: 110%;
	line-height: 170%;
	text-align: center;
}

.backred {
	background-color:#cc0000; 
	color:#ffffff;
	}

.backblue {background-color:#0033cc; color:#ffffff;}

.blue {
	color: #36C;
}

.bluesky {
	color: #00afcc;
}

.blue14 {
	color: #36C;
	font-size: 14px;
	
}

.wht14 {
	color: #ffffff;
	font-size: 14px;
	
}

.blue2 {
	color: #39C;
}

.aka {
	color: #003366;
	font-weight: bold;
}

.red_high {
	color: #C00;
	line-height: 180%;
}

.darkblue {
  color: #0033cc;
}

.pink {
	color: #cc3366;
}

.puple {
	color: #8a2be2;
}

.green {
	color: #006400;
}

.green2 {
	color: #006400;
}

.orange {
	color: #ff6633;
}

.orange2 {
	color: #ff6633;
	font-weight: bold;
}

.wht {
	color: #fff;
}

.gray {
	color: #666;
}

.kakomimoji {
	color: #FFF;
	background-color: #F63;
	padding-right: 5px;
	padding-left: 5px;
}

.kakomired {
	color: #FFF;
	background-color: #cc3333;
	padding-right: 5px;
	padding-left: 5px;
	margin: 5px 0;
}

.kakomiblue {
	color: #FFF;
	background-color: #0066cc;
	padding-right: 5px;
	padding-left: 5px;
	margin: 5px 0;
}

.kakomigrn {
	color: #FFF;
	background-color: #669900;
	padding-right: 5px;
	padding-left: 5px;
}

.kakomipnk {
	color: #FFF;
	background-color: #cc3366;
	padding-right: 5px;
	padding-left: 5px;
}

.sm_center {
	font-size: 12px;
	line-height: 150%;
	text-align: center;
}

.center_moji {
	line-height: 150%;
	text-align: center;
}

.center_dai {
	text-align: center;
	font-weight: bold;
}

.center_time {
	text-align: center;
	font-size: 120%;
	font-weight: bold;
}

.migi_moji {
	line-height: 150%;
	text-align: right;
}

.migi_smoji {
	line-height: 130%;
	text-align: right;
    font-size: 12px;
}

.sm_moji {
	font-size: 12px;
	line-height: 140%;
}

.sm_mojimigi {
	font-size: 12px;
	text-align: right;
}

.sm_mojired {
	font-size: 12px;
	line-height: 140%;
	color: #ff6347;
}

.sm_mojinormal {
	font-size: 12px;
	line-height: 140%;
	font-weight: normal;
}

.s_moji {
	font-size:80%;
	line-height: 140%;
}

.m_moji {
	font-size: 14px;
	line-height: 160%;
}


.telmoji {
	font-size: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#808080;
}

.min_bl {
letter-spacing: 0.1em;
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size: 300%;
font-weight: bolder;
color: #00afcc;
}


.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 90%;
}


hr.sen1 {
	height: 1px;
	border-top-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #d5d5d5;
}

hr.grn {
	height: 1px;
	border-top-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #99cc33;
	margin-bottom: 20px;
}

hr.dot {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #999999;
}



.img_left {
	width: 300px;
	margin-right: 20px;
	float: left;
}


#tittleImg{
	clear: both;
	line-height: 0;
	text-align: center;
	z-index: 0;
	margin-bottom: 20px;
}


.height60{
	height:60px;
	display:block;
}

.height40{
	height:40px;
	display:block;
}

.height30{
	height:30px;
	display:block;
}

.clearfloat {
	font-size: 1px;
	line-height: 0px;
	height: 0px;
	clear: both;
}


.column img{
   float:left;
}

.column p{
   overflow:hidden;
   zoom:1;
}


.box02 {
	margin-bottom: 30px;
	width: 95%;
	margin-top: 15px;
	margin-left:15px;
}


.box_kakomi {
	margin:0 auto;
    width: 95%;
	padding: 10px 10px 0;
	border: 1px solid #999;
}

.box_bl {
	margin:0 auto;
    width: 95%;
	padding: 10px 10px 0;
	border: 2px solid #3399cc;
	border-radius: 8px;
}

.box_bl2 {
	margin:0 auto;
    width: 95%;
	padding: 10px 10px 0;
	border: 1px solid #3399cc;
	border-radius: 8px;
}

.box_blbg {
	margin:0 auto;
    width: 95%;
	padding: 15px 15px 5px;
	background: #f0f8ff;
	border-radius: 8px;
}

.box_blbg2 {
	margin:0 auto;
    width: 95%;
	padding: 15px 15px 5px;
	background: #afeeee;
	border-radius: 8px;
}

.box_blbg3 {
	margin:0 auto;
    width: 95%;
	padding: 15px 15px 5px;
	background: #c6ffc6;
	border-radius: 8px;
}

.box_bly {
	margin:0 auto;
    width: 95%;
	padding: 15px 15px 5px;
	background: #fff5ee;
	border-radius: 8px;
	margin-bottom: 20px;
}

.box_aisatu {
	margin:0 auto;
    width: 95%;
	padding: 15px 15px 5px;
	background: #fdeff2;
	border-radius: 8px;
}

.box_news {
	float:left;
    width: 95%;
	padding: 2%;
	border: 2px solid #cc0000;
	margin-bottom:15px;
	margin-bottom: 30px;
}

.box_link   {
	float: left;
	padding: 6px;
	width: 98%;
	border: 1px dotted #b0e0e6;
	background: #f0f8ff;
	border-radius: 6px;
	margin-bottom: 20px;
}

.linkmoji2 {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#ff6600;
}

.linkmoji3 {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#669900;
}

.linkmoji4 {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#da81b2;
}

.linkmoji5 {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#9370db;
}

.linkmoji {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#008080;
}

/* BOX3とBOX4を横に並べる設定 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box3	{
	float: left;
	width: 350px;
	margin-right:40px;
	margin-bottom:20px;
}

.box4	{
	float: left;
	width: 350px;
	margin-bottom:20px;
}


.boxleft	{
	float: left;
}

.boxright	{
	float: right;	
}



.boxside   {
	margin:0 0 20px 0;
    padding:10px 10px 10px 17px;
    border:1px solid #d5d5d5;
    background: #fff;
	border-radius: 5px;
	
}

.boxside2   {
	margin:0 0 20px 0;
    padding:10px 10px 10px 17px;
    border:1px solid #d5d5d5;
    background: #f0f8ff;
	border-radius: 5px;
	
}

.newinfo {
	margin:0 auto;
    padding: 10px 10px 6px 15px;
	border: 1px solid #ffdead;
	border-radius: 5px;
	background-color: #fffaf0;
	margin-bottom: 20px;
}


/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

/* page top
------------------------------------------------------------*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
}
.pagetop a {
    display: block;
    background-color: #0099ff;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding: 10px 10px 5px;
	border-radius: 20px;
 filter: alpha(opacity=90);
-moz-opacity:0.9;
 opacity:0.9;
}
 
.pagetop a:hover {
    display: block;
    background-color: #ff9900;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:10px 10px 5px;
}

/* ホバーで画像拡大---------------------- */

.kakudai {
    overflow: hidden;
    width: 190px;
    height: 145px;
}
.kakudai img {
        width: 190px;
    display: block;
    transition: 0.5s;
}
.kakudai img:hover {
    transform: scale(1.1, 1.1);
}


/* スライドショー
------------------------------------------------------------*/
/* .viewer
------------------------- */
.wideslider {
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 
.wideslider ul,
.wideslider ul li {
    float: left;
    display: inline;
    overflow: hidden;
}
 
.wideslider ul li img {
    width: 100%;
    display: none;
}
 
.wideslider_base {
    top: 0;
    position: absolute;
}
.wideslider_wrap {
    top: 0;
    position: absolute;
    overflow: hidden;
 
}
.slider_prev,
.slider_next {
    top: 0;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    cursor: pointer;
}
.slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(../img/next.jpg) no-repeat left center;}
 
.pagination {
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 15px;
    text-align: center;
    position: absolute;
    z-index: 200;
}
 
.pagination a {
    margin: 0 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
    overflow: hidden;
    background: #3366cc;
	border-radius:2em;
}
.pagination a.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
.wideslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.wideslider ul {
    display: inline-block;
    overflow: hidden;
}

/* sideNavi
------------------------- */
.viewer .btnPrev,
.viewer .btnNext {
    margin-top: -25px;
    top: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 101;
}
.viewer .btnPrev {
    left: 10px;
    background: #ccc url(../img/btnPrev.jpg) no-repeat center center;
}
.viewer .btnNext {
    right: 10px;
    background: #ccc url(../img/btnNext.jpg) no-repeat center center;
}
 
/* =======================================
    ClearFixElements
======================================= */
.viewer ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.viewer ul {
    display: inline-block;
    overflow: hidden;
}


/* ボタン orange
------------------------- */
a.cp_btn {
	display: block;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	background: #ff8c00;
	color: #fff;
	border-radius: 3px;
	transition: .4s;
	font-size: 110%;
}
a.cp_btn:hover {
	background: #ff4500;
	color: #fff;
}

/* ボタン green
------------------------- */
a.cp_btn2 {
	display: block;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	background: #65ab31;
	color: #fff;
	border-radius: 3px;
	transition: .4s;
	font-size: 110%;
}
a.cp_btn2:hover {
	background: #336600;
	color: #fff;
}

/* ボタン blue
------------------------- */
a.cp_btn3 {
	display: block;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	background: #4496d3;
	color: #fff;
	border-radius: 3px;
	transition: .4s;
	font-size: 110%;
}
a.cp_btn3:hover {
	background: #0075c2;
	color: #fff;
}

/* ボタン pink
------------------------- */
a.cp_btn4 {
	display: block;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	background: #da81b2;
	color: #fff;
	border-radius: 3px;
	transition: .4s;
	font-size: 110%;
}
a.cp_btn4:hover {
	background: #cc3366;
	color: #fff;
}

/* ボタン purple
------------------------- */
a.cp_btn5 {
	display: block;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	background: #9370db;
	color: #fff;
	border-radius: 3px;
	transition: .4s;
	font-size: 110%;
}
a.cp_btn5:hover {
	background: #8a2be2;
	color: #fff;
}

/* ボタン グレー
------------------------- */
a.cp_btn6 {
	display: block;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	background: #757575;
	color: #fff;
	border-radius: 3px;
	transition: .4s;
	font-size: 110%;
}
a.cp_btn6:hover {
	background: #5e5e5e;
	color: #fff;
}


/* パンくずリスト
------------------------- */
.pankuzu li{
 display: inline-block;
 margin-bottom: 20px;
font-size: 12px;
color: #555;
}
 .pankuzu li:after{
 content:" ＞ ";
}

 .pankuzu li:last-child:after{

    content:"";

}

/* Flexbox横並び
------------------------- */
.container {
  display: flex;
flex-wrap: wrap;
}

.item {
  margin: 10px;
  padding: 0 10px;
}

.item0 {
  margin: 0;
  padding: 0;
}


.ph {
  margin: 0 5px 5px 5px;
}

.ph2 {
  margin: 0 7px 20px 7px;
}


/* Flexbox横並び中央
------------------------- */
.container2 {
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.container3 {
  display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.container5 {
  display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

.container4 {
  display: flex;
flex-wrap: wrap;
margin: 20px 0;
}


.item {
  margin: 10px;
  padding: 0 10px;
}

.item3 {
  margin: 0;
}




/* Flexbox スタッフ
------------------------- */
.staff {
	display: flex;
	flex-wrap: wrap;
	border-bottom: dotted 1px;
}
.person {
  margin: 5px;
  padding: 5px;
width:350px;
}
.person_ph {
  margin: 5px;
  padding: 5px;
}

.person1 {
  margin: 5px;
  padding: 5px;
width: 100px;
}


/* Flexbox スマホ用スタッフ
------------------------- */
.staff_sp {
	display: flex;
	flex-wrap: wrap;
	border-bottom: dotted 1px;
	flex-direction: column;
}

.person_sp {
  margin: 5px;
  padding: 5px;
}


/* リスト130
------------------------- */
ul.thumbnail3 {
width: 100%; /* リストエリアの幅 */
margin: 0;
list-style-type: none;
}

/* --- リスト項目 --- */
ul.thumbnail3 li {
width: 130px; /* 項目の幅 */
float: left;
margin: 5px;
padding: 0;
background: #fff;
}

/* --- 項目内容 --- */
ul.thumbnail3 dl {
width: 120px; /* 内容の幅 */
margin: 0 auto; /* 内容のセンタリング */

}

/* --- 写真エリア --- */
ul.thumbnail3 dt {
/* height: 160px; */ /* 写真エリアの高さ（dt要素の高さを指定する場合） */
margin-bottom: 10px; /* 写真エリアの下マージン */
font-size: 80%;
text-align: center;
font-weight: normal;
}
ul.thumbnail3 dt img {
}

/* --- キャプションエリア --- */
ul.thumbnail3 dd {
margin: 0 0 3px; /* キャプションエリアのマージン（上、左右、下） */
height: 6.5em; /* キャプションエリアの高さ */
line-height: 120%;
font-size: 80%;
}
/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

/* リスト160
------------------------- */
ul.thumbnail2 {
width: 100%; /* リストエリアの幅 */
margin: 0;
list-style-type: none;
}

/* --- リスト項目 --- */
ul.thumbnail2 li {
width: 150px; /* 項目の幅 */
float: left;
margin: 5px;
padding: 0;
background: #fff;
}

/* --- 項目内容 --- */
ul.thumbnail2 dl {
width: 140px; /* 内容の幅 */
margin: 0 auto; /* 内容のセンタリング */

}

/* --- 写真エリア --- */
ul.thumbnail2 dt {
/* height: 160px; */ /* 写真エリアの高さ（dt要素の高さを指定する場合） */
margin-bottom: 10px; /* 写真エリアの下マージン */
font-size: 80%;
text-align: center;
font-weight: normal;
}
ul.thumbnail2 dt img {
}

/* --- キャプションエリア --- */
ul.thumbnail2 dd {
margin: 0 0 3px; /* キャプションエリアのマージン（上、左右、下） */
height: 6.5em; /* キャプションエリアの高さ */
line-height: 120%;
font-size: 80%;
}
/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}


/* bt1 */
a.bt1 {
display: block;
width: 200px;
padding: 4px 4px;
text-align: center;
text-decoration: none;
color: #ff4500;
border: 2px solid #ff4500;
border-radius: 3px;
transition: .4s;
margin: 4px;
}
a.bt1:hover {
background: #ff4500;
color: #fff;
}

/* bt1g */
a.bt1g {
display: block;
width: 200px;
padding: 4px 4px;
text-align: center;
text-decoration: none;
color: #20b2aa;
border: 2px solid #20b2aa;
border-radius: 3px;
transition: .4s;
margin: 4px;
}
a.bt1g:hover {
background: #20b2aa;
color: #fff;
}

/* bt1m */
a.bt1m {
display: block;
width: 200px;
padding: 4px 4px;
text-align: center;
text-decoration: none;
color: #b44c97;
border: 2px solid #b44c97;
border-radius: 3px;
transition: .4s;
margin: 4px;
}
a.bt1m:hover {
background: #b44c97;
color: #fff;
}


/* 可変ボタン
------------------------------------------------------------*/

.btn-kahen {
  display: inline-block;
  padding: 0.1em 0.6em;
  text-decoration: none;
  color: #fff;
background: #dc143c;
  border: solid 2px #ff3366;
  border-radius: 3px;
  transition: .4s;
}

.btn-kahen:hover {
  background: #d83473;
color: #fff;
}

.btn-kahen2 {
  display: inline-block;
  padding: 0.1em 0.6em;
  text-decoration: none;
  color: #fff;
margin: 10px;
background: #20b2aa;
  border: solid 2px #48d1cc;
  border-radius: 3px;
  transition: .4s;
}

.btn-kahen2:hover {
  background: #40e0d0;
color: #fff;
}

.btn-kahen2-2 {
  display: inline-block;
  padding: 0.3em 1.2em;
  text-decoration: none;
  color: #fff;
	margin: 5px;
background: #20b2aa;
  border: solid 2px #48d1cc;
  border-radius: 3px;
  transition: .4s;
}

.btn-kahen2-2:hover {
  background: #40e0d0;
color: #fff;
}

/* 詳しくはこちらボタン
------------------------------------------------------------*/

a.more {
display: block;
width: 130px;
padding: 2px 2px;
font-size: 90%;
text-align: center;
text-decoration: none;
background: #ff8c00;
color: #fff;
border-radius: 3px;
transition: .4s;
margin: 2px;
}
a.more:hover {
background: #20b2aa;
color: #fff;
}


/* information
------------------------------------------------------------*/
.topics dl {
padding: 15px 0;
border-bottom: 1px dotted #eee;
}

.topics dt {
padding-bottom: 5px;
}

@media screen and (min-width: 768px) {
.topics dt {
clear: left;
float: left;
width: 10%;
}
.topics dd {
margin-left: 11%;
}
}

/* --- Q&A --- */

.qaContainer3 dt {
padding: 10px 10px 10px 35px;
border-radius: 5px;
background: #cce6ff;
text-indent: -25px;
}
.qaContainer3 dt:before {
content: "Q";
font-weight: bold;
margin-right: 7px;
color: #1771c6;
font-size: 150%;
}
.qaContainer3 dd {
margin: 20px 10px 40px 35px;
text-indent: -25px;
}
.qaContainer3 dd:before {
content: "A.";
color: #db7093;
font-weight: bold;
margin-right: 7px;
font-size: 150%;
}

/* スマホＰＣ切り替え
----------------------------------*/

@media screen and (min-width: 768px) {
.sp {display:none;} /*PCで閲覧したら非表示にするスマホ用コンテンツ*/
}
 
@media screen and (max-width: 768px) {
.pc {display:none;} /*スマホで閲覧したら非表示にするPC用コンテンツ*/
}



/* tel
----------------------------------*/

.tel-link {
    color: #06F;
	font-weight: bold;
	letter-spacing: -1px;
}
/* 制作
----------------------------------*/
#seisaku{
clear:both;
padding:5px 0 15px;
text-align:right;
color: #eee;
font-size:10px;
background: #003399;
padding-right: 30px;
}

/* 例題用
----------------------------------*/
p.sample1 {font-family: "ＭＳ ゴシック",sans-serif; }
p.sample2 {font-family: "ＭＳ 明朝",serif; }
p.sample3 {font-family: cursive; }
p.sample4 {font-family: fantasy; }
p.sample5 {font-family: monospace; }

/* 例題用　画像の上に文字
----------------------------------*/
.example {/*親div*/
  position: relative;/*相対配置*/
 width:150px;
 }

.example p {
  position: absolute;/*絶対配置*/
  color: red;
  font-weight: bold; /*太字に*/
  font-size: 150%;
  top: 0;
  left: 0;
  }

.example img {
  width: 100%;
  }

/* マウスオーバーで画像を拡大 */
.img_wrap1{
 width: 300px;
 height: 220px;
 overflow: hidden;
 cursor: pointer;
}
.img_wrap1 img{
 width: 100%;
 transition-duration: 0.5s;
}
.img_wrap1:hover img{
 transform: scale(1.2);
 transition-duration: 0.5s;
} 

/* HR　サンプル */
.sen01 {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #43a047;
}

/* 影 */

.kage {
box-shadow: 3px 3px 10px gray;
}