/*
Theme Name: mitosakura-law ayano
Theme URI: http://www.mitosakura-law.com
Description: 水戸さくら法律用CSS
Version: 1.0
Author: Ayano
Author mail:info@goeverywhere.shop
*/
@charset "UTF-8";

/*タブ切り替え全体のスタイル*/
.tabs {
  //margin-top: 50px;
  //padding-bottom: 40px;
  background-color: #edbe01;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 900px;
  margin: 0 auto;}
  
/*タブ切り替え全体のスタイル*/
.tabs2 {
  //margin-top: 50px;
  //padding-bottom: 40px;
  background-color: #edbe01;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 900px;
  margin: 0 auto;}
/*タブのスタイル*/
.tab_item {
  width: calc(100%/6.44);
  height: 50px;
  border:inset 5px #ffcc00;

  background-color: #ffba00;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  color: #050401;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
/*タブのスタイル*/
.tab_item2 {
  width: calc(100%/5.3);
  height: 50px;
  border:inset 5px #ffcc00;
  border-bottom: 3px solid #edbe01;
  background-color: #ffba00;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  color: #050401;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:active {
  border:outset 5px #ffcc00;
}
.tab_item2:active {
  border:outset 5px #ffcc00;
}
.tab_item:hover {
  opacity: 0.75;
}
.tab_item2:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}
/*ラジオボタンを全て消す*/
input[name="tab_item2"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;

  clear: both;
  overflow: hidden;


}
/*タブ切り替えの中身のスタイル*/
.tab_content2 {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#index:checked ~ #index_content,
#interv:checked ~ #interv_content,
#about:checked ~ #about_content,
#defen:checked ~ #defen_content,
#qanda:checked ~ #qanda_content,
#traff:checked ~ #traff_content,
#lawit:checked ~ #lawit_content,
#marri:checked ~ #marri_content,
#guard:checked ~ #guard_content,
#person:checked ~ #person_content,
#company:checked ~ #company_content,
#land:checked ~ #land_content,
#recv:checked ~ #recv_content,
#lawdoc:checked ~ #lawdoc_content,
#advr:checked ~ #advr_content,
#wk:checked ~ #wk_content,
#dbt:checked ~ #dbt_content,
#copyright:checked ~ #copyright_content{
  display: block;
}
/*選択されているタブのコンテンツのみを表示*/
/*#all2:checked ~ #all_content,*/
/*#programming2:checked ~ #programming_content,*/
/*#design2:checked ~ #design_content {*/
/* display: block;*/
/*}*/

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #ffcc00;
  color: #000;
}
/*選択されているタブのスタイルを変える*/
.tabs2 input:checked + .tab_item2 {
  background-color: #ffcc00;
  color: #000;
}
/*タブ内のスタイル*/
.textboxh {
 background-image: url(../pic/mito.jpg);
 background-size:cover;
 margin : 1px ;
 padding:10px 10px;

}
/*タブ内のスタイル*/

.textbox {
 margin : 20px ;
 padding:10px 10px;

 color: #0000ff;
}
.textbox2 {
 margin : 20px ;
 padding:10px 10px;
 opacity: 0.75;
  border:solid 2px #000;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);

 background-color: #fff;
 color: #0000ff;
 
}

.textbox3 {


 margin : 20px ;
 padding:10px 10px;
 opacity: 0.75;
  border:solid 2px #000;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
 background-color: #fff;
 color: #0000ff;

}
.textbox2 label{
color:#808080;
font-size:14px;
}

.textbox3 label{
color:#808080;
font-size:14px;
}
.test {

background-color: #edbe01;
}
.test span{

display:none;
}
.test:hover span{
	display:inline;
	
	
}

.textbox_p {
	position:relative;
	top:-25px;
	left:30px;
	background-color: #fceba6;
	width:300px;
	vertical-align: middle;
	height:30px;
	border:inset 2px #000;
	text-align: center;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	color:black;
	padding:1% 2% 1%;
}


.textbox a{
	padding: 15px;
	font-size: 14px;
	color: #fff !important;
	background-color: #ee82ee;
	border-radius: 3px;        /* CSS3草案 */
	-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 3px;   /* Firefox用 */
	text-decoration: none !important;
}
.hidbox {
	margin: 2em 0;/*前後の余白*/
	padding: 0;
}
.hidbox label {
    padding: 1% 5% 1%;
    font-weight: bold;
     border:inset 5px #ffcc00;
  border-bottom: 3px solid #edbe01;
  background-color: #ffba00;
  line-height: 50px;
    //border: solid 2px black;
    cursor :pointer;
}
.hidbox label:hover {
    /*background: #efefef;*/
     opacity: 0.75;
}
.hidbox label:active {
  border:outset 5px #ffcc00;
}
.hidbox input {
    display: none;
}

