@charset "utf-8";
/* CSS Document */

/* PC & SP */
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

/* Sub menu
---------------------------------------------- */

#eveMenu ul {
padding:0px;
margin:0px;
}


#eveMenu li {
	list-style-type: none;
	margin: 0;
	float: left;
}

#eveMenu li a {
	font-size: 90%;
	color: #333;
	text-decoration: none;
	border: 1px solid #333;
	/*padding: 0.1em 0.5em;*/
	padding: 1px 8px;
	margin: 1px 3px 0px 0;
	display: block;
}

#eveMenu li a:hover {
	color: #FFF;
	background-color: #999;
	text-decoration:none;
}

#eveMenu li .magOn{	
	color: #FFF;
	background-color: #999;
}

/* Sub menu2
---------------------------------------------- */
#eveMenu2{
	width: 465px;
	height: 7px;
}

#eveMenu2 ul {
padding:0px;
margin:0px;
}


#eveMenu2 li {
	list-style-type: none;
	margin: 0;
	float: left;
}

#eveMenu2 li a {
	font-size: 90%;
	color: #333;
	text-decoration: none;
	border: 1px solid #333;
	/*padding: 0.1em 0.5em;*/
	padding: 1px 8px;
	margin: 1px 3px 0px 0;
	display: block;
}

#eveMenu2 li a:hover {
	color: #FFF;
	background-color: #999;
	text-decoration:none;
}

#eveMenu2 li .magOn{	
	color: #FFF;
	background-color: #999;
}


/* PC */
@media screen and (min-width: 769px) {

#header {
margin:10px auto 2px;
font-size:77%;
width:803px;
overflow:auto;
clear:both;
}

#footer {
text-align:right;
margin:3px auto 2px;
font-size:70%;
width:803px;
}

#header-l {
float:left;
}

#header-r {
float:right;
}
hr {
height: 0px; 
border: 0px;
width:803px;
margin:0 auto;
border-bottom: 1px solid #609aff;
}

/*top menu*/
ul#menu{
    list-style:none;
    /*width:100%;*/
    width:533px;
    margin:30px auto;

}
ul#menu li{
    list-style:none;
}
ul#menu a{
    display:block;
    text-indent:-1000px;
    background-image:url("../img/top-menu.jpg");
    overflow:hidden;
}
ul#menu a.greeting{
    width:533px;
    height:48px;
    background-position:0px 0px;
}
ul#menu a:hover.greeting{
    background-position:-532px 0px;
}

ul#menu a.outline{
    width:533px;
    height:48px;
	background-position:0px -48px;
}
ul#menu a:hover.outline{
    background-position:-532px -48px;
}

ul#menu a.business{
    width:533px;
    height:48px;
	background-position:0px -96px;
}
ul#menu a:hover.business{
    background-position:-532px -96px;
}

ul#menu a.lawyer{
    width:533px;
    height:48px;
	background-position:0px -144px;
}
ul#menu a:hover.lawyer{
    background-position:-532px -144px;
}

ul#menu a.inquiry{
    width:533px;
    height:48px;
	background-position:0px -192px;
}
ul#menu a:hover.inquiry{
    background-position:-532px -192px;
}

ul#menu a.access{
    width:533px;
    height:46px;
	background-position:0px -240px;
}
ul#menu a:hover.access{
    background-position:-532px -240px;
}
/*top menu End*/


/*global menu */
#global-menu{
    width:800px;
	margin:5px auto 0px;
}

#global-menu-list{
float:right;
}

#title{
    width:200px;
	text-align:left;
	float:left;
}

ul#menu2{
    list-style:none;
    width:100%;
}

ul#menu2 li{
    list-style:none;
	float:left;
}

ul#menu2 a{
    display:block;
    text-indent:-1000px;
    background-image:url("../img/global-menu.jpg");
    overflow:hidden;
}
ul#menu2 a.top{
    width:86px;
    height:27px;
    background-position:0px 0px;
}

ul#menu2 a:hover.top{
    background-position:0 -27px;
}

ul#menu2 a.greeting{
    width:86px;
    height:27px;
	background-position:-86px 0px;
}

ul#menu2 a:hover.greeting{
    background-position:-86px -27px;
}

ul#menu2 a.greeting-over{
    width:86px;
    height:27px;
    background-position:-86px -27px;
}

ul#menu2 a.outline{
    width:86px;
    height:27px;
	background-position:-172px 0px;
}

ul#menu2 a:hover.outline{
    background-position:-172px -27px;
}

