/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

/*〓全ページ〓*/
/*ボタン*/
.wp-element-button, .wpcf7-form input[type="submit"], .wpcf7-previous {
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/arrow.png);
background-position: right;
background-repeat: no-repeat;
text-align: center;
border-radius: 9999px !important;
width: 24em !important;
}
/*明朝体　画像背景の白文字*/
.wp-block-cover, h1 {
font-family: serif
}
.site-body-bottom {
margin: 0
}
/*【ページの先頭に戻るボタン】*/
.page_top_btn {
right: 0;
bottom: 0;
width: 60px;
height: 60px;
background-color: var(--vk-color-primary);
box-shadow: none;
}
/*【ハンバーガー】*/
.vk-mobile-nav-menu-btn {
padding-top: 50px;
padding-right: 50px;
margin-right: 55px;
overflow: visible;
border: none;
background-position: top;
background-size: 50px 50px;
}
.vk-mobile-nav-menu-btn.menu-open {
border: none;
background-size: 50px 50px
}
.vk-mobile-nav {
padding-top: 50px
}
/*開閉時ハンバーガー*/
@media (max-width: 1200px) {
.vk-menu-acc .acc-btn {
border: none;
background: var(--vk-menu-acc-icon-open-black-bg-src) right 50% no-repeat;
width: 100%;
right: 0;
top: 0;
height: calc(24px + 1.4em);
background-size: 25px;
}
.vk-menu-acc .acc-btn-close {
background: var(--vk-menu-acc-icon-close-black-bg-src) right 50% no-repeat;
background-size: 25px;
}
}
/*【モバイルナビ（ハン内）の透過】*/
.vk-mobile-nav {
opacity: 0.9;
padding-top: 70px
}
/*【モバイルナビ（ハン内）の文字サイズ】*/
.vk-mobile-nav li {
font-size: 16px
}
/*【フッターLightning表記非表示】*/
.site-footer-copyright p:nth-child(2) {
display: none;
}
.site-footer-copyright p {
color: #BCBCBC
}
.footer-nav #container {
margin: auto
}
/*【ヘッダーメニューのスタイリング】*/
/* グローバルナビリストのフォントサイズ変更 */
.global-nav-list li .global-nav-name {
font-size: 16px;
font-weight: normal
}
/* 【ヘッダお問い合わせアイコン-振り分けクラスに応じて書き換える】 */
.vk_button-529f5bcd-841b-42a4-972a-11bb2989e622 .has-background {
background-color: #f39b20;
border: 1px solid white
}
.vk_button-529f5bcd-841b-42a4-972a-11bb2989e622 .has-background:hover {
background-color: #FDD090;
opacity: 1
}
.vk_button-529f5bcd-841b-42a4-972a-11bb2989e622 .has-background:hover .vk_button_link_txt {
color: black
}
.page-header {
background-color: whitesmoke
}
/*【フッターメニューのスタイリング】*/
@media screen and (min-width: 767px) { /*ウィンドウ幅が767px以上の場合に適用*/
.footer-nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center; /* 中央寄せにする場合 */
}
.footer-nav ul li {
line-height: 20px
}
}
@media screen and (max-width: 766px) { /*ウィンドウ幅が最大766pxまでの場合に適用→スマホ*/
.footer-nav ul {
width: 100%;
margin: auto;
padding: 0
}
.footer-nav ul li {
text-align: center; /* 中央寄せにする場合 */
width: 100%;
margin: auto
}
.footer-nav-list li:first-child {
border-top: 1px solid #dee2e6
}
.footer-nav-list li:last-child {
border-bottom: none
}
}
/*背景色と余白*/
.site-body-bottom, .footer-nav {
background-color: #F1F1F1;
}
.site-body-bottom {
padding: 5em 0 1em 0
}
.site-body-bottom p {
margin: 0;
line-height: 20px
}
/*区切り線なし*/
*.site-footer {
border: none
}
/*空白コラムの非表示*/
/*
.site-footer-content {
display: none
}
*/
/*メニューホバー時の色(モバイルナビも）*/
.footer-nav-list li a:hover, .vk-mobile-nav li a:hover {
color: #923F4B;
transition: 1s
}
/*フォントサイズ変更*/
.footer-nav-list .menu-item {
font-size: 16px
}
/*〓追加クラス〓*/
/*明朝体*/
.serif {
font-family: serif;
}
/*内部余白20*/
.pad20 {
padding: 20px
}
/*【ヘッダの整形】*/
.site-header {
display: flex
}
.site-header > :first-child {
margin-right: auto
}
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 100%
}
@media (max-width:991px) {
.site-header-container {
display: flex;
justify-content: flex-start;
}
}
/*【ヘッダのメールアイコン】*/
.sfm-floating-menu {
opacity: 1;
transition: initial
}
.sfm-floating-menu {
z-index: 1001;
}
/*アイコン配置調整*/
.sfm-button i {
display: flex;
margin: auto
}
/*PCでは消す*/
@media screen and (min-width: 992px) { /*ウィンドウ幅が767px以上の場合に適用*/
.sfm-floating-menu {
display: none
}
}
/*【トップに戻るボタンを丸く】*/
.page_top_btn {
border-radius: 50%;
width: 50px;
height: 50px;
margin: 0 5px 5px 0
}
/*〓フロントページ〓*/
/*【フロントページの余白設定】*/
/*.home .body {
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.home .site-body {
padding: 0;
}
.home .entry-body {
width: 100%
}
*/
/*コンテンツ画面全体の余白をなくす*/
.home .site-body, .home .site-body-container, .home .entry-body, .home .main-section {
padding: 0;
margin: 0
}
.home .site-body {
padding-bottom: 0
}
/* 【新着情報】 */
.whatisnew-columns, .news_sponsor_contact {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.whatisnew-columns ul {
margin: 0;
padding: 0
}
.whatisnew-columns li {
list-style-type: none;
text-indent: 0.5em;
line-height: 30px;
padding: 0 15px
}
.whatisnew-columns li:first-child {
}
.whatsisnew h6 {
text-indent: 0;
}
/* 【下部採用情報】 */
.recruitinfo {
background-color: #923F4B;
margin: 0 0 -4em 0;
padding-bottom: 0;
position: relative;
}
.recruitinfo p {
text-align: center;
font-family: serif
}
/*明朝体*/
.recruitinfo h2 {
font-family: serif;
}
/*【スタート動画】*/
.topfirstaria {
max-width: 100%;
margin: 0
}
.topfirst {
scroll-snap-align: start;
height: 100vh;
}
/*フェードイン*/
.topfirst img {
animation: fade-in 15s;
animation-fill-mode: forwards;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width:991px) {
.topfirst {
display: grid;
place-items: center; /* 短縮形で上下左右の中央揃え */
height: 100vh /* コンテナの高さ指定 */
}
}
.ebinapride {
position: relative;
background-size: cover;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/01f.jpg);
background-position: top;
height: 700px
}
.ebinapride div {
height: 100%;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/dream_top_01.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
animation: fade-in 2s;
animation-fill-mode: forwards
}
.ebinapride figure img {
position: absolute;
top: 20px; /* #contents内の上から何pxか */
right: 15px; /* #contents内の左から何pxか */
width: 20%
}
@media (max-width:991px) {
.ebinapride {
height: 400px
}
.ebinapride figure img {}
.ebinapride div {
background-size: 150%;
}
}
/*【スクロールダウン】*/
.scrolldown {
text-align: center;
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

/*【社員画像】*/
@media screen and (min-width: 992px) {
.staff-img-container img {
cursor: pointer;
transition: transform .6s ease;
}
.staff-img-container img:hover {
transform: scale(1.2); /* 1.2倍に拡大 */
}
}



/*〓（トップページのポインタ追従画像）〓*/
.pointer-area {
position: relative;
scroll-snap-align: start;
height: 100vh;
width: 100vw;
margin: 0 calc(50% - 50vw);
align-items: flex-start; /* 子要素を上部に揃える */
object-fit: contain;
display: flex;
align-items: center;
}
.pointer-area video {
width: 100%;
}
.custom-cursor {
width: 120px;
height: 120px;
position: absolute;
pointer-events: none;
background-size: cover;
opacity: 1;
transition: opacity 2s ease-out;
border-radius: 10px;
animation: fade-in 1s;
animation: sizedown 1s;
animation-fill-mode: forwards;
filter: grayscale(0);
opacity: 0.5;
}
@keyframes sizedown {
to {
transform: scale(0.8);
}
}
@media screen and (max-width: 640px) {
.pointer-area video {
transform: scale(1.5);
}
}
.video-wrap {
position: relative;
}
.pointer-area p {
font-family: serif;
color: #fff;
font-size: 400%;
position: absolute;
left: 30%;
top: 200px;
z-index: 1;
}
/*〓【一般ページ】〓*/
.page-header {
height: 700px
}
@media (max-width:991px) {
.page-header {
height: 300px
}
}
.page-header h1 {
display: none
}
/*テーブル内余白*/
.wp-block-columns p {
padding: 5px 10px
}
/*〓会社紹介〓*/
.post-name-company .page-header {
background-color: transparent;
background-size: cover;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/03f.jpg);
background-position: top
}
.post-name-company .page-header .page-header-inner {
height: 100%;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/dream_company.png);
background-size: cover;
background-position: top;
animation: fade-in 2s;
animation-fill-mode: forwards
}
.branchoffice div {
border-top: #923F4B 1px solid;
border-bottom: #923F4B 1px solid
}
.branchoffice div:nth-child(2) {
border-right: #923F4B 1px solid;
border-left: #923F4B 1px solid
}
.portrait {
max-width: 40%;
height: auto;
}
@media (max-width:640px) {
.branchoffice div {
border-right: none;
border-left: none
}
.branchoffice div:nth-child(2) {
border: none
}
.portrait {
max-width: 35%;
height: auto;
}
}
.float_r {
margin-bottom: 0;
margin-left: 6px;
float: right;
}
/*〓採用情報〓*/
.post-name-recruitment .page-header {
background-color: transparent;
background-size: cover;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/02f.jpg);
background-position: top
}
.post-name-recruitment .page-header .page-header-inner {
height: 100%;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/dream_recruit.png);
background-size: cover;
background-position: top;
animation: fade-in 2s;
animation-fill-mode: forwards
}
/*〓お問い合わせ〓*/
.post-name-contact .page-header {
background-color: transparent;
background-size: cover;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/04f.jpg);
background-position: top
}
.post-name-contact .page-header .page-header-inner {
height: 100%;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/dream_contact.png);
background-size: cover;
background-position: top;
animation: fade-in 2s;
animation-fill-mode: forwards
}
/* 必須フィールドのラベルスタイル */
.wpcf7-form .required {
color: red;
}
/* インプットフィールドのスタイル */
.wpcf7-form textarea {
padding: 10px;
border: 1px solid #923f4b;
}
.wpcf7-form input, .wpcf7-form select {
border: 1px solid #923f4b;
}
/* テキストエリアのスタイル */
.wpcf7-form textarea {
height: 150px;
resize: vertical;
}
.wpcf7-form .wpcf7-select {
background-color: #eab8c0
}
/* ボタン配置領域のスタイル */
.submitbutton {
text-align: center;
width: 100%;
}
/* 戻るボタンのスタイル */
.wpcf7-previous {
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/arrowback.png);
background-position: left;
background-color: #2c2eb2;
color: white;
height: 45px;
font-size: 16px;
display: block;
width: 24em !important;
margin: 0 auto;
cursor: pointer;
transition: .2s cubic-bezier(0.45, 0, 0.8, 1);
}
@media (max-width:991px) {
.wpcf7-previous {
width: 21em !important
}
}
/* 送信ボタンのスタイル（トップページの事業パートナー募集も） */
.wpcf7-form input[type="submit"] {
height: 45px;
display: block;
width: 24em !important;
margin: 0 auto;
cursor: pointer;
transition: .2s cubic-bezier(0.45, 0, 0.8, 1);
}
/* フォーム領域の幅調整 */
.wp-block-contact-form-7-contact-form-selector {
margin: 0 auto;
padding: 10px
}
/* 送信ボタンのホバー時のスタイル */
.wpcf7-form input[type="submit"]:hover {
background-color: #e01e49;
border: #923F4B solid 1px
}
/* 戻るボタンのホバー時のスタイル */
.wpcf7-previous:hover {
background-color: #1d21ff;
border: #2c2eb2 solid 1px
}
/* エラーメッセージと成功メッセージのスタイル */
.wpcf7-response-output {
font-size: 20px;
border: none;
color: red
}
/*【form-navメールフォーム上部のプログレスバー】 */
.progressbar {
display: flex;
flex-wrap: wrap;
}
.progressbar .item {
position: relative;
width: 33%;
text-align: center;
align-items: center;
justify-content: center;
padding: 13px 0;
line-height: 1.5;
background: #F5F5F5;
color: #999999;
}
.progressbar .item:not(:last-child)::before, .progressbar .item:not(:last-child)::after /*最後を矢印にする場合は入れ替える※要active調整　.progressbar .item:after */ {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 100%;
content: '';
border: 37px solid transparent;
border-left: 20px solid #F5F5F5;
margin: auto;
}
.progressbar .item:not(:last-child)::before {
margin-left: 1px;
border-left-color: #FFF;
}
@media screen and (max-width: 767px) {
.progressbar .item {
font-size: 11px;
line-height: 1.4;
padding: 10px 0;
}
.progressbar .item:not(:last-child)::before, .progressbar .item:not(:last-child)::after {
border-width: 25px;
border-left-width: 12px;
}
}
/* active */
.progressbar .item.active {
z-index: 1;
background: #923f4b;
color: #FFF;
}
.progressbar .item.active:not(:last-child)::after {
border-left-color: #923f4b;
}
.progressbar .item.active:not(:last-child)::before {
border-left: none;
}
/*〓（トップ画像なし・ページによる）〓*/
.post-name-privacy-policy .page-header, .post-name-faq .page-header, .post-name-contact-confirm .page-header, .post-name-contact-thanks .page-header, .post-name-request .page-header, .post-name-request-confirm .page-header, .post-name-request-thanks .page-header, .post-name-faq .page-header, .post-name-news .page-header {
height: 100px
}
@media (max-width:991px) {
.post-name-privacy-policy .page-header, .post-name-faq .page-header, .post-name-contact-confirm .page-header, .post-name-contact-thanks .page-header, .post-name-request .page-header, .post-name-request-confirm .page-header, .post-name-request-thanks .page-header, .post-name-faq .page-header, .post-name-news .page-header {
height: 50px
}
}
.post-name-privacy-policy h1, .post-name-faq h1, .post-name-contact-confirm h1, .post-name-contact-thanks h1, .post-name-request h1, .post-name-request-confirm h1, .post-name-request-thanks h1, .post-name-faq h1, .post-name-news h1 {
display: contents;
color: #923F4B
}
/* フッターのボタンを消す */
.post-name-contact .footercontactbtn, .post-name-contact-confirm .footercontactbtn, .post-name-contact-thanks .footercontactbtn, .post-name-request .footercontactbtn, .post-name-request-confirm .footercontactbtn, .post-name-request-thanks .footercontactbtn {
display: none
}
/*〓よくある質問〓*/
.post-name-faq details {
margin-bottom: 0.5ex;
border: 1px solid #c4c4c4;
border-radius: 5px;
}
.post-name-faq summary {
padding: 10px 15px;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
}
.post-name-faq .question_h {
display: inline-block;
color: #923f4b;
margin-right: 12px;
text-align: center;
line-height: 25px;
font-size: 20px;
font-weight: bold;
}
.post-name-faq .question_t {
color: #000000;
margin-left: 0px;
font-weight: bold;
padding-right: 10%;
}
.post-name-faq .question_plus {
margin-right: 10px;
color: #5d6d7e;
position: absolute;
left: 90%;
font-size: 25px;
}
.post-name-faq .answer {
padding: 10px 15px;
border-top: 1px solid #c4c4c4;
animation: fade-in 2s;
animation-fill-mode: forwards;
}
.post-name-faq .answer p {
margin-bottom: 0;
}
.post-name-faq .answer_h {
color: #2c2eb2;
font-size: 20px;
font-weight: bold;
margin-right: 12px;
}
}
/* 事業パートナー企業様募集中のスタイル */
.ac-box {
width: auto;
margin: 30px auto 7px;
}
.ac-box label, .ac-small .wp-block-button__link {
max-width: 385px;
font-size: 16px;
font-weight: bold;
text-align: center;
background: #2c2eb2;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 9999px;
cursor: pointer;
color: #fff;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/arrow.png);
background-position: right;
background-repeat: no-repeat;
font-weight: normal;
font-size: 16px;
}
@media (max-width:991px) {
.ac-box label, .ac-small .wp-block-button__link {
width: 337px !important;
height: 43px;
line-height: 43px;
font-size: 95%
}
}
.ac-box label:hover {
background: #1d21ff;
background-image: url(https://www.sanrokuec.co.jp/cms/wp-content/uploads/2025/11/arrow.png);
background-position: right;
background-repeat: no-repeat
}
.ac-box input {
display: none;
}
.ac-box label:after {}
.ac-box input:checked ~ label::after {}
.ac-box div {
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}
.ac-box input:checked ~ div {
height: auto;
padding: 5px;
background: ;
opacity: 1;
margin-top: 20px
}
.ac-small {
border: solid #696ad9 1px;
border-radius: 10px;
margin: 15px;
}
.ac-box div p {
line-height: 23px;
padding: 20px 20px 0 20px;
text-align: justify;
font-weight: bold;
font-size: 18px;
line-height: 1.8em
}
.ac-small p {
margin-bottom: 0px;
}
.ac-small hr {
border: none;
border-top: solid #696ad9 1px;
width: 90%;
}
.ac-small .circle-icon-wrapper {
/* サイズ設定 */
display: flex;
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
width: 50px;
height: 50px;
margin: 10px auto;
text-align: center;
background-color: #2c2eb2;
line-height:24px;
border-radius: 50%; /* 要素を完全に円形にする */
}
.ac-small .circle-icon-wrapper i {
font-size: 24px; /* アイコンのサイズ */
color: white; /* アイコンの色 */
padding-left:5px;
}
.ac-small .wp-block-button__link {
line-height: 20px;
margin-bottom: 15px
}
/*〓フロントページ上部メニューを開いた時には隠す〓*/
.home .site-header {
position: fixed;
top: 0;
width: 100%;
/* 他のスタイル */
transition: transform 0.3s ease-out; /* スムーズな表示/非表示 */
transform: translateY(-100%); /* 初期状態では画面外に隠す */
}
.home .site-header.visible-header {
transform: translateY(0); /* 表示状態では元の位置に表示 */
background-color: white;
}
.youtubemovie {
margin:auto
}
.whatisnew a {
pointer-events: none
}