html {
margin: 0;
padding: 0;
height: 100%;
height: -webkit-fill-available;
}
body {
scroll-behavior: smooth;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
min-height: 100vh;
min-height: -webkit-fill-available;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
}
dfn {
font-style: normal;
}
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
ul[class],
ol[class] {
list-style: none;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
a:not([class]) {
text-decoration-skip-ink: auto;
}
img {
max-width: 100%;
height: auto;
display: block;
}
article > * + * {
margin-top: 1em;
}
a {
text-decoration: none;
word-break: break-all;
}
a:focus-visible {
outline: var(--accent-color1) auto 1px;
}
sub {
vertical-align: bottom;
position: relative;
top: 0.1rem;
}
input,
button,
textarea,
select {
}
[type=search]:-webkit-search-cancel-button,
[type=search]:-webkit-search-decoration {
-webkit-appearance: none;
}
input[type=text], input[type=search] {
padding: 0;
border: none;
border-radius: 0;
outline: none;
background: none;
appearance: none;
-webkit-appearance: none;
}
input[type=checkbox]:checked + label {
background: #ff0000;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
background: transparent;
}
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
resize: none;
padding: 0;
border: 0;
outline: none;
background: transparent;
}
button,
input[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: none;
outline: none;
background: transparent;
}
iframe {
width: 100%;
border: none;
overflow-y: hidden;
}
* {
max-height: 100000000px;
}
[tabindex="-1"]:focus {
outline: 0;
}
html {
font-size: 62.5%;
word-break: break-word;
overflow-wrap: break-word;
}
body {
font-size: 1.6rem;
line-height: 1.8;
color: var(--text-color1);
}
.h1-basic {
font-size: 4.8rem;
font-weight: 300;
line-height: 1.5;
text-align: center;
}
.h1-small {
font-size: 2rem;
font-weight: 600;
line-height: 1.5;
text-align: center;
}
.h2-basic {
font-size: 2.8rem;
font-weight: 400;
line-height: 1.5;
}
.h3-basic {
font-size: 2.2rem;
font-weight: 400;
line-height: 1.5;
}
.h4-basic {
font-size: 1.8rem;
font-weight: 400;
line-height: 1.3;
}
.h5-basic {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5;
}
.h1-article {
font-size: 3.2rem;
font-weight: 400;
line-height: 1.5;
}
.h2-article {
font-size: 2.8rem;
font-weight: 400;
line-height: 1.5;
}
.h3-article {
font-size: 2.4rem;
font-weight: 400;
line-height: 1.5;
}
.h4-article {
font-size: 2rem;
font-weight: 400;
line-height: 1.5;
}
strong,
.strong {
font-weight: 700;
line-height: 1.7;
}
figcaption,
.figcaption {
font-size: 1.2rem;
font-weight: 400;
line-height: 1.7;
}
.lead-text {
font-size: 2rem;
font-weight: 400;
line-height: 2;
}
@media screen and (max-width: 959px) {
.h1-basic {
font-size: 3.2rem;
}
.h2-basic {
font-size: 2rem;
}
.h3-basic {
font-size: 1.8rem;
}
.h1-article {
font-size: 2.8rem;
}
.h2-article {
font-size: 2.4rem;
}
.h3-article {
font-size: 1.9rem;
}
.h4-article {
font-size: 1.8rem;
}
}
@media screen and (max-width: 449px) {
.h1-basic {
font-size: 2.4rem;
}
.h4-basic {
font-size: 1.6rem;
}
.h1-article {
font-size: 2.4rem;
}
.h1-small {
font-size: 1.8rem;
}
.h2-article {
font-size: 2rem;
}
.lead-text {
font-size: 1.6rem;
}
}
.h2-basic,
.h2-article {
position: relative;
margin-bottom: 32px;
padding-bottom: 14px;
}
.h2-basic::before,
.h2-article::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: var(--bg2);
}
.h2-basic::after,
.h2-article::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 4px;
border-radius: 4px;
background-color: var(--primary-color);
}
.h2-basic.text-only,
.h2-article.text-only {
padding-bottom: 0;
}
.h2-basic.text-only::before, .h2-basic.text-only::after,
.h2-article.text-only::before,
.h2-article.text-only::after {
display: none;
}
@media screen and (max-width: 449px) {
.h2-basic,
.h2-article {
margin-bottom: 24px;
}
}
:root {
--text-color1: #273C4B;
--text-color2: #fff;
--text-color3: #7C8A95;
--primary-color: #2E6AAE;
--accent-color1: #407BBE;
--error-color: #da093b;
--bg1: #EDF3F7;
--bg2: #E0E6EB;
--bg3: #DDE5EB;
--hover-bg1: #DDE6F2;
--alert-bg1: #0969DA;
--alert-bg2: #FFEBE9;
--alert-bg3: #FFF8C5;
--alert-bg4: #DAFBE1;
--border1: #CFDAE3;
--border2: #9E9E9F;
--border3: #273C4B;
--vaccine: #3DA770;
}
a,
button {
color: var(--text-color1);
}
.primary {
color: var(--primary-color);
}
.error-text {
color: var(--error-color);
}
.text-type-1 {
color: var(--text-color1);
}
.text-type-2 {
color: var(--text-color2);
}
.text-type-3 {
color: var(--text-color3);
}
.bg-type-1 {
background: var(--bg1);
}
.bg-type-2 {
background: var(--bg2);
}
.bg-type-3 {
background: var(--bg3);
}
.bg-primary {
background: var(--primary-color);
}
.bg-accent {
background: var(--accent-color1);
}
table th.bg, table td.bg {
mix-blend-mode: multiply;
}
.default-content {
max-width: 1400px;
width: 80vw;
margin: 0 auto 96px;
}
.article-content {
padding: 0 5vw;
}
.article-inner {
max-width: 660px;
margin: 40px auto 96px;
}
.col-10-content {
width: 83%;
margin: 0 auto;
}
.col-8-content {
width: 65%;
margin: 0 auto;
}
.col-6-content {
width: 55%;
margin: 0 auto;
}
.max-w862 {
max-width: 862px;
margin: 0 auto;
}
@media screen and (max-width: 1919px) {
.w1440-col-full {
width: 100%;
}
.w1440-col-10-content {
width: 83%;
margin: 0 auto;
}
.w1440-col-8-content {
width: 65%;
margin: 0 auto;
}
}
@media screen and (max-width: 959px) {
.default-content {
width: 100%;
max-width: 100%;
padding: 0 5vw;
}
.col-10-content,
.col-8-content {
width: 100%;
}
.tb-col-4-content {
width: 66%;
}
}
@media screen and (max-width: 449px) {
.article-inner {
width: 90vw;
max-width: 100%;
}
.article-inner.sp-breadcrumb-hide {
margin-top: 20px;
}
.tb-col-4-content {
width: 100%;
}
.sp-col-4-content {
width: 67%;
}
}
.h1-basic {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.h1-basic span {
display: inline-block;
max-width: 1400px;
width: 80vw;
}
@media screen and (max-width: 449px) {
.h1-basic span {
width: 90vw;
}
}
.flex {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.flex.wrap {
flex-flow: wrap;
}
.flex.nowrap {
flex-wrap: nowrap;
}
.flex.gap0 {
gap: 0;
}
.flex.center {
justify-content: center;
}
.flex.align-center {
align-items: center;
}
.flex.space-between {
justify-content: space-between;
}
.flex.card.gap0 {
margin: 0 -16px;
}
.flex-colum {
display: flex;
flex-direction: column;
}
.flex-end {
align-items: flex-end;
}
.base-line {
align-items: baseline;
}
@media screen and (max-width: 449px) {
.flex.sp-align-left {
align-items: flex-start;
}
.flex.sp-flex-column {
flex-direction: column;
}
}
.grid {
width: 100%;
display: grid;
height: auto;
grid-template-columns: repeat(2, 1fr);
}
.grid.col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid.col-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid.col-2-lg {
grid-template-columns: 1fr calc((100% - 64px) / 3);
}
.grid.col-2-lg-reverse {
grid-template-columns: calc((100% - 64px) / 3) 1fr;
}
.grid.col-2-md {
grid-template-columns: 65% 32%;
gap: 3%;
}
.grid.col-2-sm {
grid-template-columns: 1fr calc((100% - 64px) / 7);
}
.grid.col-2-sm-reverse {
grid-template-columns: calc((100% - 64px) / 7) 1fr;
}
.grid.col-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid.col-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid.col-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid.y-center {
align-items: center;
}
.grid.y-end {
align-items: flex-end;
}
.grid.x-center {
justify-content: center;
}
@media screen and (max-width: 959px) {
.grid {
gap: 16px;
}
.grid.tb-col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid.tb-col-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid.tb-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid.tb-col-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid.tb-col-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid.col-2-md {
grid-template-columns: 55% 42%;
}
}
@media screen and (max-width: 699px) {
.grid.w699-col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid.w699-col-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid.w699-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid.w699-col-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid.w699-col-5 {
grid-template-columns: repeat(5, 1fr);
}
}
@media screen and (max-width: 449px) {
.grid.col-2-lg {
grid-template-columns: 1fr calc((100% - 32px) / 3);
}
.grid.col-2-lg.tb-col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid.col-2-lg-revarse {
grid-template-columns: calc((100% - 32px) / 3) 1fr;
}
.grid.col-2-lg-revarse.tb-col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid.col-2-sm {
grid-template-columns: 1fr calc((100% - 32px) / 5);
}
.grid.col-2-sm.tb-col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid.col-2-sm-revarse {
grid-template-columns: calc((100% - 32px) / 5) 1fr;
}
.grid.col-2-sm-revarse.tb-col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid.sp-col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid.sp-col-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid.sp-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid.sp-col-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid.sp-col-5 {
grid-template-columns: repeat(5, 1fr);
}
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-3 {
order: 4;
}
.reverse .order-1,
.sp-reverse .order-1 {
order: 4;
}
.reverse .order-2,
.sp-reverse .order-2 {
order: 3;
}
.reverse .order-3,
.sp-reverse .order-3 {
order: 2;
}
.reverse .order-4,
.sp-reverse .order-4 {
order: 1;
}
@media screen and (max-width: 699px) {
.reverse .order-1 {
order: 1;
}
.reverse .order-2 {
order: 2;
}
.reverse .order-3 {
order: 3;
}
.reverse .order-4 {
order: 4;
}
}
@media screen and (max-width: 449px) {
.sp-reverse .order-1 {
order: 1;
}
.sp-reverse .order-2 {
order: 2;
}
.sp-reverse .order-3 {
order: 3;
}
.sp-reverse .order-4 {
order: 4;
}
}
.gap-0 {
gap: 0px;
}
.col-gap-0 {
column-gap: 0px;
}
.row-gap-0 {
row-gap: 0px;
}
@media screen and (max-width: 959px) {
.tb-gap-0 {
gap: 0px !important;
}
.tb-col-gap-0 {
column-gap: 0px !important;
}
.tb-row-gap-0 {
row-gap: 0px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-0 {
gap: 0px !important;
}
.w699-col-gap-0 {
column-gap: 0px !important;
}
.w699-row-gap-0 {
row-gap: 0px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-0 {
gap: 0px !important;
}
.sp-col-gap-0 {
column-gap: 0px !important;
}
.sp-row-gap-0 {
row-gap: 0px !important;
}
}
.gap-2 {
gap: 2px;
}
.col-gap-2 {
column-gap: 2px;
}
.row-gap-2 {
row-gap: 2px;
}
@media screen and (max-width: 959px) {
.tb-gap-2 {
gap: 2px !important;
}
.tb-col-gap-2 {
column-gap: 2px !important;
}
.tb-row-gap-2 {
row-gap: 2px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-2 {
gap: 2px !important;
}
.w699-col-gap-2 {
column-gap: 2px !important;
}
.w699-row-gap-2 {
row-gap: 2px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-2 {
gap: 2px !important;
}
.sp-col-gap-2 {
column-gap: 2px !important;
}
.sp-row-gap-2 {
row-gap: 2px !important;
}
}
.gap-4 {
gap: 4px;
}
.col-gap-4 {
column-gap: 4px;
}
.row-gap-4 {
row-gap: 4px;
}
@media screen and (max-width: 959px) {
.tb-gap-4 {
gap: 4px !important;
}
.tb-col-gap-4 {
column-gap: 4px !important;
}
.tb-row-gap-4 {
row-gap: 4px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-4 {
gap: 4px !important;
}
.w699-col-gap-4 {
column-gap: 4px !important;
}
.w699-row-gap-4 {
row-gap: 4px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-4 {
gap: 4px !important;
}
.sp-col-gap-4 {
column-gap: 4px !important;
}
.sp-row-gap-4 {
row-gap: 4px !important;
}
}
.gap-8 {
gap: 8px;
}
.col-gap-8 {
column-gap: 8px;
}
.row-gap-8 {
row-gap: 8px;
}
@media screen and (max-width: 959px) {
.tb-gap-8 {
gap: 8px !important;
}
.tb-col-gap-8 {
column-gap: 8px !important;
}
.tb-row-gap-8 {
row-gap: 8px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-8 {
gap: 8px !important;
}
.w699-col-gap-8 {
column-gap: 8px !important;
}
.w699-row-gap-8 {
row-gap: 8px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-8 {
gap: 8px !important;
}
.sp-col-gap-8 {
column-gap: 8px !important;
}
.sp-row-gap-8 {
row-gap: 8px !important;
}
}
.gap-16 {
gap: 16px;
}
.col-gap-16 {
column-gap: 16px;
}
.row-gap-16 {
row-gap: 16px;
}
@media screen and (max-width: 959px) {
.tb-gap-16 {
gap: 16px !important;
}
.tb-col-gap-16 {
column-gap: 16px !important;
}
.tb-row-gap-16 {
row-gap: 16px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-16 {
gap: 16px !important;
}
.w699-col-gap-16 {
column-gap: 16px !important;
}
.w699-row-gap-16 {
row-gap: 16px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-16 {
gap: 16px !important;
}
.sp-col-gap-16 {
column-gap: 16px !important;
}
.sp-row-gap-16 {
row-gap: 16px !important;
}
}
.gap-24 {
gap: 24px;
}
.col-gap-24 {
column-gap: 24px;
}
.row-gap-24 {
row-gap: 24px;
}
@media screen and (max-width: 959px) {
.tb-gap-24 {
gap: 24px !important;
}
.tb-col-gap-24 {
column-gap: 24px !important;
}
.tb-row-gap-24 {
row-gap: 24px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-24 {
gap: 24px !important;
}
.w699-col-gap-24 {
column-gap: 24px !important;
}
.w699-row-gap-24 {
row-gap: 24px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-24 {
gap: 24px !important;
}
.sp-col-gap-24 {
column-gap: 24px !important;
}
.sp-row-gap-24 {
row-gap: 24px !important;
}
}
.gap-32 {
gap: 32px;
}
.col-gap-32 {
column-gap: 32px;
}
.row-gap-32 {
row-gap: 32px;
}
@media screen and (max-width: 959px) {
.tb-gap-32 {
gap: 32px !important;
}
.tb-col-gap-32 {
column-gap: 32px !important;
}
.tb-row-gap-32 {
row-gap: 32px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-32 {
gap: 32px !important;
}
.w699-col-gap-32 {
column-gap: 32px !important;
}
.w699-row-gap-32 {
row-gap: 32px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-32 {
gap: 32px !important;
}
.sp-col-gap-32 {
column-gap: 32px !important;
}
.sp-row-gap-32 {
row-gap: 32px !important;
}
}
.gap-40 {
gap: 40px;
}
.col-gap-40 {
column-gap: 40px;
}
.row-gap-40 {
row-gap: 40px;
}
@media screen and (max-width: 959px) {
.tb-gap-40 {
gap: 40px !important;
}
.tb-col-gap-40 {
column-gap: 40px !important;
}
.tb-row-gap-40 {
row-gap: 40px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-40 {
gap: 40px !important;
}
.w699-col-gap-40 {
column-gap: 40px !important;
}
.w699-row-gap-40 {
row-gap: 40px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-40 {
gap: 40px !important;
}
.sp-col-gap-40 {
column-gap: 40px !important;
}
.sp-row-gap-40 {
row-gap: 40px !important;
}
}
.gap-48 {
gap: 48px;
}
.col-gap-48 {
column-gap: 48px;
}
.row-gap-48 {
row-gap: 48px;
}
@media screen and (max-width: 959px) {
.tb-gap-48 {
gap: 48px !important;
}
.tb-col-gap-48 {
column-gap: 48px !important;
}
.tb-row-gap-48 {
row-gap: 48px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-48 {
gap: 48px !important;
}
.w699-col-gap-48 {
column-gap: 48px !important;
}
.w699-row-gap-48 {
row-gap: 48px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-48 {
gap: 48px !important;
}
.sp-col-gap-48 {
column-gap: 48px !important;
}
.sp-row-gap-48 {
row-gap: 48px !important;
}
}
.gap-56 {
gap: 56px;
}
.col-gap-56 {
column-gap: 56px;
}
.row-gap-56 {
row-gap: 56px;
}
@media screen and (max-width: 959px) {
.tb-gap-56 {
gap: 56px !important;
}
.tb-col-gap-56 {
column-gap: 56px !important;
}
.tb-row-gap-56 {
row-gap: 56px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-56 {
gap: 56px !important;
}
.w699-col-gap-56 {
column-gap: 56px !important;
}
.w699-row-gap-56 {
row-gap: 56px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-56 {
gap: 56px !important;
}
.sp-col-gap-56 {
column-gap: 56px !important;
}
.sp-row-gap-56 {
row-gap: 56px !important;
}
}
.gap-64 {
gap: 64px;
}
.col-gap-64 {
column-gap: 64px;
}
.row-gap-64 {
row-gap: 64px;
}
@media screen and (max-width: 959px) {
.tb-gap-64 {
gap: 64px !important;
}
.tb-col-gap-64 {
column-gap: 64px !important;
}
.tb-row-gap-64 {
row-gap: 64px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-64 {
gap: 64px !important;
}
.w699-col-gap-64 {
column-gap: 64px !important;
}
.w699-row-gap-64 {
row-gap: 64px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-64 {
gap: 64px !important;
}
.sp-col-gap-64 {
column-gap: 64px !important;
}
.sp-row-gap-64 {
row-gap: 64px !important;
}
}
.gap-72 {
gap: 72px;
}
.col-gap-72 {
column-gap: 72px;
}
.row-gap-72 {
row-gap: 72px;
}
@media screen and (max-width: 959px) {
.tb-gap-72 {
gap: 72px !important;
}
.tb-col-gap-72 {
column-gap: 72px !important;
}
.tb-row-gap-72 {
row-gap: 72px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-72 {
gap: 72px !important;
}
.w699-col-gap-72 {
column-gap: 72px !important;
}
.w699-row-gap-72 {
row-gap: 72px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-72 {
gap: 72px !important;
}
.sp-col-gap-72 {
column-gap: 72px !important;
}
.sp-row-gap-72 {
row-gap: 72px !important;
}
}
.gap-80 {
gap: 80px;
}
.col-gap-80 {
column-gap: 80px;
}
.row-gap-80 {
row-gap: 80px;
}
@media screen and (max-width: 959px) {
.tb-gap-80 {
gap: 80px !important;
}
.tb-col-gap-80 {
column-gap: 80px !important;
}
.tb-row-gap-80 {
row-gap: 80px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-80 {
gap: 80px !important;
}
.w699-col-gap-80 {
column-gap: 80px !important;
}
.w699-row-gap-80 {
row-gap: 80px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-80 {
gap: 80px !important;
}
.sp-col-gap-80 {
column-gap: 80px !important;
}
.sp-row-gap-80 {
row-gap: 80px !important;
}
}
.gap-96 {
gap: 96px;
}
.col-gap-96 {
column-gap: 96px;
}
.row-gap-96 {
row-gap: 96px;
}
@media screen and (max-width: 959px) {
.tb-gap-96 {
gap: 96px !important;
}
.tb-col-gap-96 {
column-gap: 96px !important;
}
.tb-row-gap-96 {
row-gap: 96px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-96 {
gap: 96px !important;
}
.w699-col-gap-96 {
column-gap: 96px !important;
}
.w699-row-gap-96 {
row-gap: 96px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-96 {
gap: 96px !important;
}
.sp-col-gap-96 {
column-gap: 96px !important;
}
.sp-row-gap-96 {
row-gap: 96px !important;
}
}
.gap-128 {
gap: 128px;
}
.col-gap-128 {
column-gap: 128px;
}
.row-gap-128 {
row-gap: 128px;
}
@media screen and (max-width: 959px) {
.tb-gap-128 {
gap: 128px !important;
}
.tb-col-gap-128 {
column-gap: 128px !important;
}
.tb-row-gap-128 {
row-gap: 128px !important;
}
}
@media screen and (max-width: 699px) {
.w699-gap-128 {
gap: 128px !important;
}
.w699-col-gap-128 {
column-gap: 128px !important;
}
.w699-row-gap-128 {
row-gap: 128px !important;
}
}
@media screen and (max-width: 449px) {
.sp-gap-128 {
gap: 128px !important;
}
.sp-col-gap-128 {
column-gap: 128px !important;
}
.sp-row-gap-128 {
row-gap: 128px !important;
}
}
.border-top {
padding-top: 24px;
border-top: 1px solid #E0E0E0;
}
.border-bottom {
padding-bottom: 40px;
border-bottom: 1px solid var(--border1);
}
@media screen and (max-width: 449px) {
.border-bottom {
padding-bottom: 24px;
}
}
#group .googleMap iframe,
#outline .googleMap iframe {
aspect-ratio: 66/37;
}
.emboss-12 {
border-radius: 12px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
.deboss-12 {
border-radius: 12px;
background: var(--bg1);
box-shadow: 2px 2px 6px 0px #AFBFC7 inset, -2px -2px 6px 0px #FFF inset;
}
.emboss-9999 {
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
.deboss-9999 {
border-radius: 9999px;
background: var(--bg1);
box-shadow: 2px 2px 6px 0px #AFBFC7 inset, -2px -2px 6px 0px #FFF inset;
}
button:focus-visible {
outline: var(--accent-color1) auto 1px;
}
.speak-none {
speak: none;
}
.tab-wrap {
margin: 0 auto;
}
.tab-basic {
display: flex;
justify-content: flex-start;
align-items: stretch;
cursor: pointer;
gap: 0 8px;
padding: 8px;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
.tab-basic > li {
display: flex;
align-items: stretch;
list-style: outside none none;
text-align: center;
width: 100%;
padding: 0;
transition: all 0.4s;
}
.tab-basic > li button,
.tab-basic > li .search-button {
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
width: 100%;
padding: 16px 24px;
transition: all 0.4s;
border-radius: 9999px;
cursor: pointer;
}
.tab-basic > li button:hover,
.tab-basic > li .search-button:hover {
background: var(--hover-bg1);
box-shadow: 2px 2px 6px 0px #AFBFC7 inset, -2px -2px 6px 0px #FFF inset;
}
.tab-basic > li .search-button {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.tab-basic > li.active button,
.tab-basic > li.active .search-button {
color: var(--primary-color);
background: var(--bg1);
box-shadow: 2px 2px 6px 0px #AFBFC7 inset, -2px -2px 6px 0px #FFF inset;
}
.tab-basic > li.active button:hover,
.tab-basic > li.active .search-button:hover {
background: var(--bg1);
}
.tab-basic.col-3 li {
width: 33.3333333333%;
}
@media screen and (max-width: 959px) {
.tab-basic > li button,
.tab-basic > li .search-button {
padding: 16px 0;
font-size: 1.2rem;
line-height: 1.3;
}
}
@media screen and (max-width: 449px) {
.tab-basic > li button,
.tab-basic > li .search-button {
padding: 8px 0;
}
.tab-basic.sp-col-3 li {
width: 33.3333333333%;
}
}
.search-form {
position: relative;
}
.search-form .search-input {
width: 100%;
min-height: 56px;
margin: 0;
padding: 0 20px 0 24px;
line-height: inherit;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 2px 2px 6px 0px #AFBFC7 inset, -2px -2px 6px 0px #FFF inset;
font-size: 1.6rem;
color: var(--text-color1);
background: rgba(221, 229, 235, 0.5019607843);
}
.search-form .search-input:focus-visible {
outline: var(--accent-color1) auto 1px;
}
.search-form .search-btn {
cursor: pointer;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
right: 16px;
top: 50%;
}
.search-form .search-btn > img {
display: block;
width: 24px;
height: 24px;
}
.search-form ::-webkit-search-cancel-button {
-webkit-appearance: none;
}
@media screen and (max-width: 959px) {
.search-form .search-input {
padding: 0 36px 0 24px;
}
}
.pagination ul {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: fit-content;
height: 48px;
margin: 0 auto;
padding: 0 24px;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
.pagination ul .page-number {
position: relative;
font-size: 1.6rem;
white-space: nowrap;
}
.pagination ul .page-number a {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding-bottom: 2px;
border-radius: 50%;
color: var(--text-color1);
overflow: hidden;
transition: 0.4s;
}
@media (hover: hover) {
.pagination ul .page-number.disabled a:hover {
cursor: default;
}
.pagination ul .page-number:not(.disabled):not(.active) a:not(.prev):not(.next):hover {
border-radius: 9999px;
background: var(--bg1);
box-shadow: 2px 2px 6px 0px #AFBFC7 inset, -2px -2px 6px 0px #FFF inset;
background: var(--hover-bg1);
}
}
.pagination ul .page-number.active a {
border-radius: 9999px;
background: var(--bg1);
box-shadow: 2px 2px 6px 0px #AFBFC7 inset, -2px -2px 6px 0px #FFF inset;
}
.pagination .prev,
.pagination .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pagination .prev a,
.pagination .next a {
display: block;
padding: 24px;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
background: var(--bg1);
transition: 0.4s;
}
.pagination .prev a:before,
.pagination .next a:before {
content: "";
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 24px;
height: 24px;
}
.pagination .prev {
left: -64px;
}
.pagination .prev a:before {
background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Chevron Right'%3E%3Cpath id='shape' d='M9.46875 18L15.4688 12L9.46875 6' stroke='%23407BBE' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
transform: translate(-50%, -50%) rotate(180deg);
}
@media (hover: hover) {
.pagination .prev a:hover:before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M9.46875 18L15.4688 12L9.46875 6' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
transform: translate(-50%, -50%) rotate(180deg);
}
}
.pagination .next {
right: -64px;
}
.pagination .next a:before {
background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Chevron Right'%3E%3Cpath id='shape' d='M9.46875 18L15.4688 12L9.46875 6' stroke='%23407BBE' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
}
@media (hover: hover) {
.pagination .next a:hover:before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M9.46875 18L15.4688 12L9.46875 6' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
}
.pagination ul li:not(.disabled).prev a::after, .pagination ul li:not(.disabled).next a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: scale(0);
border-radius: 50%;
background: var(--primary-color);
transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
.pagination ul li:not(.disabled).prev a:hover::after, .pagination ul li:not(.disabled).next a:hover::after {
transform: scale(1);
}
}
.pagination ul li.disabled::before {
content: "";
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 100%;
background: transparent;
border-radius: 50%;
}
.pagination ul li.disabled.prev a, .pagination ul li.disabled.next a {
background: var(--bg2);
}
.pagination ul li.disabled.prev a:hover, .pagination ul li.disabled.next a:hover {
background: var(--bg2);
cursor: default;
}
.pagination ul li.disabled.prev a:before {
background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Chevron Right'%3E%3Cpath id='shape' d='M9.46875 18L15.4688 12L9.46875 6' stroke='%23BDC5CC' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
transform: translate(-50%, -50%) rotate(180deg);
}
.pagination ul li.disabled.next a:before {
background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Chevron Right'%3E%3Cpath id='shape' d='M9.46875 18L15.4688 12L9.46875 6' stroke='%23BDC5CC' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
}
@media screen and (max-width: 375px) {
.pagination {
gap: 12px;
}
.pagination ul {
padding: 0 16px;
}
.pagination .prev a,
.pagination .next a {
padding: 20px;
}
.pagination .prev {
left: -48px;
}
.pagination .next {
right: -48px;
}
}
.alert-box {
display: flex;
gap: 8px;
padding: 12px;
font-size: 1.4rem;
line-height: 1.7;
border-radius: 12px;
}
.alert-box svg {
min-width: 16px;
width: 16px;
height: 16px;
margin-top: 4px;
}
.alert-box.center {
justify-content: center;
}
.alert-box.type-1 {
border: 1px solid rgba(84, 174, 255, 0.4);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), #0969DA;
}
.alert-box.type-2 {
border: 1px solid rgba(218, 147, 9, 0.4);
background: var(--alert-bg3);
}
.alert-box.type-3 {
border: 1px solid rgba(255, 129, 130, 0.4);
background: var(--alert-bg2);
}
.alert-box.type-4 {
border: 1px solid rgba(74, 194, 107, 0.4);
background: var(--alert-bg4);
}
.alert-box .page-link.link-type-2 a, .alert-box .page-link.link-type-4 a, .alert-box .pdf-link.link-type-1 a, .alert-box .blank-link.link-type-1 a {
font-size: 1.4rem;
}
.page-link,
.pdf-link,
.blank-link {
width: fit-content;
}
.page-link a,
.pdf-link a,
.blank-link a {
display: flex;
align-items: center;
text-align: left;
}
.page-link.link-type-2 a,
.page-link.link-type-4 a,
.pdf-link.link-type-1 a,
.blank-link.link-type-1 a {
gap: 4px;
color: var(--primary-color);
font-size: 1.6rem;
}
@media (hover: hover) {
.page-link.link-type-2 a:hover,
.page-link.link-type-4 a:hover,
.pdf-link.link-type-1 a:hover,
.blank-link.link-type-1 a:hover {
text-decoration: underline;
}
}
.page-link.link-type-2 .arrow,
.page-link.link-type-4 .arrow,
.pdf-link.link-type-1 .arrow,
.blank-link.link-type-1 .arrow {
width: 16px;
min-width: 16px;
}
.page-link.link-type-2.text-color-black a,
.page-link.link-type-4.text-color-black a,
.pdf-link.link-type-1.text-color-black a,
.blank-link.link-type-1.text-color-black a {
color: var(--text-color1);
}
.page-link.link-type-1 a, .page-link.link-type-3 a, .page-link.link-type-5 a {
gap: 16px;
}
.page-link.link-type-1 .arrow, .page-link.link-type-3 .arrow, .page-link.link-type-5 .arrow {
position: relative;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
padding: 8px;
}
.page-link.link-type-1 .arrow svg, .page-link.link-type-3 .arrow svg, .page-link.link-type-5 .arrow svg {
display: block;
}
.page-link.link-type-1 .arrow::before, .page-link.link-type-3 .arrow::before, .page-link.link-type-5 .arrow::before {
content: "";
position: absolute;
z-index: 2;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M9.46875 18L15.4688 12L9.46875 6' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
opacity: 0;
}
.page-link.link-type-1 .arrow::after, .page-link.link-type-3 .arrow::after, .page-link.link-type-5 .arrow::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: scale(0);
border-radius: 50%;
background: var(--primary-color);
transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
.page-link.link-type-1 a:hover .arrow::before, .page-link.link-type-3 a:hover .arrow::before, .page-link.link-type-5 a:hover .arrow::before {
opacity: 1;
}
.page-link.link-type-1 a:hover .arrow::after, .page-link.link-type-3 a:hover .arrow::after, .page-link.link-type-5 a:hover .arrow::after {
transform: scale(1);
}
}
.page-link.link-type-1 .arrow::before, .page-link.link-type-3 .arrow::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M9.46875 18L15.4688 12L9.46875 6' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.page-link.link-type-3 .arrow img {
transform: rotate(180deg);
}
.page-link.link-type-3 .arrow::before {
transform: rotate(180deg);
}
.page-link.link-type-5 .arrow img {
width: 24px;
height: 24px;
transform: rotate(90deg);
}
.page-link.link-type-5 .arrow::before {
transform: rotate(90deg);
background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-right'%3E%3Cg id='Group 13'%3E%3Cpath id='layer2' d='M21.4688 12.5H3.46875' stroke='%23FFFFFF' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='layer1' d='M14.4688 5.5L21.4688 12.5L14.4688 19.5' stroke='%23FFFFFF' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center;
}
.page-link.link-type-1.inversion {
display: flex;
align-items: center;
text-align: left;
gap: 16px;
margin-top: 8px;
}
.page-link.link-type-1.inversion .arrow {
display: flex;
justify-content: center;
align-items: center;
width: 26px;
height: 26px;
padding: 0;
background-color: var(--accent-color1);
box-shadow: 3px 3px 9px 0px rgb(30, 84, 146), -2px -2px 8px 0px rgba(187, 243, 255, 0.4);
}
.page-link.link-type-1.inversion .arrow svg {
width: 70%;
height: 70%;
margin-left: 1px;
}
.page-link.link-type-1.inversion .arrow svg path {
stroke: #fff;
}
.page-link.link-type-1.inversion .arrow::before {
width: 77%;
height: 77%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url(/common/img/icon/arrow_pagenation.svg) no-repeat center/contain;
}
.page-link.link-type-1.inversion .arrow::after {
background-color: var(--bg1);
}
@media (hover: hover) {
.splide__slide a:hover .page-link.link-type-1.inversion .arrow::before {
opacity: 1;
}
.splide__slide a:hover .page-link.link-type-1.inversion .arrow::after {
transform: scale(1);
}
}
.blank-link.link-type-3 a {
gap: 16px;
}
.blank-link.link-type-3 .arrow {
position: relative;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
padding: 8px;
}
.blank-link.link-type-3 .arrow svg {
display: block;
}
.blank-link.link-type-3 .arrow::before {
content: "";
position: absolute;
z-index: 2;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='External Link'%3E%3Cg id='line'%3E%3Cpath id='layer2' d='M14.2764 20H19.9687V5H4.96875V10.6923' stroke='%23ffffff' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='layer1' d='M10.9688 18.5V14M10.9688 14H6.46875M10.9688 14L4.96875 20' stroke='%23ffffff' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center;
opacity: 0;
}
.blank-link.link-type-3 .arrow::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: scale(0);
border-radius: 50%;
background: var(--primary-color);
transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
.blank-link.link-type-3 a:hover .arrow::before {
opacity: 1;
}
.blank-link.link-type-3 a:hover .arrow::after {
transform: scale(1);
}
}
.page-link.link-type-6,
.blank-link.link-type-2 {
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
.page-link.link-type-6 a,
.blank-link.link-type-2 a {
justify-content: center;
gap: 4px;
padding: 16px 40px;
height: 100%;
max-height: 60px;
font-weight: 700;
font-size: 1.6rem;
text-align: center;
line-height: 1.4;
transition: 0.4s;
border-radius: 9999px;
overflow: hidden;
}
.page-link.link-type-6 a .arrow,
.blank-link.link-type-2 a .arrow {
position: relative;
display: inline-block;
margin: 0 4px;
min-width: 20px;
}
.page-link.link-type-6 a .arrow img,
.blank-link.link-type-2 a .arrow img {
display: inline;
width: 20px;
height: 20px;
vertical-align: middle;
}
.page-link.link-type-6 a .arrow::after,
.blank-link.link-type-2 a .arrow::after {
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: 0.4s;
}
@media (hover: hover) {
.page-link.link-type-6 a:hover,
.blank-link.link-type-2 a:hover {
background: var(--primary-color);
border-radius: 9999px;
color: #fff;
}
.page-link.link-type-6 a:hover .arrow::after,
.blank-link.link-type-2 a:hover .arrow::after {
opacity: 1;
}
}
.page-link.link-type-6.text-weight-400 a,
.blank-link.link-type-2.text-weight-400 a {
font-weight: 400;
}
.page-link.link-type-6 a .arrow::after {
background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-right'%3E%3Cg id='Group 13'%3E%3Cpath id='layer2' d='M21.4688 12.5H3.46875' stroke='%23FFFFFF' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='layer1' d='M14.4688 5.5L21.4688 12.5L14.4688 19.5' stroke='%23FFFFFF' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
}
.blank-link.link-type-2 a .arrow::after {
background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='External Link'%3E%3Cg id='line'%3E%3Cpath id='layer2' d='M14.2764 20H19.9687V5H4.96875V10.6923' stroke='%23FFFFFF' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='layer1' d='M10.9688 18.5V14M10.9688 14H6.46875M10.9688 14L4.96875 20' stroke='%23FFFFFF' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
}
p > span.page-link a, p > span.pdf-link a, p > span.blank-link a,
.caption span.page-link a,
.caption span.pdf-link a,
.caption span.blank-link a,
figcaption span.page-link a,
figcaption span.pdf-link a,
figcaption span.blank-link a,
li span.page-link a,
li span.pdf-link a,
li span.blank-link a,
dd span.page-link a,
dd span.pdf-link a,
dd span.blank-link a {
display: inline;
text-decoration: underline;
}
@media (hover: hover) {
p > span.page-link a:hover, p > span.pdf-link a:hover, p > span.blank-link a:hover,
.caption span.page-link a:hover,
.caption span.pdf-link a:hover,
.caption span.blank-link a:hover,
figcaption span.page-link a:hover,
figcaption span.pdf-link a:hover,
figcaption span.blank-link a:hover,
li span.page-link a:hover,
li span.pdf-link a:hover,
li span.blank-link a:hover,
dd span.page-link a:hover,
dd span.pdf-link a:hover,
dd span.blank-link a:hover {
text-decoration: none !important;
}
}
p > span.page-link a .arrow, p > span.pdf-link a .arrow, p > span.blank-link a .arrow,
.caption span.page-link a .arrow,
.caption span.pdf-link a .arrow,
.caption span.blank-link a .arrow,
figcaption span.page-link a .arrow,
figcaption span.pdf-link a .arrow,
figcaption span.blank-link a .arrow,
li span.page-link a .arrow,
li span.pdf-link a .arrow,
li span.blank-link a .arrow,
dd span.page-link a .arrow,
dd span.pdf-link a .arrow,
dd span.blank-link a .arrow {
display: inline-flex;
align-items: center;
margin: 0 4px;
}
p > span.page-link a .arrow img, p > span.pdf-link a .arrow img, p > span.blank-link a .arrow img,
.caption span.page-link a .arrow img,
.caption span.pdf-link a .arrow img,
.caption span.blank-link a .arrow img,
figcaption span.page-link a .arrow img,
figcaption span.pdf-link a .arrow img,
figcaption span.blank-link a .arrow img,
li span.page-link a .arrow img,
li span.pdf-link a .arrow img,
li span.blank-link a .arrow img,
dd span.page-link a .arrow img,
dd span.pdf-link a .arrow img,
dd span.blank-link a .arrow img {
width: 16px;
height: 16px;
}
.caption span.page-link a, .caption span.pdf-link a, .caption span.blank-link a {
font-size: 1.4rem !important;
}
figcaption span.page-link a, figcaption span.pdf-link a, figcaption span.blank-link a {
font-size: 1.2rem !important;
}
figcaption span.page-link .arrow, figcaption span.pdf-link .arrow, figcaption span.blank-link .arrow {
vertical-align: bottom;
}
@media screen and (max-width: 449px) {
.page-link.link-type-6 {
width: 100%;
}
.page-link.link-type-6 a {
justify-content: center;
}
}
.link-list-container {
position: relative;
width: 100%;
}
.link-list-container h3 {
margin-bottom: 32px;
text-align: center;
font-size: 2.2rem;
font-weight: 400;
}
.link-list-container.border-add::before {
content: "";
position: absolute;
width: 100vw;
height: 1px;
top: 0;
left: 0;
margin: 0 calc(50% - 50vw);
background: #B6C1CA;
}
.link-list-container.border-add-top_bottom::before, .link-list-container.border-add-top_bottom::after {
content: "";
position: absolute;
width: 100vw;
height: 1px;
left: 0;
margin: 0 calc(50% - 50vw);
background: #E0E0E0;
}
.link-list-container.border-add-top_bottom::before {
top: 0;
}
.link-list-container.border-add-top_bottom::after {
bottom: 0;
}
.link-lists {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 32px 40px;
max-width: 959px;
margin: 0 auto !important;
}
@media screen and (max-width: 959px) {
.link-list-container.border-add-top_bottom::after {
display: none;
}
}
@media screen and (max-width: 449px) {
.link-list-container h3 {
margin-bottom: 24px;
font-size: 1.8rem;
}
.link-lists {
flex-direction: column;
justify-content: flex-start;
gap: 24px;
}
.link-lists.sp-y-center {
align-items: center;
}
}
.anchor-list {
position: sticky;
top: 0;
height: fit-content;
padding: 24px;
border-radius: 12px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
z-index: 2;
transition: 0.4s;
}
.anchor-list li a, .anchor-list li button {
display: inline-block;
width: 100%;
padding: 16px 8px;
font-size: 1.4rem;
color: var(--text-color1);
text-align: left;
cursor: pointer;
}
.anchor-list li a.active, .anchor-list li button.active {
font-weight: 700;
}
.anchor-list li a .arrow, .anchor-list li button .arrow {
display: none;
}
.anchor-list li a:hover, .anchor-list li button:hover {
color: var(--primary-color);
}
@media screen and (max-width: 959px) {
.anchor-list {
position: inherit;
border-radius: 0;
background: none;
box-shadow: none;
display: flex;
flex-wrap: wrap;
gap: 0;
padding: 0;
}
.anchor-list li {
width: 100%;
}
.anchor-list li:last-child button {
border-bottom: none;
}
.anchor-list li button {
border-bottom: 1px solid #CFDAE3;
justify-content: space-between;
padding: 12px 0;
width: 100%;
}
.anchor-list li a, .anchor-list li button {
display: flex;
align-items: center;
gap: 16px;
font-size: 1.6rem;
}
.anchor-list li a.active, .anchor-list li button.active {
font-weight: 400;
}
.anchor-list li a .arrow, .anchor-list li button .arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
min-width: 32px;
height: 32px;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
.anchor-list li a .arrow::after, .anchor-list li button .arrow::after {
content: "";
display: block;
width: 16px;
height: 16px;
background: url(/common/img/icon/arrow_text_link.svg) no-repeat center/contain;
transform: rotate(90deg);
}
}
@media screen and (max-width: 449px) {
.anchor-list {
gap: 0;
}
.anchor-list li a .arrow, .anchor-list li button .arrow {
width: 24px;
min-width: 24px;
height: 24px;
}
.anchor-list li a .arrow::after, .anchor-list li button .arrow::after {
width: 16px;
height: 16px;
}
}
.anchor-link-list-2 li {
display: flex;
justify-content: center;
}
@media screen and (max-width: 449px) {
.anchor-link-list-2 ul {
gap: 0;
}
.anchor-link-list-2 li {
width: 100%;
justify-content: flex-start;
}
.anchor-link-list-2 li > div {
width: 100%;
}
.anchor-link-list-2 li:last-child a {
border-bottom: none;
}
.anchor-link-list-2 a {
justify-content: space-between;
border-bottom: 1px solid #cfdae3;
gap: 0;
padding: 12px 0;
}
.anchor-link-list-2 a .arrow:before, .anchor-link-list-2 a .arrow:after {
display: none;
}
.anchor-link-list-2 a:hover {
color: var(--primary-color);
}
.anchor-link-list-2 a:hover .arrow:before, .anchor-link-list-2 a:hover .arrow:after {
display: none;
}
.anchor-link-list-2 .arrow {
padding: 4px !important;
}
.anchor-link-list-2 .arrow img {
width: 16px !important;
min-width: 16px;
height: 16px !important;
}
}
.writer {
display: flex;
align-items: center;
gap: 24px;
}
.writer .img-box {
width: 120px;
height: 120px;
}
.writer .img-box > img {
border-radius: 50%;
}
.writer .text-box {
width: calc(100% - 144px);
}
.writer .text-box .name {
font-size: 2.2rem;
font-weight: 400;
margin-top: 0;
color: var(--text-color1);
}
.writer .text-box p {
margin-top: 4px;
font-size: 1.4rem;
color: var(--text-color3);
}
.supervisor {
display: flex;
gap: 24px;
margin-top: 40px;
padding: 32px;
background: var(--bg3);
border-radius: 12px;
}
.supervisor .img-box {
width: 120px;
height: 120px;
}
.supervisor .img-box > img {
border-radius: 50%;
}
.supervisor .text-box {
width: calc(100% - 144px);
}
.supervisor .text-box span {
font-size: 1.2rem;
}
.supervisor .text-box .name {
font-size: 2.2rem;
font-weight: 400;
margin-top: 0;
}
.supervisor .text-box .affiliation {
font-size: 1.4rem;
color: var(--text-color3);
}
.supervisor .text-box .title-text {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.7;
}
.supervisor .text-box p {
margin-top: 4px;
font-size: 1.4rem;
color: var(--text-color1);
}
.supervisor .text-box p .page-link.link-type-2 a,
.supervisor .text-box p .page-link.link-type-4 a,
.supervisor .text-box p .pdf-link.link-type-1 a,
.supervisor .text-box p .blank-link.link-type-1 a {
font-size: 1.4rem;
}
.supervisor .text-box .sp-box {
display: contents;
}
@media screen and (max-width: 449px) {
.supervisor {
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.supervisor .img-box {
width: 90px;
height: 90px;
}
.supervisor .text-box {
display: contents;
}
.supervisor .text-box .name {
font-size: 1.8rem;
}
.supervisor .text-box .affiliation {
font-size: 1.2rem;
}
.supervisor .text-box .sp-box {
display: block;
width: calc(100% - 106px);
}
}
.highlight-text {
background: #FDECD1;
}
.highlight-box {
margin-top: 48px;
margin-bottom: 48px;
padding: 32px;
border-radius: 12px;
background: var(--bg3);
}
.highlight-box .h3-basic {
font-size: 2.2rem;
}
.highlight-box .page-link,
.highlight-box .pdf-link,
.highlight-box .blank-link {
margin: 0 auto;
}
.highlight-box .page-link a,
.highlight-box .pdf-link a,
.highlight-box .blank-link a {
font-size: 1.4rem;
}
.highlight-box .page-link a .arrow,
.highlight-box .pdf-link a .arrow,
.highlight-box .blank-link a .arrow {
width: 14px;
}
.highlight-box.type-2 {
background: #fff;
}
.quote-area {
position: relative;
margin: 40px auto;
display: flex;
padding: 0 35px;
}
.quote-area::before, .quote-area::after {
position: absolute;
content: "";
min-width: 27px;
height: 24px;
background: url(/common/img/icon/icon_quotation.svg) no-repeat center center/contain;
}
.quote-area::before {
top: 0;
left: 0;
}
.quote-area::after {
bottom: 0;
right: 0;
transform: rotate(180deg);
}
.quote-area p {
font-size: 2.8rem;
font-weight: 300;
line-height: 150%;
transform: skewX(-10deg);
}
@media screen and (max-width: 449px) {
.quote-area p {
font-size: 2.4rem;
}
}
.article-table {
width: 100%;
overflow: hidden;
border-radius: 12px;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #B6C1CA;
}
.article-table th,
.article-table td {
padding: 16px;
border-bottom: 1px solid #B6C1CA;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.7;
text-align: left;
vertical-align: top;
}
.article-table th.nowrap,
.article-table td.nowrap {
white-space: nowrap;
}
.article-table th.center,
.article-table td.center {
text-align: center;
vertical-align: middle;
}
.article-table th.right,
.article-table td.right {
text-align: right;
vertical-align: middle;
}
.article-table thead th {
background: var(--bg3);
}
.article-table thead th:not(:last-child) {
border-right: 1px solid #B6C1CA;
}
.article-table tbody th {
border-right: 1px solid #B6C1CA;
background: var(--bg3);
}
.article-table tbody tr:last-child th,
.article-table tbody tr:last-child td {
border-bottom: none;
}
.article-table tbody td:not(:last-child) {
border-right: 1px solid #B6C1CA;
}
@media screen and (max-width: 959px) {
.table-scroll-wrap {
overflow-y: auto;
}
.table-scroll-wrap .article-table {
width: 660px;
margin: 0 auto;
}
}
@media screen and (max-width: 449px) {
.article-table col:first-child {
min-width: 112px;
}
.table-scroll-wrap {
margin-right: -5vw;
}
}
.article-anchor-list {
padding: 24px;
border-radius: 12px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
.article-anchor-list h3 {
font-size: 1.8rem;
font-weight: 400;
}
.article-anchor-list ul,
.article-anchor-list ol {
padding: 0;
}
.article-anchor-list ul > li,
.article-anchor-list ol > li {
display: flex;
gap: 4px;
color: var(--primary-color);
font-size: 1.4rem;
}
.article-anchor-list ul > li span,
.article-anchor-list ol > li span {
display: inline-block;
padding: 8px;
color: var(--primary-color);
}
.article-anchor-list ul > li a,
.article-anchor-list ol > li a {
padding: 8px 0;
color: var(--primary-color);
}
@media (hover: hover) {
.article-anchor-list ul > li a:hover,
.article-anchor-list ol > li a:hover {
text-decoration: underline;
}
}
ul.article-list > li,
ol.article-ordered-list > li {
position: relative;
}
ul.article-list > li {
padding-left: 22px;
}
ul.article-list > li::before {
content: "";
position: absolute;
top: 12px;
left: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary-color);
}
.article-ordered-list-wrap {
counter-reset: count 0;
}
ol.article-ordered-list {
padding: 0;
}
ol.article-ordered-list > li {
padding-left: 32px;
}
ol.article-ordered-list > li:before {
content: counter(count) "";
counter-increment: count 1;
position: absolute;
top: 6px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
color: var(--text-color2);
font-size: 1.4rem;
background: var(--primary-color);
}
.dot-style {
position: relative;
display: inline-block;
padding-left: 22px;
}
.dot-style::before {
content: "";
position: absolute;
top: 12px;
left: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary-color);
}
.definition-list dt {
margin: 0 8px 0 0;
white-space: nowrap;
float: left;
}
.definition-list dd {
display: block;
overflow: hidden;
}
.definition-list-general {
display: flex;
flex-wrap: wrap;
}
.definition-list-general dt {
flex-basis: 20%;
}
.definition-list-general dd {
flex-basis: 80%;
}
.definition-list-general dt.width-10,
.definition-list-general dd.width-10 {
flex-basis: 10%;
}
.definition-list-general dt.width-20,
.definition-list-general dd.width-20 {
flex-basis: 20%;
}
.definition-list-general dt.width-30,
.definition-list-general dd.width-30 {
flex-basis: 30%;
}
.definition-list-general dt.width-40,
.definition-list-general dd.width-40 {
flex-basis: 40%;
}
.definition-list-general dt.width-50,
.definition-list-general dd.width-50 {
flex-basis: 50%;
}
.definition-list-general dt.width-60,
.definition-list-general dd.width-60 {
flex-basis: 60%;
}
.definition-list-general dt.width-70,
.definition-list-general dd.width-70 {
flex-basis: 70%;
}
.definition-list-general dt.width-80,
.definition-list-general dd.width-80 {
flex-basis: 80%;
}
@media screen and (max-width: 449px) {
.definition-list dt,
.definition-list dd {
float: none;
margin: 0;
}
.definition-list-general dt,
.definition-list-general dd {
flex-basis: 100% !important;
}
}
.caption {
padding-left: 24px;
text-indent: -24px;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.7;
}
.caption > span:first-child {
white-space: nowrap;
margin: 0 8px 0 0;
}
ul.caption,
ol.caption {
padding-left: 0;
text-indent: 0;
}
ul.caption > li,
ol.caption > li {
padding-left: 24px;
text-indent: -24px;
}
ul.caption > li > span:first-child,
ol.caption > li > span:first-child {
margin: 0 8px 0 0;
white-space: nowrap;
}
.indent {
padding-left: 24px;
text-indent: -24px;
}
.indent > span:first-child {
white-space: nowrap;
margin: 0 8px 0 0;
}
ul.indent,
ol.indent {
padding-left: 0;
text-indent: 0;
}
ul.indent > li,
ol.indent > li {
padding-left: 20px;
text-indent: -20px;
}
ul.indent > li > span:first-child,
ol.indent > li > span:first-child {
margin: 0 4px 0 0;
white-space: nowrap;
}
.accordion-container {
margin-top: 80px;
}
.accordion-type-1 > dt > button {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
text-align: left;
font-size: 1.8rem;
font-weight: 400;
color: var(--text-color1);
padding: 20px 12px;
margin: 0;
border-bottom: 1px solid #E0E0E0;
transition: 0.4s;
}
.accordion-type-1 > dt > button .accordion-button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
min-width: 40px;
height: 40px;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
.accordion-type-1 > dt > button .accordion-button::before {
display: block;
content: "";
position: absolute;
z-index: 1;
width: 14px;
height: 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1.30469 7H13.3047' stroke='%23407BBE' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M7.59375 13L7.59375 0.999999' stroke='%23407BBE' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
transition: 0.4s;
transform: rotate(-90deg);
}
.accordion-type-1 > dt > button .accordion-button::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: scale(0);
border-radius: 50%;
background: var(--primary-color);
transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.accordion-type-1 > dt > button[aria-expanded=true] {
border-color: transparent;
}
.accordion-type-1 > dt > button[aria-expanded=true] .accordion-button::before {
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M6.30469 12H18.3047' stroke='%23407BBE' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
transform: rotate(0deg);
}
@media (hover: hover) {
.accordion-type-1 > dt > button[aria-expanded=true]:hover {
cursor: pointer;
}
.accordion-type-1 > dt > button[aria-expanded=true]:hover .accordion-button::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M6.30469 12H18.3047' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
}
@media (hover: hover) {
.accordion-type-1 > dt > button:hover {
cursor: pointer;
background: var(--hover-bg1);
}
.accordion-type-1 > dt > button:hover .accordion-button::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1.30469 7H13.3047' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M7.59375 13L7.59375 0.999999' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.accordion-type-1 > dt > button:hover .accordion-button::after {
transform: scale(1);
}
}
.accordion-type-1 > dt > button + dd + dt {
margin-top: -1px;
}
.accordion-type-1 > dd {
display: none;
margin-top: 16px;
padding: 0 12px 24px;
}
.accordion-type-1 > dd > div {
opacity: 0;
transition: 0.6s;
}
.accordion-type-1 > dd.open {
border-bottom: 1px solid #E0E0E0;
}
.accordion-type-1 > dd.open > div {
opacity: 1;
}
.accordion-type-1 > dd + dt {
margin-top: -2px;
}
@media screen and (max-width: 449px) {
.accordion-type-1 > dd {
margin-top: 0px;
}
}
@media screen and (max-width: 449px) {
.phoneNumber {
color: var(--primary-color);
text-decoration: underline;
}
}
.mailAddress {
color: var(--primary-color);
text-decoration: underline;
}
@media (hover: hover) {
.mailAddress:hover {
text-decoration: none;
}
}
#scrollFollowing {
position: sticky;
top: 0;
transition: 0.6s;
}
@media screen and (max-width: 959px) {
#scrollFollowing {
position: initial;
}
}
.cookie-agree-wrap {
z-index: 1000;
display: none;
position: fixed;
width: 100%;
bottom: 0;
transition: 0.4s;
background: #DDE5EB;
box-shadow: 0px 1px 3px 0px rgba(27, 31, 36, 0.12), 0px 8px 24px 0px rgba(66, 74, 83, 0.12);
}
.cookie-hide {
visibility: hidden;
opacity: 0;
z-index: -1;
}
.cookie-agree-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
width: 80vw;
margin: 0 auto;
padding: 32px 0;
}
.cookie-agree-inner > p {
margin: 0 40px 0 0;
font-size: 1.4rem;
}
.cookie-agree-inner a {
text-decoration: underline;
color: var(--primary-color);
}
.cookie-agree-inner .button-accept {
border-radius: 9999px;
white-space: nowrap;
padding: 18px 40px;
font-weight: 700;
transition: 0.4s;
font-size: 1.6rem;
background: var(--primary-color);
color: var(--text-color2);
}
.cookie-agree-inner .button-accept:focus-visible {
outline: var(--text-color2) auto 1px;
}
@media (hover: hover) {
.cookie-agree-inner .button-accept:hover {
cursor: pointer;
background: var(--hover-bg1);
color: var(--text-color1);
}
}
@media screen and (max-width: 959px) {
.cookie-agree-inner {
flex-direction: column;
}
.cookie-agree-inner > p {
margin: 0 0 24px;
}
.cookie-agree-inner .button-accept {
width: 100%;
max-width: 439px;
}
}
.sns-list {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
gap: 16px;
}
.sns-list a {
display: flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
}
.card-link {
border-radius: 12px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
transition: 0.4s;
}
.card-link a {
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
width: 100%;
height: 100%;
padding: 40px 1.8vw;
}
.card-link .img-box img {
margin: 0 auto;
}
.card-link .text-box {
line-height: 1.4;
}
.card-link .text-box .arrow {
margin-left: 4px;
}
.card-link .text-box .arrow img {
display: inline;
vertical-align: -3px;
width: 24px;
}
.card-link .text-box .sub-text {
display: block;
font-size: 1.6rem;
}
.card-link.type-2 {
border-radius: 0;
background: transparent;
box-shadow: none;
}
.card-link.type-2 a {
padding: 0;
align-items: flex-start;
justify-content: start;
}
.card-link.type-2 figure,
.card-link.type-2 picture {
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
height: 100%;
max-height: 140px;
padding: 30px 2vw;
border-radius: 12px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
transition: 0.4s;
}
.card-link.type-2 .text-box .arrow img {
vertical-align: -5px;
}
.card-link.type-2:hover {
background: transparent;
}
.card-link.type-2:hover figure,
.card-link.type-2:hover picture {
background: var(--hover-bg1);
}
.card-link.card-link-icon_and_text {
font-size: 2.2rem;
text-align: center;
}
.card-link.home-card a {
padding: 40px 4%;
justify-content: flex-start;
}
.card-link.home-card .img-box {
height: 53px;
max-height: 53px;
display: flex;
align-items: center;
}
.card-link.home-card .text-box {
font-size: clamp(1.6rem, 1.8vw, 2.2rem);
text-align: center;
}
.card-link.article-link {
max-width: 262px;
margin: 0 auto;
}
.card-link.article-link a {
overflow: hidden;
display: block;
width: 100%;
height: 100%;
padding: 0;
}
.card-link.article-link .img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-link.article-link .text-box {
padding: 16px;
}
.card-link.article-link.aspect-1-1 .img-box {
aspect-ratio: 1/1;
}
.card-link.article-link.next-stories-link .text-box {
position: relative;
padding-bottom: 40px;
}
.card-link.article-link.next-stories-link .text-box::after {
content: "";
position: absolute;
bottom: 16px;
right: 16px;
width: 93px;
height: 16px;
background: url(/img/insight-inside/next_stories.png) no-repeat center/contain;
}
.card-link.article-link.next-stories-link .text-omit {
min-height: 64px;
}
.card-link.article-link.small {
max-width: 100%;
}
.card-link.article-link.small a {
gap: 0;
}
.card-link.article-link.small .text-box {
height: 100%;
}
li.card-link.article-link {
max-width: 100%;
}
.card-links > li {
border-radius: 12px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
transition: 0.4s;
}
.card-links > li a {
border-radius: 12px;
overflow: hidden;
display: block;
width: 100%;
height: 100%;
}
.card-links .img-box {
aspect-ratio: 5/3;
}
.card-links .img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-links .text-box {
padding: 16px;
}
.card-links.small > li a {
display: grid;
grid-template-columns: 100px 1fr;
font-size: 1.4rem;
line-height: 1.5;
}
.card-links.small > li + li {
margin-top: 16px;
}
.card-links.text-small > li a {
font-size: 1.4rem;
line-height: 1.5;
}
.card-links.aspect-1-1 .img-box {
aspect-ratio: 1/1;
}
.card-links.type-2 > li a {
display: flex;
flex-direction: column;
gap: 40px;
padding: 40px 2vw;
}
.card-links.type-2 .img-box {
aspect-ratio: auto;
}
.card-links.type-2 .img-box img {
width: auto;
height: auto;
object-fit: contain;
margin: 0 auto;
}
.card-links.type-2 .text-box {
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 2.2rem;
line-height: 1.5;
}
.card-links .next-stories-link .text-box {
position: relative;
padding-bottom: 40px;
}
.card-links .next-stories-link .text-box::after {
content: "";
position: absolute;
bottom: 16px;
right: 16px;
width: 93px;
height: 16px;
background: url(/img/insight-inside/next_stories.png) no-repeat center/contain;
}
.card-links .next-stories-link .text-omit {
min-height: 64px;
}
.card-links.aspect-1-1.small .next-stories-link .text-box {
padding-bottom: 0;
padding-top: 8px;
}
.card-links.aspect-1-1.small .next-stories-link .text-box::after {
bottom: 8px;
}
@media (hover: hover) {
.card-link:hover {
background: var(--hover-bg1);
}
.card-links > li:hover {
background: var(--hover-bg1);
}
}
@media screen and (max-width: 959px) {
.card-link.type-2 figure {
max-height: 107px;
}
.card-link.home-card .text-box {
font-size: 1.8rem;
}
.card-links.type-2 > li a {
gap: 12px;
padding: 4vw 2vw;
}
.card-links.type-2 .text-box {
font-size: clamp(1.8rem, 2.5vw, 2.2rem);
}
}
@media screen and (max-width: 699px) {
.card-link.home-card a {
flex-direction: row;
justify-content: flex-start;
padding: 24px 16px;
}
.card-link.home-card .img-box {
width: 48px;
min-height: auto;
margin-left: 4px;
}
.card-link.home-card .text-box {
font-size: 1.8rem;
text-align: left;
}
.card-link.home-card:nth-child(2) .img-box {
width: 62px;
margin-left: 0;
}
.card-links.aspect-1-1.sp-5-3 .img-box {
aspect-ratio: 5/3;
}
.card-links.sp-img-none {
grid-template-columns: repeat(1, 1fr);
}
.card-links.sp-img-none .img-box {
display: none;
}
.card-links.sp-img-none .text-box {
padding-right: 48px;
}
.card-links.sp-img-none > li a {
position: relative;
}
.card-links.sp-img-none > li a::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 24px;
height: 24px;
background: url(/common/img/icon/arrow_text_link.svg) no-repeat center/contain;
transform: translateY(-50%);
}
.card-links.sp-img-none > li.blank a::after {
background-image: url(/common/img/icon/icon_target_blank.svg);
}
.card-links.type-2 > li a {
flex-direction: row;
gap: 24px;
padding: 12px 16px;
}
.card-links.type-2 .img-box {
max-width: 96px;
min-width: 96px;
}
.card-links.type-2 .text-box {
font-size: 1.8rem;
text-align: left;
}
}
@media screen and (max-width: 449px) {
.card-link.type-2 a {
gap: 16px;
}
.card-link.article-link.sp-5-3 .img-box {
aspect-ratio: 5/3;
}
.card-link.article-link.sp-5-3 .text-omit {
min-height: auto;
}
.card-links .next-stories-link .text-omit {
min-height: auto;
}
}
.insight-inside-link {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 246px;
border-radius: 12px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
transition: 0.4s;
}
.insight-inside-link::before, .insight-inside-link::after {
content: "";
position: absolute;
width: 254px;
height: 192px;
background: url(/common/img/icon/icon_decoration.svg) no-repeat center/contain;
opacity: 0.6;
}
.insight-inside-link::before {
bottom: 0;
left: 0;
}
.insight-inside-link::after {
top: 0;
right: 0;
}
.insight-inside-link .insight-inside-link-inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 5%;
width: 100%;
padding: 24px 72px 24px 40px;
}
.insight-inside-link .insight-inside-link-inner::after {
content: "";
position: absolute;
top: 50%;
right: 40px;
width: 24px;
height: 24px;
background: url(/common/img/icon/arrow_text_link.svg) no-repeat center/contain;
transform: translateY(-50%);
}
.insight-inside-link .insight-inside-link-inner picture {
width: 60%;
max-width: 278px;
}
.insight-inside-link .insight-inside-link-inner p {
font-size: 1.8rem;
word-break: normal;
}
.insight-inside-link.mt-184 {
margin-top: 184px;
}
@media (hover: hover) {
.insight-inside-link:hover {
background: var(--hover-bg1);
}
}
@media screen and (max-width: 959px) {
.insight-inside-link {
min-height: 200px;
}
.insight-inside-link::before, .insight-inside-link::after {
width: 200px;
height: 152px;
}
.insight-inside-link-inner picture {
width: 70vw;
max-width: 200px;
min-width: 140px;
}
}
@media screen and (max-width: 699px) {
.insight-inside-link::before, .insight-inside-link::after {
width: 160px;
height: 122px;
}
.insight-inside-link .insight-inside-link-inner {
flex-direction: column;
gap: 16px;
padding: 32px;
}
.insight-inside-link .insight-inside-link-inner picture {
width: 100%;
}
.insight-inside-link .insight-inside-link-inner p {
padding-right: 16px;
font-size: 1.6rem;
}
.insight-inside-link .insight-inside-link-inner::after {
top: 70%;
right: 24px;
}
}
.title-omit,
.text-omit {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.title-omit {
-webkit-line-clamp: 2;
}
.text-omit {
-webkit-line-clamp: 3;
}
.read-container {
position: relative;
}
.read-content {
max-height: 240px;
overflow: hidden;
transition: 1s cubic-bezier(1, 0.01, 0.93, 0.65);
}
.read-content.open {
max-height: 100000px;
}
.read-more {
position: absolute;
bottom: 0;
left: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 128px;
background: linear-gradient(180deg, rgba(237, 243, 247, 0) 0%, #EDF3F7 25.52%);
}
.read-more button {
height: fit-content;
padding: 18px 40px;
font-size: 1.6rem;
font-weight: 400;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
transition: 0.4s;
}
@media (hover: hover) {
.read-more button:hover {
cursor: pointer;
background: var(--primary-color);
color: var(--text-color2);
}
}
.h1-mv {
position: relative;
display: flex;
align-items: center;
max-height: 373px;
overflow: hidden;
margin-top: 48px;
margin-bottom: 96px;
border-radius: 20px;
}
.h1-mv h1 {
position: absolute;
margin-left: 80px;
font-weight: 350;
}
.h1-mv .bg-img {
width: 100%;
}
.h1-mv .bg-img img {
width: 100%;
height: 100%;
max-height: 373px;
object-fit: cover;
object-position: center;
}
@media screen and (max-width: 959px) {
.h1-mv h1 {
margin-left: 56px;
}
}
@media screen and (max-width: 449px) {
.h1-mv {
max-height: 240px;
margin-top: 20px;
margin-bottom: 32px;
border-radius: 8px;
}
.h1-mv h1 {
margin-left: 24px;
}
}
.drop-links li a .img-box {
max-width: 319px;
margin: 0 auto 16px;
filter: drop-shadow(3px 3px 6px rgba(64, 123, 190, 0.24)) drop-shadow(-6px -6px 4px #FFF);
transition: all 0.4s;
transform: translateZ(0);
}
.drop-links li a .page-link {
display: flex;
align-items: center;
text-align: left;
gap: 16px;
margin-top: 8px;
}
.drop-links li a .text-box p {
font-size: 2rem;
}
.drop-links li a:hover {
color: var(--primary-color);
}
.drop-links li a:hover .arrow::before {
opacity: 1;
}
.drop-links li a:hover .arrow::after {
transform: scale(1);
}
.drop-links li a:hover .img-box {
filter: drop-shadow(8px 8px 16px rgba(64, 123, 190, 0.3));
}
@media screen and (max-width: 959px) {
.drop-links li a .text-box p {
font-size: 1.8rem;
}
}
.drop-link-container a {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 40px;
margin: calc(13% + 64px) 0;
}
.drop-link-container a .img-box {
position: relative;
transition: all 0.4s;
-webkit-transition: all 0.4s;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.drop-link-container a .img-box.add-shadow {
filter: drop-shadow(3px 3px 6px rgba(64, 123, 190, 0.24)) drop-shadow(-6px -6px 4px #FFF);
-webkit-filter: drop-shadow(3px 3px 6px rgba(64, 123, 190, 0.24)) drop-shadow(-6px -6px 4px #FFF);
}
.drop-link-container a .img-box img {
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, 50%);
}
.drop-link-container a .page-link {
display: flex;
align-items: center;
text-align: left;
gap: 16px;
margin-top: 8px;
}
.drop-link-container a:hover {
color: var(--primary-color);
}
.drop-link-container a:hover .arrow::before {
opacity: 1;
}
.drop-link-container a:hover .arrow::after {
transform: scale(1);
}
.drop-link-container a:hover .img-box {
filter: drop-shadow(8px 8px 16px rgba(64, 123, 190, 0.3));
-webkit-filter: drop-shadow(8px 8px 16px rgba(64, 123, 190, 0.3));
}
@media screen and (max-width: 959px) {
.drop-link-container a {
margin: 0;
}
.drop-link-container a .img-box img {
position: relative;
bottom: 0;
left: 0;
transform: none;
}
}
@media screen and (max-width: 699px) {
.drop-link-container a {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media screen and (max-width: 449px) {
.drop-link-container a .text-box .h2-basic {
margin-bottom: 12px;
}
}
@media screen and (max-width: 959px) {
.tb-pd-0 {
padding: 0px !important;
}
.tb-mt-0 {
margin-top: 0px !important;
}
.tb-pt-0 {
padding-top: 0px !important;
}
.tb-mr-0 {
margin-right: 0px !important;
}
.tb-pr-0 {
padding-right: 0px !important;
}
.tb-ml-0 {
margin-left: 0px !important;
}
.tb-pl-0 {
padding-left: 0px !important;
}
.tb-mb-0 {
margin-bottom: 0px !important;
}
.tb-pb-0 {
padding-bottom: 0px !important;
}
.tb-pd-2 {
padding: 2px !important;
}
.tb-mt-2 {
margin-top: 2px !important;
}
.tb-pt-2 {
padding-top: 2px !important;
}
.tb-mr-2 {
margin-right: 2px !important;
}
.tb-pr-2 {
padding-right: 2px !important;
}
.tb-ml-2 {
margin-left: 2px !important;
}
.tb-pl-2 {
padding-left: 2px !important;
}
.tb-mb-2 {
margin-bottom: 2px !important;
}
.tb-pb-2 {
padding-bottom: 2px !important;
}
.tb-pd-4 {
padding: 4px !important;
}
.tb-mt-4 {
margin-top: 4px !important;
}
.tb-pt-4 {
padding-top: 4px !important;
}
.tb-mr-4 {
margin-right: 4px !important;
}
.tb-pr-4 {
padding-right: 4px !important;
}
.tb-ml-4 {
margin-left: 4px !important;
}
.tb-pl-4 {
padding-left: 4px !important;
}
.tb-mb-4 {
margin-bottom: 4px !important;
}
.tb-pb-4 {
padding-bottom: 4px !important;
}
.tb-pd-8 {
padding: 8px !important;
}
.tb-mt-8 {
margin-top: 8px !important;
}
.tb-pt-8 {
padding-top: 8px !important;
}
.tb-mr-8 {
margin-right: 8px !important;
}
.tb-pr-8 {
padding-right: 8px !important;
}
.tb-ml-8 {
margin-left: 8px !important;
}
.tb-pl-8 {
padding-left: 8px !important;
}
.tb-mb-8 {
margin-bottom: 8px !important;
}
.tb-pb-8 {
padding-bottom: 8px !important;
}
.tb-pd-16 {
padding: 16px !important;
}
.tb-mt-16 {
margin-top: 16px !important;
}
.tb-pt-16 {
padding-top: 16px !important;
}
.tb-mr-16 {
margin-right: 16px !important;
}
.tb-pr-16 {
padding-right: 16px !important;
}
.tb-ml-16 {
margin-left: 16px !important;
}
.tb-pl-16 {
padding-left: 16px !important;
}
.tb-mb-16 {
margin-bottom: 16px !important;
}
.tb-pb-16 {
padding-bottom: 16px !important;
}
.tb-pd-24 {
padding: 24px !important;
}
.tb-mt-24 {
margin-top: 24px !important;
}
.tb-pt-24 {
padding-top: 24px !important;
}
.tb-mr-24 {
margin-right: 24px !important;
}
.tb-pr-24 {
padding-right: 24px !important;
}
.tb-ml-24 {
margin-left: 24px !important;
}
.tb-pl-24 {
padding-left: 24px !important;
}
.tb-mb-24 {
margin-bottom: 24px !important;
}
.tb-pb-24 {
padding-bottom: 24px !important;
}
.tb-pd-32 {
padding: 32px !important;
}
.tb-mt-32 {
margin-top: 32px !important;
}
.tb-pt-32 {
padding-top: 32px !important;
}
.tb-mr-32 {
margin-right: 32px !important;
}
.tb-pr-32 {
padding-right: 32px !important;
}
.tb-ml-32 {
margin-left: 32px !important;
}
.tb-pl-32 {
padding-left: 32px !important;
}
.tb-mb-32 {
margin-bottom: 32px !important;
}
.tb-pb-32 {
padding-bottom: 32px !important;
}
.tb-pd-40 {
padding: 40px !important;
}
.tb-mt-40 {
margin-top: 40px !important;
}
.tb-pt-40 {
padding-top: 40px !important;
}
.tb-mr-40 {
margin-right: 40px !important;
}
.tb-pr-40 {
padding-right: 40px !important;
}
.tb-ml-40 {
margin-left: 40px !important;
}
.tb-pl-40 {
padding-left: 40px !important;
}
.tb-mb-40 {
margin-bottom: 40px !important;
}
.tb-pb-40 {
padding-bottom: 40px !important;
}
.tb-pd-48 {
padding: 48px !important;
}
.tb-mt-48 {
margin-top: 48px !important;
}
.tb-pt-48 {
padding-top: 48px !important;
}
.tb-mr-48 {
margin-right: 48px !important;
}
.tb-pr-48 {
padding-right: 48px !important;
}
.tb-ml-48 {
margin-left: 48px !important;
}
.tb-pl-48 {
padding-left: 48px !important;
}
.tb-mb-48 {
margin-bottom: 48px !important;
}
.tb-pb-48 {
padding-bottom: 48px !important;
}
.tb-pd-56 {
padding: 56px !important;
}
.tb-mt-56 {
margin-top: 56px !important;
}
.tb-pt-56 {
padding-top: 56px !important;
}
.tb-mr-56 {
margin-right: 56px !important;
}
.tb-pr-56 {
padding-right: 56px !important;
}
.tb-ml-56 {
margin-left: 56px !important;
}
.tb-pl-56 {
padding-left: 56px !important;
}
.tb-mb-56 {
margin-bottom: 56px !important;
}
.tb-pb-56 {
padding-bottom: 56px !important;
}
.tb-pd-64 {
padding: 64px !important;
}
.tb-mt-64 {
margin-top: 64px !important;
}
.tb-pt-64 {
padding-top: 64px !important;
}
.tb-mr-64 {
margin-right: 64px !important;
}
.tb-pr-64 {
padding-right: 64px !important;
}
.tb-ml-64 {
margin-left: 64px !important;
}
.tb-pl-64 {
padding-left: 64px !important;
}
.tb-mb-64 {
margin-bottom: 64px !important;
}
.tb-pb-64 {
padding-bottom: 64px !important;
}
.tb-pd-72 {
padding: 72px !important;
}
.tb-mt-72 {
margin-top: 72px !important;
}
.tb-pt-72 {
padding-top: 72px !important;
}
.tb-mr-72 {
margin-right: 72px !important;
}
.tb-pr-72 {
padding-right: 72px !important;
}
.tb-ml-72 {
margin-left: 72px !important;
}
.tb-pl-72 {
padding-left: 72px !important;
}
.tb-mb-72 {
margin-bottom: 72px !important;
}
.tb-pb-72 {
padding-bottom: 72px !important;
}
.tb-pd-80 {
padding: 80px !important;
}
.tb-mt-80 {
margin-top: 80px !important;
}
.tb-pt-80 {
padding-top: 80px !important;
}
.tb-mr-80 {
margin-right: 80px !important;
}
.tb-pr-80 {
padding-right: 80px !important;
}
.tb-ml-80 {
margin-left: 80px !important;
}
.tb-pl-80 {
padding-left: 80px !important;
}
.tb-mb-80 {
margin-bottom: 80px !important;
}
.tb-pb-80 {
padding-bottom: 80px !important;
}
.tb-pd-96 {
padding: 96px !important;
}
.tb-mt-96 {
margin-top: 96px !important;
}
.tb-pt-96 {
padding-top: 96px !important;
}
.tb-mr-96 {
margin-right: 96px !important;
}
.tb-pr-96 {
padding-right: 96px !important;
}
.tb-ml-96 {
margin-left: 96px !important;
}
.tb-pl-96 {
padding-left: 96px !important;
}
.tb-mb-96 {
margin-bottom: 96px !important;
}
.tb-pb-96 {
padding-bottom: 96px !important;
}
.tb-pd-104 {
padding: 104px !important;
}
.tb-mt-104 {
margin-top: 104px !important;
}
.tb-pt-104 {
padding-top: 104px !important;
}
.tb-mr-104 {
margin-right: 104px !important;
}
.tb-pr-104 {
padding-right: 104px !important;
}
.tb-ml-104 {
margin-left: 104px !important;
}
.tb-pl-104 {
padding-left: 104px !important;
}
.tb-mb-104 {
margin-bottom: 104px !important;
}
.tb-pb-104 {
padding-bottom: 104px !important;
}
.tb-pd-112 {
padding: 112px !important;
}
.tb-mt-112 {
margin-top: 112px !important;
}
.tb-pt-112 {
padding-top: 112px !important;
}
.tb-mr-112 {
margin-right: 112px !important;
}
.tb-pr-112 {
padding-right: 112px !important;
}
.tb-ml-112 {
margin-left: 112px !important;
}
.tb-pl-112 {
padding-left: 112px !important;
}
.tb-mb-112 {
margin-bottom: 112px !important;
}
.tb-pb-112 {
padding-bottom: 112px !important;
}
.tb-pd-128 {
padding: 128px !important;
}
.tb-mt-128 {
margin-top: 128px !important;
}
.tb-pt-128 {
padding-top: 128px !important;
}
.tb-mr-128 {
margin-right: 128px !important;
}
.tb-pr-128 {
padding-right: 128px !important;
}
.tb-ml-128 {
margin-left: 128px !important;
}
.tb-pl-128 {
padding-left: 128px !important;
}
.tb-mb-128 {
margin-bottom: 128px !important;
}
.tb-pb-128 {
padding-bottom: 128px !important;
}
}
@media screen and (max-width: 699px) {
.w699-pd-0 {
padding: 0px !important;
}
.w699-mt-0 {
margin-top: 0px !important;
}
.w699-pt-0 {
padding-top: 0px !important;
}
.w699-mr-0 {
margin-right: 0px !important;
}
.w699-pr-0 {
padding-right: 0px !important;
}
.w699-ml-0 {
margin-left: 0px !important;
}
.w699-pl-0 {
padding-left: 0px !important;
}
.w699-mb-0 {
margin-bottom: 0px !important;
}
.w699-pb-0 {
padding-bottom: 0px !important;
}
.w699-pd-2 {
padding: 2px !important;
}
.w699-mt-2 {
margin-top: 2px !important;
}
.w699-pt-2 {
padding-top: 2px !important;
}
.w699-mr-2 {
margin-right: 2px !important;
}
.w699-pr-2 {
padding-right: 2px !important;
}
.w699-ml-2 {
margin-left: 2px !important;
}
.w699-pl-2 {
padding-left: 2px !important;
}
.w699-mb-2 {
margin-bottom: 2px !important;
}
.w699-pb-2 {
padding-bottom: 2px !important;
}
.w699-pd-4 {
padding: 4px !important;
}
.w699-mt-4 {
margin-top: 4px !important;
}
.w699-pt-4 {
padding-top: 4px !important;
}
.w699-mr-4 {
margin-right: 4px !important;
}
.w699-pr-4 {
padding-right: 4px !important;
}
.w699-ml-4 {
margin-left: 4px !important;
}
.w699-pl-4 {
padding-left: 4px !important;
}
.w699-mb-4 {
margin-bottom: 4px !important;
}
.w699-pb-4 {
padding-bottom: 4px !important;
}
.w699-pd-8 {
padding: 8px !important;
}
.w699-mt-8 {
margin-top: 8px !important;
}
.w699-pt-8 {
padding-top: 8px !important;
}
.w699-mr-8 {
margin-right: 8px !important;
}
.w699-pr-8 {
padding-right: 8px !important;
}
.w699-ml-8 {
margin-left: 8px !important;
}
.w699-pl-8 {
padding-left: 8px !important;
}
.w699-mb-8 {
margin-bottom: 8px !important;
}
.w699-pb-8 {
padding-bottom: 8px !important;
}
.w699-pd-16 {
padding: 16px !important;
}
.w699-mt-16 {
margin-top: 16px !important;
}
.w699-pt-16 {
padding-top: 16px !important;
}
.w699-mr-16 {
margin-right: 16px !important;
}
.w699-pr-16 {
padding-right: 16px !important;
}
.w699-ml-16 {
margin-left: 16px !important;
}
.w699-pl-16 {
padding-left: 16px !important;
}
.w699-mb-16 {
margin-bottom: 16px !important;
}
.w699-pb-16 {
padding-bottom: 16px !important;
}
.w699-pd-24 {
padding: 24px !important;
}
.w699-mt-24 {
margin-top: 24px !important;
}
.w699-pt-24 {
padding-top: 24px !important;
}
.w699-mr-24 {
margin-right: 24px !important;
}
.w699-pr-24 {
padding-right: 24px !important;
}
.w699-ml-24 {
margin-left: 24px !important;
}
.w699-pl-24 {
padding-left: 24px !important;
}
.w699-mb-24 {
margin-bottom: 24px !important;
}
.w699-pb-24 {
padding-bottom: 24px !important;
}
.w699-pd-32 {
padding: 32px !important;
}
.w699-mt-32 {
margin-top: 32px !important;
}
.w699-pt-32 {
padding-top: 32px !important;
}
.w699-mr-32 {
margin-right: 32px !important;
}
.w699-pr-32 {
padding-right: 32px !important;
}
.w699-ml-32 {
margin-left: 32px !important;
}
.w699-pl-32 {
padding-left: 32px !important;
}
.w699-mb-32 {
margin-bottom: 32px !important;
}
.w699-pb-32 {
padding-bottom: 32px !important;
}
.w699-pd-40 {
padding: 40px !important;
}
.w699-mt-40 {
margin-top: 40px !important;
}
.w699-pt-40 {
padding-top: 40px !important;
}
.w699-mr-40 {
margin-right: 40px !important;
}
.w699-pr-40 {
padding-right: 40px !important;
}
.w699-ml-40 {
margin-left: 40px !important;
}
.w699-pl-40 {
padding-left: 40px !important;
}
.w699-mb-40 {
margin-bottom: 40px !important;
}
.w699-pb-40 {
padding-bottom: 40px !important;
}
.w699-pd-48 {
padding: 48px !important;
}
.w699-mt-48 {
margin-top: 48px !important;
}
.w699-pt-48 {
padding-top: 48px !important;
}
.w699-mr-48 {
margin-right: 48px !important;
}
.w699-pr-48 {
padding-right: 48px !important;
}
.w699-ml-48 {
margin-left: 48px !important;
}
.w699-pl-48 {
padding-left: 48px !important;
}
.w699-mb-48 {
margin-bottom: 48px !important;
}
.w699-pb-48 {
padding-bottom: 48px !important;
}
.w699-pd-56 {
padding: 56px !important;
}
.w699-mt-56 {
margin-top: 56px !important;
}
.w699-pt-56 {
padding-top: 56px !important;
}
.w699-mr-56 {
margin-right: 56px !important;
}
.w699-pr-56 {
padding-right: 56px !important;
}
.w699-ml-56 {
margin-left: 56px !important;
}
.w699-pl-56 {
padding-left: 56px !important;
}
.w699-mb-56 {
margin-bottom: 56px !important;
}
.w699-pb-56 {
padding-bottom: 56px !important;
}
.w699-pd-64 {
padding: 64px !important;
}
.w699-mt-64 {
margin-top: 64px !important;
}
.w699-pt-64 {
padding-top: 64px !important;
}
.w699-mr-64 {
margin-right: 64px !important;
}
.w699-pr-64 {
padding-right: 64px !important;
}
.w699-ml-64 {
margin-left: 64px !important;
}
.w699-pl-64 {
padding-left: 64px !important;
}
.w699-mb-64 {
margin-bottom: 64px !important;
}
.w699-pb-64 {
padding-bottom: 64px !important;
}
.w699-pd-72 {
padding: 72px !important;
}
.w699-mt-72 {
margin-top: 72px !important;
}
.w699-pt-72 {
padding-top: 72px !important;
}
.w699-mr-72 {
margin-right: 72px !important;
}
.w699-pr-72 {
padding-right: 72px !important;
}
.w699-ml-72 {
margin-left: 72px !important;
}
.w699-pl-72 {
padding-left: 72px !important;
}
.w699-mb-72 {
margin-bottom: 72px !important;
}
.w699-pb-72 {
padding-bottom: 72px !important;
}
.w699-pd-80 {
padding: 80px !important;
}
.w699-mt-80 {
margin-top: 80px !important;
}
.w699-pt-80 {
padding-top: 80px !important;
}
.w699-mr-80 {
margin-right: 80px !important;
}
.w699-pr-80 {
padding-right: 80px !important;
}
.w699-ml-80 {
margin-left: 80px !important;
}
.w699-pl-80 {
padding-left: 80px !important;
}
.w699-mb-80 {
margin-bottom: 80px !important;
}
.w699-pb-80 {
padding-bottom: 80px !important;
}
.w699-pd-96 {
padding: 96px !important;
}
.w699-mt-96 {
margin-top: 96px !important;
}
.w699-pt-96 {
padding-top: 96px !important;
}
.w699-mr-96 {
margin-right: 96px !important;
}
.w699-pr-96 {
padding-right: 96px !important;
}
.w699-ml-96 {
margin-left: 96px !important;
}
.w699-pl-96 {
padding-left: 96px !important;
}
.w699-mb-96 {
margin-bottom: 96px !important;
}
.w699-pb-96 {
padding-bottom: 96px !important;
}
.w699-pd-104 {
padding: 104px !important;
}
.w699-mt-104 {
margin-top: 104px !important;
}
.w699-pt-104 {
padding-top: 104px !important;
}
.w699-mr-104 {
margin-right: 104px !important;
}
.w699-pr-104 {
padding-right: 104px !important;
}
.w699-ml-104 {
margin-left: 104px !important;
}
.w699-pl-104 {
padding-left: 104px !important;
}
.w699-mb-104 {
margin-bottom: 104px !important;
}
.w699-pb-104 {
padding-bottom: 104px !important;
}
.w699-pd-112 {
padding: 112px !important;
}
.w699-mt-112 {
margin-top: 112px !important;
}
.w699-pt-112 {
padding-top: 112px !important;
}
.w699-mr-112 {
margin-right: 112px !important;
}
.w699-pr-112 {
padding-right: 112px !important;
}
.w699-ml-112 {
margin-left: 112px !important;
}
.w699-pl-112 {
padding-left: 112px !important;
}
.w699-mb-112 {
margin-bottom: 112px !important;
}
.w699-pb-112 {
padding-bottom: 112px !important;
}
.w699-pd-128 {
padding: 128px !important;
}
.w699-mt-128 {
margin-top: 128px !important;
}
.w699-pt-128 {
padding-top: 128px !important;
}
.w699-mr-128 {
margin-right: 128px !important;
}
.w699-pr-128 {
padding-right: 128px !important;
}
.w699-ml-128 {
margin-left: 128px !important;
}
.w699-pl-128 {
padding-left: 128px !important;
}
.w699-mb-128 {
margin-bottom: 128px !important;
}
.w699-pb-128 {
padding-bottom: 128px !important;
}
}
@media screen and (max-width: 449px) {
.sp-pd-0 {
padding: 0px !important;
}
.sp-mt-0 {
margin-top: 0px !important;
}
.sp-pt-0 {
padding-top: 0px !important;
}
.sp-mr-0 {
margin-right: 0px !important;
}
.sp-pr-0 {
padding-right: 0px !important;
}
.sp-ml-0 {
margin-left: 0px !important;
}
.sp-pl-0 {
padding-left: 0px !important;
}
.sp-mb-0 {
margin-bottom: 0px !important;
}
.sp-pb-0 {
padding-bottom: 0px !important;
}
.sp-pd-2 {
padding: 2px !important;
}
.sp-mt-2 {
margin-top: 2px !important;
}
.sp-pt-2 {
padding-top: 2px !important;
}
.sp-mr-2 {
margin-right: 2px !important;
}
.sp-pr-2 {
padding-right: 2px !important;
}
.sp-ml-2 {
margin-left: 2px !important;
}
.sp-pl-2 {
padding-left: 2px !important;
}
.sp-mb-2 {
margin-bottom: 2px !important;
}
.sp-pb-2 {
padding-bottom: 2px !important;
}
.sp-pd-4 {
padding: 4px !important;
}
.sp-mt-4 {
margin-top: 4px !important;
}
.sp-pt-4 {
padding-top: 4px !important;
}
.sp-mr-4 {
margin-right: 4px !important;
}
.sp-pr-4 {
padding-right: 4px !important;
}
.sp-ml-4 {
margin-left: 4px !important;
}
.sp-pl-4 {
padding-left: 4px !important;
}
.sp-mb-4 {
margin-bottom: 4px !important;
}
.sp-pb-4 {
padding-bottom: 4px !important;
}
.sp-pd-8 {
padding: 8px !important;
}
.sp-mt-8 {
margin-top: 8px !important;
}
.sp-pt-8 {
padding-top: 8px !important;
}
.sp-mr-8 {
margin-right: 8px !important;
}
.sp-pr-8 {
padding-right: 8px !important;
}
.sp-ml-8 {
margin-left: 8px !important;
}
.sp-pl-8 {
padding-left: 8px !important;
}
.sp-mb-8 {
margin-bottom: 8px !important;
}
.sp-pb-8 {
padding-bottom: 8px !important;
}
.sp-pd-16 {
padding: 16px !important;
}
.sp-mt-16 {
margin-top: 16px !important;
}
.sp-pt-16 {
padding-top: 16px !important;
}
.sp-mr-16 {
margin-right: 16px !important;
}
.sp-pr-16 {
padding-right: 16px !important;
}
.sp-ml-16 {
margin-left: 16px !important;
}
.sp-pl-16 {
padding-left: 16px !important;
}
.sp-mb-16 {
margin-bottom: 16px !important;
}
.sp-pb-16 {
padding-bottom: 16px !important;
}
.sp-pd-24 {
padding: 24px !important;
}
.sp-mt-24 {
margin-top: 24px !important;
}
.sp-pt-24 {
padding-top: 24px !important;
}
.sp-mr-24 {
margin-right: 24px !important;
}
.sp-pr-24 {
padding-right: 24px !important;
}
.sp-ml-24 {
margin-left: 24px !important;
}
.sp-pl-24 {
padding-left: 24px !important;
}
.sp-mb-24 {
margin-bottom: 24px !important;
}
.sp-pb-24 {
padding-bottom: 24px !important;
}
.sp-pd-32 {
padding: 32px !important;
}
.sp-mt-32 {
margin-top: 32px !important;
}
.sp-pt-32 {
padding-top: 32px !important;
}
.sp-mr-32 {
margin-right: 32px !important;
}
.sp-pr-32 {
padding-right: 32px !important;
}
.sp-ml-32 {
margin-left: 32px !important;
}
.sp-pl-32 {
padding-left: 32px !important;
}
.sp-mb-32 {
margin-bottom: 32px !important;
}
.sp-pb-32 {
padding-bottom: 32px !important;
}
.sp-pd-40 {
padding: 40px !important;
}
.sp-mt-40 {
margin-top: 40px !important;
}
.sp-pt-40 {
padding-top: 40px !important;
}
.sp-mr-40 {
margin-right: 40px !important;
}
.sp-pr-40 {
padding-right: 40px !important;
}
.sp-ml-40 {
margin-left: 40px !important;
}
.sp-pl-40 {
padding-left: 40px !important;
}
.sp-mb-40 {
margin-bottom: 40px !important;
}
.sp-pb-40 {
padding-bottom: 40px !important;
}
.sp-pd-48 {
padding: 48px !important;
}
.sp-mt-48 {
margin-top: 48px !important;
}
.sp-pt-48 {
padding-top: 48px !important;
}
.sp-mr-48 {
margin-right: 48px !important;
}
.sp-pr-48 {
padding-right: 48px !important;
}
.sp-ml-48 {
margin-left: 48px !important;
}
.sp-pl-48 {
padding-left: 48px !important;
}
.sp-mb-48 {
margin-bottom: 48px !important;
}
.sp-pb-48 {
padding-bottom: 48px !important;
}
.sp-pd-56 {
padding: 56px !important;
}
.sp-mt-56 {
margin-top: 56px !important;
}
.sp-pt-56 {
padding-top: 56px !important;
}
.sp-mr-56 {
margin-right: 56px !important;
}
.sp-pr-56 {
padding-right: 56px !important;
}
.sp-ml-56 {
margin-left: 56px !important;
}
.sp-pl-56 {
padding-left: 56px !important;
}
.sp-mb-56 {
margin-bottom: 56px !important;
}
.sp-pb-56 {
padding-bottom: 56px !important;
}
.sp-pd-64 {
padding: 64px !important;
}
.sp-mt-64 {
margin-top: 64px !important;
}
.sp-pt-64 {
padding-top: 64px !important;
}
.sp-mr-64 {
margin-right: 64px !important;
}
.sp-pr-64 {
padding-right: 64px !important;
}
.sp-ml-64 {
margin-left: 64px !important;
}
.sp-pl-64 {
padding-left: 64px !important;
}
.sp-mb-64 {
margin-bottom: 64px !important;
}
.sp-pb-64 {
padding-bottom: 64px !important;
}
.sp-pd-72 {
padding: 72px !important;
}
.sp-mt-72 {
margin-top: 72px !important;
}
.sp-pt-72 {
padding-top: 72px !important;
}
.sp-mr-72 {
margin-right: 72px !important;
}
.sp-pr-72 {
padding-right: 72px !important;
}
.sp-ml-72 {
margin-left: 72px !important;
}
.sp-pl-72 {
padding-left: 72px !important;
}
.sp-mb-72 {
margin-bottom: 72px !important;
}
.sp-pb-72 {
padding-bottom: 72px !important;
}
.sp-pd-80 {
padding: 80px !important;
}
.sp-mt-80 {
margin-top: 80px !important;
}
.sp-pt-80 {
padding-top: 80px !important;
}
.sp-mr-80 {
margin-right: 80px !important;
}
.sp-pr-80 {
padding-right: 80px !important;
}
.sp-ml-80 {
margin-left: 80px !important;
}
.sp-pl-80 {
padding-left: 80px !important;
}
.sp-mb-80 {
margin-bottom: 80px !important;
}
.sp-pb-80 {
padding-bottom: 80px !important;
}
.sp-pd-96 {
padding: 96px !important;
}
.sp-mt-96 {
margin-top: 96px !important;
}
.sp-pt-96 {
padding-top: 96px !important;
}
.sp-mr-96 {
margin-right: 96px !important;
}
.sp-pr-96 {
padding-right: 96px !important;
}
.sp-ml-96 {
margin-left: 96px !important;
}
.sp-pl-96 {
padding-left: 96px !important;
}
.sp-mb-96 {
margin-bottom: 96px !important;
}
.sp-pb-96 {
padding-bottom: 96px !important;
}
.sp-pd-104 {
padding: 104px !important;
}
.sp-mt-104 {
margin-top: 104px !important;
}
.sp-pt-104 {
padding-top: 104px !important;
}
.sp-mr-104 {
margin-right: 104px !important;
}
.sp-pr-104 {
padding-right: 104px !important;
}
.sp-ml-104 {
margin-left: 104px !important;
}
.sp-pl-104 {
padding-left: 104px !important;
}
.sp-mb-104 {
margin-bottom: 104px !important;
}
.sp-pb-104 {
padding-bottom: 104px !important;
}
.sp-pd-112 {
padding: 112px !important;
}
.sp-mt-112 {
margin-top: 112px !important;
}
.sp-pt-112 {
padding-top: 112px !important;
}
.sp-mr-112 {
margin-right: 112px !important;
}
.sp-pr-112 {
padding-right: 112px !important;
}
.sp-ml-112 {
margin-left: 112px !important;
}
.sp-pl-112 {
padding-left: 112px !important;
}
.sp-mb-112 {
margin-bottom: 112px !important;
}
.sp-pb-112 {
padding-bottom: 112px !important;
}
.sp-pd-128 {
padding: 128px !important;
}
.sp-mt-128 {
margin-top: 128px !important;
}
.sp-pt-128 {
padding-top: 128px !important;
}
.sp-mr-128 {
margin-right: 128px !important;
}
.sp-pr-128 {
padding-right: 128px !important;
}
.sp-ml-128 {
margin-left: 128px !important;
}
.sp-pl-128 {
padding-left: 128px !important;
}
.sp-mb-128 {
margin-bottom: 128px !important;
}
.sp-pb-128 {
padding-bottom: 128px !important;
}
}
.ml-auto {
margin-left: auto !important;
}
.mg-auto {
margin: 0 auto !important;
}
@media screen and (max-width: 959px) {
.tb-mg-auto {
margin: 0 auto !important;
}
}
@media screen and (max-width: 699px) {
.w699-mg-auto {
margin: 0 auto !important;
}
}
@media screen and (max-width: 449px) {
.sp-mg-auto {
margin: 0 auto !important;
}
}
.width-10 {
width: 10%;
}
.height-10 {
height: 10%;
}
.width-20 {
width: 20%;
}
.height-20 {
height: 20%;
}
.width-30 {
width: 30%;
}
.height-30 {
height: 30%;
}
.width-40 {
width: 40%;
}
.height-40 {
height: 40%;
}
.width-50 {
width: 50%;
}
.height-50 {
height: 50%;
}
.width-60 {
width: 60%;
}
.height-60 {
height: 60%;
}
.width-70 {
width: 70%;
}
.height-70 {
height: 70%;
}
.width-80 {
width: 80%;
}
.height-80 {
height: 80%;
}
.width-90 {
width: 90%;
}
.height-90 {
height: 90%;
}
.width-100 {
width: 100%;
}
.height-100 {
height: 100%;
}
@media screen and (max-width: 959px) {
.tb-width-10 {
width: 10%;
}
.tb-height-10 {
height: 10%;
}
.tb-width-20 {
width: 20%;
}
.tb-height-20 {
height: 20%;
}
.tb-width-30 {
width: 30%;
}
.tb-height-30 {
height: 30%;
}
.tb-width-40 {
width: 40%;
}
.tb-height-40 {
height: 40%;
}
.tb-width-50 {
width: 50%;
}
.tb-height-50 {
height: 50%;
}
.tb-width-60 {
width: 60%;
}
.tb-height-60 {
height: 60%;
}
.tb-width-70 {
width: 70%;
}
.tb-height-70 {
height: 70%;
}
.tb-width-80 {
width: 80%;
}
.tb-height-80 {
height: 80%;
}
.tb-width-90 {
width: 90%;
}
.tb-height-90 {
height: 90%;
}
.tb-width-100 {
width: 100%;
}
.tb-height-100 {
height: 100%;
}
}
@media screen and (max-width: 699px) {
.w699-width-10 {
width: 10%;
}
.w699-height-10 {
height: 10%;
}
.w699-width-20 {
width: 20%;
}
.w699-height-20 {
height: 20%;
}
.w699-width-30 {
width: 30%;
}
.w699-height-30 {
height: 30%;
}
.w699-width-40 {
width: 40%;
}
.w699-height-40 {
height: 40%;
}
.w699-width-50 {
width: 50%;
}
.w699-height-50 {
height: 50%;
}
.w699-width-60 {
width: 60%;
}
.w699-height-60 {
height: 60%;
}
.w699-width-70 {
width: 70%;
}
.w699-height-70 {
height: 70%;
}
.w699-width-80 {
width: 80%;
}
.w699-height-80 {
height: 80%;
}
.w699-width-90 {
width: 90%;
}
.w699-height-90 {
height: 90%;
}
.w699-width-100 {
width: 100%;
}
.w699-height-100 {
height: 100%;
}
}
@media screen and (max-width: 449px) {
.sp-width-10 {
width: 10%;
}
.sp-height-10 {
height: 10%;
}
.sp-width-20 {
width: 20%;
}
.sp-height-20 {
height: 20%;
}
.sp-width-30 {
width: 30%;
}
.sp-height-30 {
height: 30%;
}
.sp-width-40 {
width: 40%;
}
.sp-height-40 {
height: 40%;
}
.sp-width-50 {
width: 50%;
}
.sp-height-50 {
height: 50%;
}
.sp-width-60 {
width: 60%;
}
.sp-height-60 {
height: 60%;
}
.sp-width-70 {
width: 70%;
}
.sp-height-70 {
height: 70%;
}
.sp-width-80 {
width: 80%;
}
.sp-height-80 {
height: 80%;
}
.sp-width-90 {
width: 90%;
}
.sp-height-90 {
height: 90%;
}
.sp-width-100 {
width: 100%;
}
.sp-height-100 {
height: 100%;
}
}
.br-pc {
display: block;
}
.br-tb {
display: none;
}
.br-sp {
display: none;
}
.br-pc-tb {
display: block;
}
.br-tb-sp {
display: none;
}
@media screen and (max-width: 959px) {
.br-pc {
display: none;
}
.br-tb {
display: block;
}
.br-pc-tb {
display: block;
}
.br-tb-sp {
display: block;
}
}
@media screen and (max-width: 449px) {
.br-tb {
display: none;
}
.br-sp {
display: block;
}
.br-pc-tb {
display: none;
}
}
.align-center {
text-align: center !important;
}
.align-left {
text-align: left !important;
}
.align-right {
text-align: right !important;
}
@media screen and (max-width: 959px) {
.tb-align-center {
text-align: center !important;
}
.tb-align-left {
text-align: left !important;
}
.tb-align-right {
text-align: right !important;
}
}
@media screen and (max-width: 699px) {
.w699-align-center {
text-align: center !important;
}
.w699-align-left {
text-align: left !important;
}
.w699-align-right {
text-align: right !important;
}
}
@media screen and (max-width: 449px) {
.sp-align-center {
text-align: center !important;
}
.sp-align-left {
text-align: left !important;
}
.sp-align-right {
text-align: right !important;
}
}
.block {
/* display: block !important; */
}
/*
.inline {
display: inline !important;
}
.inline-block {
display: inline-block !important;
} */
.h1-margin-1 {
margin: 24px 0 80px;
}
.h1-margin-2 {
margin: 24px 0 40px;
}
.h1-article {
margin: 40px 0 16px;
}
.h3-article,
.h4-article {
margin-top: 24px;
}
strong {
display: block;
margin-top: 16px;
}
h1 > strong,
h2 > strong,
h3 > strong,
h4 > strong,
h5 > strong,
p > strong,
span > strong,
li > strong,
dt > strong,
dd > strong {
display: inline;
}
p + .h3-article,
p + .h4-article {
margin-top: 32px;
}
.article-inner section,
.article-content section {
margin-top: 64px;
}
.article-inner * + p,
.article-content * + p {
margin-top: 16px;
}
.article-inner figcaption,
.article-inner .figcaption,
.article-content figcaption,
.article-content .figcaption {
margin-top: 8px;
}
.pc-show {
display: block;
}
.pc-hide {
display: none;
}
.tb-show {
display: none;
}
.tb-hide {
display: block;
}
.w699-show {
display: none;
}
.w699-hide {
display: block;
}
.sp-show {
display: none;
}
.sp-hide {
display: block;
}
@media screen and (max-width: 959px) {
.pc-show {
display: none;
}
.pc-hide {
display: block;
}
.tb-show {
display: block;
}
.tb-hide {
display: none;
}
}
@media screen and (max-width: 699px) {
.w699-show {
display: block;
}
.w699-hide {
display: none;
}
.tb-show {
display: none;
}
.tb-hide {
display: block;
}
}
@media screen and (max-width: 449px) {
.w699-show {
display: none;
}
.w699-hide {
display: block;
}
.sp-show {
display: block;
}
.sp-hide {
display: none;
}
}
.radius-10 {
border-radius: 10px;
}
.radius-12 {
border-radius: 12px;
}
.radius-20 {
border-radius: 20px;
}
fieldset {
padding: 0;
}
fieldset + fieldset {
margin-top: 32px;
}
fieldset legend {
margin-bottom: 16px;
}
.radio-lists {
display: flex;
flex-direction: column;
padding: 24px;
}
.radio-lists input[type=radio] {
position: absolute;
opacity: 0;
}
.radio-lists input[type=radio]:focus-visible + label::before {
outline: var(--accent-color1) auto 1px;
}
.radio-lists input[type=radio]:checked + label::before {
background-color: var(--accent-color1);
}
.radio-lists input[type=radio]:checked + label::after {
opacity: 1;
}
.radio-lists label {
position: relative;
display: flex;
align-items: center;
gap: 8px;
font-size: 1.4rem;
padding: 12px 8px;
cursor: pointer;
}
.radio-lists label::before {
content: "";
background: #CFDAE3;
border-radius: 100%;
border: 1px solid #DDE5EB;
width: 24px;
height: 24px;
}
.radio-lists label::after {
content: "";
position: absolute;
left: 15px;
background: #fff;
border-radius: 100%;
border: 1px solid #DDE5EB;
width: 10px;
height: 10px;
opacity: 0;
}
@media screen and (max-width: 959px) {
fieldset {
border-radius: 9999px;
}
fieldset:focus, fieldset:focus-visible {
outline: none;
}
fieldset:focus legend, fieldset:focus-visible legend {
box-shadow: 0 0 1px 3px var(--accent-color1);
}
fieldset + fieldset {
margin-top: 0;
margin-left: 24px;
}
fieldset legend {
position: relative;
margin-bottom: 0;
display: block;
width: 100%;
max-width: 114px;
height: 48px;
padding: 0 54px 0 24px;
line-height: 48px;
font-size: 1.4rem;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
fieldset legend::after {
content: "";
position: absolute;
top: 50%;
right: 24px;
transform: translate(0, -50%);
display: block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M6.39844 10.5L12.3984 16.5L18.3984 10.5' stroke='%237C8A95' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.radio-lists {
max-height: 256px;
overflow-y: auto;
position: absolute;
transform: translate(0, 4px);
width: 220px;
padding: 8px;
border-radius: 12px;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(27, 31, 36, 0.12), 0px 8px 24px 0px rgba(66, 74, 83, 0.12);
opacity: 0;
visibility: hidden;
transition: 0.4s;
}
fieldset.active legend {
box-shadow: 0 0 1px 3px var(--accent-color1);
border-radius: 9999px;
}
fieldset.active legend::after {
transform: translate(0, -44%) rotate(180deg);
}
fieldset.active .radio-lists {
opacity: 1;
visibility: visible;
}
}
#main-slide .splide__track {
border-radius: 12px;
}
#thumbnail-slide {
margin-top: 24px;
}
#thumbnail-slide ul {
justify-content: center;
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
border: 3px solid var(--accent-color1);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.skip-link {
position: absolute;
left: -9000em;
top: 0;
z-index: 2000;
display: block;
padding: 0.5rem 1rem;
background: var(--bg2);
}
.skip-link:focus {
left: 0;
}
.header-wrapper {
overflow: visible;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
transform: translate(0, 0);
transition: transform 0.6s;
background: var(--bg1);
}
.header-wrapper.header-scroll-hide {
transform: translate(0, -77px);
}
.header-wrapper.load {
overflow: hidden;
}
@media screen and (max-width: 1200px) {
.header-wrapper.header-scroll-hide {
transform: translate(0, -86px);
}
}
header {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "logo nav-sub" "nav-main nav-main";
position: relative;
overflow: initial;
transition: 0.4s;
}
header .logo {
padding: 16px 32px 0 2.5vw;
transform-origin: left bottom;
transition: 0.4s;
background: var(--bg1);
}
header .logo img {
height: 60px;
}
@media screen and (max-width: 1200px) {
header .logo img {
height: 70px;
}
}
header .logo {
grid-area: logo;
}
.nav-main {
grid-area: nav-main;
}
.nav-sub {
grid-area: nav-sub;
}
header.load {
overflow: hidden;
transition: transform 0;
}
.loader {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--main);
animation: fadein-keyframes 0.4s ease 0.4s 1 forwards;
}
@keyframes fadein-keyframes {
0% {
opacity: 1;
}
100% {
opacity: 0;
z-index: -10;
}
}
.nav-wrapper {
display: contents;
}
.nav-main {
margin: 8px 2.5vw 6px;
transition: opacity 0.4s;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 8px 0px #FFF;
}
.nav-main > ul {
display: grid;
align-items: center;
justify-content: space-between;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
padding: 4px 4px 4px 6px;
}
.nav-main > ul > li {
height: 100%;
}
.nav-main > ul > li > button,
.nav-main > ul > li > a {
width: 100%;
height: 100%;
padding: 12px;
text-align: center;
border-radius: 9999px;
transition: 0.4s;
font-size: 1.6rem;
font-weight: 400;
color: var(--text-color1);
white-space: nowrap;
cursor: pointer;
}
@media (hover: hover) {
.nav-main > ul > li > button:hover,
.nav-main > ul > li > a:hover {
color: var(--text-color2);
background: var(--primary-color);
}
.nav-main > ul > li > button:hover::after,
.nav-main > ul > li > a:hover::after {
border-color: #fff;
}
}
.nav-main > ul > li > a {
display: inline-block;
}
.nav-main > ul > li.current > button,
.nav-main > ul > li.current > a {
color: var(--primary-color);
}
.nav-main > ul > li.current > button::after,
.nav-main > ul > li.current > a::after {
border-color: var(--primary-color);
}
@media (hover: hover) {
.nav-main > ul > li.current > button:hover,
.nav-main > ul > li.current > a:hover {
color: var(--text-color2);
}
.nav-main > ul > li.current > button:hover::after,
.nav-main > ul > li.current > a:hover::after {
border-color: #fff;
}
}
.has-subnav > button {
display: flex;
align-items: center;
justify-content: center;
}
.has-subnav > button::after {
content: "";
display: block;
margin-left: 12px;
width: 6px;
height: 6px;
border-bottom: 0.094rem solid var(--text-color1);
border-right: 0.094rem solid var(--text-color1);
transform: rotate(45deg) translate(-0.3rem, 0.15rem);
}
.has-subnav[aria-expanded=true] > button {
background: var(--primary-color);
color: var(--text-color2) !important;
}
.has-subnav[aria-expanded=true] > button::after {
transform: rotate(-135deg) translate(0.15rem, -0.3rem);
border-color: var(--text-color2) !important;
}
.nav-sub {
display: flex;
justify-content: end;
align-items: center;
padding: 16px 2.5vw 0 0;
background: var(--bg1);
transition: 0.4s;
}
.nav-sub ul {
display: flex;
justify-content: end;
align-items: center;
gap: 24px;
white-space: nowrap;
}
.nav-sub ul li {
font-size: 1.4rem;
}
@media (hover: hover) {
.nav-sub ul li a:hover {
text-decoration: underline;
}
}
.nav-sub ul li.current a {
color: var(--primary-color);
}
.close-button {
position: absolute;
top: 16px;
right: 16px;
}
.close-button button {
width: 32px;
height: 32px;
position: relative;
}
.close-button button:before, .close-button button:after {
content: "";
display: block;
width: 100%;
height: 2px;
background: var(--text-color2);
transform: rotate(45deg);
transform-origin: 0% 50%;
position: absolute;
top: calc(14% - 1px);
left: 14%;
border-radius: 4px;
}
.close-button button:after {
transform: rotate(-45deg);
transform-origin: 100% 50%;
left: auto;
right: 15%;
}
.close-button button:hover {
cursor: pointer;
}
.close-button button:focus-visible {
outline: 1px solid var(--text-color2);
}
.header-blank-link {
padding-right: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M9.20513 13H13V3H3V6.79487' stroke='%237C8A95' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 12V9M7 9H4M7 9L3 13' stroke='%237C8A95' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/16px 16px;
}
@media (hover: hover) {
.header-blank-link:hover {
text-decoration: underline;
}
}
.search-drop {
display: flex;
align-items: center;
cursor: pointer;
}
.search-drop .search-icon circle,
.search-drop .search-icon path {
stroke: var(--primary-color);
}
.search-drop span {
display: inline-block;
margin-bottom: 2px;
margin-left: 12px;
margin-right: 4px;
font-size: 1.4rem;
color: var(--primary-color);
}
.header-search {
position: absolute;
top: 24px;
right: 32px;
display: flex;
align-items: center;
justify-content: end;
gap: 16px;
width: 50%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
}
.header-search.active {
opacity: 1;
visibility: visible;
}
.header-search .search-form {
display: flex;
width: 100%;
}
.header-search .search-form .search-input {
padding: 0 48px 0 24px;
min-height: 40px;
}
.header-search .search-form .search-btn {
position: absolute;
right: 16px;
top: 50%;
transform: translate(0, -50%);
min-width: auto;
height: auto;
padding: 0;
border-radius: none;
background: none;
box-shadow: none;
}
.header-search .search-form .search-btn:before, .header-search .search-form .search-btn:after {
display: none;
}
.header-search .search-close {
display: flex;
width: 24px;
height: 24px;
}
.header-search .search-close button {
cursor: pointer;
}
.sug_list {
max-height: 200px;
overflow-y: auto;
opacity: 1;
}
.sp-search-button {
display: none;
margin-left: auto;
margin-right: 0;
transition: opacity 0.4s;
}
.a11y-nav.search-open .nav-sub ul,
.a11y-nav.search-open .sp-search-button,
.a11y-nav.search-open .nav-toggle {
opacity: 0;
visibility: hidden;
}
@media screen and (max-width: 959px) {
.a11y-nav.search-open .logo {
opacity: 0;
visibility: hidden;
}
}
.nav-toggle {
display: none;
position: relative;
margin-left: 16px;
transition: opacity 0.4s;
}
.sp-subnav-title {
display: none;
margin-top: 24px;
font-size: 2rem;
color: var(--text-color2);
}
@media screen and (min-width: 960px) {
.header-wrapper {
box-shadow: 4px 4px 8px 0px var(--bg1);
}
.has-subnav[aria-expanded=true] .subnav-wrapper {
visibility: visible;
opacity: 1;
}
.has-subnav[aria-expanded=true] .subnav-section,
.has-subnav[aria-expanded=true] .subnav-list {
opacity: 1;
visibility: visible;
}
.has-subnav[aria-expanded=false] .subnav-section a,
.has-subnav[aria-expanded=false] .subnav-list a {
pointer-events: none;
cursor: default;
}
.subnav-section,
.subnav-list {
opacity: 0;
visibility: hidden;
transition: 0.4s;
}
.subnav-wrapper.animation-none {
transition: 0s;
}
.subnav.noshow .subnav-section,
.subnav.noshow .subnav-list {
opacity: 0;
visibility: hidden;
}
.subnav-wrapper {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
width: 100%;
padding: 16px 2.5vw 0;
transition: 0.4s;
background: var(--bg1);
}
.subnav-wrapper::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 16px;
top: -16px;
}
.subnav {
position: relative;
display: flex;
justify-content: space-between;
gap: 48px;
padding: 48px 80px 48px 48px;
border-radius: 12px;
background: var(--primary-color);
box-shadow: 0px 1px 3px 0px rgba(27, 31, 36, 0.12), 0px 8px 24px 0px rgba(66, 74, 83, 0.12);
color: var(--text-color2);
}
.subnav-head {
display: contents;
}
.sp-menu-back-button {
display: none;
}
.subnav-section {
width: 320px;
}
.subnav-section > a {
display: inline-flex;
align-items: center;
margin-bottom: 16px;
font-size: 2.4rem;
color: var(--text-color2);
border-bottom: 1px solid var(--primary-color);
transition: 0.4s;
}
.subnav-section > a::after {
content: "";
display: block;
margin-left: 8px;
width: 24px;
height: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M12.8047 6H0.804688' stroke='white' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.14062 1.32812L12.8073 5.99479L8.14062 10.6615' stroke='white' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
}
@media screen and (min-width: 960px) and (hover: hover) {
.subnav-section > a:hover {
border-color: #fff;
}
}
@media screen and (min-width: 960px) {
.subnav-section > p {
font-size: 1.4rem;
}
.subnav-list {
width: calc(100% - 320px - 48px);
}
.subnav-list > ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 16px;
height: max-content;
}
.subnav-list > ul li a {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-bottom: 24px;
color: var(--text-color2);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
transition: 0.4s;
}
.subnav-list > ul li a::after {
content: "";
display: block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M12.8047 6H0.804688' stroke='white' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.14062 1.32812L12.8073 5.99479L8.14062 10.6615' stroke='white' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
}
@media screen and (min-width: 960px) and (hover: hover) {
.subnav-list > ul li a:hover {
border-color: #fff;
}
}
@media screen and (min-width: 960px) {
.subnav-list > ul li:nth-child(n+4) a {
padding-top: 24px;
align-items: center;
}
.subnav-list.owned-media > span {
display: inline-block;
margin-bottom: 16px;
font-size: 1.8rem;
}
.subnav-list.owned-media > ul {
grid-template-columns: repeat(4, 1fr);
}
.subnav-list.owned-media > ul li a {
display: block;
overflow: hidden;
height: 100%;
padding-bottom: 0;
border-bottom: none;
border-radius: 12px;
background: var(--bg1);
}
.subnav-list.owned-media > ul li a::after {
display: none;
}
.subnav-list.owned-media > ul li a .title {
width: 100%;
padding: 12px 16px;
font-size: 1.4rem;
color: var(--text-color1);
line-height: 1.8;
}
.subnav-list.owned-media > ul li a .title p {
height: 100%;
min-height: 48px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.subnav-list.owned-media > ul li a img {
object-fit: cover;
width: 100%;
aspect-ratio: 1/1;
}
}
@media screen and (min-width: 960px) and (hover: hover) {
.subnav-list.owned-media > ul li a:hover {
background: var(--hover-bg1);
}
}
@media screen and (min-width: 960px) {
.subnav-list.owned-media > ul li:nth-child(n+4) a {
padding-top: 0;
}
.subnav-list.owned-media > ul li.next-stories-link a .title {
position: relative;
padding: 12px 16px 32px 16px;
}
.subnav-list.owned-media > ul li.next-stories-link a .title::after {
content: "";
position: absolute;
bottom: 10px;
right: 10px;
width: 93px;
height: 16px;
background: url(/img/insight-inside/next_stories.png) no-repeat center/contain;
}
.menu-bg {
transition: opacity 0.4s, visibility 0.4s;
visibility: hidden;
opacity: 0;
}
.menu-bg.menu-bg-active {
visibility: visible;
opacity: 1;
position: fixed;
width: 100%;
height: 100vh;
z-index: 9;
}
}
@media screen and (max-width: 1200px) {
.nav-main > ul {
gap: 8px;
}
.subnav {
display: flex;
flex-direction: column;
}
.subnav-list {
width: 100%;
}
.search-drop .search-icon circle,
.search-drop .search-icon path {
stroke: #7C8A95;
}
.search-drop span {
display: none;
}
}
@media screen and (max-width: 959px) {
.header-wrapper {
padding: 0;
}
header {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
margin: 16px 2.5vw 5px;
padding: 10px 24px 10px 16px;
border-radius: 9999px;
background: var(--bg1);
box-shadow: 3px 3px 6px 0px rgba(64, 123, 190, 0.24), -4px -2px 24px 0px #FFF;
}
header .logo {
width: 48vw;
padding: 0;
}
header .logo img {
width: 180px;
max-height: 48px;
}
.scroll-fixed {
overscroll-behavior: none;
touch-action: none;
-webkit-overflow-scrolling: none;
overflow: hidden;
width: 100%;
}
.header-search {
top: 50%;
right: 24px;
transform: translateY(-50%);
}
.header-search.active {
width: calc(100% - 40px);
}
.header-search .search-form .search-input {
min-height: 46px;
}
.sp-buttons {
display: flex;
}
.sp-search-button {
display: flex;
}
.search-close button {
width: 32px;
}
.nav-toggle {
display: block;
}
.nav-toggle.open img {
width: 24px;
height: 24px;
}
.nav-toggle.close {
z-index: 1000;
margin: 0 0 0 auto;
padding: 6px;
}
.nav-toggle.close svg {
width: 20px;
height: 20px;
}
.nav-wrapper {
visibility: hidden;
opacity: 0;
overflow-y: auto;
transition: 0.4s;
position: absolute;
top: -16px;
left: -2.5vw;
z-index: 100;
display: flex;
flex-direction: column;
width: 100vw;
min-height: 100vh;
height: 100vh;
padding: 24px 24px 40px;
background: var(--primary-color);
}
.nav-wrapper.sp-menu-open {
visibility: visible;
opacity: 1;
}
.nav-main {
display: flex;
margin: 16px 0 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.nav-main ul {
grid-template-columns: 1fr;
gap: 0;
width: 100%;
padding: 0;
}
.nav-main ul li {
transition: all 0.4s;
}
.nav-main ul li a,
.nav-main ul li button {
display: flex;
padding: 24px 0 16px;
text-align: left;
justify-content: space-between;
color: var(--text-color2);
font-size: 1.6rem;
border-radius: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
white-space: initial;
}
.nav-main.noshow .has-subnav > button {
visibility: hidden;
opacity: 0;
}
.nav-main.noshow > ul > li:not(.has-subnav) {
opacity: 0;
}
.has-subnav .subnav-wrapper {
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 100;
top: 24px;
width: calc(100% - 48px);
height: 100%;
background: var(--primary-color);
transition: 0.4s;
}
.has-subnav > button::after {
width: 10px;
height: 10px;
border-bottom: 1px solid var(--text-color2);
border-right: 1px solid var(--text-color2);
transform: rotate(-45deg) translate(-6px, -6px);
}
.has-subnav[aria-expanded=true] .subnav-wrapper {
visibility: visible;
opacity: 1;
}
.has-subnav[aria-expanded=true] > button {
border-radius: 0;
background: none;
box-shadow: none;
}
.has-subnav[aria-expanded=true] > button::after {
transform: rotate(-45deg) translate(-6px, -6px);
}
.has-subnav[aria-expanded=true] .subnav {
padding-bottom: 20vh;
}
.sp-menu-back-button button {
align-items: center;
gap: 7px;
padding: 0 !important;
font-size: 1.4rem;
border-bottom: none !important;
}
.sp-menu-back-button button::before {
content: "";
display: block;
width: 16px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M0.804688 5L11.3047 5' stroke='white' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.89062 9.08594L0.807292 5.0026L4.89063 0.919269' stroke='white' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.sp-subnav-title {
display: block;
}
.subnav-section a::after {
display: none;
}
.subnav-section p {
display: none;
}
.subnav-list.owned-media > span {
display: inline-block;
margin-top: 16px;
color: var(--text-color2);
}
.subnav-list.owned-media > ul li a {
justify-content: start;
}
.subnav-list.owned-media > ul li a .title {
margin-left: 12px;
color: var(--text-color2);
}
.subnav-list.owned-media > ul li a img {
height: 22vw;
width: 22vw;
object-fit: cover;
aspect-ratio: 1/1;
}
.subnav-list.owned-media > ul li.next-stories-link a .title {
position: relative;
padding-bottom: 32px;
}
.subnav-list.owned-media > ul li.next-stories-link a .title::after {
content: "";
position: absolute;
bottom: 0;
right: 10px;
width: 93px;
height: 16px;
background: url(/img/insight-inside/next_stories.png) no-repeat center/contain;
}
.nav-sub {
justify-content: left;
margin-top: 48px;
padding: 0 0 20vh;
background: none;
}
.nav-sub ul {
flex-direction: column;
align-items: flex-start;
}
.nav-sub ul li {
font-size: 1.4rem;
}
.nav-sub ul li a {
color: var(--text-color2);
}
.nav-sub ul li:last-child {
display: none;
}
.nav-sub.noshow {
visibility: hidden;
opacity: 0;
}
.close-button {
display: none;
}
.header-blank-link {
padding-right: 17px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.25982 11H11.0547V1H1.05469V4.79487' stroke='white' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.05469 10V7M5.05469 7H2.05469M5.05469 7L1.05469 11' stroke='white' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/10px 10px;
}
}
@media screen and (max-width: 449px) {
.search-close button {
width: 24px;
}
}
footer {
margin: 0 auto;
padding: 40px 5vw 10px;
background: var(--bg3);
}
footer ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
footer ul li a {
font-size: 1.6rem;
transition: 0.4s;
}
@media (hover: hover) {
footer ul li a:hover {
text-decoration: underline;
}
}
footer button {
font-size: 1.4rem;
}
.footer .logo-link {
display: block;
width: 300px;
margin: 0 auto;
}
.footer-nav-sub {
position: relative;
width: 80vw;
max-width: 800px;
margin: 0 auto;
padding-top: 20px;
}
.footer-nav-sub a {
font-size: 1.4rem;
}
.footer-blank-link {
padding-right: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M9.20513 13H13V3H3V6.79487' stroke='%237C8A95' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 12V9M7 9H4M7 9L3 13' stroke='%237C8A95' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/16px 16px;
}
.footer-copyright {
margin-top: 40px;
text-align: center;
font-size: 1.2rem;
color: var(--text-color3);
}
@media screen and (max-width: 959px) {
footer ul {
justify-content: flex-start;
}
footer ul li a {
font-size: 1.4rem;
}
.footer-accordion button {
position: relative;
width: 100%;
margin-bottom: 0;
padding: 16px 0;
font-weight: 400;
text-align: left;
}
.footer-accordion button::before {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 16px;
height: 1px;
transform: translateY(-50%) rotate(90deg);
background: var(--primary-color);
transition: 0.4s;
}
.footer-accordion button::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 16px;
height: 1px;
transform: translateY(-50%);
background: var(--primary-color);
}
.footer-accordion button.open::before {
opacity: 0;
transform: translateY(-50%) rotate(180deg);
}
}
@media screen and (max-width: 959px) and (hover: hover) {
.footer-accordion button a:hover {
text-decoration: none;
cursor: default;
}
}
@media screen and (max-width: 959px) {
.footer-accordion > ul {
display: none;
padding-left: 16px;
gap: 0;
}
.footer-accordion > ul li {
opacity: 0;
transition: 0.4s;
}
.footer-accordion > ul li a {
display: block;
padding: 8px 0;
}
.footer-accordion > ul li:first-child {
display: block;
}
.footer-accordion > ul.open li {
opacity: 1;
}
.footer-accordion .footer-blank-link {
padding-right: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M9.20513 13H13V3H3V6.79487' stroke='%237C8A95' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 12V9M7 9H4M7 9L3 13' stroke='%237C8A95' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 60px center/16px 16px;
}
.footer-accordion-button a {
display: none;
}
.footer-accordion-button button {
display: block;
}
.footer-nav-main {
width: auto;
}
.footer-nav-main > ul {
grid-template-columns: 1fr;
grid-template-areas: none;
gap: 0;
}
.footer-nav-main > ul > li {
grid-area: auto !important;
}
.footer-nav-main > ul > li:first-child, .footer-nav-main > ul > li:nth-child(2), .footer-nav-main > ul > li:nth-child(3) {
order: 1;
}
.footer-nav-main > ul > li:nth-child(4), .footer-nav-main > ul > li:nth-child(5) {
order: 2;
}
.footer-nav-main > ul > li:nth-child(6), .footer-nav-main > ul > li:nth-child(7), .footer-nav-main > ul > li:last-child {
order: 3;
}
.footer-nav-main > ul > li > a {
display: block;
padding: 16px 0;
font-weight: 400;
}
.footer-nav-main > ul > li:not(:last-child) {
border-bottom: 1px solid #CFD7DD;
}
.footer-nav-main .sm-nav {
margin-top: 40px;
}
.footer-nav-main .sm-nav ul {
flex-direction: row;
gap: 4px 12px;
}
.footer-nav-sub {
width: auto;
padding-top: 27px;
}
.footer-nav-sub::before {
display: none;
}
.footer-nav-sub > ul {
justify-content: center;
gap: 35px;
}
}
nav .breadcrumb {
margin: 0 auto;
padding: 16px 80px;
}
.breadcrumb ul li {
position: relative;
display: inline;
font-size: 1.4rem;
line-height: 1;
}
.breadcrumb ul li > a {
color: var(--primary-color);
text-decoration: underline;
transition: 0.3s;
}
.breadcrumb ul li > a:hover {
text-decoration: none;
}
.breadcrumb ul li:first-child {
padding-right: 12px;
}
.breadcrumb ul li:not(:first-child) {
padding-left: 20px;
padding-right: 8px;
}
.breadcrumb ul li:not(:first-child):before {
content: "";
position: absolute;
top: 2px;
left: -4px;
display: block;
width: 16px;
height: 16px;
background: url(/common/img/icon/arrow_breadcrumb.svg) no-repeat 100%/contain;
}
@media screen and (max-width: 959px) {
nav .breadcrumb {
padding: 16px 40px;
}
}
@media screen and (max-width: 449px) {
nav .breadcrumb {
padding: 16px 18px;
}
}
@media screen and (max-width: 449px) {
.append-breadcrumbs.sp-hide {
display: none;
}
}
body {
width: 100%;
overflow-y: inherit;
overflow-x: hidden;
background: var(--bg1);
}