ul#menu2 a.outline-over{
    width:86px;
    height:27px;
    background-position:-172px -27px;
}

ul#menu2 a.business{
    width:86px;
    height:27px;
	background-position:-258px 0px;
}

ul#menu2 a:hover.business{
    background-position:-258px -27px;
}

ul#menu2 a.business-over{
    width:86px;
    height:27px;
    background-position:-258px -27px;
}

ul#menu2 a.lawyer{
    width:86px;
    height:27px;
	background-position:-344px 0px;
}

ul#menu2 a:hover.lawyer{
    background-position:-344px -27px;
}

ul#menu2 a.lawyer-over{
    width:86px;
    height:27px;
    background-position:-344px -27px;
}

ul#menu2 a.inquiry{
    width:86px;
    height:27px;
	background-position:-430px 0px;
}

ul#menu2 a:hover.inquiry{
    background-position:-430px -27px;
}

ul#menu2 a.inquiry-over{
    width:86px;
    height:27px;
    background-position:-430px -27px;
}

ul#menu2 a.access{
    width:84px;
    height:27px;
	background-position:-516px 0px;
}

ul#menu2 a:hover.access{
    background-position:-516px -27px;
}

ul#menu2 a.access-over{
    width:84px;
    height:27px;
    background-position:-516px -27px;
}

/*global menu End*/


#contents{
    width:790px;
	margin:0 auto;
	text-align:left;
}


#contents h1{
	margin:50px 0 15px 0;
}

#contents .img{
float:right;
}

#contents .img2{
float:right;
margin-top:-15px;
}

#contents .face{
float:left;
}

#contents p{
margin:0 280px 20px 0;
line-height:1.7em;
}

#contents p.indent{
margin:0 280px 20px 0px;
line-height:1.7em;
}

#contents p.indent2{
margin:0 230px 10px 0px;
line-height:1.7em;
}

.indent3{
margin:0 0 0 -10px;
}

#contents h2{
font-size:110%;
font-weight:bold;
line-height:1.7em;
}

#contents h2.business{
margin-bottom:5px;
}

.name {
font-size:125%;
font-weight:bold;
color:#996600;
line-height:1.7em;
font-family:"ＭＳ Ｐ明朝", "細明朝体",serif;
}

#contents td{
padding-bottom:8px;
}


/* テーブル設定（お問い合わせフォーム）
---------------------------------------------- */

#form {
width:450px;
line-height:1.6em;
}

#form p {
text-align:left;
margin:5px 10px;
}

.formTable {
	margin: 0;
	padding: 0;
	border-top: solid 1px #666;
	text-align:left;
}

.formTable td {
	padding: 10px 10px;
	border-bottom: solid 1px #666;
}

.formTable .pos {
	background:url("../../www.sakura-chizailaw2.com/img/back.gif") no-repeat;
}

.formTable .pos2 {
color:#fff;
text-align:center;
font-size:100%;
background-color:#ff9900;
}

.red {
color:#FF0033
}

#phone {
clear:both;
}
#eveMenu{
	width: 465px;
	height: 15px;
}





/* Add on 2023/10/27 */
.timeline {
  display: flex;
  flex-direction: column;
	margin-bottom: 16px;
}
.timeline-item {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.year {
    min-width: 72px;
    max-width: 72px;
    text-align: left;
    padding-right: 1em;
}
.event {
  flex-basis: 88%;
}
.img-greeting_sp {
	display: none;
}
.img-greeting_pc {
	display: block;
}

/* PC menu */
.hamburger {
  display: none !important;
}
.menu_sp {
  display: none !important;
}
#menu,
#menu2 {
    display: block !important;
  }
}
.responsive-map-container {
	  width: 100%;
  overflow: hidden;
}
.responsive-map-container iframe{
  width: 100%;
  margin-top: -170px;
}
.expand_map p {
	text-align: center;
	margin-bottom: 24px;
	width: 100%;
}
.expand_map p a {
	color: #3498db;
}
.expand_map p a:hover {
	color: #3498db;
}
a.tx_tel {
  text-decoration: none;
	font-size: 14px;
}
a:hover.tx_tel {
  text-decoration: none;
	font-size: 14px;
	color: #3498db;
	  text-decoration: underline;

}

/* End PC */




/* SP */
@media screen and (max-width: 768px) {
/* SP menu */
.hamburger {
    display: block !important;
  }
.menu_sp {
    display: block !important;
  }
#menu,
#menu2 {
  display: none !important;
  }
