/***
 Style sheet for sougi.info
 ***/

/* general (for elements, not classes) */

html {
    background-size: cover;
}

body {
	margin: 0 ;
	/*
	font-family: "ヒラギノ明朝 ProN", "メイリオ", "HG明朝E", "Meiryo UI", "Hiragino Mincho ProN", "Kochi Mincho", "Takao明朝","TakaoMincho", serif ;
	*/

	/*
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif ;
	*/
	color: #333333 ;
	/*font-weight: bold;*/
	
	font-family: "Lucida Grande","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    /*
	letter-spacing: 1px;
    line-height: 1.6;
	*/
	font-size: 14px
}

table {
	border-collapse: collapse 
}

img {
	border: none
}

a:link,
a:visited,
a:hover {
	color: inherit ;
	text-decoration: none
}

a:hover {
	color: #2e2c80 ;
	text-decoration: underline
}



.DropDownMenu a:hover {
	text-decoration: none ;
	color: inherit
}

ul {
	padding: 0 ;
	margin: 0 ;
	list-style: none
}

li > a:hover {
	/*opacity: 0.7*/
}

/* overall page layout: full width, 245px right column, filling left column with 15px gutter */ 
#left_column {
	float:left ;
	width: 100% ;
}

#left_column_content {
	margin-right: 245px ;
	padding-right: 35px 
}
#right_column {
	float:right ;
	margin-left: -245px
}

#left_column_content > *:first-child {
	/*margin-top: 0*/
}

#left_column_content #page_title {
	/*margin-top: 27px*/
}

/*for testing/debug */
div.DebugConsole {
	padding: 10px ;
	font-size: 12px ;
	border: solid 2px grey ;
	margin-bottom: 5px ;
	font-family: "Courier" ;
	color: green ;
	background-color: darkgray
}

img.Placement {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	opacity: 0.5
}


/* page area divs by id */
div#content_area {
	width:1200px ;
	margin: auto ;
	padding: 0 ;
	margin-bottom: 100px
}

/* interior bands are 1024, auto-margin (centered) */
div#center_band,
div.NavPath
{
	width: 1024px ;
	margin: auto
}

div#top_title_band
{
	width: 1200px ;
	position: relative ;
	height:100px ;
}

div#top_title_band > div.TopLeftLogo {
	float: left ;
	width: 300px ;
	font-size: 13px ;
	margin-left: 107px ;
	margin-top: 5px ;
	/*letter-spacing: 0.7em*/
}

div#top_title_band > div.TopLeftLogo > div {
	margin-left: 68px ;
	margin-bottom: 3px
}

div#top_title_band > div.TopRightNumber {
	font-size: 15px ;
	float: right ;
	margin-top: 5px ;
}

div#top_title_band > div.TopRightNumber > div > span {
	background-color: red ;
	color: yellow
}


div#top_image_band {
	position: relative ;
	z-index: 1 
}

div#top_image_band img {
	float:right
}

div#top_image_band div.TextSizer {
	position: absolute ;
	bottom: 7px ;
	right: 18px 
}

div#top_image_band > br {
	clear: both
}

.TopImageText {
    font-size: 27px ;
	font-family: "HG明朝E", "メイリオ", "ヒラギノ明朝 ProN","Hiragino Mincho ProN", "Kochi Mincho", "Takao明朝","TakaoMincho", serif ;
    font-weight: bold ;
    line-height: 185% ;
    color: #593c09 ;
}

div#top_image_band .TopImageText {
    position: absolute ;
    top: 65px ;
    left: 40px ;
	/*width: 410px*/
}

div#top_image_band .TopImageText p {
	font-size: 16px ;
	margin:0;
    line-height: normal
}

div.TopImageTall div#top_image_band .TopImageText {
    color: white ;
    left: 303px;
    top: 127px;
    /*width: 100%;*/
}

#center_band, #bottom_band {
	padding: 0 ;	
}

div#center_band {
	margin-top:10px ;
	z-index: -1 ;
}