.hidbox .showbox {
    height: 0;
    padding: 2px;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidbox input:checked ~ .showbox {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

ul, ol {
  padding: 0;
  position: relative;
  
}

ul li, ol li {
  color: #000;
  border-left: solid 6px #000;/*左側の線*/
  background: #ffcc00;/*背景色*/
  margin-bottom: 3px;/*下のバーとの余白*/
   line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  
}
li.lsin {
	list-style-image:url(../pic/licon.png);
	border-left: groove 6px #000;/*左側の線*/
}


/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:1024px) and (orientation:portrait){


/*タブ切り替え全体のスタイル*/
.tabs {

  background-color: #edbe01;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     flex-direction: column;
         display: inline-flex;  
  width: 100%;
  margin: 0 auto;}
  
/*タブ切り替え全体のスタイル*/
.tabs2 {
  //margin-top: 50px;
  //padding-bottom: 40px;
  background-color: #edbe01;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0 auto;}
  


/*タブのスタイル*/
.tab_item {
  width: 110px;
  height: 50px;
  border:inset 5px #ffcc00;
 //border-bottom: 3px solid #edbe01;
  //border-top-left-radius: 1.5em; 
  background-color: #ffba00;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #050401;
  display: block;
  float: left;
  text-align: center;
  left:0px;
  transition: all 0.2s ease;
}
/*タブのスタイル*/
.tab_item2 {
  width: calc(100%/6);
  height: 50px;
  border:inset 5px #ffcc00;
  border-bottom: 3px solid #edbe01;
  background-color: #ffba00;
  line-height: 50px;
  font-size: 12px;
  text-align: center;
  color: #050401;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:active {
  border:outset 5px #ffcc00;
}
.tab_item2:active {
  border:outset 5px #ffcc00;
}
.tab_item:hover {
  opacity: 0.75;
}
.tab_item2:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}
/*ラジオボタンを全て消す*/
input[name="tab_item2"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 10px 0;
  position: relative;
  top:-400px;
  left:110px;
  width:79%;
  clear: both;
  overflow: hidden;
  //overflow: scroll;

}
/*タブ切り替えの中身のスタイル*/
.tab_content2 {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#index:checked ~ #index_content,
#interv:checked ~ #interv_content,
#about:checked ~ #about_content,
#defen:checked ~ #defen_content,
#qanda:checked ~ #qanda_content,
#traff:checked ~ #traff_content,
#lawit:checked ~ #lawit_content,
#marri:checked ~ #marri_content,
#guard:checked ~ #guard_content,
#person:checked ~ #person_content,
#company:checked ~ #company_content,
#land:checked ~ #land_content,
#recv:checked ~ #recv_content,
#lawdoc:checked ~ #lawdoc_content,
#advr:checked ~ #advr_content,
#wk:checked ~ #wk_content,
#dbt:checked ~ #dbt_content,
#copyright:checked ~ #copyright_content{
  display: block;
}
/*選択されているタブのコンテンツのみを表示*/
/*#all2:checked ~ #all_content,*/
/*#programming2:checked ~ #programming_content,*/
/*#design2:checked ~ #design_content {*/
/* display: block;*/
/*}*/

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #ffcc00;
  color: #000;
}
/*選択されているタブのスタイルを変える*/
.tabs2 input:checked + .tab_item2 {
  background-color: #ffcc00;
  color: #000;
}


/*タブ内のスタイル*/
.textboxh {
 background-image: url(../pic/mito.jpg);
 background-size:cover;
 margin : 1px ;
 padding:10px 10px;
 position: relative;

}
/*タブ内のスタイル*/

.textbox {
 margin : 20px ;
 padding:10px 10px;
 color: #0000ff;
}
.textbox2 {
 margin : 20px ;
 padding:10px 10px;
 opacity: 0.75;
  border:solid 2px #000;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);

 background-color: #fff;
 color: #0000ff;
 
}

.textbox3 {


 margin : 20px ;
 padding:10px 10px;
 opacity: 0.75;
  border:solid 2px #000;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
 background-color: #fff;
 color: #0000ff;

}
.textbox2 label{
color:#808080;
font-size:14px;
}

.textbox3 label{
color:#808080;
font-size:14px;
}
.test {

background-color: #edbe01;
}
.test span{

display:none;
}
.test:hover span{
	display:inline;
	
	
}

.textbox_p {
	position:relative;
	top:-25px;
	left:10px;
	background-color: #fceba6;
	width:200px;
	vertical-align: middle;
	height:30px;
	border:inset 2px #000;
	text-align: left;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	color:black;
	padding:1% 2% 1%;
	font-size:16px;
}


.textbox a{
	padding: 15px;
	font-size: 14px;
	color: #fff !important;
	background-color: #ee82ee;
	border-radius: 3px;        /* CSS3草案 */
	-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 3px;   /* Firefox用 */
	text-decoration: none !important;
}
.hidbox {
	margin: 2em 0;/*前後の余白*/
	padding: 0;
}
.hidbox label {
    padding: 1% 5% 1%;
    font-weight: bold;
     border:inset 5px #ffcc00;
  border-bottom: 3px solid #edbe01;
  background-color: #ffba00;
  line-height: 50px;
 
    cursor :pointer;
}
.hidbox label:hover {
   
     opacity: 0.75;
}
.hidbox label:active {
  border:outset 5px #ffcc00;
}
.hidbox input {
    display: none;
}

.hidbox .showbox {
    height: 0;
    padding: 2px;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidbox input:checked ~ .showbox {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

ul, ol {
  padding: 0;
  position: relative;
  
}

ul li, ol li {
  color: #000;
  border-left: solid 6px #000;/*左側の線*/
  background: #ffcc00;/*背景色*/
  margin-bottom: 3px;/*下のバーとの余白*/
   line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  
}
li.lsin {
	list-style-image:url(../pic/licon.png);
	border-left: groove 6px #000;/*左側の線*/
}


	}