@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');

/* reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-decoration: none;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}*{box-sizing: border-box;}
img {max-width: 100%;}

html {
    font-size: 62.5%;
    overflow: auto;
}
body {
    position: relative;
    font-size: 1.6em;
    font-family: 'Noto Sans JP', sans-serif;
    /* font-family: 'Noto Serif JP', serif; */
    line-height: 1.6;
    color: #333;
    letter-spacing: .025rem;
    overflow-x: hidden;
}
@media (max-width: 960px) {
    body {
        font-size: 1.4em;
    }
}

a {
    color: #333;
}
a:hover {
    opacity: .8;
}
br.pc {
    display: block;
}
br.sp {
    display: none;
}
@media (max-width: 650px) {
    br.pc {
        display: none;
    }
    br.sp {
        display: block;
    }
}

#header {
    position: fixed;
    z-index: 999;
    background: #fff;
    width: 100%;
    display: flex;
    padding: 1em 1.8em 1em 1.5em;
    justify-content: space-between;
    align-items: center;
}
#header_logo {
    padding-top: 5px;f
}
#header .menu {
    display: flex;
}
#header .menu a {
    position: relative;
    padding: 0 1.5em 0 0.7em;
    text-decoration: underline;
}
#header .menu a::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-width: .4em;
    border-color: transparent transparent transparent #0d5760;
    margin: auto;
    height: 0;
}
#header .menu li:last-child a {
    padding-right: 0;
}

@media (max-width: 960px) {
    #header {
        height: 55px;
    }
    #header_logo {
        width: 45%;
    }
    #header .menu {
        opacity: 0;
        display: block;
        width: 100%;
        position: fixed;
        top: 55px;
        right: -100%;
        background: rgba(3,51,63,.95);
        /*background: linear-gradient(135deg, #00787d, #03333f);*/
        transition-duration: .6s;
    }
    #header .menu a::before {
        display: none;
    }
    #header .menu li a {
        display: block;
        color: #fff;
        padding: .9em;
        text-align: center;
        font-size: 1.15em;
    }
    #header .menu li:first-child a {
        padding: 1.8em .9em .9em;
    }
    #header .menu li:last-child a {
        padding: .9em .9em 1.8em;
    }
    #header .menu.show {
        right:0;
        opacity: 1;
        /* transition-duration: .6s; */
    }
}
.menu_trigger {
    background: #03333f;
    position: absolute;
    z-index: 1000;
    right: 0;
    top: 0;
    height: 100%;
    width: 15%;
    max-width: 75px;
    display: none;
}
.menu_trigger span {
    position: absolute;
    height: 1px;
    width: 55%;
    background: white;
    top: 35%;
    right: 0;
    left: 0;
    margin: auto;
}
.menu_trigger span:before, .menu_trigger span:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: white;
    top: -8px;
    transition-duration: .3s;
}
.menu_trigger span:after {
    top: 8px;
}
.menu_trigger:after {
    position: absolute;
    content: "MENU";
    color: #fff;
    bottom: 8%;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    font-size: .7em;
    transition-duration: 1s;
}

.menu_trigger.active span {
    background: transparent;
}
.menu_trigger.active:after {
    content: "CLOSE";
}
.menu_trigger.active span:before {
    transform: rotate(45deg);
    top: 0;
}
.menu_trigger.active span:after {
    transform: rotate(-45deg);
    top: 0;
}
@media (max-width: 960px) {
    .menu_trigger {
        display: block;
    }
}

#float-nav {
    position: fixed;
    top: 10%;
    right: 0;
    z-index: 999;
}
#float-nav ul {

}
#float-nav ul li a span {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
#float-nav ul li a {
    display: block;
    color: #fff;
    font-weight: bold;
    padding: 2em .8em;
    letter-spacing: 2px;
}
#float-nav ul li:nth-child(1) {
    background-color: #003b46;
    border-radius: 10px 0 0 0;
}
#float-nav ul li:nth-child(2) {
    background-color: #66a5ad;
    border-radius: 0 0 0 10px;
}


@media (max-width: 960px) {
    #float-nav {
        width: 100%;
        top: initial;
        bottom: 0;
    }
    #float-nav ul {
        display: flex;
        border-top: 1px solid #f5f3f2;
    }
    #float-nav ul li {
        width: 50%;
        border-radius: 0 !important;
        text-align: center;
    }
    #float-nav ul li a {
        padding: 1em;
        font-size: .9em;
    }
    #float-nav ul li a span {
        writing-mode: initial;
    }
}


