@charset "utf-8";
   @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=PT+Sans:wght@400;700&family=Zen+Maru+Gothic:wght@700&display=swap");
:root { --body-font-family: 'Noto Sans JP', sans-serif;
--font-family01: 'Noto Sans JP', sans-serif;
--font-family02: 'Noto Sans JP', sans-serif;
--font-family03: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
--font-family04: 'PT Sans', 'Noto Sans JP', sans-serif;
--font-family05: 'Segoe UI', 'Noto Sans JP', sans-serif;
--body-font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.1294), 1.6rem); --content-max-width: 1100px;
--content-max-width-lg: 1240px; --color-background: #fff;
--color-font: #333;
--color-font-2: #242422;
--color-primary: #003399;
--color-primary-shade: #36c9c6;
--color-primary-tint: #36c9c6;
--color-secondary: #5b9bd5;
--color-secondary-tint: #2578bb;
--color-table-border: #ebebeb;
--color-table-background: #f3f8ff;
--color-blue-light: rgba(1, 64, 153, 0.1);
--color-gray: #999;
--color-yellow-light: #f8f8ef;
--color-line: #96b5c6; --header-background: #fff;
--header-color-font: #333;
--header-color-primary: #003399;
--header-color-primary-shade: #fff;
--header-color-primary-tint: #36c9c6; --footer-background: #f3f8ff;
--footer-color-font: #333;
--footer-color-primary: #333; --px240: min(calc(240px + (1vw - 19.2px) * 10.356), 240px); --px200: min(calc(200px + (1vw - 19.2px) * 6.4725), 200px); --px190: min(calc(190px + (1vw - 19.2px) * 3.8835), 190px); --px180: min(calc(180px + (1vw - 19.2px) * 3.8835), 180px); --px170: min(calc(170px + (1vw - 19.2px) * 3.8835), 170px); --px160w: min(calc(160px + (1vw - 19.2px) * 5.178), 160px); --px160: min(calc(160px + (1vw - 19.2px) * 6.4725), 160px); --px150: min(calc(150px + (1vw - 19.2px) * 3.2362), 150px); --px145: min(calc(145px + (1vw - 19.2px) * 3.2362), 145px); --px140: min(calc(140px + (1vw - 19.2px) * 6.4725), 140px); --px120: min(calc(120px + (1vw - 19.2px) * 2.589), 120px); --px100w: min(calc(100px + (1vw - 19.2px) * 3.2362), 100px); --px100: min(calc(100px + (1vw - 19.2px) * 3.8835), 100px); --px96: min(calc(96px + (1vw - 19.2px) * 3.1068), 96px); --px90: min(calc(90px + (1vw - 19.2px) * 1.2945), 90px); --px80w: min(calc(80px + (1vw - 19.2px) * 1.2945), 80px); --px80: min(calc(80px + (1vw - 19.2px) * 2.589), 80px); --px80s: min(calc(80px + (1vw - 19.2px) * 3.8835), 80px); --px70: min(calc(70px + (1vw - 19.2px) * 1.9417), 70px); --px68: min(calc(68px + (1vw - 19.2px) * 1.9417), 68px); --px60w: min(calc(60px + (1vw - 19.2px) * 1.2945), 60px); --px60: min(calc(60px + (1vw - 19.2px) * 1.9417), 60px); --px50: min(calc(50px + (1vw - 19.2px) * 1.2945), 50px); --px40w: min(calc(40px + (1vw - 19.2px) * 0.6472), 40px); --px40: min(calc(40px + (1vw - 19.2px) * 1.2945), 40px); --px30w: min(calc(30px + (1vw - 19.2px) * 0.6472), 30px); --px30: min(calc(30px + (1vw - 19.2px) * 0.9709), 30px); --px24: min(calc(24px + (1vw - 19.2px) * 0.6472), 24px); --px20: min(calc(20px + (1vw - 19.2px) * 0.6472), 20px); --px18: min(calc(18px + (1vw - 19.2px) * 0.2589), 18px); --px16: min(calc(16px + (1vw - 19.2px) * 0.1294), 16px); --px14: min(calc(14px + (1vw - 19.2px) * 0.1294), 14px); --px12: min(calc(12px + (1vw - 19.2px) * 0.0647), 12px);  --rem200: min(calc(20rem + (1vw - 1.92rem) * 6.472), 20rem); --rem120: min(calc(12rem + (1vw - 1.92rem) * 3.8835), 12rem); --rem80w: min(calc(8rem + (1vw - 1.92rem) * 1.2945), 8rem); --rem80: min(calc(8rem + (1vw - 1.92rem) * 2.589), 8rem); --rem72: min(calc(7.2rem + (1vw - 1.92rem) * 1.9417), 7.2rem); --rem70: min(calc(7rem + (1vw - 1.92rem) * 1.8875), 7rem); --rem60: min(calc(6rem + (1vw - 1.92rem) * 1.5534), 6rem); --rem50: min(calc(5rem + (1vw - 1.92rem) * 1.5534), 5rem); --rem48w: min(calc(4.8rem + (1vw - 1.92rem) * 0.6472), 4.8rem); --rem48: min(calc(4.8rem + (1vw - 1.92rem) * 1.5534), 4.8rem); --rem42w: min(calc(4.2rem + (1vw - 1.92rem) * 0.6472), 4.2rem); --rem42: min(calc(4.2rem + (1vw - 1.92rem) * 1.165), 4.2rem); --rem42s: min(calc(4.2rem + (1vw - 1.92rem) * 1.4887), 4.2rem); --rem40w: min(calc(4rem + (1vw - 1.92rem) * 0.6472), 4rem); --rem40: min(calc(4rem + (1vw - 1.92rem) * 1.2945), 4rem); --rem36: min(calc(3.6rem + (1vw - 1.92rem) * 0.7767), 3.6rem); --rem32: min(calc(3.2rem + (1vw - 1.92rem) * 0.3883), 3.2rem); --rem30w: min(calc(3rem + (1vw - 1.92rem) * 0.3883), 3rem); --rem30: min(calc(3rem + (1vw - 1.92rem) * 0.6472), 3rem); --rem30s: min(calc(3rem + (1vw - 1.92rem) * 0.9709), 3rem); --rem28: min(calc(2.8rem + (1vw - 1.92rem) * 0.6472), 2.8rem); --rem26: min(calc(2.6rem + (1vw - 1.92rem) * 0.6472), 2.6rem); --rem24w: min(calc(2.4rem + (1vw - 1.92rem) * 0.3883), 2.4rem); --rem24: min(calc(2.4rem + (1vw - 1.92rem) * 0.6472), 2.4rem); --rem22: min(calc(2.2rem + (1vw - 1.92rem) * 0.6472), 2.2rem); --rem20w: min(calc(2rem + (1vw - 1.92rem) * 0.2589), 2rem); --rem20: min(calc(2rem + (1vw - 1.92rem) * 0.3883), 2rem); --rem18: min(calc(1.8rem + (1vw - 1.92rem) * 0.2589), 1.8rem); --rem16: min(calc(1.6rem + (1vw - 1.92rem) * 0.1294), 1.6rem); --rem14: min(calc(1.4rem + (1vw - 1.92rem) * 0.1294), 1.4rem); --rem12: min(calc(1.2rem + (1vw - 1.92rem) * 0.0647), 1.2rem); } html {
scroll-behavior: smooth;
}
.newsTitle p a:hover,
a:active,
a:hover {
color: var(--color-primary);
}
.imgarea img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bg-light {
background: var(--color-table-background);
}
.color-secondary-tint {
color: var(--color-secondary-tint);
}
.color-secondary-tint::before,
.color-secondary-tint::after {
background-color: var(--color-secondary-tint) !important;
}
.fs-18 {
font-size: var(--rem18) !important;
}
.mw-690 {
max-width: 690px;
} h1.title,
.post h1,
header#h1Header h1.title {
font-size: var(--rem40w);
}
.post h2,
.cta-bg h2 {
font-weight: 700;
line-height: 1.4;
text-transform: uppercase;
color: var(--color-secondary);
}
.post h2.color-secondary-tint,
.cta-bg h2.color-secondary-tint {
color: var(--color-secondary-tint);
}
.post h2.color-white,
.cta-bg h2.color-white {
color: var(--color-background);
text-align: center;
margin-bottom: var(--px50);
}
.post h2::after {
display: none;
}
.home .post h2,
.home h2,
.cta-bg h2 {
font-size: var(--rem70);
}
.post h2 span,
.home .post h2 span,
.home h2 span,
.cta-bg h2 span {
font-family: var(--font-family04);
font-size: var(--rem30);
display: block;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
body:not(.home) .post h2 span {
font-size:  clamp(1.5rem, calc(2.2rem + ((1vw - 19.2px) * 0.4531)), 2.2rem);
margin-top: var(--px12);
}
.post h2.title-overlap {
font-family: var(--font-family04);
font-size: var(--rem200);
font-weight: 400;
line-height: 1;
letter-spacing: 0.04em;
color: var(--color-blue-light);
margin-bottom: var(--px60);
}
.post h2.title-overlap b {
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
font-size: var(--rem40);
color: var(--color-primary);
width: 100%;
}
.post h3 {
padding-left: 0;
margin-bottom: var(--px30);
display: flex;
align-items: center;
padding-bottom: var(--px16);
}
.post h3 span {
font-family: var(--font-family04);
padding: 1rem;
background: var(--color-primary);
color: var(--color-background);
display: inline-block;
font-size: var(--rem18);
margin-right: 1rem;
}
.txtstyle02 {
font-weight: 500;
font-size: var(--rem32);
line-height: 1.6;
color: var(--color-font-2);
margin-bottom: var(--px30);
}
.txtstyle02.fs30 {
font-size: var(--rem30);
}
.column05 p:not(.txtstyle02) {
font-weight: 400;
font-size: var(--rem18);
line-height: 2;
letter-spacing: .02em;
}
.txtstyle07 {
font-weight: 500;
font-size: var(--rem40);
line-height: 1.4;
letter-spacing: 0.02em;
position: relative;
width: fit-content;
margin: 0 auto var(--px14);
padding: 0 ;
}
.txtstyle07.txt_l {
margin-left: 0;
}
.txtstyle07::before,
.txtstyle07::after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 3.5rem;
height: 0.2rem;
background-color: var(--color-font);
}
.txtstyle07::before {
left: 0;
transform: rotate(75deg);
}
.txtstyle07::after {
right: 0;
transform: rotate(-75deg);
}
.home .txtstyle07::before,
.home .txtstyle07::after {
content: none;
}
body:not(.home) .txtstyle07 {
font-size: var(--rem20);
margin-bottom: var(--px20);
padding: 0 1em 0;
}
body:not(.home) .txtstyle07::before,
body:not(.home) .txtstyle07::after{
width: 1.5em;
}
.txtstyle08 {
font-weight: 700;
font-size: var(--rem26);
line-height: 1.3;
text-align: center;
color: var(--color-primary);
margin-bottom: var(--px30);
}
.txtstyle09 {
font-weight: 700;
font-size: var(--rem20w);
line-height: calc(26 / 20);
color: var(--color-primary-shade);
margin-bottom: var(--px20);
}
.txtstyle10 {
font-weight: 700;
font-size: var(--rem24);
line-height: calc(30 / 24);
text-align: center;
margin-bottom: var(--px40);
}
.txtstyle11 {
font-weight: 700;
font-size: var(--rem24);
line-height: 2;
} .post table {
font-size: 100%;
border: 0;
border-spacing: 2px 0;
}
body:not(.home) .post table th,
body:not(.home) .post table td {
padding: var(--px30) var(--px24);
vertical-align: middle;
}
.post table,
.post table th,
.post table td {
border-color: var(--color-table-border);
}
.post table th {
font-weight: bold;
background: var(--color-table-background);
border-right: 0;
}
.post table td {
border-left: 0;
}
body:not(.home) .post table.tbl-sm td {
border: 0;
padding: 1rem 0;
} .linkBtn,
.post .linkBtn {
color: var(--color-background);
background: var(--color-primary);
font-size: var(--rem18);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.5;
border-radius: 50vh;
max-width: 303px;
}
.home .linkBtn,
.home .post .linkBtn {
max-width: 240px;
}
.home .post .linkBtn--lg {
max-width: 303px;
}
.linkBtn:hover,
.post .linkBtn:hover {
color: var(--color-primary);
background: var(--color-background);
box-shadow: inset 0 0 0 2px var(--color-primary);
}
.linkBtn::after,
.post .linkBtn::after {
content: '\f054';
position: absolute;
font-size: 1.2rem;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: 50%;
right: var(--px30);
transform: translateY(-50%);
width: auto;
height: auto;
border: 0;
margin: 0;
} .qa_list .qa_list_inner dt {
position: relative;
font-weight: normal;
margin: 1rem 0 0 0;
display: flex;
align-items: stretch;
padding: 0rem 1rem 0rem 0rem;
background: var(--color-background);
border: 1px solid var(--color-table-border);
cursor: pointer;
}
.qa_list .qa_list_inner dd .ans_flex {
position: relative;
font-weight: normal;
margin: 0;
display: flex;
align-items: stretch;
padding: 0;
background: #ffffff;
}
.qa_list .qa_list_inner .a_ico {
color: var(--color-background);
background: var(--color-secondary);
line-height: 1;
padding: 1rem 1rem 1rem 1rem;
font-size: 2rem;
border-right: 1px solid var(--color-table-border);
width: 100%;
text-align: center;
max-width: 90px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-family04);
}
.qa_list .qa_list_inner .q_ico {
background: var(--color-table-background);
line-height: 1;
padding: 1rem 1rem 1rem 1rem;
font-size: 2rem;
font-weight: 900;
width: 100%;
text-align: center;
max-width: 90px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-family04);
border-right: 1px solid var(--color-table-border);
color: var(--color-primary);
}
.qa_list .qa_list_inner .q_desc,
.qa_list .qa_list_inner .a_desc {
padding: 1.5rem 1.5rem 1.5rem 2rem;
line-height: 1.7;
}
.qa_list .qa_list_inner .a_desc {
line-height: 1.8;
width: 100%;
}
.qa_list .qa_list_inner dt:after {
content: '';
position: absolute;
top: 46%;
right: 3rem;
width: 12px;
height: 12px;
border-right: 1px solid #494949;
border-bottom: 1px solid #494949;
-webkit-transform: rotate(45deg) translateY(-50%);
transform: rotate(45deg) translateY(-50%);
}
.qa_list .qa_list_inner .active:after {
top: 43%;
right: 2rem;
-webkit-transform: rotate(-135deg) translateY(-50%);
transform: rotate(-135deg) translateY(-50%);
}
.qa_list .qa_list_inner dd {
display: none;
position: relative;
padding: 0;
margin: 0 0 1rem 0;
border: 1px solid var(--color-table-border);
border-top: 0;
}
@media only screen and (max-width: 959px) {
.qa_list .qa_list_inner {
margin-bottom: 8rem;
}
}
@media only screen and (max-width: 768px) {
.qa_list .qa_list_inner .q_desc,
.qa_list .qa_list_inner .a_desc {
padding: 0.5rem 1rem 0.5rem 1rem;
}
.qa_list .qa_list_inner dt {
padding: 0rem 1rem 0rem 0rem;
}
.qa_list .qa_list_inner .a_ico,
.qa_list .qa_list_inner .q_ico {
max-width: 50px;
padding: 1.2rem 1rem;
}
.qa_list .qa_list_inner dt:after {
right: 1.5rem;
width: 6px;
height: 6px;
}
.qa_list .qa_list_inner .active:after {
right: 1rem;
}
}
@media only screen and (max-width: 559px) {
.qa_list .qa_list_inner dd {
font-size: 1.4rem;
}
.qa_list .qa_list_inner {
margin-bottom: 6rem;
}
.qa_list .qa_list_inner dt {
font-size: 1.4rem;
}
} .bg-faq {
background: var(--color-table-background);
}
.home .qa_list .qa_list_inner > div {
padding: var(--px50) var(--px40);
border-radius: 3rem;
border: 2px solid var(--color-line);
margin-bottom: var(--px20);
background: var(--color-background);
}
.home .qa_list .qa_list_inner dt {
position: relative;
font-weight: normal;
display: flex;
align-items: center;
padding-right: var(--px40);
cursor: pointer;
margin: 0;
border: 0;
}
.home .qa_list .qa_list_inner dd .ans_flex {
font-size: var(--rem18);
font-weight: 500;
line-height: calc(26 / 18);
letter-spacing: 0.1em;
color: var(--color-font-2);
}
.home .qa_list .qa_list_inner .q_ico {
font-family: var(--font-family05);
font-weight: 900;
font-size: var(--rem40);
color: var(--color-primary);
padding: 0;
background: transparent;
border: 0;
text-align: left;
width: fit-content;
display: inline;
}
.home .qa_list .qa_list_inner .q_desc {
padding: 0 var(--px16);
font-weight: 900;
font-size: var(--rem20);
line-height: calc(24 / 20);
letter-spacing: 0.1em;
color: var(--color-font-2);
}
.home .qa_list .qa_list_inner dt:after {
content: '\f35a';
display: inline-block;
font-family: 'FontAwesome';
font-size: var(--rem30);
font-weight: 400;
line-height: 1;
position: absolute;
top: 0.5rem;
right: 0;
color: var(--color-primary);
transform: none;
border: 0;
width: auto;
height: auto;
}
.home .qa_list .qa_list_inner .active:after {
transform: rotate(90deg);
}
.home .qa_list .qa_list_inner dd {
padding-top: var(--px30);
margin-top: var(--px24);
border: 0;
margin-bottom: 0;
border-top: 1px dashed var(--color-gray);
}
.home .qa_list .qa_list_inner .a_desc {
font-weight: 500;
font-size: var(--rem18);
line-height: calc(26 / 18);
letter-spacing: 0.1em;
color: var(--color-font-2);
padding: 0;
} .sec01 {
background: var(--color-secondary);
padding-bottom: var(--px150);
}
.column05 {
position: relative;
margin: 0;
}
.column05_wrap {
position: relative;
width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-end;
justify-content: space-between;
z-index: 20;
}
.column05_wrap + .column05_wrap {
margin-top: var(--px150);
}
.column05 .imgarea {
position: relative;
overflow: hidden;
width: 71%;
max-width: 1340px;
}
.column05 .imgarea img {
object-fit: cover;
width: 100%;
height: 100%;
}
.column05 .txtarea {
position: relative;
width: 47%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-background);
padding: var(--px80) var(--px40);
margin-left: -17%;
z-index: 10;
max-width: 888px;
} ul.band_bnr_btn_list {
display: flex;
flex-wrap: wrap;
gap: min(calc(60px + (1vw - 19.2px) * 1.6181), 60px);
}
ul.band_bnr_btn_list > li {
width: 100%;
}
a.band_bnr_btn {
display: block;
position: relative;
overflow: hidden;
}
.bbb_main {
position: absolute;
padding: min(calc(20px + (1vw - 19.2px) * 0.3236), 20px) min(calc(74px + (1vw - 19.2px) * 1.6181), 74px) min(calc(20px + (1vw - 19.2px) * 0.3236), 20px) 0;
left: 4.5rem;
right: 4.5rem;
bottom: 4rem;
z-index: 5;
border-bottom: 3px solid var(--color-background);
}
.bbb_ttl {
color: var(--color-background);
line-height: 1.4;
letter-spacing: 0.02em;
}
.sup_ttl {
font-weight: 500;
font-size: calc(3.6rem + (1vw - 19.2px) * 0.5213);
}
.en_ttl {
font-family: var(--font-family04);
font-weight: 400;
font-size: calc(2.2rem + (1vw - 19.2px) * 0.5213);
text-transform: uppercase;
}
.bbb_main .arw {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: min(calc(74px + (1vw - 19.2px) * 1.2945), 74px);
height: min(calc(74px + (1vw - 19.2px) * 1.2945), 74px);
color: var(--color-background);
border: 1px solid;
border-radius: 50%;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: 0.4s;
}
.bbb_main .arw::after {
content: '';
position: absolute;
width: min(calc(8px + (1vw - 19.2px) * 0.2589), 8px);
height: min(calc(8px + (1vw - 19.2px) * 0.2589), 8px);
border-style: solid;
border-width: 2px 2px 0 0;
top: 50%;
left: 50%;
transform: translate(-70%, -50%) rotate(45deg);
transition: 0.4s;
}
.bbb_bg {
position: relative;
overflow: hidden;
}
.bbb_bg::before {
content: '';
display: block;
padding-top: min(calc(452px + (1vw - 19.2px) * 9.0615), 452px);
}
.bbb_bg::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
top: 0;
left: 0;
transition: 0.4s;
}
.bbb_bg img {
position: absolute;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.4s;
} a.band_bnr_btn:hover .bbb_bg::after {
opacity: 0;
}
a.band_bnr_btn:hover .bbb_bg img {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
} .col2_list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--px68) var(--px40);
}
.col2_list > li {
line-height: 1;
border-radius: var(--px30);
background: var(--color-background);
padding: var(--px20) var(--px30);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
}
.col2_list .imgarea {
margin: 0 auto;
margin-bottom: var(--px40);
aspect-ratio: 340 / 323;
width: 100%;
max-width: 340px;
max-height: 323px;
display: flex;
justify-content: center;
align-items: center;
}
.col2_list .imgarea img {
width: 100%;
height: 100%;
object-fit: contain;
aspect-ratio: 340 / 323;
}
.col2_list .txtarea {
font-weight: 900;
font-size: var(--rem26);
line-height: 1.4;
}
.col2_list .txtarea p:before {
display: inline-block;
font-family: 'FontAwesome';
font-weight: 400;
line-height: 1;
margin-right: 1rem;
content: '\f14a';
font-size: var(--rem26);
color: var(--color-primary-tint);
} .flowlist01 {
padding-left: 13rem;
position: relative;
}
.flowlist01::before {
content: '';
width: 15px;
height: 100%;
background: #eee;
margin-left: -8px;
display: block;
position: absolute;
top: 0;
left: 13rem;
}
.flowlist01 > li {
position: relative;
}
.flowlist01 > li:not(:last-child) {
margin-bottom: 8vh;
}
.flowlist01 > li .icon {
font-size: 1.6rem;
color: var(--color-background);
background: var(--color-primary);
padding: 0.8rem 2rem;
display: block;
position: absolute;
top: 0;
left: -13rem;
z-index: 100;
font-family: var(--font-family04);
font-weight: bold;
}
.flowlist01 > li .icon::after {
content: '';
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent var(--color-primary);
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
}
.flowlist01 > li dl {
padding-left: 7rem;
position: relative;
}
.flowlist01 > li dl::before,
.flowlist01 > li dl::after {
content: '';
display: block;
position: absolute;
top: 2rem;
}
.flowlist01 > li dl::before {
width: 7px;
height: 7px;
margin-top: 0;
background: var(--color-background);
border-radius: 50%;
left: -4px;
}
.flowlist01 > li dl::after {
width: 50px;
border-bottom: 1px dashed #999;
position: absolute;
left: 5px;
top: 2.3rem;
}
.flowlist01 > li dl dt {
margin-bottom: 0.5rem;
font-weight: 600;
font-size: var(--rem24);
border-bottom: 1px solid var(--color-table-border);
}
.col3_small {
display: grid;
gap: var(--px12);
grid-template-columns: repeat(3, 1fr);
}  .cta02 {
position: relative;
padding: var(--px190) 0 var(--px140);
z-index: 0;
background: url(//create-ms.com/wp-content/uploads/cta.png) no-repeat center center / cover;
}
.cta02:before {
content: '';
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.cta02 .cta02_wrap {
max-width: var(--content-max-width-lg);
width: 90%;
margin: 0 auto;
padding: 0;
background: transparent;
position: relative;
z-index: 1;
}
.cta-info {
color: var(--color-background);
font-weight: 700;
font-size: var(--rem24);
line-height: calc(45 / 24);
}
.cta02 .ctabtnlist {
justify-content: space-between;
margin: var(--px60) auto 0 auto;
gap: 10px;
}
.cta02 .ctabtnlist li {
width: 50%;
margin: 0;
padding: 0;
line-height: 1;
display: flex;
}
.cta02 .item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 2.6rem var(--px30);
text-align: center;
box-sizing: border-box;
color: var(--color-background);
border-radius: 50vh;
transition: all ease 0.15s;
}
.cta02 .item:hover {
opacity: 0.8;
} .cta02 .infotxt {
font-size: var(--rem16);
font-weight: 700;
line-height: calc(19 / 16);
} .cta02 .telnum {
font-size: var(--rem36);
font-weight: 700;
line-height: calc(43 / 36);
margin-bottom: 0.5rem;
}
.cta02 a.telbtn {
background: var(--color-background);
color: var(--color-secondary);
border: 4px solid var(--color-secondary);
}
.cta02 .telbtn .btnttl {
display: block;
font-weight: bold;
margin-bottom: 0.5rem;
line-height: calc(24 / 20);
font-size: var(--rem20);
} .cta02 .mailarea.item {
background: var(--color-primary);
}
.cta02 .mailarea .btnttl {
font-weight: 700;
font-size: var(--rem26);
line-height: calc(31 / 26);
margin-bottom: 1rem;
} .cta02 .mailarea .btnttl::before,
.cta02 .telnum::before {
content: '';
display: inline-block;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 1rem;
}
.cta02 .telnum::before {
content: '\f3cd';
}
.cta02 .mailarea .btnttl::before {
content: '\f0e0';
} .postlist {
padding-top: 0;
}
.postlist li {
border-bottom: 1px solid #ccc;
}
.postlist .post_text {
padding: var(--px24) 0;
}
.postlist .time {
line-height: calc(14 / 12);
background: var(--color-secondary);
}
.postlist .date {
color: #000;
}
.postlist .ttls {
color: #111;
} nav#mainNav ul li a b {
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.1em;
}
.logo-txt {
font-family: var(--font-family03);
font-weight: 700;
font-size: clamp(1.8rem, calc(1.8rem + (100vw - 1024px) * 0.01674), 3rem);
line-height: calc(43 / 30);
} .home .wrapper_content {
max-width: var(--content-max-width-lg);
}
.home .home-none {
display: none;
}
.bg-arrow:after {
content: '';
position: absolute;
top: calc(100% - 1px);
left: 50%;
width: 13.5rem;
height: 8.6rem;
transform: translateX(-50%);
box-sizing: border-box;
background-color: var(--color-primary);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#service {
background: var(--color-yellow-light);
padding: var(--px140) 0 var(--px170);
}
.service-des {
font-weight: 500;
font-size: var(--rem32);
line-height: 1.6;
color: var(--color-font-2);
margin-bottom: var(--px60);
text-align: center;
}
#strengths {
padding: var(--px140) 0 var(--px170);
background: var(--color-yellow-light);
position: relative;
}
#strengths::before {
content: '';
position: absolute;
width: 100%;
height: 49%;
left: 0;
bottom: 0;
background: var(--color-secondary);
}
.strengths__container {
margin: 0 auto;
width: 94%;
max-width: 1431px;
position: relative;
z-index: 1;
}
.strengths__box {
gap: min(calc(89px + (1vw - 19.2px) * 3.1068), 89px);
}
.strengths__item {
background: var(--color-background);
}
.strengths__item .imgarea {
aspect-ratio: 671/310;
}
.strengths__info {
padding: var(--px40) var(--px50) var(--px60);
}
.strengths__inner {
max-width: 549px;
}
.strengths__title {
font-weight: 700;
font-size: var(--rem32);
line-height: 1.4;
text-align: center;
color: var(--color-secondary);
margin-bottom: var(--px30);
}
.strengths__text {
font-weight: 400;
font-size: var(--rem18);
line-height: 2;
letter-spacing: .02em;
}
#about-us .toptxtarea {
padding-top: var(--px180);
padding-bottom: var(--px90);
}
#about-us .toptxtarea__inner {
max-width: 90%;
margin: 0 auto;
text-align: center;
}
.about-us__wrapper {
background: linear-gradient(135.64deg, #d6f2ee 25.51%, #a4d7e5 99.02%);
padding: var(--px145) 0;
}
.about-us__container {
width: 94%;
max-width: 1644px;
margin: 0 auto;
}
#about-us .textarea {
display: flex;
align-items: center;
justify-content: center;
padding: var(--px30) var(--px60) 0 var(--px80);
}
#about-us .imgarea {
max-width: 724px;
aspect-ratio: 724/860;
}
.about-us__des {
font-weight: 500;
font-size: var(--rem32);
line-height: 1.6;
letter-spacing: 0.02em;
color: var(--color-font-2);
margin-bottom: var(--px40);
}
.about-us__des + p {
font-weight: 400;
font-size: var(--rem18);
line-height: 2;
letter-spacing: 0.02em;
color: var(--color-font-2);
}
.about-us__intro {
font-weight: 700;
font-size: var(--rem60);
line-height: 130%;
color: var(--color-primary);
}
.about-us__intro span {
color: var(--color-primary-shade);
}
#concerns {
padding: var(--px90) 0 var(--px120);
background: var(--color-yellow-light);
position: relative;
}
#concerns::before {
content: '';
position: absolute;
width: 100%;
height: 65%;
left: 0;
bottom: 0;
background: var(--color-secondary);
}
#concerns::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
content: '';
display: block;
width: 0;
height: 0;
margin: 0 auto;
border-left: 137px solid transparent;
border-right: 137px solid transparent;
border-top: 94px solid var(--color-secondary);
} #thumbImg::before,
header#h1Header::before {
background: #2fa8ff;
opacity: 0.29;
}
.post ol.list-blue-light {
margin-left: 0;
}
.post ol.list-blue-light li {
list-style: none;
}
.list-blue-light {
counter-reset: my-counter;
}
.list-blue-light li {
counter-increment: my-counter;
background: var(--color-table-background);
padding: var(--px12);
margin-bottom: 1rem;
}
.list-blue-light li::before {
content: counter(my-counter) '.';
display: inline;
margin-right: 1rem;
}
.list-blue-dot li {
margin-bottom: var(--px12);
}
.list-blue-dot div {
font-weight: 700;
font-size: var(--rem30);
line-height: 1;
display: flex;
align-items: center;
}
.list-blue-dot div::before {
content: '';
display: inline-block;
width: var(--rem30);
height: var(--rem30);
background: var(--color-primary);
margin-right: 1rem;
margin-top: 3px;
border-radius: 100%;
}
.list-blue-dot p {
font-size: var(--px18);
}
.post .list-info h3 {
padding: 0;
border: 0;
}
.list-info > div {
border-bottom: 1px solid var(--color-table-border);
} .subimitarea .linkBtn {
padding: 0;
}
.subimitarea .linkBtn:hover input[type='submit'] {
color: var(--color-primary);
}
body.page-contact .post table th,
body.page-contact .post table td {
background: transparent;
border-width: 0 0 1px 0;
vertical-align: top;
}
body.page-contact .post table tr:last-child th,
body.page-contact .post table tr:last-child td {
border: 0;
}
body.page-contact .wpcf7-form .must {
background-color: #b63033;
} #footer {
padding: var(--px60) 0 var(--px20);
}
#footer .footer__logo:not(:last-child) {
margin-bottom: var(--px50);
}
#footer .footer__logo a {
display: block;
line-height: 1;
margin-bottom: var(--px24);
}
#footer .footer__logo img {
max-width: 72px;
max-height: 68px;
}
#footer .footnav ul > li {
line-height: calc(17 / 14);
font-weight: 500;
}
#copyright {
font-weight: 300;
line-height: calc(14 / 12);
margin-top: var(--px16);
letter-spacing: 0.06em;
}  @media print, screen and (min-width: 641px) {
ul.band_bnr_btn_list > li {
width: calc((100% - min(calc(60px + (1vw - 19.2px) * 1.6181), 60px)) / 2);
}
} @-moz-document url-prefix() {
@media print, screen and (min-width: 641px) {
ul.band_bnr_btn_list > li {
width: calc(((100% - min(calc(60px + (1vw - 19.2px) * 1.6181), 60px)) / 2) - 1px);
}
}
}
@media print, screen and (min-width: 1024px) {
#header {
height: 10rem;
}
#header .logo {
padding: clamp(0.75rem, calc(0.75rem + (100vw - 1024px) * 0.0167410714), 0.75rem) 0;
display: flex;
align-items: center;
}
#header .logo a {
margin-right: 0.8rem;
}
#header .logo img {
max-width: 8.5rem;
max-height: 7.6rem;
}
.sticky-header #header-layout img {
max-height: 80px;
}
nav#mainNav ul li a {
padding: var(--px20) clamp(10px, calc(10px + (100vw - 1024px) * 0.02232), 30px);
font-size: clamp(1.2rem, calc(1.2rem + (100vw - 1024px) * 0.01674), 2rem);
}
nav#mainNav ul li li a {
color: var(--header-color-font);
font-weight: 500;
}
nav#mainNav ul li ul.sub-menu li a:hover,
nav#mainNav ul li ul.sub-menu li.current-menu-item > a {
background: var(--header-color-primary);
color: var(--color-background);
}
#header a.head_btn {
font-weight: 700;
padding: min(calc(10px + (1vw - 19.2px) * 0.2232), 10px) clamp(10px, calc(10px + (100vw - 1024px) * 0.01674), 25px);
position: relative;
}
#header a.head_btn > span {
display: flex;
align-items: center;
}
#header a.head_btn.tel_btn {
background-color: transparent;
color: var(--color-font);
margin-left: 1rem;
}
#header a.head_btn.tel_btn:hover {
color: var(--header-color-primary);
}
#header a.head_btn.tel_btn::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0.1rem;
height: 60%;
background-color: var(--header-color-font);
}
#header a.head_btn.tel_btn:hover::before {
background-color: var(--header-color-primary);
}
#header a.head_btn.tel_btn .tel_number {
font-size: var(--rem24);
line-height: calc(29 / 24);
margin-bottom: 0.5rem;
}
#header a.head_btn .tel_number::before {
display: inline-block;
font-family: 'FontAwesome';
font-weight: 400;
line-height: 1;
margin-right: 1rem;
content: '\f095';
font-size: var(--rem18);
}
#header a.head_btn .note {
line-height: calc(14 / 12);
}
#header a.head_btn.mail_btn {
background: var(--color-primary);
line-height: calc(19 / 16);
padding: min(calc(10px + (1vw - 19.2px) * 0.2232), 10px) clamp(10px, calc(10px + (100vw - 1024px) * 0.03237), 39px);
}
#header a.head_btn.mail_btn::before {
font-size: var(--px20);
}
#header a.head_btn.mail_btn:hover {
background: var(--color-background);
color: var(--color-primary);
box-shadow: 0 0 1px var(--color-primary);
}
.column05 .txtarea {
aspect-ratio: 888 / 715;
padding: var(--px60) var(--px30) var(--px60) clamp(40px, calc(90px + ((1vw - 19.2px) * 10.4167)), 90px);
} .column05_wrap + .column05_wrap {
margin-top: var(--px150);
}
.column05_wrap.rev {
flex-direction: row-reverse;
}
.column05_wrap.rev .txtarea {
margin-left: 0;
margin-right: -17%;
}
.pc_none {
display: none !important;
}
}
@media print, screen and (max-width: 1023px) {
#header .logo .mark a {
display: block;
line-height: 1;
}
nav#mainNav ul li li.current-menu-item:last-child a,
nav#mainNav ul li li:last-child a:hover,
nav#mainNav ul li.current-menu-item li:last-child a:hover,
nav#mainNav ul li li a:hover,
nav#mainNav ul li li.current-menu-item a,
nav#mainNav ul li.current-menu-item li a:hover {
color: var(--color-background);
}
nav#mainNav ul li.current-menu-item a,
nav#mainNav ul li a:hover {
background-color: var(--color-primary) !important;
color: var(--color-background);
}
.col3-list {
grid-template-columns: repeat(2, 1fr);
}
.column05_wrap {
flex-wrap: wrap;
}
.column05_wrap + .column05_wrap {
margin-top: calc(150px + (1vw - 10.23px) * 7.716);
}
.column05_wrap.rev {
flex-direction: row;
}
.column05 .imgarea,
.column05 .txtarea {
width: 90%;
}
.column05 .txtarea {
margin: calc(-60px + (1vw - 10.23px) * -3.858) 0 0 auto;
}
.pc_none {
display: inherit;
}
}
@media print, screen and (max-width: 768px) {
.flowlist01 > li .icon {
font-size: 1.2rem;
}
.flowlist01 {
padding-left: 10rem;
}
.flowlist01 > li .icon {
left: -11rem;
}
.flowlist01::before {
left: 10rem;
}
.flowlist01 > li dl {
padding-left: 4.5rem;
}
.flowlist01 > li dl::after {
width: 30px;
}
.flowlist01 > li dl dt {
font-size: 1.4rem;
}
.cta02 .ctabtnlist li,
.cta02 .ctabtnlist .item {
width: 100%;
}
.cta02 .ctabtnlist li + li {
margin-top: 1rem;
}
#strengths::before {
height: 70%;
}
#about-us .textarea {
padding: var(--px80) 5% 0;
}
.col3_small {
grid-template-columns: repeat(2, 1fr);
}
.flexbox-col2 {
display: flex;
}
.column05 .txtarea {
padding: var(--px80) 5%;
}
}
@media print, screen and (max-width: 640px) {
.post ul.linkbtn_list > li {
width: 100%;
}
.post ul.linkbtn_list > li a.link_btn {
width: 90%;
min-width: auto;
max-width: 90%;
}
.col3-list,
.col2_list {
grid-template-columns: 1fr;
}
#concerns .col2_list {
grid-template-columns: repeat(2, 1fr);
gap: var(--px20);
}
}
.page-installation-examples .fs-18,
.page-id-175 .fs-18 {
font-weight: bold;
}
header#h1Header h1.title {
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
#content:has(.fw_contents), body:not(.home) #content:has(.fw_contents).wide {
padding: var(--px100w) 0 var(--px180);
}
body:not(.home) .post table.tbl-sm td:first-child {
width: 8em;
}
body:not(.home) .post p:not(.txtstyle11), body:not(.home) .post dd:not(:has(*[class])) {
font-weight: 400;
font-size: var(--rem18);
line-height: 2;
letter-spacing: .02em;
}