:root {
--text: #1E3135;
--primary: #009FAF;
--primary95: rgba(0, 159, 175, .95);
--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;
height: 380px;
background: var(--primary10);
}
@media only screen and (max-width: 1024px) {
.hero {
height: 190px;
}
}
.hero.list::before {
position: absolute;
content: "";
background: var(--wh);
width: 180px;
height: 100%;
top: 0;
left: 12.4%;
-webkit-transform: skew(-40deg);
transform: skew(-40deg);
}
@media only screen and (max-width: 1024px) {
.hero.list::before {
width: 90px;
}
}
.hero.list .h1box {
position: absolute;
padding-left: 11%;
height: 100%;
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: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 2;
}
.hero.list .h1box .eng {
position: relative;
margin-bottom: 26px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
color: #DBDBDB;
font-size: clamp(3rem, 3vw, 6rem);
font-weight: 700;
}
.hero.list .h1box .eng::after {
position: absolute;
content: "";
width: 100%;
height: 3px;
background: -webkit-gradient(linear, left top, right top, from(rgb(0, 159, 175)), color-stop(35%, rgb(0, 159, 175)), color-stop(35%, rgb(255, 255, 255)), to(rgb(255, 255, 255)));
background: linear-gradient(90deg, rgb(0, 159, 175) 0%, rgb(0, 159, 175) 35%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 100%);
bottom: -2px;
left: 0;
}
.hero.list .h1box h1 {
padding-left: 2em;
font-size: clamp(3.2rem, 3.2vw, 6.4rem);
font-weight: 700;
}
@media only screen and (max-width: 1024px) {
.hero.list .h1box h1 {
padding-left: 1em;
}
}
.hero.list .h1box h1 .s_txt {
font-size: 2rem;
font-weight: 500;
display: block;
}
.hero.catlist figure {
position: absolute;
height: 100%;
top: 0;
right: 0;
overflow: hidden;
}
.hero.catlist figure img {
width: auto;
height: 100%;
}
.hero.catlist .ttlbox {
position: relative;
height: 160px;
top: 0;
left: 4.6%;
}
@media only screen and (max-width: 767px) {
.hero.catlist .ttlbox {
height: 80px;
left: 3%;
}
}
.hero.catlist .ttlbox::before {
position: absolute;
content: "Column";
color: #F9F9F9;
font-size: clamp(8rem, 8vw, 16rem);
font-weight: 700;
line-height: 1;
bottom: -10px;
left: 0;
z-index: -1;
}
@media only screen and (max-width: 767px) {
.hero.catlist .ttlbox::before {
content: none;
}
}
.hero.catlist .ttlbox .ttl {
position: absolute;
padding-right: 266px;
bottom: 0;
}
@media only screen and (max-width: 767px) {
.hero.catlist .ttlbox .ttl {
padding-right: 110px;
}
}
.hero.catlist .ttlbox .ttl span {
font-size: clamp(3rem, 3.4vw, 6.4rem);
font-weight: 500;
text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
display: block;
bottom: 0;
}
.hero.catlist .ttlbox .ttl::after {
position: absolute;
content: "";
width: 250px;
height: 5px;
background: var(--primary);
top: calc(50% - 2px);
right: 0;
}
@media only screen and (max-width: 767px) {
.hero.catlist .ttlbox .ttl::after {
width: 100px;
height: 2px;
top: calc(50% - 1px);
}
}
.hero.catlist h1 {
position: absolute;
padding: 16px 0;
width: 100%;
color: var(--bk);
font-size: clamp(2.5rem, 2.5vw, 5rem);
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: rgba(255, 255, 255, 0.8);
bottom: 20%;
left: 0;
}
@media only screen and (max-width: 767px) {
.hero.catlist h1 {
bottom: 10%;
}
}
.h2box .eng {
color: var(--gray);
font-size: 4.5rem;
font-weight: 500;
}
@media only screen and (max-width: 768px) {
.h2box .eng {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 767px) {
.h2box .eng {
font-size: 2rem;
}
}
.h2box h2 {
position: relative;
margin-bottom: 100px;
padding-right: 266px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@media only screen and (max-width: 768px) {
.h2box h2 {
margin-bottom: 50px;
}
}
@media only screen and (max-width: 767px) {
.h2box h2 {
padding-right: 133px;
}
}
.h2box h2 span {
font-size: 6.4rem;
font-weight: 500;
text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
display: block;
}
@media only screen and (max-width: 768px) {
.h2box h2 span {
font-size: 3.4rem;
}
}
@media only screen and (max-width: 767px) {
.h2box h2 span {
font-size: 2.6rem;
}
}
.h2box h2::after {
position: absolute;
content: "";
width: 250px;
height: 5px;
background: var(--primary);
top: calc(50% - 2px);
right: 0;
}
@media only screen and (max-width: 767px) {
.h2box h2::after {
width: 120px;
height: 2px;
top: calc(50% - 1px);
}
}
.column_categories {
padding-top: 180px;
}
@media only screen and (max-width: 1024px) {
.column_categories {
padding-top: 100px;
}
}
.post_area {
margin: 0 auto;
padding-top: 160px;
max-width: 1120px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8vw 36px;
}
@media only screen and (max-width: 1024px) {
.post_area {
padding-top: 80px;
}
}
@media only screen and (max-width: 767px) {
.post_area {
grid-template-columns: 1fr;
}
} #toc_container {
padding: 36px 47px 30px !important;
}
#toc_container .toc_title {
margin-bottom: 30px;
text-align: left !important;
font-weight: 500;
}
#toc_container .toc_list li a {
margin-top: 5px;
letter-spacing: 0.1em;
}  .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-bottom: 40px;
font-size: clamp(2rem, 2vw, 3.244rem);
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1.8;
}
@media only screen and (max-width: 767px) {
.single .post_head h1 {
margin-bottom: 20px;
}
}
.single .post_head dl {
margin-bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.single .post_head dl dt {
width: 100px;
color: var(--gray4);
font-size: clamp(2rem, 2vw, 1.422rem);
font-weight: 500;
letter-spacing: 0.1em;
}
.single .post_head dl dd {
font-size: clamp(2rem, 2vw, 1.422rem);
font-weight: 500;
}
.single .post_head dl dd.cat span {
padding: 3px 12px;
color: var(--wh);
background: var(--primary);
font-weight: 700;
border-radius: 5px;
display: inline-block;
}
.single .post_body h2 {
position: relative;
margin-top: 4em;
padding-top: 16px;
font-size: clamp(2rem, 2vw, 2.56rem);
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.8;
border-top: 4px solid var(--gray4);
}
@media only screen and (max-width: 767px) {
.single .post_body h2 {
margin-top: 40px;
padding-top: 8px;
}
}
.single .post_body h2::before {
position: absolute;
content: "";
width: 210px;
height: 4px;
background: var(--primary);
top: -4px;
left: 0;
}
.single .post_body h3 {
margin-top: 3.6em;
margin-bottom: 1em;
padding: 12px;
font-size: clamp(1.8rem, 1.8vw, 2rem);
font-weight: 500;
background: var(--primary8);
}
.single .post_body h4 {
position: relative;
margin-top: 3.2em;
margin-bottom: 1em;
padding: 12px;
font-size: clamp(1.8rem, 1.8vw, 2rem);
font-weight: 500;
}
.single .post_body h4::before {
position: absolute;
content: "";
width: 3px;
height: 64%;
background: var(--primary);
top: 18%;
left: 0;
}
.single .post_body {
line-height: 1.8;
}
.single .post_body p {
margin-top: 1.5em;
margin-bottom: 1em;
line-height: 1.8;
}
.single .post_body p.lead {
margin: 50px 0;
letter-spacing: 0.1em;
line-height: 1.8;
}
.single .post_lawyer {
margin-top: 100px;
padding: 22px 25px;
border: 1px solid var(--gray4);
}
@media only screen and (max-width: 767px) {
.single .post_lawyer {
margin-top: 50px;
}
}
.single .post_lawyer .ttl {
margin-bottom: 15px;
letter-spacing: 0.1em;
line-height: 1.8;
}
.single .post_lawyer .box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 37px;
}
.single .post_lawyer .box figure {
margin-top: 20px;
width: 102px;
}
.single .post_lawyer .box figure img {
width: 102px;
height: 102px;
border-radius: 50%;
}
.single .post_lawyer .box .txt p {
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1.8;
}
.single .post_lawyer .box .txt p.name {
margin-bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 0 10px;
}
.single .post_lawyer .box .txt p.name span {
padding-bottom: 2px;
color: var(--primary);
font-size: 1.4rem;
}
.single .post_lawyer .box .txt p.name ruby {
font-size: 2rem;
}
.single .post_lawyer .box .txt p.name ruby rt {
margin-bottom: 2px;
font-size: 1.3rem;
font-weight: 400;
}
.single .tag {
margin-top: 16px;
}
.single .tag dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.single .tag dl dt {
width: 88px;
color: var(--gray4);
font-size: 1.422rem;
letter-spacing: 0.1em;
}
.single .tag dl dd ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0 16px;
font-size: 1.422rem;
letter-spacing: 0.1em;
}
.single .tag dl dd ul li {
color: var(--gray4);
}
.single .tag dl dd ul li span {
color: var(--primary);
}
.single .post_recommend {
margin-top: 100px;
padding-top: 64px;
padding-bottom: 64px;
background: var(--primary5);
}
@media only screen and (max-width: 767px) {
.single .post_recommend {
margin-top: 50px;
padding-top: 32px;
padding-bottom: 32px;
}
}
.single .post_recommend h2 {
font-size: clamp(2rem, 2vw, 3.2rem);
font-weight: 500;
text-align: center;
}
.single .post_recommend .post_area {
padding-top: 46px;
}