@charset "utf-8";
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}
/* 共通 */
body {
display: none;
font-family: "Noto Sans JP", sans-serif;
background-color: #FCFCFC;
letter-spacing: 0.1em;
font-size: 16px;
color: #1a1a1a;
}
a{color: #1a1a1a;}
.f-serif { font-family: "Noto Serif JP", serif; }
.box-card {
border: 1px solid #EDEDED;
box-shadow: 0px 0px 8px rgb(0 0 0 / 16%);
background-color: #ffffff;
}
/* SP-menu */
.menu-btn {
position: fixed;
top: 10px;
right: 10px;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #1a1a1a;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check {
display: none;
}
.gnav {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;/*leftの値を変更してメニューを画面外へ*/
z-index: 70;
background-color: #FCFCFC;
transition: all 0.3s;/*アニメーション設定*/
display: flex;
align-items: center;
justify-content: center;
}
.gnav ul {
width: 80%;
}
.gnav ul li {
list-style: none;
margin-bottom: 24px;
padding: 0 8px 0 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.gnav ul li:nth-child(4){
margin-bottom: 0;
}
.gnav ul li a {
display: block;
width: 100%;
font-size: 1rem;
box-sizing: border-box;
color:#1a1a1a;
font-weight: 600;
text-decoration: none;
padding: 30px 0;
position: relative;
transition: 0.3s;
}
.gnav-icon{
width: 3%;
margin-bottom: 8px;
}
#menu-btn-check:checked ~ .gnav {
left: 0;/*メニューを画面内へ*/
}
.now{
letter-spacing: 1px !important;
color: #757575 !important;
font-weight: 400 !important;
}
/* SP header */
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0 1em;
display: flex;
justify-content: space-between;
z-index: 60;
}
.header__logo{
width: 18%;
height: auto;
z-index: 60;
}
/*SP footer*/
footer{
width: 100%;
background-color: #FCFCFC;
text-align: center;
margin-bottom: 4vh;
margin-top: 3.5em;
}
.fnav{
width: 85%;
margin: 0 auto;
}
.fnav__link-logo_pc{
display: none;
}
.fnav__link-logo{
display: block;
width: 40%;
margin: 0 auto;
margin-bottom: 1.7em;
}
.fnav__link-logo img{
width: 100%;
height: auto;
}
.fnav ul{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.fnav li{
width: 31%;
margin: 1.5vh 0.4vh;
}
.fnav__link {
text-decoration: none;
font-size: clamp(0.8em, 0.8vw, 0.9em);
font-weight: 300;
white-space: nowrap;
}  
footer p{
text-decoration: none;
font-size: clamp(0.6em, 0.8vw, 0.9em);
font-weight: 300;
color: #383838;
margin-top: 3em;
}
.footer-btn{
text-decoration: none;
margin-top: 10vh;
}
.btn__contact{
width: 85%;
margin: 15vh auto 0;
display: flex;
justify-content: space-between;
padding: 2.3vh 1.7vh;
}
.box-card2{
border: 1px solid #EDEDED;
box-shadow: 0px 0px 7px rgb(0 0 0 / 8%);
background-color: #ffffff;
}
.f__btn__contact{
display: flex;
align-items: center;
}
.btn__contact-txt1{
font-size: clamp(15px, 1.5vw, 20px);
font-weight: 600;
margin-right: 1vh;
letter-spacing: 0.1em;
}
.btn__contact-txt2{
font-size: 0.81em;
font-weight: 600;
letter-spacing: 0.1em;
}
.f__btn__contact-img{
width: 2%;
height: auto;
align-self:flex-end;
}
.sp-br{
display: block;
}
.pc-br{
display: none;
}


/* SP TOP */
div.wrap{
background-image: url(../images/top_bg-img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: top left;
background-attachment:scroll;
}
.top__mv,.sv__mv{
width: 100%;
text-align: center;
margin-bottom: 6em;
}
.top__mv-h2{
font-size: clamp(3em, 5.8vw, 7em);
font-weight: 400;
padding-left: 1em;
padding-top: 4em;
margin-bottom: 0.7em;
line-height: 150%;
letter-spacing: 0.1em;
}
.top__mv-h3{
font-size: clamp(0.95em, 1.4vw, 2em);
font-weight: 300;
line-height: 350%;
padding-left: 1em;
letter-spacing: 0 !important;
}
main{
width: 85%;
margin: 0 auto;
}
.top__main{
width: 100%;
display: flex;
flex-direction: column;
}
.top__main-li,.top__main2{
width: 100%;
margin-bottom: 1em;
}
.top__main-li a, .top__main2 a{
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 1em 1em 0;
text-decoration: none;
letter-spacing: 1px;
}
.top__main-btn1,.top__main-btn2 {
padding: 2em 1.5em 1em;
}
.btn1-txt1,.btn2-txt1{
font-size: clamp(1.25em, 1.8vw, 2em);
font-weight: 600;
margin-bottom: 0.4em;
}
.btn1-txt2,.btn2-txt2{
font-size: clamp(0.95em, 1.2vw, 1em);
font-weight: 600;
}
.top__main-btn1-img{
width: 3%;
}
.btn-icon,.btn-icon2{
width: 100%;
height: auto;
}
.top{
margin-bottom: 7em;
}
/* SP SERVICE */
div.wrap-sv{
background-image: url(../images/sv_bg-img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: top right;
background-attachment:scroll;
z-index: -100;
}
.sv__h2{
font-size: clamp(2em, 3vw, 4em);
font-weight: 600;
padding-top: 32.5vh;
margin-bottom: 0.1em;
line-height: 150%;
letter-spacing: 0.05em;
}
.sv__h3{
font-size: clamp(0.95em, 1.4vw, 2em);
font-weight: 600;
line-height: 350%;
}
.item{
width: 100%;
text-align: center;
margin: 0 auto;
}
.item1{
margin-top: 8em;
}
.item-bg {
position: relative; /* 疑似要素を重ねるため */
overflow: visible;  /* はみ出す部分も表示させる */
padding: 4em 2em;   /* 背景に余裕をもたせる */
text-align: center;
}
.item-bg::before {
content: '';
position: absolute;
/*top: -50px;   上のはみ出し調整 */
left: 0;
width: 100%;
height: 96%; /* 斜めでも上下をカバー */
background-color: #efefef;
transform: skewY(-2deg); /* 斜め */
z-index: -1;              /* 文字の後ろに */
}
.item h4{
font-size: clamp(1.5em, 1.8vw, 2em) !important;
font-weight: 600;
margin-bottom: 1.4em;
}
.item p{
font-size: clamp(0.87em, 1.1vw, 1.4em) !important;
font-weight: 400;
line-height: 200%;
text-align: left;
}
.item-bg h4 {
margin-top: 3em;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
line-height: 150%;
}
.line{
display: block;
width: 12%;
height: 1px;
margin: 0 2%;
background-color: #1a1a1a;
}
p.heading {
font-size: clamp(1.15em, 1.3vw, 1.4em) !important;
font-weight: 500;
line-height: 150%;
margin-bottom: 1em;
}
.item2{
display: flex;
flex-direction: column;
margin-bottom: 3em;
}
.item2 p{
text-align: left !important;
}
.item2-img1{
width: 88%;
margin: 1.5em auto;
}
.item2-txt_box .item2-heading{
font-family: "Noto Serif JP", serif !important;
font-size: clamp(1.1em, 1.2vw, 1.3em) !important;
font-weight: 600 !important;
line-height: 150%;
}
.item2 div{
display: flex;
align-items: center;
margin-top: 2em;
margin-bottom: 0.2em;
}
.item2 div:nth-child(1){
margin-top: 0em;
}
.number{
width: 6vw;
height: auto;
margin-right: 0.4em;
}
.img-line{
display: none;
}
.item2-imgs{
width: 100%;
display: flex;
flex-direction: column;
}
.item3{
margin: 6em 0;
}
.item3__pic{
width: 100%;
margin: 2em auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.br-sp {
display: block;
}
.item3__pic-1{
width: 40%;
height: 19vh;
background-color: #1a1a1a;
color: #ffffff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.item3__pic-1 p{
font-weight: 500;
text-align: center;
letter-spacing: 1px;
line-height: 150% !important;
}
.item3__pic-box{
width: 50%;
height: 19vh;
background-color: #1a1a1a;
color: #ffffff;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.item3__pic-box p{
font-size: clamp(0.7em, 1vw, 1em) !important;
line-height: 190%;
font-weight: 500;
}
.item3__pic li:nth-child(2){
width: 5%;
margin: 0 1em;
}
.item3__logo1{
display: none;
}
.item3__logo2{
display: block;
width: 70%;
height: auto;
margin: 0 auto 1vh;
}
/* Vision */
.wrap-vis_pc{
display: none;
}
.vision_h2{
padding-left: 1em;
}
div.wrap-vis{
display: block;
background-image: url(../images/sp-vision_bg-img.png);
background-repeat: no-repeat;
background-size:contain;
background-position: top center;
background-attachment:scroll;
z-index: -100;
}
.container {
height: auto;
padding: 100px 0 0;
} 
.fade-in-text {
opacity: 0;
transform: translateY(5vh);
transition: opacity 0.5s ease-out, transform 1s ease-out;
transition-delay: calc(var(--delay) * 0.2s);
font-size: clamp(14px, 1.5vw, 16px) !important;
font-weight: 300;
text-align: center !important;
padding-bottom:7vh;
overflow-wrap: break-word;
} 
.fade-in-text.visible {
opacity: 1;
transform: translateY(0);
}
.vision__txt{
margin-bottom: 4em;
}
.vision__txt-bold{
font-weight: 600;
}
/* 一部下層共通 */
div.other{
background-image: url(../images/others_bg-img.png);
background-repeat: no-repeat;
background-size: 150%;
background-position: top left;
background-attachment:scroll;
z-index: -100;
}
/* Company */
.com__box .item{
margin-top: 13vh;
}
.company-info {
width: 100%;
border-collapse: collapse; /* 線をくっつける */
}
.company-info th,
.company-info td {
border: 1px solid #A3A3A3;
padding: 2vh 3vh;
text-align: left;
font-size: clamp(0.87em, 1.1vw, 1.4em) !important;
}
.company-info th {
background-color: #ffffff;  /* 背景色は白 */
font-weight: 600;
line-height: 150%;
}
.company-info td {
font-weight: 400;
line-height: 150%;
}
.ceo{
width: 100%;
display: flex;
flex-direction: column;
}
.ceo__img{
width: 50%;
margin: 0 auto;
}
.ceo__name p.heading{
margin-top: 4vh;
margin-bottom: 0.3vh;
}
.ceo__name p.cap{
margin-bottom: 1vh;
}
.career {
border-top: 1px solid #ccc;
font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
font-size: 1em;
line-height: 1.4;
text-align: left;
margin-top: 4vh;
}
.career-item {
display: flex;
border-bottom: 1px solid #ccc;
padding: 1.8vh 0;
}
.career-date {
width: 38%;
flex-shrink: 0;
font-size: 0.8em;
}
.career-content {
width: 60%;
font-size: 0.8em;
}
/* Form */
form{
z-index: 100;
}
.form-box{
width: 80vw;
}
.form-box .heading{
margin-bottom: 6vh;
}
.contact-form {
max-width: 100%;
margin: 0 auto;
}
.form-group {
margin-bottom: 3vh;
}
.form-group label{
display: block;
text-align: left;
font-size: clamp(1em, 1.2vw, 1.5em) !important;
margin-bottom: 1.5vh;
font-weight: 600;
}
input::placeholder {
color: #bcbcbc;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #EDEDED;
border-radius: 4px;
box-shadow: 0px 0px 8px rgb(0 0 0 / 16%);
}
.hidden {
display: none;
}
.required {
color: #ffffff;
padding: 0 0.5em;
font-size: 0.7em;
background-color: #1a1a1a;
}
.privacy-section {
margin: 7vh 0 0;
width: 100%;
text-align: center;
border: 1px solid #EDEDED;
box-shadow: 0px 0px 8px rgb(0 0 0 / 8%);
padding: 5vh 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.privacy-section p{
padding-bottom: 2vh;
line-height: 180%;
font-size: clamp(1em, 1.2vw, 1.5em);
}
.privacy-section a{
font-weight: 300;
text-decoration: none;
}
.privacy-check {
display: flex;
align-items: center;
justify-content: center;
gap: 1vw;
margin-top: 4vh;
font-size: clamp(1em, 1.2vw, 1.5em) !important;
font-weight: 600;
}
.toggle-area .heading{
margin-top: 10vh;
}
textarea {
height: 20vh;
}
/* 本物のチェックボックスを隠す */
.privacy-check input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: absolute;
opacity: 0;
width: 2em;
height: 2em;
cursor: pointer;
}
/* カスタムチェックボックスの見た目 */
.form__checkbox--custom {
width: 1.4em;
height: 1.4em;
border: 2px solid #444;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s;
position: relative;
}
/* チェック時の見た目 */
.privacy-check input[type="checkbox"]:checked + .form__checkbox--custom {
background-color: #1a1a1a;
border-color: #1a1a1a;
}
/* チェックマーク（白い✓） */
.form__checkbox--custom::after {
content: "";
width: 50%;
height: 25%;
border-left: 3px solid #fff;
border-bottom: 3px solid #fff;
transform: rotate(-49deg);
opacity: 0;
transition: 0.2s;
margin-top: -0.2em;
}
/* チェックしたら表示 */
.privacy-check input[type="checkbox"]:checked + .form__checkbox--custom::after {
opacity: 1;
}
/* 確認ボタン */
.submit-btn {
position: relative !important;
width: 100% !important;
border: none;
background: none;
padding: 0;
margin: 5vh auto 0 !important;
}
.submit-btn .btn__form {
position: relative;
width: 100%;
height: 4em !important;
margin: 0 !important;
}
.submit-btn .f__btn__contact {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
}
.kakunin-txt{
font-family: "Noto Sans JP", sans-serif !important;
font-size: clamp(1em, 1.2vw, 1.5em) !important;
font-weight: 500;
color: #1a1a1a;
}
.submit-btn .form-img {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
.submit-btn .form-img img{
width: 50%;
height: auto;
}
/* 戻るリンク */
.pageback{
margin: 0 auto;
border: none !important;
background-color: #FCFCFC;
display: flex;
align-items: center;
gap: 10px;
text-decoration:underline;
text-underline-offset: 0.3em;
margin-top: 6vh;
color: #616161;
}
.pageback img{
transform: scale(-1, 1);
width: 1vw;
height: auto;
object-fit:scale-down;
padding-top: 0.4vh;
}
.pageback p{
font-family: "Noto Sans JP", sans-serif !important;
font-size: clamp(0.87em, 1.1vw, 1.4em) !important;
font-weight: 400;
}
/* エラー表示 */
.error {
border: 1px solid #D43131 !important;
background-color: #FFF5F5;
}
.error-msg {
font-size: 0.87em !important;
color: #D43131;
margin-top: 1.4vh;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0;
}
.error-msg::before {
content: "";
width: 18px;
height: 18px;
display: inline-block;
background-image: url("../images/error_icon.png");
background-size: contain;
background-repeat: no-repeat;
}
#agreement-error {
display: none;
}
.agreement-error {
margin: 0 auto;
padding-top: 1vh;
font-size: 0.87em !important;
color: #D43131;
display: flex;
align-items: center;
gap: 6px;
}
.agreement-error::before {
content: "";
width: 18px;
height: 18px;
background-image: url("../images/error_icon.png");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
}
/* 確認画面 */
.confirm-table {
width: 100%;
border-collapse: collapse; /* ← 線をすべて1本に統一 */
margin: 0 auto;
font-size: 1em;
line-height: 1.7;
}
.confirm-table th,
.confirm-table td {
border: 1px solid #A3A3A3;
padding: 16px 20px;
vertical-align: top;
}
.confirm-table th {
width: 33%;
font-weight: 600;
text-align: left;
}
/* Privacy */
.pp{
font-size: clamp(1em, 1.1vw, 1.2em) !important;
font-weight: 300;
line-height: 200%;
letter-spacing: 0 !important;
}
.heading{
margin-top: 4vh;
}
/* ------- ol番号設定 ------- */
.pp ol {
list-style: none;
counter-reset: listnum; /* カウンター初期化 */
}
.pp ol > li {
counter-increment: listnum; /* 直接のliだけカウント */
position: relative;
padding-left: 1.2em;
}
.pp ol > li::before {
content: counter(listnum) ".";
position: absolute;
left: 0;
}
/* ------- ul設定（番号に影響しない） ------- */
.pp ul {
list-style: none; 
padding-left: 1.5em;
margin: 0 0 0.5em;
}
.pp ul li::before {
content: ""; /* 何も出さない */
}
.alpha-list {
list-style-type: lower-alpha; /* a, b, c ... */
padding-left: 2.8em;
margin-top: 0 !important;
}
.roman-list-lower {
list-style-type: lower-roman !important; /* i, ii, iii ... */
margin-left: 3em !important;
}
.pp__1{
margin-bottom: 0;
}
.pp__1-1{
margin-top: 0;
}
.pp__2{
margin-left: 1em;
margin-top: 0 !important;
}
/* PC以上 */
@media screen and (min-width: 1000px) {
/* ハンバーガーを非表示 */
.menu-btn, .gnav-icon {
display: none;
}
/* navを常に表示＆通常配置 */
.gnav {
position: static;
background: none;
transition: none;
align-items: flex-start;
margin-top: 2em;
}
.gnav ul {
width: 42vw;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
}
.gnav ul li {
border: none;
box-shadow: none;
margin-bottom: 0;
padding: 0;
background-color:unset;
}
.gnav ul li a {
padding: 0;
font-weight: 400;
transition: 0.3s linear;
}
.gnav ul li a::before {
display: none;
} 
.gnav ul li a:hover{
color:#a4a4a4;
transition: 0.3s linear;
}
.gnav ul li:nth-child(4) {
background-color: #1a1a1a;
padding: 8px 16px;
}
.gnav__contact {
color:#ffffff !important;
font-size: 0.85em !important;
}
.gnav__contact:hover{
color:#828282 !important;
opacity: 0.6;
}
/* footer */
footer{
width: 90%;
display: flex;
justify-content: space-between;
text-align: center;
margin: 10em auto 4em auto;;
}
.fnav{
width: 64%;
margin: 0;
}
.fnav__link-logo{
display: none;
}
.fnav__link-logo_pc{
display: block;
}
.fnav ul {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 1em;
padding: 0;
margin: 0;
list-style: none;
}
.fnav li {
white-space: nowrap;
margin: 0;
}
.fnav__link-logo_pc a{
display: block;
width: 100%;
height: auto;
opacity: 1;
transition: all .3s;
}
.fnav__link-logo_pc a:hover{
opacity: .5;
transition: all .3s;
}
.fnav__link-logo_pc img{
width: 80%;
height: auto;
}
.fnav__link{
transition: 0.3s linear;
}
.fnav__link:hover{
color:#a4a4a4;
transition: 0.3s linear;
}
footer p{
margin: 0;
}
}
/* タブレット以上 */
@media screen and (min-width: 768px) {
.br-sp {
display: none;
}
main{
width: 65%;
}
.pc-br{
display: block;
}
.sp-br{
display: none;
}
/* header */
.header{
padding: 0 3em;
margin-top: 1em;
z-index: 50;
}
.header__logo{
width: 8%;
height: auto;
}
.header__logo a{
display: block;
opacity: 1;
transition: 0.3s linear;
}
.header__logo a:hover{
opacity: 0.4;
transition: 0.3s linear;
}
/*.now{
    text-decoration: underline !important;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
    text-decoration-color: #c5c5c5;
}*/
/* TOP */
div.wrap{
background-size: 60%;
background-attachment:scroll;
}
.top__mv{
margin-bottom: 7em;
}
.top__mv-h2{
margin-bottom: 0.5em;
line-height: 150%;
margin-top: -1em;
}
.top__main{
width: 85%;
margin: 0 auto;
justify-content: space-between;
flex-direction:row;
}
.top__main2{
width: 85%;
margin: 0 auto;
}
.top__main-li{
width: 32%;
}
.top__main-btn1 {
padding-bottom: 22vh;
padding-top: 5vh;
padding-left: 5vh;
}
.top__main-btn2{
display: flex;
align-items: center;
}
.btn2-txt1{
margin-bottom: 0;
margin-right: 24px;
}
.top__main-li a {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 1em 1em 0;
text-decoration: none;
letter-spacing: 1px;
position: relative;
overflow: hidden;
transition: color .4s;
z-index: 1;
}
.top__main-btn1-img{
width: 5%;
display: flex;
flex-direction: row-reverse;
}
.btn-icon2{
width:32%;
}
/* ===== 中央から広がるホバーアニメーション ===== */
.top__main-li a,
.top__main2 a {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 1em 1em 0;
text-decoration: none;
letter-spacing: 1px;
position: relative;
overflow: hidden;
background: #fff;   
transition: color 1.5s ease;
z-index: 0;
will-change: color; /* ←ちらつき軽減 */
}
.top__main-li a::after,
.top__main2 a::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100vmax;
height: 100vmax;
background: #373737;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.7s ease-out; /* ← 戻る時はこれが効く（速い） */
opacity: 1;
z-index: -1;
will-change: transform;
}
/* hover時だけ、上書きでゆっくりに */
.top__main-li a:hover::after,
.top__main2 a:hover::after {
transform: translate(-50%, -50%) scale(1);
transition: transform 1.2s ease-out, opacity 1.4s ease-out; /* ←広がる時をゆっくり */
}
.top__main-li a:hover,
.top__main2 a:hover {
color: #fff;
}
.top{
margin-bottom: 16vh;
}
/* SERVICE */
div.wrap-sv{
background-size: 50vw;
background-attachment:scroll;
}
.sv__mv{
margin-bottom: 10em;
}
.item1{
margin: 5em 0 8em;
}
.item p{
text-align: center;
}
.item-bg h4 {
margin-top: 7em;
}
.line{
width: 4%;
}
.item2{
width: 80%;
margin: 3em auto 5em;
flex-direction: row;
align-items: center;
justify-content:center;
}
.item2 li{
width: 28vw;
}
.item2-txt_box{
width: 40vw !important;
}
.item2-img1{
width: 25vw;
}
.item2-imgs{
width: 62% !important;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.img-line{
display:block;
max-width: 2.5vw;
min-width: 2.5vw;
}
.item2-imgs img {
width: 60%;
height: auto;
}
.item-bg::before {
height: 98%; /* 斜めでも上下をカバー */
}
.number{
width: 2vw;
}
.item3{
margin: 10em 0;
}
.item3__pic{
width: 72%;
margin-top: 3em;
}
.item3__pic-tr{
width: 1vw !important;
}
.item3__pic-1, .item3__pic-box{
height: 18vh;
}
.item3__pic-box{
display: flex;
justify-content: center;
flex-direction: row;
}
.item3__logo1{
display: block;
width: 20%;
height: auto;
margin-right: 1vw;
}
.item3__logo2{
display: none;
}
.item3__pic-box p{
text-align: left;
line-height: 200%;
font-size: 0.75em !important;
}
.item3__pic li:nth-child(2) {
width: 30px;
margin: 0 0;
}
/* Vision */
.wrap-vis{
display: none;
}
div.wrap-vis_pc{
display: block;
background-image: url(../images/vision_bg-img.png);
background-position: top center;
background-repeat: no-repeat;
background-size:90%;
background-attachment:scroll;
z-index: -100;
}
/* 一部下層共通 */
div.other{
background-size:60%;
background-position: top right;
}
/* Company */
.company-info th {
text-align: center;
}
.ceo{
flex-direction: row;
align-items: center;
gap: 10vh;
}
.bengo{
align-items: flex-start;
}
.ceo p{
text-align: left !important;
}
.ceo ul{
width: 20%;
}
.ceo__img {
width: 100%;
margin: 0;
}
.ceo__name p.heading {
margin-top: 2vh;
}
.ceo__txt{
width: 74%;
}
.career{
margin-top: 6.5vh;
}
/* Form */
.form-box{
width: 65vw;
}
.form-group {
margin-bottom: 4.5vh;
width: 60%;
}
.privacy-section {
padding: 8vh 0;
}
.privacy-section p{
padding-bottom: 2vh;
}
.privacy-section a:hover{
color: #6c6c6c;
text-decoration: underline;
text-underline-offset: 0.3em;
}
.privacy-check {
margin-top: 4vh;
}
.submit-btn{
width: 38% !important;
}
.submit-btn .btn__form {
height: 7vh !important;
margin: 0 auto !important;
}
/* 戻るリンク */
.pageback{ 
text-decoration: none;
opacity: 0.7;
}
.pageback:hover{ 
text-decoration: underline;
opacity: 0.7;
}
.pageback img{
width: 0.4vw;
opacity: 0.7;
}
/* Privacy */
.pp{
width: 68vw;
letter-spacing: 0!important;
}
.heading{
margin-top: 4vh;
}
/*footer*/
.btn__contact{
width: 24%;
margin: 0;
}
.footer-btn {
display: block;
width: 24%; /* hover範囲含めて固定幅 */
text-decoration: none;
position: relative;
margin: 15vh 10vh 0 auto; /* 上は15vh、右は0、左は自動 */
}
/* ボタン本体 */
.btn__contact {
width: 100%;
display: flex;
justify-content: space-between;
padding: 2.3vh 1.7vh;
position: relative;
overflow: hidden;
transition: color 0.4s;
border-radius: 0;
}
/* 通常状態（＝hover解除時に戻るときの速度） */
.btn__contact::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
aspect-ratio: 1 / 1;
width: 250%;
background: #373737;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: transform 0.5s ease-out, opacity 0.6s ease-out; /* ←戻る時を速く */
z-index: 0;
}
/* hover時（＝広がる時をゆっくり） */
.btn__contact:hover::after {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
transition: transform 1.2s ease-out, opacity 1.4s ease-out; /* ←広がる時をゆっくり */
}
/* hover時：円が広がる */
.footer-btn:hover .btn__contact::after {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/* hover時に文字を白に */
.footer-btn:hover .btn__contact-txt1,
.footer-btn:hover .btn__contact-txt2 {
color: #fff;
}
/* テキストとアイコンは前面に */
.btn__contact > * {
position: relative;
z-index: 1;
}
/* テキスト */
.btn__contact-txt1 {
margin-right: 1vh;
transition: color 0.4s;
letter-spacing: 0.2;
}
.btn__contact-txt2 {
transition: color 0.4s;
}
/* アイコン部分（固定） */
.f__btn__contact-img {
width: 2%;
height: auto;
align-self: flex-end;
position: relative;
z-index: 2;
}
.btn-icon3 {
width: 100% !important;
height: auto;
transition: none;
}
}