#left_column h1,
#left_column h2 {
    font-family: "Lucida Grande","Hiragino Kaku Gothic ProN", Meiryo,sans-serif;
    letter-spacing: 1px;
    line-height: 1.8 ;
}

#left_column h1 {
	/*background-color: #d9dade ;*/
	font-size: 16px;
	padding: 4px 24px ;
	color: #4f4f4f
}

#left_column h2 {
	/*display: block ;*/
	color: #1e1916 ;
	font-size: 22px;
    font-weight: normal;
	padding: 0 0 10px 0.9em ;
	margin: 0;
	margin-top: 27px ;
	margin-bottom: 32px;
	border-bottom: solid thin #cccccc ;
}

#left_column h3 {
	/*font-weight: bold ;*/
	font-size: 20px ;
	padding-left: 1em ;
}

#left_column h3,
#left_column h4
{
	color: #2e2c80 ;
}

#left_column p {
	/* font-weight: bold ; */
	font-size: 14px ;
	margin: 20px 0 ;
	color: #20100e ;
	line-height: 1.5em
}


#right_column {
	width: 245px;
	float: right ;
}

/*
#right_column  h3 {
	padding: 10px ;
	background-color: #6E4F16 ;
	color: white ;
	height: 25px ;
	margin: 0 ;
	border-radius: 5px ;
}
*/

#bottom_band {
	color: #767573 ;
	font-size: 12px ;
	position: fixed ;
	bottom: 0 ;
	width: 100% ;
	height: 70px ;
	padding-top: 12px ;
	z-index: 100 ;
	background-color: #2e2c80;
}

.BlockMenu {
	padding: 0 ;
	margin: 0 ;
	font-size: 10px ;
	text-align: center
}

.BlockMenu > * {
	/*display: block ;*/
	float:left ;
	/*width: 224px ;*/
	/*height: 25px ;*/
	padding-top: 7px ;
	border-radius: 5px ;
}

.ThumbnailMenu > * {
	border: solid 1px grey ;
	border-radius:5px ;
	padding: 0 ;
	margin: 0 ;
	margin-bottom: 3px ;
	width: 243px
}

.ThumbnailMenu.ImageBanner > * {
	border: none ;
}

ul.ThumbnailMenu {
	padding-left: 0
}

ul.ThumbnailMenu > li {
	margin: 6px 0;
	list-style: none ;
}

.ThumbnailMenu small {
	margin-top: 3px ;
	display: block ;
	font-size: 10px ;
	line-height: 120%
}

.ThumbnailMenu.ImageBanner a > img {
	width: inherit ;
}

.ThumbnailMenu > li > a {
	text-align: left ;
	font-size: 15px ;
	font-weight: bold ;
	/*line-height: 120% ;*/
	display:block ;
	/*height: 76px ;*/
	/*width: 245px*/
}

.ThumbnailMenu > li > a > span {
	display: block ;
	padding: 7px ;
	margin-left:91px ;
	line-height: 125%
}

.ButtonsBlock .ThumbnailMenu > li > a {
    height: inherit;
}

.TopMenu {
	font-size: 13px ;
	height:40px ;
	margin-bottom: 2px ;
	color: white ;
	background-color: black ;
	/*border: solid 2px #e6e6e8 ;*/
	/*border-radius: 10px ;*/
	padding: 2px ;
	width: 1005px ;
	text-align: center ;
}

.TopMenu li {
	list-style-type: none ;
	/*display: block ;*/
	width: 166px ;
	/*height: 40px ;*/
	float: left ;
	border-right: solid thin  #918987  ;
	/*background-color:  #e6e6e8*/
}

.TopMenu li:first-child {
	border-top-left-radius: 6px ;
	border-bottom-left-radius: 6px 
}

.TopMenu li:last-child {
	border-top-right-radius: 6px ;
	border-bottom-right-radius: 6px ;
	border-right: none
}

.TopMenu a {
	display: block ;
	height:30px ;
	padding-top: 10px ;
}