#mainvisual {
    position: relative;
}
.main {
    background: url(/img/mainvisual.jpg);
    background-size: cover;
    padding: 16vw 0;
    font-family: 'Noto Serif JP', serif;
    color: #fff;
    text-align: center;
}
.main_inner {
    width: 85%;
    margin: auto;
}

#mainvisual .main_copy {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 1em;
}
#mainvisual .main_copy_caption {
    line-height: 2;
    font-size: 1.1em;
}
@media (max-width: 960px) {
    .main_inner {
        padding-top: 65px;
    }

    #mainvisual .main_copy {
        font-size: 1.65em;
    }
    #mainvisual .main_copy_caption {
        font-size: 1em;
    }
}
@media (max-width: 560px) {
    .main{
        background: url(/img/mainvisual.jpg) center right;
        padding: 25vw 0;
        text-align:left;
    }
}


#top-news {
    position: absolute;
    background-color: #fff;
    width: 80%;
    margin: auto;
    max-width: 800px;
    transform: translateY(50%);
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
}

#top-news dl {
    display: flex;
    align-items: center;
    padding: 1.5em 0;
}
#top-news dl dt {
    width: 20%;
    text-align: center;
    font-size: 1.2em;
    font-family: 'Noto Serif JP';
    font-weight: bold;
}
#top-news dl dd {
    border-left: 1px solid #4d4d4d;
    padding: 1em 2em;
}
.newslist li + li {
    margin-top: .4em;
}
.newslist li a {
    color: #07575b;
}
.newslist li .date {
    color: #333;
    font-weight: bold;
    margin-right: 1em;
}

@media (max-width: 960px) {
    #top-news {
        position: relative;
        width: 100%;
        transform: initial;
        font-size: 1.05em;
    }
    #top-news dl {
        flex-direction: column;
        padding : 1.5em;
    }
    #top-news dl dd {
        border-left: none;
        border-top: 1px solid #4d4d4d;
        padding: 1em 0;
        margin-top: 1em;
    }
    #top-news dl >* {
        width: 100% !important;
    }
    .newslist li .date {
        display: block;
    }
}


#contents_wrap {
    background-color: #f5f3f2;
}
.sec_inner {
    max-width: 1180px;
    padding: 5em 10px;
    margin: auto;
}

#page .sec_inner {
    padding-top: 8em;
}

@media (max-width: 960px) {
    .sec_inner {
        padding: 4em 15px;
    }
    #page .sec_inner {
        padding-top: 3.8em;
    }  
}

.page_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: -3%;
    margin-bottom: -3%;
}
.page_list li {
    width: 30%;
    background: #fff;
    margin-bottom: 5%;
    margin-right: 3%;
    border: 2px solid #07575b;
    border-radius: 6px;
    text-align: center;
    background: #07575b;
}

.page_list li a {
    display: block;
    color: initial;
    height: 100%;
    padding: 2em 1em;
    background-color: #fff;
    transition-duration: .4s;
    border-radius: 4px;
}
.page_list li:hover a {
    color: #fff;
    opacity: 1;
    background-color: transparent;
}
.page_list li h3.page_head {
    font-size: 1.35em;
    font-weight: bold;
    margin: .5em 0;
}
.page_list li .more {
    position: relative;
    width: 80%;
    margin: 2em auto 0;
    background: #07575b;
    color: #fff;
    padding: .6em .2em;
    font-weight: bold;
    font-size: .9em;
    border: 1px solid #27826E;
}
.page_list li .more::after {
    content: "";
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .5em;
    height: .5em;
    border-right: 3px solid;
    border-bottom: 3px solid;
    transform: rotate(-45deg);
}

@media (max-width: 960px) {
    #service .sec_inner {
        padding-top: 5em;
    }
    .page_list li {
        width: 100%;
        margin-bottom: 3%;
    }
    .page_list li a {
        display: flex;
        align-items: center;
        padding: 1em;
    }
    .page_list li a >* {
        text-align: left;
    }
    .page_list li h3.page_head {
        margin-top: 0;
    }
    .page_list li .page_icon {
        width: 40%;
        text-align: center;
    }
    .page_list li .page_text {
        margin-left: 1em;
        width: 75%;
    }
    .page_list li .more {
        text-align: center;
        width: 100%;
        margin-top: 1em;
    }
}


