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

/*▼▼▼共通▼▼▼START*/
.flex_box {
    display: flex;
}
ol.brackets {
    margin: 10px 0 10px 10px;
    font-size: 0.92em;
    line-height: 160%;
}
ol.brackets li {
    list-style-type: none;
    counter-increment: cnt;
    padding-left: 1.84em;
    text-indent: -1.84em;
}
ol.brackets li::before {
    content: "("counter(cnt)")　";
}
#main h2 {
    border-bottom-width: 2px;
    border-left-width: 5px;
    border-bottom-style: solid;
    border-left-style: solid;
    font-size: 1.15em;
    font-weight: bold;
	padding: 5px 0 5px 10px;
    margin-top: 60px;
    margin-bottom: 10px;
}
#main div:first-child h2 {
    margin: 10px 0 20px;
}
#main h3 {
    font-size: 1em;
}
#main h3.small {
    font-size: 0.95em;
}
#main h4 {
    font-size: 0.95em;
    font-weight: bold;
}
#main p {
    font-size: 0.92em;
    line-height: 160%;
    text-indent: 0.92em;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 10px;
}
#main p.note {
    font-size: 0.92em;
    line-height: 160%;
    text-indent: 0;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: calc(8px + 1em);
}

#main ul { 
    font-size: 0.92em;
    line-height: 160%;
	padding: 0 0 0 1em;
	margin: 0 10px 5px 2em;
	list-style: disc;
	}

#main p.text_indent01 {
    text-indent: 1.3em;
}
#main p.small {
    font-size: 0.9em;
    text-indent: 0.9em;
}
#main p.txtBoxLeft {
    float: left;
    max-width: 355px;
    margin-top: 10px;
}
#main .text_line {
    text-decoration: underline;
}
#main p.text01 {
    max-width: 607px;
}
#main p.text02 {
    max-width: 460px;
}
div.indent {
    padding-left: 15px;
}
ruby > rt {
    font-size: 8px;
}
.imgBox img {
    width: 100%;
}
#main .imgBoxflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 700px;
    margin: 20px auto;
}
#main .imgBoxflex p {
    text-indent: inherit;
    font-size: 13.25px;
}
#main .attention p {
    font-size: 0.8em;
}
* html, * html {
    zoom: 1;
} /* IE6 */
*:first-child + html .imgTxtBox, *:first-child + html .imgTxtBoxRight {
    zoom: 1;
} /* IE7 */
/*▼▼▼画像用▼▼▼*/
div img {
    margin: 0 auto;
}
div.imgBoxCenter {
    text-align: center;
    margin: 0px auto 40px;
	font-size: 0.92em;
}
div.imgBoxCenter img {
    width: 70%;
    height: auto;
}

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

div.imgBoxCenter.flex div {
    width: 25%;
}

div.imgBoxCenter.flex div img {
    width: 100%;
}

div.imgBoxCenter p {
	text-indent: 0!important;
}
div.imgBoxRight {
    margin-left: 10px;
    float: right;
    margin-bottom: 20px;
    font-size: 0.9em;
    text-align: center;
}
/*IEのみ*/
@media all and (-ms-high-contrast: none) {
    div.imgBoxDouble ul {
        float: none;
        display: flex;
        flex-wrap: nowrap;
    }
}
div.imgBoxLeft {
    margin: 0px 10px 20px 0px;
    float: left;
    width: 355px;
    font-size: 0.9em;
    text-align: center;
}
/*横に2列並ぶ画像のサイズの基本形は350px
調整が必要なら#report内で上書き*/
div.imgBoxDouble {
    text-align: center;
    text-indent: 0;
    width: 710px;
    margin: 0 auto 20px;
}
div.imgBoxDouble:before, div.imgBoxDouble:after {
    content: " ";
    display: table;
}
div.imgBoxDouble:after {
    clear: both;
}
div.imgBoxDouble {
    *zoom: 1;
}
div.imgBoxDouble div {
    width: 350px;
    float: left;
}
div.imgBoxDouble img {
    width: 100%;
    height: auto;
}
div.imgBoxDouble div:first-child {
    margin-right: 10px;
}
div.imgBoxDouble ul {
    float: left;
    position: relative;
    display: flex;
}
div.imgBoxDouble ul li {
    flex-wrap: nowrap;
    margin: 0 5px;
}
img.imgBorder {
    border: 1px solid #CCCCCC;
}
#skip {
    height: 1px;
    left: -9999em;
    overflow: hidden;
    position: absolute;
    width: 1px;
}
div.imgbox_right {
    float: right;
    text-align: center;
}
div.imgbox_left {
    float: left;
    text-align: center;
}
div.qrbox {
    margin-left: 30px;
}
#main h3 {
    font-weight: bold;
    border-left: 5px solid;
    margin: 30px 10px 15px;
    padding-left: 10px;
}
#main h4 {
    font-weight: bold;
    margin: 15px 10px 5px 12px;
}
#main .flex_box {
    justify-content: space-between;
    margin: 0 15px;
}
#main .flex_box p.img_text {
    font-size: 13.25px;
    text-indent: 0;
    margin-right: 0;
}
#main .flex_box p {
    margin-left: 0;
}
dl.author {
    margin-bottom: 20px;
    margin-left: 10px;
    font-size: 0.92em;
}
dl.author dt {
    float: left;
}
.quest, .answer {
    margin: 0 10px 15px;
    display: flex;
    align-items: start;
}