ul.menu_sp {
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
}
.menu_sp li a img {
  width: 94%;
  margin-top: 8px;
  margin-bottom: 8px;
}
#header,
#header-r {
text-align: right;
margin: 3px auto 2px;
width: 100%;	
	}

#header-r p{
font-size: 120%;
	text-align: right;
}

/* General */
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: -apple-system, sans-serif;
	width: 100%;
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
}
h1 {
	height: auto;
	width: 100%;
}
h2 {
	height: auto;
	width: 100%;
  text-align: left;
  margin-bottom: 8px;
  padding: 0;
	font-size: 144%;
	font-weight: bold;
	}
h3 {
	height: auto;
	width: 100%;
}
p { 
	letter-spacing: 0em;
	margin: 0%;
	padding: 0%;
	color: #3e3e3e;
	font-size: 18px; /* All SPsite Average 16px, but I can't read fastly*/
	line-height: 1.8em; /* All SPsite Average */
	text-align: left;
}
img {
	vertical-align: top; /* Delete top spaces */
	margin: 0px;
	padding: 0px;
max-width: 100%;
height: auto;
width: auto;
	}

/* Basic layout
------------------------------*/
.wrapper {
margin-top: 0%;
margin-right: auto;
margin-bottom: 0%;
margin-left: auto;
padding: 0%;
width: 94%;
margin: 0px;
	padding-left: 3%;
	padding-right: 3%;
}
.wrapper img {
width: 100%;
height: auto;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.aspect-ratio {
  position: relative;
  width: 94% !important; 
  padding-bottom: 100% !important;
  margin: 0 auto; 
	overflow: hidden;
}
.aspect-ratio > .fb-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.img-greeting,
.img_business,
.img_outline,
.img_lawyer {
width: 50%;
	margin-left: auto;
	margin-right: auto;
}
#title p img {
	width: 56%;
	text-align: left;
	margin-top: 8px;
	margin-bottom: 8px;
}
.text-right p {
		text-align: right;
}
h2.business {
		margin-bottom: 8px;
  padding: 0;
  width: 68%;
  text-align: left; /* 左寄せ */
}
	.text-business {
		margin-bottom: 40px;
	}
#title-business,
#title_lawyer {
		margin-bottom: 8px;
	}
	.style1 {
		color: #3498db;
	}
	.print_out {
display: none;
	}

table {
  margin: 0;
  padding: 0;
  text-align: left; /* 左寄せ */
	font-size: 136%;
	  width: 100%;
}
td {
  display: block;
  width: 100%;
  box-sizing: border-box;
margin-bottom: 8px;
	padding: 0;
}
	.td_outline{
	margin-bottom: 16px;
	}
#eveMenu{
	width: 100%;
	height: auto;
}
.timeline {
  width: 94%;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左寄せ */
  margin-bottom: 1em; /* 各項目の下側にマージンを追加 */
}

.year,
.event {
  display: block; /* ブロック要素に設定 */
  width: 94%; /* 親要素の幅いっぱいに広がる */
  text-align: left; /* テキストも左寄せ */
	font-size: 136%;

}
	.name_lawyer p {
		font-size: 144%;
		color: darkgoldenrod;
		font-weight: bold;
		margin-bottom: 8px;
	}
.responsive-map-container {
  width: 100%;
  height: 250px;
  overflow: hidden;
	margin-top: 16px;
	margin-bottom: 16px;
}
.responsive-map-container iframe {
  width: 100%;
  height: 600px;
  margin-top: -150px;
}
.expand_map p {
	text-align: center;
	margin-bottom: 8px;
}
.expand_map p a {
	color: #3498db;
}
	.tx_address,
	.tx_station {
		margin-bottom: 24px;
	}
	.tx_tel{
		margin-bottom: 24px;
	}
a.tx_tel{
  text-decoration: underline;
	color: #3498db;
	font-size: 100%;
}
a:hover.tx_tel {
  text-decoration: underline;
	color: #3498db;
	font-size: 100%;
}
.title_inquiry p {
		color: darkgoldenrod;
		font-weight: bold;
		margin-top: 16px;
		width: 100%;
	}
	

hr {
  border: none;
  height: 1px;
  background: #609aff;
  margin-top: 12px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
  width: 94%;
  z-index: 1;
  position: relative;
}

#footer {
  text-align: right;
  margin: 3px auto 12px;
  width: 100%;
  z-index: 1;
  position: relative;
}

#footer p {
font-size:120%;
	text-align: center;
}

} /* End SP */