#footer_contact {
    background-color: #66a5ad;
    color: #fff;
}
#footer_info {
    background-color: #003b46;
    color: #fff;
    padding: 4em 10px 1.5em;
}
.footer_info_logo {
    text-align: center;
    margin-bottom: 3em;
}
.footer_linklist ul {
    text-align: center;
}
.footer_linklist ul li {
    display: inline-block;
}
.footer_linklist ul li a {
    color: #fff;
    text-decoration: underline;
    margin: 0 .5em;
}
.footer_copy {
    text-align: center;
    font-size: .5em;
    margin: 1.5em 0 0;
    color: #94B7B8;
}
@media (max-width: 960px) {
    #footer_info {
        padding-bottom: 4em;
    }
    .footer_info_logo {
        margin-bottom: 2em;
    }
    .footer_linklist {
        margin: auto -10px;
    }
    .footer_linklist ul {
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid #005b5a;
    }
    .footer_linklist ul li {
        width: 50%;
        border-bottom: 1px solid #005b5a;
    }
    .footer_linklist ul li:nth-child(odd) {
        border-right: 1px solid #005b5a;
    }
    .footer_linklist ul li a {
        display: block;
        padding: .8em .2em;
    }
}
@media (max-width: 560px) {
    #footer_info {
        padding: 3em 10px 3em;
    }
    #footer_info img {
        max-width: 185px;
    }
}

.contact_wrap {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto -1em;
    flex-wrap: wrap;
}

.contact_wrap .contact_box {
    width: 47%;
    text-align: center;
    border: 1px solid #bdd8db;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
    background: #fff;
    background: linear-gradient(135deg, #00787d, #03333f);
}
.contact_wrap .contact_box a {
    color: #fff;
    display: block;
    padding: 1em;
    background: #66a5ad;
    transition-duration: .4s;
}
.contact_wrap .contact_box a:hover {
    background: transparent;
    /* color: #66a5ad; */
}
.contact_wrap .contact_box a.tel {
    pointer-events: none;
}
.contact_wrap .contact_box .contact_head {
    font-size: 1.2m;
    font-weight: bold;
    margin-bottom: .7em;
}
.contact_mail {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8em;
    font-weight: bold;
}

@media (max-width: 960px) {
    .contact_wrap .contact_box {
        width: 100%;
    }
    .contact_wrap .contact_box a.tel {
        pointer-events: auto;
    }
}


h2.ttl {
    font-family: 'Noto Serif JP', serif;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 1em;
    letter-spacing: .1em;
}
h2 + .ttl_caption {
    text-align: center;
    margin: -1.5em 0 2em;
}

section#footer_map {
    position: relative;
}

.map_iframe {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.map_iframe iframe {
    position: absolute;
    width: 100%;
    height: 180%;
    top: 0;
    bottom: 0;
    margin: auto;
}
.map_info {
    z-index: 1;
    position: relative;
    padding: 3em 2em;
    background: #fff;
    display: inline-block;
    margin: 5em 0 5em 8%;
    width: 45%;
    max-width: 460px;
    text-align: center;
}
@media (max-width: 960px) {
    .map_iframe {
        position: relative;
        height: 380px;
    }
    .map_info {
        width: 100%;
        max-width: initial;
        margin: 0 auto;
        padding: 1.5em;
    }
}
.map_company {
    font-weight: bold;
    margin-top: -1em;
    margin-bottom: .5em;
    font-size: 1.1em;
}
.map_address {
    line-height: 1.8;
}
.map_btn {
    width: 80%;
    margin: 2em auto 0;
    color: #fff;
    background: #003b46;
    max-width: 300px;
}
.map_btn a {
    color: #fff;
    display: block;
    padding: .8em;
}


#page-title {
    position: relative;
    padding-bottom: 20%;
    background: url(/img/header.jpg);
    background-size: cover;
}
#page-title h2 {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 50%;
    font-family: 'Noto Serif JP', serif;
    text-align: center;
}
#page-title h2 span {
    display: inline-block;
    padding: .5em 2em;
    background: #333;
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    letter-spacing: .2em;
}
@media (max-width: 960px) {
    #page-title {
        padding-bottom: 30%;
    }
}
@media (max-width: 560px) {
    #page-title {
        padding-bottom: 60%;
    }
}


.service_listwrap {
    margin-bottom: -1em;
}
.service_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.service_list li {
    width: 49%;
    margin-bottom: 2em;
    background-color: #fff;
    box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
}
.service_list-title {
    padding: 1.2em 1.5em;
    color: #fff;
    background-color: #66a5ad;
    font-size: 1.2em;
    position: relative;
    overflow: hidden;
}
.service_list-title::before {
    position: absolute;
    content: "";
    width: 1.5em;
    height: 1.5em;
    background: #003b46;
    left: -.75em;
    top: -.75em;
    transform: rotate(45deg);
}
.service_list-text {
    padding: 1.5em;
    font-size: .9em;
    line-height: 1.8;
}
@media (max-width: 560px) {
    .service_list li {
        width: 100%;
    }
}