.quest p, .answer p {
    margin: 0;
}
.quest dt, .answer dt {
    font-size: 0.92em;
    line-height: 160%;
    width: 45px;
}
.quest dd, .answer dd {
    width: 90%;
}
.quest {
    align-items: center;
}
.quest dt {
    width: 45px;
}

/*▼▼▼特集記事／feature_article▼▼▼ START*/

.feature_article h2, .feature_article h3 {
    color: #3270BA;
}

.feature_article h2 {
    background-color: #FFF;
    border-left-color: #3270BA;
    border-bottom-color: #3270BA;
}

.feature_article h3 {
    background: none;
    border: none;
    margin-left: 0;
	border-left: 5px solid;
}

/*▼▼▼お答えします／will_answer▼▼▼START*/
.will_answer h2, .will_answer h3 {
    color: #008900;
    border-left-color: #008900;
}

.will_answer h2 {
    border-bottom-color: #008900;
}

.will_answer #qanda dl.quest dt{
    background: #008900;
    border: 1px solid #008900;
}

.will_answer #qanda dl.quest {
    border-bottom: 1px solid #008900;
}

.will_answer #qanda dl.quest dt {
  background: #008900;
  border: 1px solid #008900;
}

.will_answer .logos {
    border: #000000 solid;
    border-width: 1px;
    padding: 10px;
    margin: 10px;
}

.will_answer .logos img {
    width: 25%;
    padding: 10px 10px 10px 0;
    display: inline-block;
    vertical-align: middle;
}

.will_answer .logos div.logos_w {
    width: calc(75% - 10px)!important;
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
}

dl.quest dt {
    color: #ffffff;
    text-align: center;
    padding: 7px 0;
    width: 40px;
}

dl.quest dd {
    padding: 0 0 0 20px;
}

/*▼▼▼記者が行く／reporter_goes▼▼▼START*/
.reporter_goes h2 {
    color: #7A401A;
    border-left-color: #7A401A;
}

.reporter_goes h2 {
    border-bottom-color: #7A401A;
}

.reporter_goes .q_title {
    color: #7A401A;
	font-weight: bold;
	margin: 1em 0 0 0;
	display: inline-block;
    width: 5em;
    text-align:justify;
    text-align-last:justify;
}

.reporter_goes .q_title.noSpace {
	margin: 0 0 0 0;
}

.reporter_goes .mb30 {
    padding: 0 20px;
    box-sizing: border-box;
}

.reporter_goes dl.quest dt {
	background: #7A401A;
    border: 1px solid #7A401A;
}

.reporter_goes dl.quest {
    border-bottom: 1px solid #7A401A;
}

dl.quest dt {
	color: #ffffff;
    text-align: center;
    padding: 7px 0;
    width: 40px;
	font-size: 0.92em;
    line-height: 160%;
}

/*▼▼▼report08▼▼▼START*/
/*▼▼▼そんな時法テラスがお役に立ちます（houterasu)▼▼▼START*/
#main .legal_aid .cnt_area,
#main #houterasu .cnt_area {
    background-color: #bfd3ee;
    padding: 0 20px 20px 20px;
}