.ImageMenu li {
	padding: 0 ;
	height: auto ;
	
}

.ImageMenu img {
	border-radius: 4px
}
/* NavPath */

div.NavPath {
	font-size: 12px ;
	margin:12px 0
}


/* TextSizer */

div.TextSizerWrap {
	height:34px
}

div.TextSizer,
div.TextSizer a {
    border: 1px solid #A39183;
}

div.TextSizer {
    font-size: 14px;
    color: black;
    background-color: white;
    float: right;
    font-weight: bold;
    padding: 2px 2px 2px 6px;
}
div.TextSizer > div {
    float: left;
    margin-top: 3px;
}
div.TextSizer a {
    float: right;
    margin-left: 3px;
    padding: 0 4px;
}
div.TextSizer a:link, div.TextSizer a:visited {
    text-decoration: none;
}
div.TextSizer a:hover {
    background-color: #A39183;
    color: white;
}
div.TextSizer.Size_S > a.Size_S,
div.TextSizer.Size_M > a.Size_M,
div.TextSizer.Size_L > a.Size_L {
    background-color: #3B1A66;
    color: white;
}
div.TextSizer > a.Size_S {
    font-size: smaller;
    margin-top: 4px;
}
div.TextSizer > a.Size_M {
    margin-top: 2px;
}
div.TextSizer > a.Size_L {
    font-size: larger;
    margin-top: 0;
}
div.TextSizer a div {
    float: right;
    font-size: 17px;
    height: 16px;
    line-height: 13px;
    margin: 2px 2px 0 0;
    padding: 0;
    text-align: center;
    width: 16px;
}

.TopPageBlock > hr {
    display: block;
    padding-top: 1px;
	border: solid thin blue ;
	border-left: none ;
	border-right: none ;
	border-top-width: 1px ;
    border-bottom-width: 3px;
}

.FuneralList {
	font-size: 15px ;
	/*width: 800px*/
	overflow: hidden ;
	padding-left: 0
}


.FuneralList > * {
	width: 210px ;
	float:left ;
	margin: 0 50px 25px 0 ;
	display: block ;
	text-align: center
}

/* Chokuei と Teikei 画像の幅が違うので幅に収まるための間隔も　*/
.FuneralList.ChokueiList > * {
	margin-right: 59px ;
}

.FuneralList.TeikeiList > * {
	margin-right: 21px ;
}

.FuneralList h4 {
/*	background-color: #006ab7 ;
	color: white ;
*/
	text-align: center ;
	margin: 0 
}

.FuneralList img {
	/*border-radius: 5px*/
	border: solid 1px #cccccc ;
	padding: 4px ;
	border-radius: 3px ;
	margin-bottom: 17px
}

.FuneralList > *:nth-child(3n + 0) {
	margin-right: 0
}

ul.DropDownMenu > li,
ul.DropDownMenu > li > ul {
	background-color: #2a1c04
}

ul.DropDownMenu {
	color: white ;
	margin-top: -54px ;
	padding-left: 0 ;
	font-size: 13px ;
	height: 46px ;
}

.TopImageTall ul.DropDownMenu {
    margin-top: 84px;
}

.TopImageTall div#center_band {
    margin-top: 148px;
}

ul.DropDownMenu > li {
	opacity: 0.75;
	/*margin-right: 10px ;*/
	width: 195px ;
	text-align: center ;
	border-right: dashed thin white ;
	height: 30px ;
	padding-top: 17px ;
	padding-bottom: 7px
}

ul.DropDownMenu > li > ul {
	padding: 0 ;
	margin-top: 12px ;
	font-size: 11px
}

ul.DropDownMenu > li > ul > li {
    height: 36px ;
}

#top_image_band ul.DropDownMenu > li:first-child,
#top_image_band ul.DropDownMenu > li:last-child
{
    width: 11px ;
	cursor: default
}

ul.DropDownMenu > li:last-child {
    border-right: none ;
    width: 11px
}