.about_card {
    position: relative;
    background-color: #fff;
    padding: 4em;
    box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
}
.about_card + .about_card {
    margin-top: 3em;
}
.about_card h3 {
    position: relative;
    padding-left: 1.5em;
    font-size: 1.3em;
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    margin-bottom: 1.5em;
}
.about_card h3::before {
    position: absolute;
    content: "";
    width: .1em;
    height: 90%;
    background: #003b46;
    left: .5em;
    transform: rotate(45deg);
    top: 0;
    bottom: 0;
    margin: auto;
}

.about_img {
    width: 47%;
    display: block;
    padding: 1em;
    transition-duration: .4s;
}

.about_photo{
    display: flex;
    justify-content: space-between;
}

.about_photo img{
  flex-basis:calc((100% - 10px) / 2);
  max-width:calc((100% - 10px) / 2);
}









@media (max-width: 960px) {
    .about_card {
        padding: 2.5em 20px;
        margin-right: -10px;
        margin-left: -10px;
    }
}
/*.greeting_box {
}
.greeting_image {
    position: absolute;
    right: 0;
    top: 0;
    width: 40%;
    height: 100%;
    background: url(/img/img_test01.jpg);
    background-size: cover;
    background-position: top center;
}
.greeting_text {
    width: 90%;
    padding-right: 2em;
    padding-left: 1em;
    line-height: 1.8;
}
@media (max-width: 560px) {
    .greeting_image {
        position: relative;
        padding-bottom: 100%;
        width: 100%;
        margin-bottom: 1em;
    }
    .greeting_text {
        width: 100%;
        padding: 0;
    }
}*/


.lawyers_card {
    display: flex;
    background: #fff;
    padding: 4em;
    box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
}
.lawyers_card + .lawyers_card {
    margin-top: 3em;
}
.lawyers_image {
    overflow: hidden;
    border-radius: 50%;
    width:40%;
    max-width: 420px;
    margin: auto;
}
.lawyers_image img {
    display: block;
}
.lawyers_content {
    background-color: #fff;
    flex: 1;
    /*padding-left: 4em;*/
}

.lawyers_position {
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
}
.lawyers_name {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.5em;
    margin: .5em 0;
    font-weight: bold;
    letter-spacing: .15em;
}
.lawyers_name-en {
    font-family: 'Noto Serif JP', serif;
    color: #003b46;
    font-weight: bold;
    margin-bottom: 2em;
}

.lawyers_content ul{
    padding-left: 20px;
}
.lawyers_content li{
    list-style: disc;
    margin-bottom: 3px;
}
.lawyers_content li:last-child{
    margin-bottom: 0;
}
.lawyers_content li::marker{
    color:#003b46;
}

@media (max-width: 560px) {
    .lawyers_card {
        padding: 2.5em 20px;
        flex-direction: column;
    }
    .lawyers_image {
        width: 100%;
    }
    .lawyers_content {
        padding: 1em 0;
    }
}


.table-layout {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
}
.table-layout > * {
    border-top: 1px solid #ccc;
    padding: 1.5em 0;
}
.table-layout dt {
    width: 20%;
    padding-left: 1em;
}
.table-layout dd {
    width: 80%;
}
.table-layout > * {
    border-top: 1px solid #ccc;
    padding: 1.5em 0;
}

@media (max-width: 960px) {
    .table-layout > * {
        padding: 1em 0;
        width: 100% !important;
    }
    .table-layout dt {
        color: #003b46;
        padding: 1em 0 0;
        font-weight: bold;
    }
    .table-layout dd {
        border: none;
        padding-top: .5em;
    }
}


#container {
    animation: fadein 2s forwards;
}
@keyframes fadein {
    0% {opacity: 0}
    100% {opacity: 1}
}


.mb5 {
    margin-bottom: .5em !important;
}
.mb10 {
    margin-bottom: 1em !important;
}
.mb15 {
    margin-bottom: 1.5em !important;
}
.mb20 {
    margin-bottom: 2em !important;
}
.mb25 {
    margin-bottom: 2.5em !important;
}
.mb30 {
    margin-bottom: 3em !important;
}
.mb35 {
    margin-bottom: 3.5em !important;
}
.mb40 {
    margin-bottom: 4em !important;
}
.mb45 {
    margin-bottom: 4.5em !important;
}
.mb50 {
    margin-bottom: 5em !important;
}
.mb60 {
    margin-bottom: 6em !important;
}
.mb65 {
    margin-bottom: 6.5em !important;
}

.txtRed {
    color: #f3212d;
}
.txtBlue {
    color: #2196f3;
}

.tCenter {
    text-align: center;
}
.tLeft {
    text-align: left;
}
.tRight {
    text-align: right;
}
.fBold {
    font-weight: bold;
}