/*
Theme Name: Act Child
Template: twentytwentythree
*/

/* == 全　体 ===================== */
html {scroll-behavior: smooth;}
h1,h2,h3,h4,h5,h6 {font-feature-settings: "palt";}
h2 {font-size: clamp(1.75rem, calc(1.75rem + ((1vw - 0.48rem) * 8.4135)), 2.5rem);}
main section p.wp-block-paragraph,
main section ul.wp-block-list,
main section ol.wp-block-list {
text-align: justify;
}
main section p.wp-block-paragraph,
main section .wp-block-list ol.wp-block-list li {
margin-bottom: 1.2em;
}
iframe {width:100%;}
dl p {margin:0;}
dt {
font-weight: bold;
color: var(--wp--preset--color--primary);
padding-top: 1em;
}
dd {
border-bottom: 1px solid #bbd3dd;
margin: 0;
padding: .5em 0 1em 1em;
}
hr {border-top: 1px solid #bbd3dd !important;}
input, select, textarea {font-size:var(--wp--preset--font-size--medium);}
form input[type="submit"] {
border:none;
border-radius: 50px;
color: var(--wp--preset--color--base);
padding: .75em 1.5em;
}
em {font-style:normal;}

/* -- ボタン・リンク -- */
a, a:hover {text-decoration:none;}
a.wp-block-read-more {
width: max-content;
font-size:var(--wp--preset--font-size--small);
margin: 0 0 0 auto;
}
.btn-download {margin-top:2em;}

/*テキストリンクにホバーをしたら左から下線が伸びる*/
header nav li:not(.btn-link) a,
main section a,
footer a:not(.wp-block-button__link) {
background-image: linear-gradient(var(--wp--preset--color--secondary), var(--wp--preset--color--secondary));
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0% 2px;
transition: background-size 0.3s ease;
}
header nav li:not(.btn-link) a:hover,
main section a:hover,
footer a:not(.wp-block-button__link):hover {
background-size: 100% 2px;
}
/*ボタンにホバーをしたら左から色が変わる*/
:root :where(.wp-block-button .wp-block-button__link),
header nav .wp-block-navigation__container .btn-link a,
main section a.btn-link,
form input[type="submit"] {
/*background-color: transparent;*/
background-image: linear-gradient(var(--wp--preset--color--secondary), var(--wp--preset--color--secondary)), linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
background-repeat: no-repeat;
background-position: left center, left center;
background-size: 0% 100%, 100% 100%;
transition: background-size 0.4s ease, color 0.4s ease;
}
:root :where(.wp-element-button:hover, .wp-block-button__link:hover),
header nav .wp-block-navigation__container .btn-link a:hover,
main section a.btn-link:hover,
form input[type="submit"]:hover {
background-size: 100% 100%, 100% 100% !important;
}

/* -- 細々 -- */
.nowrap {display:inline-block;}
.notes {font-size:var(--wp--preset--font-size--small);}
.align-center {
display: table;
margin-right: auto;
margin-left: auto;
}
.attention {
color:#c00;
font-weight: normal;
}
table {
border-collapse: collapse;
width: 100%;
}
/* -- ヘッダー ------------------- */
header {
position: sticky;
top: 0;
z-index:100;
background: rgba(255,255,255,.7);
backdrop-filter: blur(5px);
}
header nav .wp-block-navigation__container {
gap: 1.75rem;
font-feature-settings: "palt";
}
.btn-link a,
main section a.btn-link {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base) !important;
border-radius: 50px;
line-height: 1;
padding: .75em 1.5em;
}
.has-modal-open .wp-block-navigation__responsive-container {height: 100vh;}
/* -- フッター ------------------- */
footer .has-contrast-background-color {
background-image:url("https://www.actsystems.co.jp/actwpcms26/wp-content/uploads/2026/10/section-bg02.jpg");
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: multiply;
}
.foot-contact {margin-bottom: 70px;}
footer .wp-block-columns {
max-width: 880px;
margin: 0 auto 30px;
}
.foot-nav-column ul {
display: block;
font-size: var(--wp--preset--font-size--medium);
}
.foot-nav-column ul li:not(.contact-nav) {display: block !important;}
.foot-nav-column ul a {
/*display: inline-block;*/
letter-spacing: .1em;
margin-bottom: .7em;
}
footer .contact-nav {display:none !important;}
.foot-address-column {
font-size: var(--wp--preset--font-size--small);
line-height:1.4;}
.foot-address-column h3 {font-size: 20px;}
footer .copyright {
font-size:14px;
padding: 1em 0;
}
.foot-address-column hr {border-top: 1px solid #666 !important;}
footer .copyright {
font-size:14px;
padding: 1em 0;
}
/* -- コンテンツ ------------------ */
main {padding-bottom: 5em;}
/* -- トップページ -- */
.top-hero .wp-block-buttons {
max-width: 500px;
margin-top: 3em;
}
body.home main section:not(:last-child) {padding-bottom: 5em;}
body.home main section:nth-of-type(even) {background-color: #e1f1f8;}
.sec-activities .jisseki-records {margin: 1.5em auto 2.5em;}
.sec-activities .jisseki-records .wp-block-column {
background-color: var(--wp--preset--color--secondary);
border-radius: 10px;
color: #fff;
padding: .6em 1em;
}
.sec-activities .jisseki-records .wp-block-column strong {font-size: var(--wp--preset--font-size--x-large);}

/* -- 下層ページ -- */
main section, main section.has-global-padding {padding:5em 5% 0;}
main section .border-box {border: solid 1px var(--wp--preset--color--secondary); padding: 2.5em 3em 2em;}
main section .whiteback-box, main section .blueback-box {border: solid 1px var(--wp--preset--color--secondary); border-radius: 30px; padding: 2em;}
main section .whiteback-box {background-color: #fff;}
main section .blueback-box {background-color: #e1f1f8;}

/* ページタイトルの動く背景 */
.top-hero,
.page-title {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #021a3a, #0a4a9e);
color: #fff;
padding: 73px 5%;
}
.top-hero {
background: linear-gradient(135deg, #021a3a, #0a4a9e),url("https://www.actsystems.co.jp/actwpcms26/wp-content/uploads/2026/10/top-hero-bg.webp");
background-blend-mode: screen;
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
padding: 20vh 5% 5%;
}
.top-hero > *,
.page-title > * {
position: relative;
z-index: 20;/*タイトル文字を背景より前面に出す*/
}
.top-hero::before,
.page-title::before {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(90deg, rgba(0,180,255,.25) 0 1px, transparent 1px 60px),
repeating-linear-gradient(0deg,  rgba(0,180,255,.15) 0 1px, transparent 1px 60px);
}
.top-hero h1,
.page-title h1 {
font-size: clamp(2rem, 2rem + ((1vw - 0.2rem) * 2.896), 3rem);}
.top-hero p,
.page-title p {
margin-top:.5em;}

main section.is-layout-flow > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 1200px;
margin-left: auto !important;
margin-right: auto !important;
}
main section h2.sec-title {
color:var(--wp--preset--color--secondary);
margin-bottom: 1em;
}
main section h2:not(.has-text-align-center).sec-title {
border-left: solid 12px #e1f1f8;
padding-left: 5px;
}
section:has(.sec-subtitle) h2.sec-title {margin-bottom: 0;}
main section > h2+.sec-subtitle {
color:var(--wp--preset--color--secondary);
font-size: var(--wp--preset--font-size--medium);
margin: 0 0 2em;
}
main section .sub-headline {
background: var(--wp--preset--color--secondary);
color: #fff;
margin-bottom: .5em;
padding: .2em .5em;
}
main section .sub-headline strong {
font-size: var(--wp--preset--font-size--medium);
vertical-align: middle;
}

/*お知らせ*/
.wp-block-post {border-bottom: 1px solid #bbd3dd;}
.wp-block-post a {color: var(--wp--preset--color--primary);}

/*製品紹介*/
.product-list {
gap: 40px;
margin-top: 40px;
}
.product-list>div {
position:relative;
padding-bottom:55px;
}
.product-list figure {
background-color: #fff;
border: solid 1px #bbd3dd;
border-radius: 15px;
padding: 10px;
}
.product-list h4 {
color: var(--wp--preset--color--primary);
font-size: 20px;
font-weight: bold;
line-height: 1.2;
margin: .6em 0 .3em;
}
.product-list p,
.product-list ul {
font-size: var(--wp--preset--font-size--small);
line-height: 1.4;
margin-bottom: 1.2em;
}
.product-list .wp-block-buttons {
transform: translateX(-50%);
position: absolute;
bottom: 0;
left: 50%;
width: max-content;
}
main .sec-product-detail>h2 {
color: var(--wp--preset--color--secondary);
margin-bottom: 1em;
}
main .sec-product-detail>p,
main .sec-product-detail>li,
main .sec-product-detail>dl,
main .sec-product-detail>ol,
main .sec-product-detail>h2,
main .sec-product-detail>h3:not(.sub-headline),
main .sec-product-detail>h4:not(.sub-headline) {
display: table;
margin-right: auto;
margin-left: auto;
}
main .sec-product-detail .maincopy {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--x-large);
font-weight: bold;
line-height: 1.3;
}
main .sec-product-detail .maincopy em {
font-size: var(--wp--preset--font-size--medium);
font-weight: normal
}
main .sec-product-detail table {margin-bottom: 30px;}
main .sec-product-detail table th,
main .sec-product-detail table td {
border: var(--wp--preset--color--contrast) 1px solid !important;
padding: .5em;
}
main .sec-product-detail table th {
color: var(--wp--preset--color--primary);
}
main .sec-product-detail table .bg-th {background-color: #bbd3dd;}
main .sec-other li strong {
display: inline-block;
border: solid 1px #c00;
color: #c00;
line-height: 1;
margin-left: .2em;
padding: .15em .2em 0;
}

/*事業内容*/
main section.sec-development-structure .whiteback-box {position: relative;}
main section.sec-development-structure .whiteback-box .wp-block-column:has(h4),
main section.sec-philosophy .whiteback-box .wp-block-column:has(h4){
background-color: var(--wp--preset--color--secondary);
color: #fff;
}
main section.sec-development-structure .whiteback-box .wp-block-column:has(figure) {width: 25%;text-align: center;}
/* 最後の要素以外に下向き三角を表示 */
main section.sec-development-structure .whiteback-box:not(:last-child) {margin-bottom: calc(10px + 3.8vw); /* 三角を表示するための余白 */}
main section.sec-development-structure .whiteback-box:not(:last-child)::after {
content: "";
position: absolute;
top: 100%;/* ボックスの下端に配置 */
left: 50%;
transform: translateX(-50%);
margin-top: 10px;    /* ボックスとの間隔 */
border-style: solid;
border-width: 3.5vw 8vw 0 8vw; /* 上:三角の高さ / 左右:三角の幅の半分 */
border-color: var(--wp--preset--color--secondary) transparent transparent transparent; /* 上だけ色を付ける */
}
main section.sec-development-structure .whiteback-box::before {
position: absolute;
top: -3%;
left: 10px;
color: var(--wp--preset--color--primary);
font-size: 80px;
font-family: serif;
font-style: italic;
text-shadow: #fff 2px 2px 0;
}
main section.sec-development-structure .whiteback-box:nth-of-type(1)::before {content:"1";}
main section.sec-development-structure .whiteback-box:nth-of-type(2)::before {content:"2";}
main section.sec-development-structure .whiteback-box:nth-of-type(3)::before {content:"3";}
main section.sec-development-structure .whiteback-box:nth-of-type(4)::before {content:"4";}
main section.sec-development-structure .whiteback-box:nth-of-type(5)::before {content:"5";}
main section.sec-development-structure .whiteback-box:nth-of-type(6)::before {content:"6";}
main section.sec-development-structure .whiteback-box .sub-headline {margin: 0; padding-left: 2.5em;}
/*経営理念*/
main section.sec-philosophy .whiteback-box:not(:last-child) {margin-bottom: 1em;}
main section.sec-philosophy .whiteback-box {
align-items: center !important;
gap: 2em;
}
main section.sec-philosophy .whiteback-box .wp-block-column:has(h4) {
max-width: 10em;
min-width: 4em;
text-align: center;
padding: 1em;
}
/*会社概要*/
.sec-address .wp-block-columns {gap: 2em;}
.sec-address h4 {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--medium);
font-weight: bold;
margin-top:1em;
}

/*募集案内*/
.recruit-flow {
display: flex;
gap: .5em;
margin: 0;
padding: 0;
list-style: none;
}
.recruit-flow p {
flex: 1;
height: 6em;
display: flex;
align-items: center;
justify-content: center;
background: var(--wp--preset--color--secondary);
color: #fff;
/* 右向きの矢印(五角形)にクリップ */
clip-path: polygon(
0 0,
calc(100% - 35%) 0,
100% 50%,
calc(100% - 35%) 100%,
0 100%
);
/* 縦書き */
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: 0.2em;
line-height: 1;
/* 先端分を考慮して文字を少し左に寄せる */
padding-right: calc(5% * 0.5);
box-sizing: border-box;
}
/*社長挨拶・社員メッセージ*/
.sec-greeting .wp-block-columns, .sec-message .wp-block-columns {gap: 0 30px;}
.sec-greeting .wp-block-column figure, .sec-message .wp-block-column figure {margin-bottom: 1em;}
.sec-message .wp-block-column h3 {margin-bottom: .3em;}

/*品質・環境*/
.sec-iso .wp-block-column figure {margin:20px auto;}

/*お問い合わせ*/
.sec-example li {list-style:none;}
.sec-example li:first-letter {
color:var(--wp--preset--color--secondary);
font-size: var(--wp--preset--font-size--large);
margin-right:.4em;
}
.wp-block-accordion .wp-block-accordion-item {margin-bottom:1.5em;}
.wp-block-accordion h3 {
background-color:var(--wp--preset--color--secondary);
font-size: var(--wp--preset--font-size--large);
color:#fff;
padding: 0 .7em;
}
.wp-block-accordion h3 button:hover  .wp-block-accordion-heading__toggle-title {text-decoration: none;}
.wp-block-accordion p {padding: .5em 1em;}

@media screen and (min-width: 1024px) {}
@media screen and (min-width: 782px) {
dl {
display: flex;
flex-wrap: wrap;
}
dt {
border-bottom: 1px solid #bbd3dd;
margin: 0;
padding: 1em 0;
}
dd {padding: 1em 0;}
.column {display: flex; flex-wrap: wrap; column-gap: 3em;}

/*事業内容*/
main section.sec-development-structure .whiteback-box .wp-block-column:has(h4),
main section.sec-development-structure .whiteback-box .wp-block-column:has(figure) {
max-width: 25%;
min-width: 200px;
}
main section.sec-development-structure .whiteback-box .wp-block-column:has(h4) {padding: 3em 0;}
main section.sec-development-structure .whiteback-box::before {
transform: translateY(-50%);
top: 50%;
}
main section.sec-development-structure .whiteback-box .sub-headline {padding-left: 2em;}

/*会社概要*/
.sec-address .wp-block-columns>.wp-block-column:first-child {
width: 50%;
max-width: 400px;
}
dl.overview-list dt {width: 7em;}
dl.overview-list dd {width: calc(100% - 7em);}
dl.enkaku-list dt {width: 9em;}
dl.enkaku-list dd {width: calc(100% - 9em);}

/*募集案内*/
dl.recruit-list dt {width: 10em;}
dl.recruit-list dd {width: calc(100% - 10em);}
.sec-contact dt {width: 13em;}
.sec-contact dd {width: calc(100% - 13em);}
.recruit-flow p {font-size: 20px; max-width: 160px;}
}
@media screen and (max-width: 781px) {
.product-list > div > * {
display: table;
margin-right: auto;
margin-left: auto;
}
.product-list>div figure {
max-width:320px;
}
main section .whiteback-box,
main section .blueback-box {padding: 1.5em;}
main section .blueback-box .product-list {margin-top: 1em;}
main section .blueback-box .product-list>div {padding-bottom: 2em;}
main section.sec-philosophy .whiteback-box .wp-block-column:has(h4) {max-width:100%;width:100%;}
}