:root {
--text: #1E3135;
--primary: #009FAF;
--primary80: rgba(0, 159, 175, .8);
--primary60: rgba(0, 159, 175, .6);
--primary50: rgba(0, 159, 175, .5);
--primary40: rgba(0, 159, 175, .4);
--primary30: rgba(0, 159, 175, .3);
--primary15: rgba(0, 159, 175, 0.15);
--primary10: rgba(0, 159, 175, 0.1);
--primary8: rgba(0, 159, 175, 0.08);
--primary5: rgba(0, 159, 175, 0.05);
--accent: #EC6951;
--accent30: rgba(236, 105, 81, .3);
--accent10: rgba(236, 105, 81, .1);
--wh: #ffffff;
--wh60: rgba(255, 255, 255, .6);
--wh70: rgba(255, 255, 255, .7);
--bk: #000;
--bk2: #333;
--red: #E83328;
--red2: #B2292C;
--gray: #ccc;
--gray2: #8B8A8A;
--gray3: #f9f9f9;
--gray4: #B5B5B5;
--gray5: #f5f5f5;
--gray6_40: rgba(225, 225, 225, .4);
--yellow: #FFF79C;
--green: #B2E2E7;
} .hero {
position: relative;
}
.hero::before {
position: absolute;
content: "";
width: 140%;
height: 680px;
-webkit-transform: skew(-10deg, -10deg);
transform: skew(-10deg, -10deg);
background: rgba(0, 159, 175, 0.1);
left: -10%;
top: 13%;
z-index: -1;
}
@media only screen and (max-width: 1024px) {
.hero::before {
height: 380px;
left: -20%;
}
}
@media only screen and (max-width: 767px) {
.hero::before {
height: 270px;
top: 34%;
left: -20%;
}
}
.hero .hero_inner {
margin: 40px auto 220px;
max-width: 1360px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0 68px;
}
@media only screen and (max-width: 1024px) {
.hero .hero_inner {
margin: 20px auto 100px;
width: calc(100% - 30px);
gap: 0 34px;
}
}
@media only screen and (max-width: 767px) {
.hero .hero_inner {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 60px 0;
}
}
.hero .hero_inner .hero01 h1 {
margin-bottom: 20px;
color: #E1E1E1;
font-size: clamp(3.6rem, 4vw, 9rem);
font-weight: 500;
}
.hero .hero_inner .hero01 h1 span {
padding-left: 38px;
color: var(--text);
font-size: clamp(1.8rem, 2vw, 4.5rem);
}
@media only screen and (max-width: 1024px) {
.hero .hero_inner .hero01 h1 span {
padding-left: 16px;
}
}
.hero .hero_inner .hero01 .hero01_02 {
margin-bottom: 20px;
font-weight: 500;
}
@media only screen and (min-width: 768px) {
.hero .hero_inner .hero01 .hero01_02 {
display: none;
}
}
.hero .hero_inner .hero01 .hero01_02 .catch01 {
margin-left: 1em;
margin-bottom: 10px;
font-family: "Noto Serif JP", serif;
font-size: 2.558rem;
letter-spacing: 0.05em;
}
.hero .hero_inner .hero01 .hero01_02 .catch02 {
margin-left: 20%;
font-size: 1.3rem;
letter-spacing: 0.05em;
}
.hero .hero_inner .hero01 figure {
width: 100%;
max-width: 1050px;
-webkit-box-shadow: 23px 21px 36.3px rgba(0, 0, 0, 0.07);
box-shadow: 23px 21px 36.3px rgba(0, 0, 0, 0.07);
}
.hero .hero_inner .hero02 {
color: var(--text);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
font-weight: 500;
}
@media only screen and (max-width: 767px) {
.hero .hero_inner .hero02 {
display: none;
}
}
.hero .hero_inner .hero02 .catch01 {
margin-top: 0;
margin-left: 20px;
font-family: "Noto Serif JP", serif;
font-size: 6.396rem;
font-size: clamp(3.4rem, 5vw, 6.396rem);
letter-spacing: 0.18em;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-font-feature-settings: initial;
font-feature-settings: initial;
}
.hero .hero_inner .hero02 .catch02 {
margin-top: 150px;
margin-top: 100%;
margin-left: 18px;
font-size: 3.2rem;
font-size: clamp(1.8rem, 2vw, 3.2rem);
letter-spacing: 0.18em;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-font-feature-settings: initial;
font-feature-settings: initial;
}
@media only screen and (max-width: 1024px) {
.hero .hero_inner .hero02 .catch02 {
margin-top: 75px;
}
}
.hero .hero_inner .hero02 .catch03 {
margin-top: 370px;
margin-top: 182%;
font-size: 3.2rem;
font-size: clamp(1.8rem, 2vw, 3.2rem);
letter-spacing: 0.18em;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-font-feature-settings: initial;
font-feature-settings: initial;
}
@media only screen and (max-width: 1024px) {
.hero .hero_inner .hero02 .catch03 {
margin-top: 185px;
}
}
.p_lead {
margin: 0 auto;
width: calc(100% - 30px);
}
.p_lead p {
font-size: 2.8rem;
font-weight: 500;
line-height: 2.5;
letter-spacing: 0.1em;
text-align: center;
}
@media only screen and (max-width: 1024px) {
.p_lead p {
font-size: 2rem;
}
}
@media only screen and (max-width: 767px) {
.p_lead p {
font-size: 1.7rem;
}
}
.lawyers_sec {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 1440px; }
@media only screen and (max-width: 767px) {
.lawyers_sec {
width: calc(100% - 30px);
}
}
.lawyers_sec::before {
position: absolute;
content: "";
width: 130vw;
height: 50%;
-webkit-transform: skew(10deg, 10deg);
transform: skew(10deg, 10deg) translateY(50%);
background: rgba(0, 159, 175, 0.1);
bottom: 50%;
left: calc(-1 * (130vw - 1440px) / 2);
z-index: -1;
}
@media only screen and (max-width: 1439px) {
.lawyers_sec::before {
left: calc(-1 * (130vw - 100%) / 2);
}
}
@media only screen and (max-width: 767px) {
.lawyers_sec::before {
width: 260vw;
height: 60%;
left: calc(-1 * (260vw - 100%) / 2);
bottom: 57%;
}
}
.lawyers_sec .h2box {
position: relative;
margin: 180px auto 120px;
}
@media only screen and (max-width: 767px) {
.lawyers_sec .h2box {
margin: 100px auto 80px;
}
}
.lawyers_sec .h2box .en {
position: absolute;
font-size: 13rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
color: var(--gray6_40);
bottom: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: -1;
}
@media only screen and (max-width: 767px) {
.lawyers_sec .h2box .en {
font-size: 5rem;
font-weight: 500;
}
}
.lawyers_sec .h2box h2 {
font-size: 4.5rem;
font-weight: 500;
text-align: center;
}
@media only screen and (max-width: 767px) {
.lawyers_sec .h2box h2 {
font-size: 2.6rem;
}
}
.lawyers_sec .lawyers_wrap {
margin: 30px auto 280px;
width: 76.4%;
max-width: 1100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 40px 0;
}
@media only screen and (max-width: 1024px) {
.lawyers_sec .lawyers_wrap {
margin: 30px auto 50px;
}
}
@media only screen and (max-width: 767px) {
.lawyers_sec .lawyers_wrap {
margin: 40px auto 140px;
width: calc(100% - 30px);
gap: 40px 0;
}
}
.lawyers_sec .lawyers_wrap .lawyer_box {
width: 48%;
max-width: 450px;
-webkit-box-shadow: 2px 4px 15px rgba(37, 37, 37, 0.1);
box-shadow: 2px 4px 15px rgba(37, 37, 37, 0.1);
}
@media only screen and (max-width: 767px) {
.lawyers_sec .lawyers_wrap .lawyer_box {
margin: 0 auto;
width: 100%;
}
}
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base {
position: relative;
padding: 30px 35px;
height: 260px;
background: var(--wh);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (max-width: 1024px) {
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base {
padding: 30px 15px;
height: 220px;
}
}
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base p {
color: var(--bk);
font-weight: 500;
}
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base p.office {
font-size: 2.2rem;
letter-spacing: 0.08em;
}
@media only screen and (max-width: 1024px) {
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base p.office {
font-size: 1.8rem;
}
}
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base p.job_post {
color: #939393;
font-size: 2rem;
}
@media only screen and (max-width: 1024px) {
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base p.job_post {
font-size: 1.6rem;
}
}
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base p.name {
font-size: 4.5rem;
font-weight: 700;
}
@media only screen and (max-width: 1024px) {
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base p.name {
font-size: 3rem;
}
}
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base p.name ruby rt {
margin-bottom: 5px;
}
@media only screen and (max-width: 1024px) {
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base p.name ruby rt {
font-size: 1rem;
}
}
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base::after {
position: absolute;
content: "";
width: 140px;
aspect-ratio: 1;
-webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
clip-path: polygon(0 100%, 100% 0, 100% 100%);
background: var(--primary);
bottom: 0;
right: 0;
}
@media only screen and (max-width: 1024px) {
.lawyers_sec .lawyers_wrap .lawyer_box .txt_base::after {
width: 70px;
}
}  .single .post_sec .main_width {
max-width: 760px;
}
.single .post_head {
padding-top: 160px;
margin-bottom: 50px;
border-bottom: 1px solid var(--gray4);
}
@media only screen and (max-width: 1024px) {
.single .post_head {
padding-top: 80px;
}
}
.single .post_head h1 {
margin-top: 20px;
margin-bottom: 20px;
font-size: clamp(3rem, 3vw, 4.5rem);
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.8;
}
.single .post_head h1 ruby rt {
margin-bottom: 5px;
}
@media only screen and (max-width: 1024px) {
.single .post_head h1 ruby rt {
font-size: 1rem;
}
}
.single .post_head p {
color: var(--bk);
font-weight: 500;
}
.single .post_head p.office {
font-size: 2.2rem;
letter-spacing: 0.08em;
}
@media only screen and (max-width: 1024px) {
.single .post_head p.office {
font-size: 1.8rem;
}
}
.single .post_head p.job_post {
margin-top: 10px;
color: #939393;
font-size: 2rem;
}
@media only screen and (max-width: 1024px) {
.single .post_head p.job_post {
font-size: 1.6rem;
}
}
.lawywer_main {
padding-top: 80px;
line-height: 1.8;
}