.legal_aid h2 {
	border: 0!important;
	padding: 0!important;
	margin: 0!important;
	position: relative;
	background-image: url("../images/houterasu-subtitle.jpg");
	background-size: cover;
	background-repeat: no-repeat;
    width: 780px;
	height: 53px;
}

.legal_aid h2 span {
	display: inline-block;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	position: absolute;
	font-size: 75%;
	background-image: url("../images/houterasu-subtitlebg.png");
	padding: 5px 10px;
	text-align: center;
	white-space: nowrap;
}

.legal_aid .bgg {
    background: #ffffff;
    clear: both;
    padding: 20px 10px 0 10px;
    box-sizing: border-box;
}

.legal_aid .ttl_h31 {
    font-size: 20px!important;
	font-weight: normal;
    padding: 20px 0 0 0!important;
    margin: 0 0 10px 0!important;
    text-decoration: none;
    border-left: 0!important;
}

.legal_aid .ttl_h31 .bold {
	font-weight: bold;
	font-size: 18px;
}

.legal_aid .readBox {
	width: calc(100% - 80px);
	display: inline-block;
	vertical-align: middle;
}

.legal_aid img.heart {
	width: 80px;
	display: inline-block;
	vertical-align: middle;
}

.legal_aid .ttl_h31 .red {
	color: #ff0000;
}

.legal_aid .bggy {
	background-color: #ffffff;
	padding: 10px!important;
	margin: 20px auto 0 auto;
}

#houterasu h3 {
    color: #fff;
    font-size: 1.1em;
    padding: 4px 10px;
    margin: 0 0 10px 0;
    text-decoration: none;
    border-left: 0;
}

#houterasu h4, #houterasu h5, #houterasu h6 {
    font-weight: bold;
    color: #000;
    border: none;
    margin: 0 0 8px;
}

#houterasu p {
    line-height: 150%;
    margin: 0 20px 0 20px;
}

#houterasu .s_txt {
    line-height: 110%;
    margin: 10px 0 0 0;
    text-indent: 0;
    font-size: 0.7em;
}

#houterasu .s1_txt {
    line-height: 110%;
    margin: 0 0 0 0;
    text-indent: 0;
    font-size: 0.82em;
}

#houterasu div.illustimg {
    float: left;
}

#houterasu .rogoimg {
    float: right;
}

#houterasu .cnt_area h3 {
    background-color: #0e8d8d;
}

#houterasu .cnt_area h4 {
    font-size: 0.9em;
}

#houterasu div.houterasu_query {
    width: 570px;
    float: right
}

#houterasu div.houterasu_know_a {
    width: 175px;
    margin-left: 8px;
    float: left
}

#houterasu div.houterasu_know_b {
    width: 280px;
    float: left;
    margin: 0 0 0 15px;
}

#houterasu div.houterasu_know_b_txt {
    float: right;
    width: 165px;
    margin: 0 0 0 0px;
}

#houterasu div.houterasu_know_b_txt p {
    margin-top: 0;
}

#houterasu div.houterasu_know_b .flex_box {
    margin: 0;
}
#houterasu div.houterasu_know_b .flex_box .qr {
    width: auto;
    margin: 0;
}

#houterasu div.houterasu_know_c {
    width: 240px;
    float: left;
    margin: 0 0 0 15px;
}

#houterasu div.houterasu_hyousi {
    float: left;
}

#houterasu .magazine {
	width: 100px;
	border: #dedede solid;
	border-width: 1px;
}

/** メインレイアウト **/