ul.DropDownMenu > li > div {
	height:24px
}

ul.DropDownMenu > li > ul {
    margin-top: 0;
}

ul.DropDownMenu > li > ul > li > a {
	height: 18px ;
	padding: 10px 0
}

ul.DropDownMenu > li > ul > li > a:hover {
	/*color: #2a1c04	;*/
	/*background-color: white*/
}

.Photos {
	/*background-color: pink ;*/
	/*height: 500px ;*/
	font-size:12px ;
}

.Photos > * {
	float: left ;
	margin:0 10px 24px 10px ;
	position :relative ;
}

.Photos > li {
	list-style: none
}

/*Lightbox*/
.LightBoxGroup * > a, 
a.LightBoxIcon{
	/*position: absolute ;*/
	/*top:5px ;*/
	/*right: 5px ;*/
}

.LightBoxGroup a img {
	border: none
}


.ButtonsBlock li {
	border: solid thin black ;
	border-radius: 6px ;
	display: block ;
	float: left ;
	margin-bottom: 20px ;
	font-weight: bold ;
	font-size: 14px
}

.ButtonsBlock.Col2 li {
	width: 348px ;
	margin-right: 35px ;
	}

.ButtonsBlock.Col3 li {
	width: 233px ;
	margin-right: 15px ;
	}

.ButtonsBlock.Col2 li:nth-child(2n+0),
.ButtonsBlock.Col3 li:nth-child(3n+0) {
	margin-right: 0
	}

.ButtonsBlock img {
	float: left ;
	margin-right: 5px ;
	border-top-left-radius: 5px ;
	border-bottom-left-radius: 5px ;
}

.PhoneBanner {
	position: relative ;
	height: 188px ;
}

.PhoneBanner.SmallBanner {
	height: auto ;
}

.PhoneBanner > * {
	position:absolute;
}

.PhoneBanner .PhoneBannerKinkyuu {
	font-size: 22px ;
	text-align: center;
	width: 317px;
	top:17px ;
	background-color: #90181b ;
	color: #ffe000 ;
	border-radius: 6px ;
	margin: 0 ;
	padding-top: 0.2em ;
	padding-bottom: 0.2em ;
	height: 30px
}

.PhoneBanner .PhoneBanner24365 {
	font-size: 25px ;
	height:35px;
	top:17px ;
	left:330px ;
	color: #90181b ;
	font-weight: bold ;
	letter-spacing: 0.11em
}

.PhoneBanner.SmallBanner {
	width: 485px ;
	height: 53px  ;
	margin-top: 18px
}
.PhoneBanner.SmallBanner .PhoneBannerKinkyuu {
	font-size: 12px ;
	width: 217px;
	height:20px;
	top:17px ;
	border-radius: 6px ;
}

.PhoneBanner.SmallBanner div.PhoneBanner24365 {
	font-size: 17px ;
	height:35px;
	top:13px ;
	letter-spacing: 0.11em ;
	left:225px
}


.PhoneBanner div.PhoneBannerDirector {
	font-size: 20px ;
	top: 150px ;
	width: 555px ;
	padding-left:13px
}

.PhoneBanner.SmallBanner {
	float: right ;
	/*width: 480px*/
}

#content_bottom_banner ul.BlockMenu > li {
	width: 236px ;
	margin-right: 10px ;
	height: 55px ;
	padding-top: 0
}

#content_bottom_banner ul.BlockMenu > li > * > div,
#content_bottom_banner ul.BlockMenu > li > * > h3{
	font-size: 23px ;
	font-weight: bold ;
	margin: 0
}

#content_bottom_banner ul.BlockMenu > li > * > div br,
#content_bottom_banner ul.BlockMenu > li > * > h3 br{
	display: none
}

#content_bottom_banner ul.BlockMenu > li:last-child  {
	margin-right: 0
}

div.Images img {
	/*float: right*/
}

div.Images img:first-child {
	float: left
}

