@charset "utf-8";
   @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
:root {
--color-background: #fff;
--color-font: #111;
--color-primary: #0E4473;
--color-primary-shade: #010B40;
--color-primary-tint: #1b6cb3;
--color-secondary: #B4D92A;
--color-secondary-shade: #648000;
--color-secondary-tint: #e6ff8e;
--color-table-border: #CCCCCC;
--body-font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.1294), 1.6rem);
--body-font-family: 'Noto Sans JP', sans-serif;
--content-max-width: 1240px;
--header-background: #010B40;
--header-color-font: #111;
--header-color-primary: #0E4473;
--header-color-primary-shade: #010B40;
--header-color-primary-tint: #1b6cb3;
--footer-background: #111;
--footer-color-font: #fff;
--footer-color-primary: #B4D92A;
--font-family01: 'Roboto', 'Noto Sans JP', sans-serif;
--font-family02: 'Montserrat', 'Roboto', sans-serif;
--font-family03: 'Noto Sans JP', sans-serif;
} body {
font-weight: 400;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
letter-spacing: 0.05em;
}
a {
cursor: pointer;
color: var(--color-font);
-webkit-transition: .3s all;
-o-transition: .3s all;
transition: .3s all;
&:hover {
opacity: 1;
}
}
b {
font-weight: 800;
} #mainImg {
b {
font-size: 110%;
color: var(--color-secondary);
}
div#n2-ss-2 .n2-font-deb1876a0e8c0a92e5ac8a8bc2f09686-hover {
letter-spacing: -2px;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
ul.mvbtnlist {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--px12);
justify-content: flex-start;
margin: var(--px40) 0 0 0;
& > li {
width: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
a.cvBtn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 8px;
background: var(--color-secondary);
color: var(--color-font);
font-size: var(--px16);
font-weight: 700;
border: solid 1px #fff;
padding: var(--px24) var(--px30);
margin: 0 auto;
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
line-height: 1.4;
width:180px;
border-radius:0px;
span.btnmin {
font-size: var(--px12);
font-weight: 500;
}
&:hover {
color: var(--color-font);
background: var(--color-secondary-tint);
}
&.commonbtn {
background: var(--color-primary-shade);
color: #fff;
&:hover {
color: #fff;
background: var(--color-primary);
}
}
}
}
}
}
@media print,
screen and (max-width: 1700px) {
#mainImg {
div.fv_mainttl#n2-ss-2item4 {
font-size: var(--px60w);
}
}
}
@media print,
screen and (max-width: 1240px) {
#mainImg {
ul.mvbtnlist {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
& > li, a.cvBtn {
width: 100%;
}
}
}
} nav#mainNav ul li a, nav#mainNav ul li a b, nav#mainNav ul li a span {
font-family: var(--font-family01);
font-weight: 600;
font-size: var(--px16);
}
@media print,
screen and (min-width: 1024px) {
#header {
background: transparent;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
#header .logo {
background: #fff;
}
#header .logo img {
height: 100%;
max-width: 240px;
max-height: 54px;
}
#header-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
max-width: none;
padding: 0;
}
nav#mainNav {
margin: 0 var(--px18);
}
nav#mainNav ul, #header .header__nav-contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: flex-end;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
nav#mainNav ul li a {
padding: var(--px20) var(--px14);
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
color: #fff;
}
body:not(.home) nav#mainNav ul li a {
color: var(--color-font);
}
nav#mainNav ul li a b,
nav#mainNav ul li a span {
margin-top: 0;
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
}
nav#mainNav ul li a:active,
nav#mainNav ul li a:hover,
nav#mainNav ul li.current-menu-ancestor a,
nav#mainNav ul li.current-menu-item a,
nav#mainNav ul li.current-menu-parent a {
background: transparent;
}
nav#mainNav ul li.current-menu-item a b,
nav#mainNav ul li a:hover b,
nav#mainNav ul li a:active b,
nav#mainNav ul li.current-menu-parent a b,
nav#mainNav ul li a:active span,
nav#mainNav ul li a:hover span,
nav#mainNav ul li.current-menu-item a span,
nav#mainNav ul li.current-menu-parent a span {
color: var(--color-secondary);
}
nav#mainNav ul li.external a:hover, .sticky-header #header nav#mainNav ul li.external a:hover {
color: var(--color-secondary);
}
.sticky-header #header-layout {
background: #ffffff6b;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
height: 80px;
}
.sticky-header #header>.inner {
background: transparent;
box-shadow: 0 0 50px rgba(0, 0, 0, .2);
}
.sticky-header #header nav#mainNav ul li a {
color: var(--color-font);
} .header_contactarea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-item-align: stretch;
-ms-grid-row-align: stretch;
margin: 0 var(--px18);
}
#header ul.header__contact {
gap: 10px;
}
#header a.head_btn {
padding: var(--px16) var(--px40);
font-size: var(--px16);
background: var(--color-primary-shade);
border: solid 1px #fff;
color: #fff;
font-family: var(--font-family01);
&::before {
font-size: 27px;
margin-bottom: 6px;
}
}
#header a.head_btn.contact_btn {
-webkit-transition: .3s all;
-o-transition: .3s all;
transition: .3s all;
color: var(--color-font);
background: var(--color-secondary);
&:hover {
color: var(--color-font);
background: var(--color-secondary-tint);
}
}
.sticky-header #header .header__nav-contact {
background: transparent;
}
} @media print, screen and (max-width: 1300px) {
#header .logo img {
max-width:var(--px240);
}
}
@media print, screen and (max-width: 1280px) {
#header a.head_btn {
padding: min(calc(10px + (1vw - 19.2px) * 0.2232), 10px) var(--px12);
font-size: var(--px12);
&::before {
font-size: var(--px18);
margin-bottom: 6px;
}
}
}
@media print, screen and (max-width: 1023px) {
body:not(.mobile) #header .logo {
margin: 10px auto;
}
body.mobile {
margin-top: 0;
padding-top: 60px;
}
.mobile #header {
background: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
body nav#mainNav {
width: 100%;
}
}
@media print, screen and (max-width: 640px) {
body.mobile #header .logo img {
max-width: 170px;
max-height: 40px;
}
} .spmenu #menu span,
.spmenu #menu span:after,
.spmenu #menu span:before {
height: 2px;
width: 32px;
background: #fff;
}
.spmenu #menu span:before {
bottom: -7px;
}
.spmenu #menu span:after {
bottom: -14px;
}
.spmenu #menu {
margin-top: 3px;
height: 35px;
}
.spmenu #menu span {
left: 4px;
}
.spmenu #menu p {
color: #fff;
font-weight: 500;
}
@media only screen and (max-width: 1023px) {
.mobile #header .logo .spmenu {
background: var(--color-font);
width: 68px;
}
} #footer {
color: var(--color-font);
font-size: var(--px14);
padding: 0;
gap: var(--px80);
background: #fff;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
.top {
display: flex;
justify-content: space-between;
margin: var(--px40) var(--px30) var(--px140);
align-items: flex-start;
flex-wrap: wrap;
.logoarea {
display: flex;
gap: var(--px30);
align-items: flex-start;
justify-content: flex-start;
p.add {
border-left: solid 1px;
font-size: var(--px12);
padding-left: var(--px30);
text-align: left !important;
}
img {
max-width: 240px;
max-height: 54px;
}
}
.rightarea {
display: flex;
align-items: flex-start;
gap: var(--px24);
flex-wrap: wrap;
.footnav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5px var(--px20);
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 380px;
&> li {
padding: 0;
margin-bottom: 0;
&:before,&:after {
content: none;
}
a {
font-family: var(--font-family01);
font-style: normal;
font-weight: 500;
font-size: var(--px14);
line-height: 1.8;
color: #fff;
&:hover {
color: var(--footer-color-primary);
}
}
}
}
ul.footer__contact {
display: flex;
gap: var(--px12);
margin-left: 0;
a.footer_btn {
padding: 8px var(--px20);
font-size: var(--px16);
min-width:  var(--px160);
background: var(--color-secondary);
border: solid 1px #fff;
color: var(--color-font);
font-family: var(--font-family01);
text-align: center;
&:hover {
background: var(--color-secondary-tint);
color: var(--color-font);
}
&.common_btn {
background: var(--color-primary-shade);
color: #fff;
&:hover {
background: var(--color-primary);
color: #fff;
}
}
}
}
}
}
.bottomarea {
background: var(--footer-background);
width: 100%;
margin: 0 auto;
max-width: none;
color: #fff;
#copyright {
color: #fff;
line-height: 1.4;
text-align: left;
margin: var(--px30);
font-size: var(--px12);
font-weight: 300;
}
}
ul li a:hover {
text-decoration: none;
}
}
@media print, screen and (max-width: 640px) {
#footer {
.top {
.logoarea {
flex-direction: column;
gap: 0;
}
.rightarea {
margin-top: var(--px24);
.footnav:not(:last-child) {
margin-bottom: 0;
}
}
}
}
} #scrollUp {
bottom: 70px !important;
} li.link_menu.bg_primary-shade {
background: var(--color-primary-shade);
p {
color: #fff !important;
}
} .post ul.ctaarea, ul.ctaarea, #footer ul.ctaarea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--px40);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
max-width: 1580px;
width: 94%;
margin: 0 auto;
gap: var(--px40);
& > li {
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: anchor-center;
-ms-flex-align: anchor-center;
align-items: anchor-center;
padding: 0 var(--px60);
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background: #fff;
padding: var(--px80) 0 var(--px100);
border: solid 1px;
.innertxt {
width: 100%;
margin: 0 auto;
line-height: 1.6;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
.ctattl {
position: relative;
color: var(--color-font);
font-family: var(--font-family01);
font-style: normal;
font-weight: 700;
font-size: var(--px40);
line-height: 0.9;
padding: 0;
margin-bottom: var(--px20);
text-align: center;
&::first-letter {
color: var(--color-primary);
}
span.subttl {
color: var(--color-primary);
font-size: var(--px20);
font-family: var(--font-family01);
display: block;
margin-top: var(--px12);
line-height: 1.4;
}
}
.ctatxt {
margin-bottom: var(--px24);
}
ul.btnlist {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--px20);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
a.cvBtn {
display: flex;
flex-direction: column;
text-align: center;
gap: 5px;
background: var(--color-secondary);
color: var(--color-font);
font-size: var(--px16);
font-weight: 700;
padding: var(--px20) var(--px30);
margin: 0 auto;
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
min-width: inherit;
width: -webkit-fit-content;
width: -moz-fit-content;
width: 300px;
border-radius:40px;
span.btnmin {
font-size: var(--px12);
font-weight: 500;
}
&:hover {
color: var(--color-font);
background: var(--color-secondary-tint);
}
&.commonbtn {
background: var(--color-primary-shade);
color: #fff;
&:hover {
color: #fff;
background: var(--color-primary);
}
}
}
}
}
}
@media print,
screen and (max-width: 960px) {
.post ul.ctaarea, ul.ctaarea, #footer ul.ctaarea {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
& > li {
padding: var(--px80) var(--px40);
gap: 0;
width: 100%;
& .innertxt {
.ctatxt {
text-align: left;
}
}
}
}
}
@media print,
screen and (max-width: 640px) {
.post ul.ctaarea, ul.ctaarea, #footer ul.ctaarea {
& > li {
width: 100%;
& .innertxt {
ul.btnlist li {
width: 100% !important;
}
.ctattl {
font-size: var(--px40w);
}
.ctatxt {
line-height: 2;
}
& a.cvBtn {
width: 100%;
}
}
}
}
} .linkBtn, .post .linkBtn, #footer .linkBtn {
position: relative;
background: var(--color-font);
border: solid 1px #fff;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 300px;
margin: var(--px40) auto 0 0;
border-radius: 0;
z-index: 1;
filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.25));
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
padding: 0;
display: flex;
& > a {
padding: var(--px16) var(--px40) var(--px16) var(--px24);
color: #fff;
font-family: var(--font-family01);
font-weight: 600;
font-size: var(--px16);
text-align: left;
width: 100%;
padding-right: 60px;
}
&:hover {
color: #fff;
background: var(--color-primary);
opacity: 1;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));
}
&.leftrbtn {
margin-left: 0;
margin-right: auto;
}
}
.txt_c.linkBtn {
margin-left: auto;
margin-right: auto;
}
@media print,
screen and (max-width: 640px) {
.linkBtn, .post .linkBtn, #footer .linkBtn {
min-width: 240px;
}
}
.linkBtn::after, input.linkBtn::after, .post .linkBtn::after, #footer .linkBtn::after {
content: "\f061";
position: static;
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 600;
font-size: var(--px18);
line-height: 1.6;
border: none;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
-webkit-transform: inherit;
-ms-transform: inherit;
transform: inherit;
margin: 0 0 0 auto;
display: inline-block;
color: var(--color-font);
background: var(--color-secondary);
width: 60px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.linkBtn.externallinkk:after, .post .linkBtn.externallink:after {
content: '\f35d';
} .txtlink {
margin: var(--px20) 0 0;
font-weight: 600;
color: var(--color-font);
font-family: var(--font-family01);
text-align: left;
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
display: flex;
gap: var(--px16);
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
&:hover {
color: var(--color-secondary);
}
&::after {
content: "\f138";
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 600;
}
} .external a {
position: relative;
display: flex !important;
flex-direction: row !important;
gap: 5px;
&::after {
content: '\f35d';
display: block;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
} .post .col2_list {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.post .col2_list > li {
width: 49%;
margin-bottom: 2%;
}
@media print, screen and (max-width: 640px) {
.post .col2_list > li {
width: 100%;
margin-bottom: var(--px40);
}
.post .col2_list > li:last-child {
margin-bottom: 0;
}
} .post .col3_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.post .col3_list>li {
width: 32%;
margin-bottom: 2%;
position: relative;
}
.post .col3_list::before {
content: "";
display: block;
width: 32%;
height: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.post .col3_list:after {
content: "";
display: block;
width: 32%;
height: 0;
}
@media print,
screen and (max-width: 768px) {
.post .col3_list>li {
width: 49%;
}
.post .col3_list::before,
.post .col3_list:after {
content: none;
}
}
@media print,
screen and (max-width: 640px) {
.post .col3_list>li {
width: 100%;
margin-bottom: var(--px40);
}
.post .col3_list>li:last-child {
margin-bottom: 0;
}
} .post .list_vertical {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
& > li {
width: 28%;
margin-bottom: 5%;
position: relative;
display: flex;
flex-direction: column;
.imgarea {
overflow: hidden;
position: relative;
img {
aspect-ratio: 4/3;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.roundimgarea {
border-radius: 50vh;
overflow: hidden;
position: relative;
border: solid 6px var(--color-secondary);
display: flex;
justify-content: center;
align-items: center;
&:before {
content: "";
background: #111111b3;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
}
img {
aspect-ratio: 1/1;
width: 100%;
height: 100%;
object-fit: cover;
}
p.ontxt {
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: var(--px24);
font-weight: 600;
line-height: 1.3;
color: #fff;
span {
font-size: var(--px14);
font-weight: 700;
color: var(--color-secondary);
display: block;
margin-bottom: var(--px12);
}
}
}
.txtarea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0px;
gap: var(--px12);
padding: 0;
margin: var(--px24) 0 var(--px16);
border: none;
line-height: 1.6;
}
.listttl {
font-size: var(--px24);
font-family: var(--font-family01);
color: var(--color-font);
line-height: 1.4;
font-weight: 800;
text-align: center;
margin: 4px 0;
}
.bottomarea {
margin: auto 0 0 auto;
a.txtlink {
margin-top: 0;
}
}
}
}
@media print, screen and (max-width: 768px) {
.post .list_vertical > li {
width: 70%;
margin-left: auto;
margin-right: auto;
.txtarea {
text-align: left;
}
.roundimgarea {
width: 300px;
height: 300px;
margin: 0 auto;
border: solid 3px var(--color-secondary);
}
}
.post .list_vertical > li:last-child {
margin-bottom: 0;
}
}
@media print, screen and (max-width: 640px) {
.post .list_vertical > li {
width: 85%;
.listttl {
font-size: var(--px30w);
text-align: left;
}
.roundimgarea {
p.ontxt {
font-size: var(--px30w);
padding-bottom: 6px;
}
}
.bottomarea {
margin-left: 0;
}
}
}
@media print, screen and (max-width: 375px) {
.post .list_vertical > li {
.roundimgarea {
width: 240px;
height: 240px;
}
}
} .post table {
margin: calc(30px + (1vw - 19.2px) * 0.6472) auto;
border: none;
}
.post table tr {
border-bottom: 1px solid var(--color-table-border);
}
.post table th, .post table td {
padding: 30px 15px 24px;
min-height: 40px;
vertical-align: middle;
border: none;
color: var(--color-font);
}
.post thead th, .post thead td {
height: 20px;
}
.post table th {
font-weight: 600;
width: 30%;
border-bottom: 1px solid var(--color-secondary);
background: transparent;
}
.post table:first-child {
margin-top: 0;
}
.post table:last-child {
margin-bottom: 0;
}
@media print, screen and (max-width: 640px) {
.post table.responsive th, .post table.responsive td {
text-align: left;
max-width: none;
padding: 16px 0 0 0;
min-height: auto;
}
.post table.responsive td {
margin-bottom: 5px;
padding: 4px 0 0 0;
}
.post table.responsive th {
font-size: var(--px14);
margin-top: 0;
border: none;
}
.post table.responsive tr:first-of-type th {
margin-top: 0;
padding-top: 0;
}
}  .post .front_contents {
.wrapper_content {
max-width: 1440px;
}
h2 {
font-size: var(--px120);
font-family: var(--font-family01);
font-weight: 800;
text-align: left;
display: block;
padding: 0;
margin: var(--px120) auto var(--px30);
line-height: 1;
letter-spacing: 0.001em;
&::before, &::after {
content: none;
}
&::first-letter {
color: var(--color-primary);
}
span.subtxt {
font-family: var(--font-family01);
font-style: normal;
font-weight: 700;
font-size: var(--px20);
display: block;
line-height: 1.4;
color: var(--color-primary);
margin-top: var(--px16);
}
}
h3 {
position: relative;
font-size: var(--px24);
font-family: var(--font-family02);
color: var(--color-font);
font-weight: 500;
line-height: 1.4;
padding: 0;
margin: 0;
border: none;
&::before, &::after {
content: none;
}
}
}
@media print, screen and (max-width: 640px) {
.post .front_contents {
h2 {
font-size: var(--px140);
}
}
} .post .bg-shade, .post .front_contents.bg-shade {
background: var(--color-primary-shade);
color: #fff;
h2 {
color: #fff;
&::first-letter {
color: var(--color-secondary);
}
span.subtxt {
color: var(--color-secondary);
}
}
h1, h3, h4, li ,p {
color: #fff;
}
b {
color: var(--color-secondary);
}
a.txtlink {
color: #fff;
&:hover {
color: var(--color-secondary);
}
}
} .post .ttlarea, .post .front_contents .ttlarea {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--px40);
.headarea {
margin-bottom: var(--px60);
}
h2 {
margin-top: 0;
}
}
@media print, screen and (max-width: 1240px) {
.post .ttlarea, .post .front_contents .ttlarea {
flex-direction: column;
gap: 0;
margin-bottom: var(--px40);
align-items: flex-start;
.headarea {
margin-bottom: 0;
}
h2 {
margin-top: 0;
margin-bottom: var(--px24);
}
}
} .post .ttl {
font-family: var(--font-family01);
font-weight: 800;
font-size: var(--px40w);
line-height: 1.6;
border-bottom: solid 6px;
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding-bottom: 3px;
& + * {
margin-top: var(--px30);
}
b {
font-size: 160%;
}
}
@media print, screen and (max-width: 640px) {
.post .ttl {
border-bottom: solid 3px;
font-size: var(--px40);
}
} .front_contents.sec01 {
background: #eee;
position: relative;
span.bgtxt {
position: absolute;
top: 0;
left: 3%;
font-size: var(--px200);
color: #fff;
font-family: var(--font-family02);
line-height: 1;
letter-spacing: 0;
}
.wrapper_content {
max-width: 1260px;
margin: 0 auto;
.imgarea {
max-width: 580px;
}
.txtinner {
h2 {
margin-top: 0;
}
p.linetxt {
font-size: var(--px18);
line-height: 2.4;
}
}
}
}
@media print, screen and (max-width: 1240px) {
.front_contents.sec01 {
.flexbox {
flex-direction: column;
display: flex;
}
}
}
@media print, screen and (max-width: 640px) {
.front_contents.sec01 {
.wrapper_content {
.txtinner {
p.linetxt {
font-size: var(--px16);
line-height: 2;
}
}
}
}
} .post .front_contents.sec02 {
&:before {
content: "";
background: url(//re-nect.co.jp/wp-content/uploads/servicebgimg.jpg) no-repeat;
background-position: right;
background-size: cover;
position: absolute;
right: 0;
top: 0;
width: 60%;
height: 100%;
clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
opacity: 0.18;
}
h2 {
margin: 0 auto var(--px12);
}
.list_vertical {
& > li {
position: relative;
&:not(:first-of-type):before {
content: "";
height: 75%;
width: 1px;
background: #fff;
left: -14%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
}
}
@media print, screen and (max-width: 1240px) {
.post .front_contents.sec02 {
.ttlarea {
flex-direction: column;
gap: 0;
margin-bottom: var(--px60);
align-items: center;
.headarea {
margin-bottom: 0;
}
h2 {
margin-top: 0;
margin-bottom: var(--px24);
text-align: center;
}
}
.list_vertical {
& > li {
&:not(:first-of-type):before {
content: none;
}
}
}
}
}
@media print, screen and (max-width: 768px) {
.post .front_contents.sec02 {
&:before {
content: none;
}
}
} .post .front_contents.recruitarea {
padding: 0;
.txtarea {
width: fit-content;
min-width: 40%;
padding: var(--px80);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
h2 {
margin: 0 auto var(--px30);
text-align: center;
}
.icoarea {
max-width: var(--px100);
text-align: center;
margin: 0 auto var(--px24);
}
.linkBtn {
margin-top: var(--px60);
}
.txtinner {
text-align: left;
}
}
.imgarea {
margin-top: auto;
}
}
@media print, screen and (max-width: 768px) {
.post .front_contents.recruitarea {
.txtarea {
width: 100%;
}
}
} .postarea:not(.bg-shade):before {
content: "";
background: #dde4eb;
width: 100%;
height: 55%;
position: absolute;
left: 0;
bottom: 0;
z-index: 0;
}
.post .front_contents.postarea {
.headarea .txtarea {
padding-left: var(--px30);
border-left: solid 4px;
}
}
@media print, screen and (max-width: 640px) {
.post .front_contents.postarea {
.headarea .txtarea {
border-left: solid 2px;
}
}
}  .post2b li .post2b_contents, .post4b li .post4b_contents {
margin-bottom: 0;
opacity: 1;
color: var(--color-font);
font-weight: 500;
}
.post ul.post4b, #cat-post ul.post4b, .post ul.post2b, #cat-post ul.post2b {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--px40);
li.clearfix {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: stretch;
align-self: stretch;
background: #fff;
& > a {
box-shadow: 0 0 50px rgba(0, 0, 0, .2);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
height: 100%;
text-align: left;
color: var(--color-font);
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
&:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
.post2b_link, .post4b_link{
color: var(--color-primary-tint);
}
}
}
}
.post4b_text, .post2b_text {
padding: var(--px20) var(--px20) var(--px14);
flex-grow: 1;
display: flex;
flex-direction: column;
align-self: flex-start;
justify-content: flex-start;
background: #fff;
width: 100% !important;
}
h2.top-loop, h2.bottom-loop, .cat-loop {
text-align: left;
font-size: var(--px18);
font-weight: 700;
display: block;
overflow: inherit;
text-overflow: inherit;
white-space: inherit;
line-height: 1.6;
margin: 6px 0 var(--px24) !important;
color: var(--color-font);
&::first-letter {
color: var(--color-font);
}
}
p.post4b_contents, p.post2b_contents {
display: none !important;
color: var(--color-font);
}
.post2b_link, .post4b_link{
position: static;
border: none;
text-align: right;
margin-top: auto;
color: var(--color-primary);
font-size: var(--px16);
font-weight: 700;
letter-spacing: 0.01em;
&:after {
content: "\f138";
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 600;
margin-left: var(--px16);
}
}
span.ymd_in_list {
display: none !important;
}
.time {
position: absolute;
top: 0;
left: 0;
z-index: 1;
a {
padding: var(--px12) var(--px18);
font-weight: 700;
font-size: var(--px16);
}
}
span.cat-knowledge {
display: none;
}
}
.post ul.post4b, #cat-post ul.post4b {
gap: 1%;
}
.post_img, .post2b_img, .post4b_img {
max-width: none;
overflow: hidden;
}
.post_img img, .post2b_img img, .post4b_img img {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
padding: 0;
aspect-ratio: 7 / 4;
-o-object-fit: cover;
object-fit: cover;
}
a:hover {
.post_img img, .post2b_img img, .post4b_img img {
opacity: 1;
transform: scale(1.02);
}
}
.post .time, .postlist .time, .post2b .time, .post4b .time {
background: transparent;
padding: 0;
a {
padding: 4px 10px 5px;
color: var(--color-font);
background: var(--color-secondary);
display: inline-block;
font-weight: 600;
font-size: var(--px14);
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
&:hover {
background: var(--color-secondary-tint);
opacity: 1;
}
}
}
@media only screen and (max-width: 799px) {
.post4b .post4b_img, .post2b .post2b_img {
width: 100%;
margin: 0;
padding: 0;
float: left;
}
}
@media only screen and (max-width: 640px) {
#content .post4b_img, #content .post2b_img {
max-width: none;
padding-top: 0;
}
} .postlist li, .postlist li:first-child {
border-top: 1px solid var(--color-table-border);   
&:last-child {
border-bottom: 1px solid var(--color-table-border);   
}
}
.postlist .post_text {
font-weight: 500;
width: 100%
flex-wrap: wrap;
}
.postlist .date {
font-family: var(--font-family01);
}
.postlist .ttls {
font-family: var(--font-family01);
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
a {
padding: 6px 0;
display: flex;
justify-content: space-between;
gap: var(--px16);
width: 100%;
&:after {
content: "\f138";
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 600;
color: var(--color-primary-shade);
}
&:hover {
text-decoration: none;
color: var(--color-primary);
&:after {
color: var(--color-primary-tint);
}
}
}
}
.postlist .time {
display: block;
white-space: nowrap;
margin: 0 10px 0 0;
padding: 0;
text-align: center;
font-weight: 400;
-webkit-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
color: var(--color-font);
background: var(--color-secondary);
font-family: var(--font-family01);
a {
padding: 7px 10px;
display: block;
min-width: 100px;
}
&:hover {
background: var(--color-font);
}
}
@media print, screen and (max-width: 640px) {
.postlist li .ttls {
margin-top: 2px;
}
.postlist .time {
padding: 0;
}
.postlist .post_text {
width: 100%;
padding: var(--rem20)0 1.2rem;
}
.postlist .time a {
min-width: auto;
padding: 5px 10px;
}
} .single-post h1.title.first {
border-bottom: none;
padding-bottom: var(--rem16);
margin-bottom: 0 !important;
}
.dateLabel {
padding-top: 1rem;
margin-bottom: var(--rem30);
border-top: 1px solid var(--color-font);
font-family: var(--font-family01);
font-weight: 400;
font-style: normal;
}
.single-post header#h1Header {
& h1.title {
&::before {
content: none;
}
}
}  .vision-trigger-show {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
display: inline-block;
-webkit-transition: 0.9s cubic-bezier(0.37, 0, 0.63, 1);
-o-transition: 0.9s cubic-bezier(0.37, 0, 0.63, 1);
transition: 0.9s cubic-bezier(0.37, 0, 0.63, 1);
-webkit-transition-property: -webkit-clip-path;
transition-property: -webkit-clip-path;
-o-transition-property: clip-path;
transition-property: clip-path;
transition-property: clip-path, -webkit-clip-path;
display: block;
}
.vision-trigger-show.is-shown {
-webkit-clip-path: inset(0);
clip-path: inset(0);
}
.img-bg { position: relative;
}
.img-bg:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.img-bg:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-color: var(--color-font);
}
.img-bg.is-shown:before {
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
} .fw_contents .page_contents_inner:nth-child(even) {
background: #EEF3F9;
} header#h1Header {
background: transparent;
height: auto;
z-index: 0;
overflow: visible;
&::before {
background: #EEF3F9;
clip-path: polygon(0 0, 100% 0, 0 100%);
width: 45%;
height: 30vh;
position: absolute;
left: 0;
top: 0;
z-index: -1;
opacity: 1;
}
& h1.title {
position: relative;
padding-block: calc(18rem + (1vw - 1.92rem) * 9.7087) calc(7rem + (1vw - 1.92rem) * 2.5890);  padding-inline: 5%;
-webkit-transform: none;
-ms-transform: none;
transform: none;
color: var(--color-font);
font-size: var(--rem80);
font-weight: 800;
&::first-letter {
color: var(--color-primary);
text-transform: capitalize;
}
&::before {
content: "";
position: absolute;
bottom: 0px;
width: min(1400px, 94%);
height: 1px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
max-width: 1400px;
background: rgb(204, 204, 204);
}
& > span > span {
display: block;
font-size: var(--px18);
text-align: center;
font-weight: 400;
margin-top: 2px;
line-height: 1.2;
}
& > span b {
font-weight: 600;
}
}
} #breadcrumb {
z-index: 1;
position: relative;
max-width: 1240px;
margin: 0 auto;
width: 90%;
}
#breadcrumb .subtxt {
display: none;
} .post ol > li {
list-style: decimal;
}
.post ol li {
list-style: none;
}
.post ul.list_disc > li, .post ol ul.list_disc > li {
list-style: disc !important;
} .post h1, h1.title, h1,.post h2, .post2b h2, .post4b h2, h2.title, h2, h3,.post h3, h4,.post h4, h5,.post h5 {
color: var(--color-font);
}
body:not(.home) .post {
h1:not([class]) {
font-size: var(--px40);
font-family: var(--font-family02);
font-weight: 600;
text-align: center;
text-shadow: none;
padding: 0;
z-index: 20;
line-height: 1.4;
}
h2:not([class]) {
font-size: var(--px40);
font-family: var(--font-family01);
font-weight: 800;
text-align: center;
color: var(--color-font);
padding: 0;
margin: var(--px120) auto var(--px60);
line-height: 1.4;
&::first-letter {
color: var(--color-primary);
}
&::after {
content: '';
position: relative;
visibility: visible;
display: block;
width: var(--px100);
background: transparent;
margin: var(--px20) auto 0;
border-bottom: solid 3px var(--color-font);
}
span.subtxt {
font-family: var(--font-family01);
font-style: normal;
font-weight: 500;
font-size: var(--px30);
line-height: 1.4;
text-align: center;
color: var(--color-secondary);
display: block;
margin: 10px auto 0;
}
}
h3:not([class]) {
font-size: var(--px20);
font-family: var(--font-family01);
font-weight: 800;
text-align: left;
display: block;
padding: 0;
margin: var(--px60) auto var(--px30);
line-height: 1.2;
letter-spacing: 0.001em;
border: none;
color: var(--color-primary);
span.subtxt {
font-family: var(--font-family01);
font-style: normal;
font-weight: 700;
font-size: var(--px60);
display: block;
line-height: 1.4;
color: var(--color-font);
margin-top: var(--px16);
&::first-letter {
color: var(--color-primary);
}
}
&::after {
content: none;
}
}
h4:not([class]) {
font-size: var(--px24);
font-family: var(--font-family01);
font-weight: 600;
text-align: left;
display: block;
border-left: solid 3px;
margin: var(--px60) auto var(--px24);
line-height: 1.4;
letter-spacing: 0.1em;
background: #eef3f9;
padding: 10px 10px 10px 14px;
&::before, &::after {
content: none;
}
}
h5:not([class]) {
font-size: var(--px18);
font-family: var(--font-family01);
font-weight: 800;
text-align: left;
display: block;
padding: 0;
color: var(--color-primary);
margin: var(--px40) auto var(--px16);
line-height: 1.6;
letter-spacing: 0.1em;
border: none;
&::before, &::after {
content: none;
}
}
} 
.post .page_contents {
.page_contents_inner {
& > h1:not([class]):first-child {
margin-top: 0;
}
& > h2:not([class]):first-child {
margin-top: 0;
}
}
} #privacy h3 {
font-size: var(--rem30);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
background: transparent;
padding: 0;
margin: var(--rem60) 0 var(--rem36);
text-align: left;
line-height: 1.4;
border: none;
} .post ul#sitemap_list > li {
border-bottom: solid 1px;
padding-bottom: calc(30px + (1vw - 19.2px) * 0.3883); }
.post ul#sitemap_list > li + li {
margin-top: calc(30px + (1vw - 19.2px) * 0.3883); }
.post ul#sitemap_list li a {
color: var(--color-font);
font-family: var(--font-family01);
font-weight: 600;
}
.post ul#sitemap_list li .subtxt {
display: none;
} input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="url"], input[type="number"], select, textarea {
vertical-align: middle;
line-height: 30px;
min-height: 50px;
padding: 10px;
border-radius: 0;
color: var(--color-font);
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
span.wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 7px;
}
span.wpcf7-list-item {
margin: 0;
}
.wpcf7-form {
label {
background: #fff;
border-radius: 10px;
padding: 6px 12px 8px 6px;
display: block
}
}
.wpcf7-form {
padding: 0;
}
.wpcf7-form a {
color: var(--color-font);
border-bottom: solid 1px;
}
.wpcf7-form a:hover {
color: var(--color-font);
opacity: 0.6;
border-bottom: solid 1px #aaa;
}
.wpcf7-form .must {
background: var(--color-primary);
}
div.wpcf7 .ajax-loader {
display: none;
} .linkBtn.submit_btn {
padding: 0;
margin-top: var(--px40);
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 320px;
}
.linkBtn input[type="submit"], .post .linkBtn input[type="submit"] {
width: 100%;
display: block;
font-size: var(--px16);
font-weight: 600;
font-family: var(--font-family01);
line-height: 1.6;
text-align: center;
padding: var(--px16) var(--px20);
-webkit-transition: 0.7s all;
-o-transition: 0.7s all;
transition: 0.7s all;
z-index: 1;
position: relative;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.post .linkBtn.submit_btn::after {
content: none;
}
.linkBtn input[type="submit"]:hover, .post .linkBtn input[type="submit"]:hover {
background: var(--color-secondary);
color: #fff;
}
.submit_btn .wpcf7-spinner, .post .submit_btn .wpcf7-spinner {
margin: 0;
top: calc(100% + 15px);
} #thanks h2 {
text-align: left;
&:before, &:after {
content: none;
}
} body.error404 #wrapper section h1 {
padding: 0;
font-family: var(--font-family01);
background: transparent;
margin: 20px 0 calc(40px + (1vw - 19.2px) * 1.6828) 0; color: var(--color-font);
font-weight: 500;
font-size: calc(3rem + (1vw - 1.92rem) * 0.6472); line-height: 1.4;
padding-bottom: 10px;
border-bottom: solid 1px var(--color-font);
width: 100%;
} .qa_list {
cursor: pointer;
}
.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: #fff;
border: 1px solid #fff;
color: var(--color-primary);
font-weight: bold;
}
.qa_list .qa_list_inner dd .ans_flex {
position: relative;
font-weight: normal;
margin: 0;
display: flex;
align-items: stretch;
padding: 0;
background: var(--color-primary);
color: #fff;
}
.qa_list .qa_list_inner .a_ico {
background: rgba(255,255,255,0.1);
color: #fff;
line-height: 1.0;
padding: 1rem 1rem 1rem 1rem;
font-size: 2.2rem;
width: 100%;
text-align: center;
max-width: 90px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-family01);
}
.qa_list .qa_list_inner .q_ico {
background: #f5f5f5;
color: var(--color-primary);
line-height: 1.0;
padding: 1rem 1rem 1rem 1rem;
font-size: 2.2rem;
font-weight: bold;
width: 100%;
text-align: center;
max-width: 90px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-family01);
}
.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 #fff;
border-bottom: 1px solid #fff;
-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 #fff;
border-top: 0;
}
@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 1.0rem;
}
.qa_list .qa_list_inner dt:after {
right: 1.5rem;
width: 6px;
height: 6px;
}
.qa_list .qa_list_inner .active:after {
right: 1.0rem;
}
}
@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;
}
}
@media print, screen and (min-width: 1024px) {
nav#mainNav ul ul.sub-menu {
width: 300px;
height: auto;
}
} .msg_txt {
font-size: var(--rem30w);
font-weight: bold;
line-height: 1.6;
}
.msg_txt b {
font-size: 130%;
}
.msg_txt b.fm {
font-size: 180%;
}
.msg_txt b.u {
display: inline-block;
border-bottom: 5px solid var(--color-font);
}
.txt_lh {
line-height: 2;
}
@media only screen and (max-width: 768px) { .sp_center {
text-align: center;
}
}
@media only screen and (max-width: 640px){ .msg_txt {
font-size: var(--rem24w);
}
} #digital_photo {
display: flex;
}
#digital_photo li {
width: 25%;
} #digital_about dl {
padding: 20px;
background: var(--color-primary-shade);
color: #fff;
}
#digital_about dt {
margin-bottom: 15px;
color: var(--color-secondary);
text-align: center;
line-height: 1.2;
}
#digital_about dt b {
display: block;
color: #fff;
font-size: var(--rem60);
}
#digital_about dt b::first-letter {
color: var(--color-secondary);
}
#digital_about dd {
padding: 0;
text-align: center;
}
#digital_about dd ul {
display: inline-block;
text-align: left;
}
#digital_about dd li {
text-indent: -1.5em;
padding-left: 1.5em;
}
#digital_about dd li::before {
margin-right: 0.5em;
color: var(--color-secondary);
font-weight: 400;
font-family: 'FontAwesome';
content: '\f0eb';
}
@media print, screen and (min-width: 641px){ #digital_about dl {
width: calc(50% - 15px);
margin: 0 auto;
padding: 30px;
}
#digital_about .box { display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#digital_about .box dl {
margin: 30px 0 0;
}
}
@media only screen and (max-width: 640px){ #digital_about .box dl {
margin-top: 20px;
}
} #digital_output dl {
background: #f2eeeb;
}
#digital_output dt {
padding: 5px;
background: var(--color-primary-shade);
color: #fff;
text-align: center;
}
#digital_output dd {
padding: 20px;
}
#digital_output dd b {
font-size: 120%;
}
#digital_output dd .txt {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: var(--rem20w);
}
#digital_output dd .txt b {
width: 100px;
padding: 5px;
margin-right: 15px;
background: var(--color-secondary);
color: var(--color-primary-shade);
text-align: center;
}
#digital_output dd .ico {
display: inline-block;
padding-left: 50px;
background: url(//re-nect.co.jp/wp-content/uploads/ico.png) no-repeat left center / 40px auto;
}
#digital_output .db {
position: relative;
width: 90%;
margin: 15px auto;
}
#digital_output .db p {
position: absolute;
top: 30%;
left: 0;
width: 100%;
height: 70%; display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#digital_output .db p b {
font-size: 120%;
}
#digital_output .box {
position: relative;
}
#digital_output .box01 dl,
#digital_output .box03 dl {
height: 100%;
}
#digital_output .box01 dd {
padding-bottom: 0;
}
#digital_output .box02 dd {
padding-top: 15px;
padding-bottom: 15px;
}
#digital_output .box03 dd img {
width: 90%;
}
@media print, screen and (min-width: 641px){ #digital_output { display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#digital_output .box01,
#digital_output .box02 {
width: 25%;
}
#digital_output .box03 {
width: calc(50% - 80px);
}
#digital_output .box01::before,
#digital_output .box02::before {
position: absolute;
top: 0;
right: -40px;
display: block;
width: 60px;
height: 100%;
background: url(//re-nect.co.jp/wp-content/uploads/arow.png) no-repeat right center / 100% auto;
content: "";
z-index: -1;
}
#digital_output .box01::before {
right: -50px;
width: 50px;
}
}
@media only screen and (max-width: 820px) and (min-width: 641px){
#digital_output .box01,
#digital_output .box02 {
width: calc(50% - 20px);
}
#digital_output .box02::before {
top: auto;
left: 0;
right: auto;
bottom: -45px;
width: 100%;
height: 50px;
background: url(//re-nect.co.jp/wp-content/uploads/arow2.png) no-repeat center bottom / auto 100%;
}
#digital_output .box03 {
width: 100%;
margin-top: 45px;
}
}
@media only screen and (max-width: 640px){ #digital_output .box01,
#digital_output .box02 {
margin-bottom: 45px;
}
#digital_output .box01::before,
#digital_output .box02::before {
position: absolute;
left: 0;
bottom: -45px;
width: 100%;
height: 50px;
background: url(//re-nect.co.jp/wp-content/uploads/arow2.png) no-repeat center bottom / auto 100%;
content: "";
z-index: -1;
}
} #digital_flow dl {
position: relative;
padding: 20px;
background: var(--color-primary-shade);
border: 1px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.15);
color: #fff;
}
#digital_flow dt {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #fff;
font-size: var(--rem20w);
text-align: center;
}
#digital_flow dd {
padding: 0;
}
#digital_flow dd li {
position: relative;
min-height: 2.8em;
padding: 15px;
background: #fff;
color: var(--color-primary-shade);
box-sizing: content-box;
text-align: center;
line-height: 1.4em;
z-index: 4; display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#digital_flow dd li:nth-child(2) {
z-index: 3;
}
#digital_flow dd li:nth-child(3) {
z-index: 2;
}
#digital_flow dd li:nth-child(4) {
z-index: 1;
}
#digital_flow dd li+li::after {
position: absolute;
top: -14px;
left: 50%;
display: block;
width: 24px;
height: 24px;
background: #fff;
margin-left: -4px;
border: 1px solid var(--color-primary-shade);
transform: rotate(45deg) translateX(-50%);
z-index: -1;
content: "";
}
#digital_flow dl:nth-child(1) dd li+li,
#digital_flow dl:nth-child(2) dd li+li {
margin-top: 10px;
}
#digital_flow dl:nth-child(3) dd ul:nth-child(1) {
margin-bottom: 10px;
}
#digital_flow dl:nth-child(3) dd ul:nth-child(2) li:last-child {
background: var(--color-secondary);
}
@media print, screen and (min-width: 641px){ #digital_flow dl:nth-child(3) dd ul {
display: flex;
column-gap: 10px;
}
#digital_flow dl:nth-child(3) dd ul li+li::after {
top: 50%;
left: -29px;
width: 20px;
height: 20px;
margin: 0;
transform: rotate(45deg) translateY(-50%);
}
#digital_flow dl:nth-child(3) dd ul:nth-child(1) li {
width: 25%;
min-height: 8em;
}
#digital_flow dl:nth-child(3) dd ul:nth-child(2) li {
width: 50%;
}
}
@media print, screen and (min-width:769px){ #digital_flow { display: flex;
justify-content: space-between;
}
#digital_flow dl {
width: 23%;
}
#digital_flow dl:last-child {
width: calc(54% - 80px);
}
#digital_flow dl:not(:last-child)::after {
position: absolute;
top: 10px;
right: -50px;
display: block;
width: 50px;
height: 60px;
background: url(//re-nect.co.jp/wp-content/uploads/arow3.png) no-repeat right center / auto 100%;
z-index: 2;
content: "";
}
}
@media only screen and (max-width: 768px) { #digital_flow dl:not(:last-child) {
margin-bottom: 40px;
}
#digital_flow dl:not(:last-child)::after {
position: absolute;
left: 50%;
bottom: -50px;
display: block;
width: 60px;
height: 50px;
background: url(//re-nect.co.jp/wp-content/uploads/arow4.png) no-repeat center bottom / 100% auto;
transform: translateX(-50%);
z-index: 2;
content: "";
}
}
@media only screen and (max-width: 640px){ #digital_flow dl:nth-child(3) dd li+li {
margin-top: 10px;
}
} #digital_medium { display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 20px;
}
#digital_medium ul {
padding: 20px;
}
#digital_medium ul li {
overflow: hidden;
padding: 0 20px;
box-sizing: content-box;
aspect-ratio: 4 / 1;
}
#digital_medium ul li img {
object-fit: contain;
object-position: left;
width: 100%;
height: 100%;
max-width: none;
}
#digital_medium ul:nth-child(n+3) li img {
object-position: center;
}
#digital_medium ul li+li {
margin-top: 30px;
}
#digital_medium ul li.uline {
padding-bottom: 30px;
border-bottom: 2px solid #ccc;
}
@media print, screen and (min-width: 641px){ #digital_medium ul {
width: 25%;
}
#digital_medium ul+ul {
border-left: 2px solid #ccc;
}
}
@media only screen and (max-width: 768px) { #digital_medium ul {
padding: 15px;
}
#digital_medium ul li {
padding: 0 15px;
}
}
@media only screen and (max-width: 640px){ #digital_medium ul {
width: 50%;
}
#digital_medium ul:nth-child(2n) {
border-left: 2px solid #ccc;
}
#digital_medium ul li {
padding: 0;
}
#digital_medium ul li+li {
margin-top: 20px;
}
#digital_medium ul li.uline {
padding-bottom: 20px;
}
} #influencer_list { display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
#influencer_list dl {
width: calc((100% / 4) - (30px * 3 / 4));
padding: 20px;
box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
#influencer_list dt {
overflow: hidden;
width: 80%;
margin: 0 auto 10px;
aspect-ratio: 1 / 1;
border-radius: 50%;
}
#influencer_list dt img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: none;
}
#influencer_list dd {
padding: 0;
text-align: center;
}
@media only screen and (max-width: 640px){ #influencer_list {
gap: 20px;
}
#influencer_list dl {
width: calc((100% / 2) - 10px);
padding: 15px;
}
} #influencer_service .box {
background: #fff;
box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
#influencer_service dl {
padding: 20px;
}
#influencer_service dt {
margin-bottom: 15px;
font-size: var(--rem24w);
line-height: 1.4;
text-align: center;
}
#influencer_service dd {
padding: 0;
line-height: 1.6;
}
@media print, screen and (min-width: 641px){ #influencer_service { display: flex;
flex-wrap: wrap;
column-gap: 2%;
}
#influencer_service .box {
width: 32%;
}
#influencer_service dl {
padding: 30px;
}
}
@media only screen and (max-width: 640px){ #influencer_service .box+.box {
margin-top: 30px;
}
} #influencer_performance h4 {
width: 200px;
margin-top: 0;
margin-left: 0;
padding: 8px 15px;
background: var(--color-secondary);
border: none;
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
color: var(--color-primary-shade);
font-size: var(--rem20w);
}
#influencer_performance h5 {
margin: var(--px30) auto var(--px20);
padding: 8px;
border: 1px solid var(--color-secondary);
color: var(--color-secondary);
text-align: center;
}
#influencer_performance .cap {
margin-bottom: 10px;
}
#influencer_performance .box {
padding: 20px;
background: var(--color-primary-shade);
color: #fff;
}
#influencer_performance .box+.box {
margin-top: 30px;
}
#influencer_performance .msg {
font-size: 110%;
line-height: 1.5;
}
#influencer_performance .msg b {
font-size: 140%;
}
#influencer_performance .creator {
display: flex;
align-items: center;
justify-content: space-between;
}
#influencer_performance .creator dt {
overflow: hidden;
width: 150px;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
#influencer_performance .creator dt img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: none;
}
#influencer_performance .creator dd {
width: calc(100% - 180px);
padding: 0;
}
#influencer_performance .creator dd b {
margin-bottom: 8px;
color: var(--color-secondary);
font-size: 120%;
}
#influencer_performance .instagram_list { display: flex;
flex-wrap: wrap;
column-gap: 2%;
row-gap: 10px;
}
#influencer_performance .instagram_list li {
width: 32%;
line-height: 1.4;
}
#influencer_performance .cnt {
font-size: 110%;
}
#influencer_performance .cnt b {
font-size: 150%;
}
#influencer_performance .gallery {
margin: 0 !important;
}
#influencer_performance .gallery {
row-gap: 20px;
}
#influencer_performance .gallery .gallery-item {
margin: 0;
}
@media print, screen and (min-width: 641px){ #influencer_performance .box {
padding: 30px;
}
}
@media only screen and (max-width: 640px){ #influencer_performance .msg b {
font-size: 130%;
}
#influencer_performance .creator dt {
width: 100px;
}
#influencer_performance .creator dd {
width: calc(100% - 120px);
}
#influencer_performance .instagram_list li {
width: 48%;
font-size: 85%;
}
} #influencer_playback {
width: 800px;
max-width: 100%;
margin: auto;
}
#influencer_playback .photo {
position: relative;
}
#influencer_playback .photo::after {
position: absolute;
top: 50%;
right: -50px;
display: block;
width: 30px;
height: 50px;
background: #ccc;
clip-path: polygon(0 0, 100% 50%, 0 100%);
transform: translateY(-50%);
content: "";
}
#influencer_playback ul {
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#influencer_playback ul li {
position: relative;
padding-left: 18px;
font-size: 115%;
}
#influencer_playback ul li::before {
position: absolute;
top: 0.8em;
left: 0;
display: block;
width: 8px;
height: 8px;
background: var(--color-secondary);
border-radius: 50%;
content: "";
}
@media print, screen and (min-width: 641px){ #influencer_playback { display: flex;
align-items: center;
justify-content: space-between;
}
#influencer_playback .photo {
width: calc(60% - 60px);
}
#influencer_playback ul {
width: 38%;
padding: 30px;
}
}
@media only screen and (max-width: 640px){ #influencer_playback .photo {
margin-bottom: 50px;
}
#influencer_playback .photo::after {
position: absolute;
top: auto;
bottom: -40px;
right: auto;
left: 50%;
width: 50px;
height: 30px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform: translateX(-50%);
}
} .creative_about .box {
background: #fff;
box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
.creative_about dl {
padding: 20px;
}
.creative_about dt {
margin-bottom: 15px;
font-size: var(--rem20w);
text-align: center;
line-height: 1.4em;
}
.creative_about dd {
padding: 0;
line-height: 1.6em;
}
@media print, screen and (min-width: 641px){ .creative_about { display: flex;
flex-wrap: wrap;
column-gap: 2%;
row-gap: 50px;
}
.creative_about .box {
width: 23.5%;
}
}
@media only screen and (max-width: 820px) and (min-width: 641px){
.creative_about {
column-gap: 4%;
}
.creative_about .box {
width: 48%;
}
}
@media only screen and (max-width: 640px){ .creative_about .box+.box {
margin-top: 30px;
}
} #creative_flow.creative_about dt {
min-height: 2.8em; display: flex;
align-items: center;
justify-content: center;
} #company_tbl th {
width: 15%;
} #client_list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
#client_list li {
width: calc((100% / 4) - (20px * 3 / 4));
padding: 15px;
background: #fff;
border: 1px solid var(--color-font);
text-align: center;
}
@media only screen and (max-width: 768px) { #client_list li {
width: calc(50% - 10px);
}
}
@media only screen and (max-width: 640px){ #client_list {
gap: 15px;
}
#client_list li {
width: 100%;
}
} #company #content03 h4 {
margin-top: 0;
padding: 0 0 10px;
background: none;
border: none;
border-bottom: 1px solid var(--color-font);
}
#company #content03 h4::first-letter {
color: var(--color-primary);
}
#company #content03 h4 span {
font-size: 80%;
}
#company #content03 h5 {
margin-top: 0;
}
#company #content03 table {
margin-top: 0;
}
#company #content03 table th,
#company #content03 table td {
padding: 10px;
}
#company #content03 table th {
width: 15%;
white-space: nowrap;
}
#company #content03 table td li {
position: relative;
padding-left: 20px;
}
#company #content03 table td li::before {
position: absolute;
top: 0.8em;
left: 0;
display: block;
width: 10px;
height: 10px;
background: var(--color-secondary);
content: "";
}
#company #content03 table tr:first-child {
border-top: 1px solid var(--color-table-border);
}
#company #content03 table tr:first-child th {
border-top: 1px solid var(--color-secondary);
} #team_profile h4 {
font-size: var(--rem30w);
} #team_list h4 {
font-size: var(--rem24w);
text-align: center;
}
#team_list h5 {
margin-top: 0;
margin-bottom: 10px;
}
#team_list .box {
background: #fff;
box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
#team_list .txt {
padding: 20px;
}
@media print, screen and (min-width:769px){ #team_list {
display: flex;
flex-wrap: wrap;
column-gap: 2%;
}
#team_list .box {
width: 32%;
}
}
@media only screen and (max-width: 768px) { #team_list .box+.box {
margin-top: 30px;
}
}
@media print, screen and (max-width: 1240px) {
#mainImg {
ul.mvbtnlist {
width: 70%;
display: -webkit-box;
display: -ms-flexbox;
display: flex
;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--px12);
justify-content: flex-start;
margin: var(--px40) 0 0 0;
}
}