.houterasu_MainBox {
    display: block;
    background-color: #ffffe5;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}

.houterasu_MainBox h4 {
    display: block;
    background-color: #f97d22;
    border-radius: 10px;
    padding: 10px 20px;
    color: #ffffff;
    margin: 10px auto!important;
    font-size: 20px!important;
}

.houterasu_MainBox ul.fukidashi {
    list-style: none!important;
    margin: 0!important;
    padding: 15px 15px 15px 30px!important;
    display: inline-block!important;
    line-height: 1.3em!important;
    background-color: #ffffc8;
    border: #feb928 solid;
    border-width: 5px;
    border-radius: 20px;
    vertical-align: top;
    font-size: 0.8em!important;
    position: relative;
}

.houterasu_MainBox .diagram {
    width: 330px;
    padding: 0 0 0 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

/*totalWidth 564*/

.houterasu_MainBox ul.fukidashi.w01 {
    width: 320px;
    margin: 0 20px 30px 0!important;
}

.houterasu_MainBox ul.fukidashi.w02 {
    width: 250px;
}

.houterasu_MainBox ul.fukidashi.w03 {
    width: 160px;
}

.houterasu_MainBox .w04 {
    display: inline-block;
    width: calc(150px + 3em);float: right;
}

.houterasu_MainBox .w04 ul.fukidashi {
    margin: 0 0 10px 0!important;
}


ul.fukidashi.top.left {
    margin: 0 20px 0 0!important;
}

ul.fukidashi li {
    position: relative;
}

ul.fukidashi li span {
    position: absolute;
    left: -20px;
}

/*フキダシ*/
.houterasu_MainBox ul.fukidashi .allow {
    position: absolute;
    z-index: 30;
}

.houterasu_MainBox ul.fukidashi .allow01 {
    bottom: -179px;
    right: 105px;
}

.houterasu_MainBox ul.fukidashi .allow02 {
    bottom: -96px;
    left: -45px;
}

.houterasu_MainBox ul.fukidashi .allow03 {
    right: -40px;
    top: 300px;
}

.houterasu_MainBox ul.fukidashi .allow04 {
    top: 70px;
    left: -37px;
}

.houterasu_MainBox ul.fukidashi .allow05 {
    top: 80px;
    left: -37px;
}


/*▼▼▼法制度整備支援の現場から／front_lines▼▼▼START*/
.front_lines h2 {
    color: #67389A;
    border-left-color: #67389A;
    border-bottom-color: #67389A;
    background-color: #FFF;
}


/*▼▼▼法務省で働くひと・しごと紹介／people_jobs▼▼▼START*/
.people_jobs h2, .people_jobs h3 {
    color: #cd3a36;
    border-left-color: #cd3a36;
}

.people_jobs h2 {
    border-bottom-color: #cd3a36;
    background-color: #FFF;
}

.people_jobs #qanda dl.quest {
    border-bottom: 1px solid #cd3a36;
}

.people_jobs #qanda dl.quest dt {
    background: #cd3a36;
    border: 1px solid #cd3a36;
}



/*追記*/

.link_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 20px;
    margin: 20px auto;
    width: 82%;
    border: 1px solid #000;
}

.link_box .txt {
	display: inline-block;
	margin: 0 10px 0 0;
	word-break: break-all;
}

.link_box a,
.link_box3 a {
	display: inline;
	margin: 0;
	padding: 0;
	width: 100px;
}

.link_box.inbox {
    display: block;
    text-align: center;
}

.link_box.inbox .txt,
.link_box.inbox img {
    vertical-align: middle;
    text-align: left;
}

.link_box img,
.link_box3 img {
	margin: 0;
	width: 100px;
	vertical-align: top;
}

.link_box3 {
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 20px;
    margin: 20px auto;
    width: 70%;
    border: 1px solid #000;
	font-size: 85%;
}

.link_box3 .txt {
	display: inline-block;
	margin: 0 10px 0 0;
	word-break: break-all;
	width: calc(100% - 100px);
}

.link_box3 div {
	display: flex;
    align-items: center;
	width: 100%;
}

.imgBoxCenter img.tate {
	width: 40%;
}

.imgBoxCenter img.tate_qr {
	width: 20%;
}

img.tate_hourisu {
	width: 15%;
    display: inline-block;
    vertical-align: middle;
    margin: 1em 0 0 0;
}

.hourisu {
	width: 85%;
    display: inline-block!important;
    vertical-align: middle;
}

 .halfBox {
	width: calc(35% - 5px);
	margin: 0 auto;
	display: inline-block;
	vertical-align: top;
	font-size: 0.92em!important;
}

 .halfBox img {
	 width: 100%!important;
}

a img {
	transition: 0.2s;
}

a:hover img {
	opacity: 0.5;
	transition: 0.2s;
}

.On-site {
	line-height: 1.8em;
	margin: 0 0 10px 10px;
	display: inline-block;
	font-size: 0.92em;
}

.redBox {
    padding: 20px;
    border: #ff0000 solid 2px;
    margin: 0 10px;
    text-indent: 0.9em;
}

ul.asterisk {
    list-style: none!important;
    margin: 0 0 0 1.5em;
    padding: 0!important;
}

ul.asterisk li {
    position: relative;
}

ul.asterisk li span {
    position: absolute;
    left: -1.5em;
}