.ContactMenus h3 {
	font-size: 28px ;
	line-height: 100%
}

#left_column p.LongTextBlock {
	font-size: 14px
}



/*
div.NewsBox {
	border: solid 2px black ;
	font-size: 12px ;
	margin-bottom: 10px
}

div.NewsBox > * {
	padding: 10px
}

#right_column div.NewsBox > h3 {
	color: white ;
	border-radius : 0 ;
	margin: 0 ;
	padding: 8px auto ;
	text-align: center
}
*/

.NewsListing > li {
	border-top: dotted 1px #cfcfcf;
	padding: 1em ;
}

.NewsListing > li > a {
	display:block 
}

.NewsListing > li > a > span {
	margin-right: 1em ;
	color: #2e2c80 ;
	display: block ;
	float: left ;
	height: 2em
}



.JumpToTop span {
	background-color: white ;
	color: black ;
	border-radius: 50%
}

.ChokueiButtons {
	font-size: 15px ;
	text-align: center ;
	padding-left: 0 ;
	color: #866e64 ;
	width: 614px ;
	margin: auto
}


.ChokueiButtons li {
	list-style: none ;
	/*display: block ;*/
	width: 20em ;
	/*border: solid thin #866e64 ;*/
	/*border-radius: 5px ;*/
	/*float: left ;*/
	margin: 0 5px 5px 0 ;
	float: left ;
	background-color: #2e2c80 ;
	color: white ;
	border: solid thin #2e2c80 ;

}

.ChokueiButtons li.Selected {
	background-color: white;
	color: #2e2c80 ;
}


.ChokueiButtons a:hover {
	color: inherit
}


.Invalid {
	background-color: pink
}

a.BannerExternal {
	/*background-color: blue ;*/
	/*opacity: 0.25*/
}

div.PriceItems > img {
    margin: 0 50%;
}

.TopImageTextOverlay {
	position:relative;
	height:432px ;
	background-color: #fbfbfb
}

.TopImageTall .TopImageTextOverlay > img {
	width: 100%
}

/*
.DropDownMenuWrapper {
	position: absolute ;
	bottom: 0
}
*/

.HoverFade > *:hover {
	text-decoration: underline ;
	color: #2e2c80
}

.HoverFade > *:hover img {
	opacity: 0.5 ;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	background-color: white
}

.SectionTopBorder {
	border-top: solid thin grey ;
}

.TownList {
	padding-left: 0 ;
	font-size: 15px ;
}

.TownList > * {
	width: 7em ;
	list-style: none ;
	display: block ;
	float:left ;
	margin-right: 1px ;;
	margin-bottom: 1em
}

.TownList > *:nth-child(7n) {
	margin-right: 0
}


.TownList > *:before {
	content: url("../images/arrow_right.png") ;
}

.TownList > li a {
	margin-left: 1em
}


.PrefectureList > div {
	border: solid thin black ;
	padding: 20px ;
	margin-bottom: 20px
}

.PrefectureList > div > div > a {
	display: block ;
	width: 10em ;
	float: left ;
	margin-right: 0em
}


.WidthFence {
	width: 1024px ;
	margin: auto
	
}

.Char2 { letter-spacing: 3em }
.Char3 { letter-spacing: 1em }
.Char4 { letter-spacing: 0.34em }

.TopBorder {
	/*border-top: solid thin #ccc ;*/
	/*padding-top: 32px ;*/
	margin-bottom: 17px
}

#left_column .TextDescription p{
	line-height: 2em
}

.TextDescription br {
	padding-top: 20px 
}

/* .Steps は「葬儀の流れ」ページで使われてる*/
.Steps > li > div > p {
	/*float: left*/
}

.Steps > li > img {
	float: left ;
	margin-right: 15px ;
	margin-top: -6px
}

.Steps > li > br {
	clear: both
}
.Steps p img {
	float: right ;
	margin-left: 30px
}

.Steps li li {
	list-style-type: disc ;
	margin-left: 1em
}