/* 全体 */

html{
font-family: "Yu Gothic", sans-serif;
font-weight: bold;
cursor: default;
max-width: 1800px;
margin: 0 auto;
}

a, button {
cursor: pointer;
}

p{
line-height: 1.8;
}

h1{
padding: 10px;    
}

h2{
font-size: 4rem;
padding: 30px 60px 30px;
text-transform: uppercase;    
}

h3{
padding: 10px 0 10px;  
}

.small{
font-size: 1rem; 
}

.center_h2{
text-align: center;
margin: 0 auto;
padding: 0 0 50px;
text-transform: uppercase;   
}

.right_h2{
text-align: right;
}

.first_letter{
font-size: 8rem;
color: #e50012;    
}

a:link,
a:visited{
color: #000;
}

/* キービジュアル */

.keyvisual_button{
position: absolute;
bottom: 10%;
right: 5%;
display: flex;
z-index: 10;
gap: 30px;
}

.keyvisual_button a{
display: block;
padding: 23px 50px;
color: #333;
letter-spacing: 0.05em;
text-decoration: none;

font-size: 1.3rem;
text-align: center;
line-height: 1.7;
transition: transform 0.4s ease; 
overflow: hidden; 
}

.key_tel_button{
background: rgba(255, 255, 255, 0.9);
color: #333;
border: none;
box-shadow: 0 10px 20px rgba(0, 50, 150, 0.2);
box-shadow: inset 0 0 0 2px #ccc;
}

.key_tel_button::before {
content: "";
position: absolute;
transition: all 0.3s ease;
}

.keyvisual_button a:hover{
transform: scale(1.1);
background: #fff;
color: #333;
transform: translateY(-5px); /* 上にスッと浮く */
}

.key_tel_number{
font-family: 'Montserrat', sans-serif;
font-size: 1.6rem;  
}

.keyvisual_slider {
position: relative;
width: 100%;
height: 90vh;
overflow: hidden;
}

.slide{
position: absolute;
width: 100%;
height: 90vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 1;
}

.slide.active {
opacity: 1;
z-index: 2;
}

.keyvisual{
background-image: url(../images/keyvisual.png);
}

.keyvisual2{
background-image: url(../images/keyvisual2.png);
}

/* ヘッダー */
header{
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);  
}

header span{
color: #e50012;
font-size: 0.6rem;
text-transform: uppercase;
padding-top: 5px;   
}

.header_container{
display: flex;
justify-content: space-between;
padding-top: 5px;    
}

.nav_container{
display: flex;
justify-content: right;    
}

.nav_item{
padding: 30px 50px 10px 0;
}

/* ハンバーガーボタン */
.hamburger_btn {
display: none;
position: relative;
top: 4vh;
right: 3vh;
width: 30px;
height: 24px;
cursor: pointer;
z-index: 100;
}

.hamburger_btn span {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #333;
transition: all 0.4s;
}

.hamburger_btn span:nth-child(1) { top: 0; }
.hamburger_btn span:nth-child(2) { top: 11px; }
.hamburger_btn span:nth-child(3) { top: 22px; }


/* カンパニー */

.company{
background-image: url(../images/bg_company2.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: right 20px top;   
}

.company_first{
text-align: left;
font-size: 1.5rem;
line-height: 2;
margin: 20px 30px 30px;      
}

.company_second{
text-align: left;
line-height: 2.3;
margin: 0 30px 20px;
}

.company img{
margin: 0 0 10px;
width: 600px;
} 

.company_button{
display: block;
width: 400px;
text-align: center;
border: 2px solid gray;
text-decoration: none;
margin: 30px 90px 0;
padding: 10px 5px 10px;
transition: all 0.5s ease;
}

.company_button:hover a {
color: #fff;
}

.company_button:hover{
background: #333;
color: #fff;
border-color: #333;
transform: scale(1.05);
}


.sp-only{
display: none;  
}


/* サービス */

.top_service{
background-color: #f7f7f7;
padding: 150px 0 250px;
clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%);;  
}

.service_text{
text-align: right;
padding: 0 60px 60px 0;
}

/* コンテナ内 */

.service_container{
display: flex;
max-width: 1050px; 
margin: 0 auto;
justify-content: center;
align-items: center; 
}

/* 偶数番目（2, 4つ目）だけ左右を入れ替える */
.service_container:nth-of-type(even) {
flex-direction: row-reverse;
}

.service_item, 
.service_item2 {
flex: 1;
width: 500px;
overflow: hidden;
}

.service_item img,
.service_item2 img{
width: 500px;
display: block;
transition: transform 1s ease;
}

.service_item:hover img, 
.service_item2:hover img{
transform: scale(1.1);
}

/* テキスト内の装飾 */
.service_item h4,
.service_item2 h4{
font-size: 2rem;
margin: 20px 0;
}

.service_item p {
line-height: 1.8;
}

.number{
display: block;
font-style: italic;
/* font-family: 'Poppins', sans-serif; 数字専用のかっこいい英字フォント */
font-size: 4rem; /* 大胆に大きく */
font-weight: 900;
color: transparent; /* 中身を透明にする（くりぬき） */
-webkit-text-stroke: 3px red; /* アウトラインの線を描く */
paint-order: stroke fill;
padding-bottom: 6px;
}

/* ボタン */
.service_button,
.service_button2 {
display: block; /* blockから変更（横幅いっぱいにならないように） */
width: 500px;
text-align: center;
border: 2px solid gray;
padding: 10px 0;
margin-top: 40px;
text-decoration: none;
color: #333;
transition: all 0.5s ease;
}

.service_button:hover,
.service_button2:hover {
background: #333;
color: #fff;
border-color: #333;
transform: scale(1.05);
}

/* テキストが右側にある時（1, 3, 5つ目） */
.service_container:nth-of-type(odd) .service_item:last-child {
padding-left: 30px;
}

/* テキストが左側にある時（2, 4つ目） */
.service_container:nth-of-type(even) .service_item2 {
padding-right: 30px;
text-align: right;
}

.top_service{
animation: slideInRightToLeft 3s ease-out forwards;
}

/* サービス終了 */

/* フロー開始 */
.top_flow{
text-align: center;
}

.top_flow img{
text-align: center;  
}

.top_flow_container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.top_flow_item{
padding: 10px 50px 70px;  
}

.flow_button{
display: block; /* blockから変更（横幅いっぱいにならないように） */
width: 300px;
text-align: center;
border: 2px solid gray;
padding: 15px 0;
margin-top: 40px;
text-decoration: none;
color: #333;
transition: all 0.5s ease;
}

.flow_button a:hover{
color: #fff;
}

.flow_button:hover{
background: #d71718;
color: #fff;
border-color: #d71718;
transform: scale(1.05);
}

.contact_button{
display: block; /* blockから変更（横幅いっぱいにならないように） */
width: 300px;
text-align: center;
border: 2px solid #d71718;
background-color: #d71718;
padding: 15px 0;
margin-top: 40px;
text-decoration: none;
color: #fff !important;
transition: all 0.5s ease;  
}


.contact_button:hover{
background: #333;
color: #fff;
border-color: #333;
transform: scale(1.05);
}

/* フロー終了 */


/* recruit開始 */
.top_recruit a{
display: block;  
text-align: center;
transition: transform 0.5s ease;
}

.top_recruit a:hover{
transform: scale(1.05);  
}

.top_recruit p{
text-align: center;
padding: 20px 0 20px;
}

/* news */

.news{
background-color: white;
border: 5px double gray;
width: 400px;
margin: 10px auto;
padding: 50px 20px 50px;  
}
.news h4{
text-align: center;
margin: 0 auto;  
}

.news dt{
padding-top: 20px;  
}

.news dd{
padding-top: 7px;  
}

.bg_pattern{
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 30px 30px;
background-repeat: repeat;
background-position: top left;
padding: 5px 0 70px;    
}

/* snsスタート */

.sns p{
font-size: 1rem;
border-bottom: 2px solid gray;
width: 150px;
text-align: center;
margin: 0 auto;
padding: 0 0 15px;
}

.sns a{
text-align: center;
display: block;
padding: 10px 0;
margin: 0 auto;  
}

.news_container{
display: flex;
justify-content: center;  
}

.news_container .news_item:last-child {
align-self: flex-end; /* これで右側（SNS）だけが下に張り付きます */
}
/* お問い合わせ */

.bg_contact {
  background-image: url(../images/bg_contact.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 500px;
  max-width: 1300px;
  position: relative;
  margin: 20px auto 0;
}

.contact-container {
  height: 100%;
  max-width: 1200px; /* サイト幅に合わせて調整 */
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  /* align-items: flex-end; から変更 */
  align-items: center;    /* これで左右のアイテムの「中心」が揃います */
  box-sizing: border-box;
}

.bg_contact-item{
padding: 180px 10px 0;
text-align: center;    
}

.tel-group a {
  display: block;
  text-decoration: none;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  transition: transform 0.3s ease, color 0.3s ease;
}

.tel-group a:hover{
transform: scale(1.05);
color: #d71718;
}


.bg_contact-item p {
font-size: 1rem;
opacity: 0.8;
}

.mail-link {
display: inline-block;
padding: 20px 60px;
background-color: #fff;
border: 1px solid black;
color: #333;
text-decoration: none;
font-size: 1rem;
letter-spacing: 0.1em;
transition: all 0.3s ease;
}

/* ホバーした時だけ白背景にする */
.mail-link:hover {
  background-color: #d71718;
  transform: scale(1.05);
  color: #fff;
}

/* トップボタン */
/* ボタンの基本スタイル */
.page-top-line {
  position: fixed;
  right: 30px;
  bottom: 40px;
  z-index: 9999;
  writing-mode: vertical-rl; /* 縦書きにする */
  text-decoration: none;
  color: #333;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding-bottom: 60px; /* 線の分だけ下に余白 */
  opacity: 0;
  transition: 0.4s;
}

/* 縦の線を作る */
.page-top-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 50px;
  background-color: #333;
  transition: height 0.3s;
}

.page-top.is-stopped {
position: absolute;
bottom: 20px;
}

.page-top-line.is-show { opacity: 1; }


/* フッター */

footer{
padding-top: 50px;
margin-top: 10px;
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.05);    
}

.footer_container{
display: flex;
justify-content: space-between;    
}

.footer_item{
padding: 0 30px 0 30px;  
}

.footer_item p{
padding: 10px 0 0 10px;
line-height: 1.7;  
}

footer li{
padding-bottom: 20px;    
}

.footer_container2{
display: flex;
justify-content: center;    
}

.footer_item2{
padding: 20px;    
}

footer h3{
border-bottom: 1px solid gray;
padding-bottom: 9px;
margin-bottom: 15px;   
}

.copyright{
font-size: 0.8rem;
text-align: center;
padding: 10px;
color: white;
background-color: #555;    
}

.telmark{
display: inline-flex;  /* アイコンと数字を横並びにする */
align-items: center;   /* 垂直方向の真ん中に揃える */
white-space: nowrap;   /* ←これが重要！途中で改行させない */
margin: 5px 0 10px;
}    

/* ★★★会社概要ページ★★★ */

.company_top{
background-image: url(../images/company_top.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 300px;
}

.company_top h2{
  color:white; 
padding: 20px 20px 0;
font-size: 4rem;  
}

.company h3{
text-align: center;
padding: 40px 0 30px;
font-size: 1.3rem;
}

.company h4{
padding: 20px 0 20px;  
}


.company p{
line-height: 2;
padding: 0 60px 0;
}

.strong{
color: #d71718; 
}

.company_profile {
margin: 0 auto;
padding: 0 60px;
}


.profile_table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  border-top: 3px solid #333; 
  font-size: 16px;
}


.profile_table th,
.profile_table td {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  vertical-align: top; 
}

.profile_table th {
  width: 25%;
  background-color: #f8f9fa;
  color: #333;
  font-weight: bold;
}

.profile_table td {
  width: 75%;
  color: #555;
  line-height: 1.8;
}

.access iframe{
display: block;
width: 1000px;
height: 400px; 
margin: 20px auto;
border: 2px solid gray;
}

.company h2{
padding: 30px 60px 30px;  
}

/* ★★★事業内容ページスタート★★★ */
.ser_top{
background-image: url(../images/ser_top.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 300px;
}

.ser_top h2{
padding: 20px 20px 0;
font-size: 4rem;  
}


.ser_nav{
display: flex;
justify-content: center;
background-color: #f7f7f7;
}

.ser_nav_item{
padding: 70px 30px 30px;  
}

.ser_nav_item a:hover{
color:#d71718;
border-bottom: 3px solid #d71718;
padding-bottom: 10px;  
}

.kuro_midashi{
text-align: center;
font-size: 1.7rem;
background-color: black;
color: white;
width: 300px;
margin: 50px auto -35px; /* 下マージンをマイナスにして、下の要素を引っ張り上げる */;
padding: 20px 0 20px;
position: relative;    /* 重なり順を有効にするために必要 */
z-index: 10;           /* 背景よりも上にくるように指定 */
}


.service h3{
text-align: center;
padding: 70px 0 10px;
font-size: 2rem;
}

.service h4{
margin: 10px 0 40px;
font-size: 1.3rem;
border-left: 8px double #d71718;
padding: 5px 10px 5px;
}

.ser_container{
display: flex;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}

.border{
border-bottom: 5px solid #d71718;
width: 100px;
margin: 0 auto;
padding: 3px;  
}

.ser_item {
flex: 0 0 45%;          /* 幅を47.5%に固定（隙間5%を考慮） */
box-sizing: border-box;
padding: 60px 0 0 0;
}

.ser_container:nth-child(even) {
flex-direction: row-reverse;
}

.items_grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
max-width: 1200px; /* コンテナの最大幅 */
margin: 0 auto; /* 中央寄せ */
padding: 20px; 
}

.items {
overflow: hidden; /* 箱からはみ出た部分をカットする */
}

.items img {
width: 100%;      /* 親の箱の横幅にピッタリ合わせる */
height: auto;     /* 横幅に合わせて高さも自動調整（歪ませない） */
display: block;   /* 画像の下にできる謎の隙間を消す */
}

.last{
max-width: 1200px;
margin: 0 auto;
padding: 30px 60px;  
}

.last p{
text-align: center;
padding-top: 10px;  
}

.service li{
padding: 8px 0;  
}



/* ★★★リクルートページ開始★★★ */

.recruit_top{
background-image: url(../images/rectruit_top.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 300px;
}

.recruit h3{
font-size: 3rem;
padding: 20px 60px 30px;   
}

.recruit p{
padding: 20px 60px 0;
line-height: 2.5;  
}

/* 外枠の余白調整 */
.recruit_profile{
margin: 0 auto;
padding: 20px 60px 40px;
}

caption{
text-align: left;
font-size: 1.3rem;
padding-bottom: 15px;
}

.red{
color: #d71718;
}

.recruit h4{
margin: 10px 60px 0;
font-size: 1.3rem;
border-left: 8px double #d71718;
padding: 5px 20px 5px;
}

form{
max-width: 1100px;
background-color: #f9f9f9;
padding: 30px 30px 30px;
margin: 20px auto 20px;
}

.form_grid{
display: grid;
grid-template-columns: 250px 1fr;  
}

.form_grid dt{
  padding: 12px;
margin-bottom: 20px; 
}

/* 必須ボタン */
.required{
background-color: #d71718;
color: white;
padding: 1px 5px 1px;
font-size: 0.8rem;
margin-left: 10px;  
}

input[type="text"],
input[type="email"],
input[type="tel"]{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 幅の計算を楽にする */
  font-size: 16px;
}

textarea{
width: 100%;
height: 300px;
padding: 10px;
 border: 1px solid #ccc;
  box-sizing: border-box; /* 幅の計算を楽にする */
  font-size: 16px;
}

.agree {
    text-align: center;
    width: 100%;
    margin: 0 auto 20px; /* 上の余白を削ってバランス調整 */
}

.agree_text {
    padding: 0 0 0 !important; /* 他のpaddingを強制リセット */
    margin: 40px 0 5px 0 !important; /* 下の隙間を最小限に */
    line-height: 1.5;
}

input[type="radio"]{
display: inline-block;
}


.agree_text a {
  color: #d71718; /* 送信ボタンと同じ赤色にすると統一感が出ます */
  text-decoration: underline;
  font-weight: bold;
  display: inline-block;
}

.agree_text a:hover {
  text-decoration: none; /* ホバー時に下線を消すなど */
  opacity: 0.8;
}


.submit{
  text-align: center;
padding-top: 20px;
}

.submit input{
display: inline-block;
border: 4px solid #d71718;
background-color: white;
padding: 6px 20px;
text-align: center;
margin: 0 auto; 
}

/* ★★★ご依頼の流れページ★★★ */
.flow h3{
font-size: 1.5rem;
padding: 30px 60px 10px;
}

.flow p{
padding: 10px 60px 10px;
}

.flow_container{
display: flex;
justify-content: center  
}

.flow_item p{
width: 690px;
}


/* ★★★お問い合わせページ★★★ */
.contact_top{
background-image: url(../images/contact_top.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 300px;
}

.contact h3{
font-size: 1.3rem;  
}

.border_h3{
margin: 10px 60px 10px;
width: 1100px;
 padding: 10px 0 20px; /* 線と文字の間の余白 */
  /* 背景で2色の線を表現 */
  background: linear-gradient(to right, #d71718 0%, #d71718 100px, #ccc 100px, #ccc 100%);
  background-repeat: no-repeat;
  background-size: 100% 3px; /* 横幅100%、高さ2pxの線 */
  background-position: bottom; /* 下側に配置 */ 
}

.contact p{
padding: 10px 60px 20px;  
}

.phone_number{
font-size: 2rem;  
}

.phone_number a:hover{
transform: scale(1.05); /* 1.05倍に大きくする */
color: #d71718;   
}




/* ★★★プライバシーポリシーページ★★★ */
.privacy{
padding: 0 60px 0;  
}

.privacy h3{
margin: 10px 0 5px;
font-size: 1.3rem;
border-left: 8px double #d71718;
padding: 5px 10px 5px;
}



.privacy p{
padding: 20px 0 20px;  
}

.privacy_contact{
text-align: center;
background-color: #e0e0e0;
padding: 50px;  
}

.privacy_contact img{
padding: 20px 0 10px;  
}

.privacy_contact p{
padding: 0;  
}

.privacy h4{
font-size: 1.3rem;  
}


/* ★★★よくある質問ページ★★★ */

.faq_top{
background-image: url(../images/faq_top.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 300px;
}

.faq-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}


.faq h3 {
    font-size: 1.2rem;
  margin-top: 40px;
  border-bottom: 2px solid #d71718; /* 会社のテーマカラーに合わせると◎ */
  padding-bottom: 20px;
}

.faq-item {
  background-color: #f9f9f9;
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
}

.faq-item summary {
  padding: 20px 20px;
  font-weight: bold;
  cursor: pointer;
  list-style: none; /* デフォルトの三角形を消す（一部ブラウザ） */
  position: relative;
  transition: background-color 0.3s;
}

.faq-item summary::-webkit-details-marker {
  display: none; /* iOS/Safariの三角形を消す */
}

/* 質問の前にQを表示 */
.faq-item summary::before {
  content: "Q.";
  color: #d71718;
  margin-right: 10px;
}

/* 右側にプラスアイコンを表示 */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 1.2rem;
  transition: transform 0.3s;
}

/* 開いている時のスタイル */
.faq-item[open] summary {
  background-color: #eee;
}

.faq-item[open] summary::after {
  transform: rotate(45deg); /* プラスをバツに変える */
}

.faq-answer {
  padding: 15px 20px;
  background-color: #fff;
  border-top: 1px solid #eee;
  line-height: 1.6;
}

/* 回答の前にAを表示 */
.faq-answer p::before {
  content: "A.";
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

/* □■□■□■□■□■□■□■スマホページ対応□■□■□■□■□■□■□■□■ */

@media(max-width:800px){

/* ハンバーガーボタン（スマホ対応） */
.hamburger_btn {
display: block;      /* ボタンを表示 */
    position: fixed;     /* 画面に対して固定 */
    top:25px;           /* 上から20pxの位置（適宜調整してください） */
    right: 20px;         /* 右から20pxの位置（適宜調整してください） */
    z-index: 100;        /* メニュー(.nav_wrapper)の90より大きくする */
    
    /* ボタンのサイズや三本線のスタイルが別途定義されている前提ですが、
       fixedにすると幅が潰れることがあるので、width/heightの指定を確認してください。
    */
    width: 40px;
    height: 50px;
    cursor: pointer;
    }

    /* メニューを画面外(右)に配置 */
    .nav_wrapper {
        position: fixed;
        top: 0;
        right: -100%; /* 初期状態は隠す */
        width: 80%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        transition: all 0.5s;
        z-index: 90;
        padding-top: 80px;
    }

    /* 開いた時の状態 */
    .nav_wrapper.is-active {
        right: 0;
    }

    .nav_container {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .nav_item {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #eee;
    }

    .nav_item a {
        display: block;
        padding: 5px;
    }

    /* ボタンのアニメーション (×印にする) */
    .hamburger_btn.is-active span:nth-child(1) {
        top: 11px;
        transform: rotate(45deg);
    }
    .hamburger_btn.is-active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger_btn.is-active span:nth-child(3) {
        top: 11px;
        transform: rotate(-45deg);
    }

/* ヘッダー（スマホ） */

.header_item img{
width: 150px;  
}

/* キービジュアル（スマホ） */
.keyvisual_button{
display: none;}

.keyvisual_slider, .slide {
        /* スマホでは高さを少し抑える（または100vhで全画面にする） */
        height: 70vh; margin-top: 0;
    }

    .slide {
        height: 70h;
        background-size: cover; /* 余白を出さずに引き延ばす */
        background-position: center; /* 中央を基準にする */
    }

.keyvisual{
background-image: url(../images/keyvisual_tate.png);
}

.keyvisual2{
background-image: url(../images/keyvisual2_tate.png);
}

/* 全体（スマホ） */


h2{
font-size: 1.8rem;
padding: 20px 10px 10px 0;
text-align: center;
text-transform: uppercase;    
}

h3{
padding: 10px 0 10px;  
}

.small{
font-size: 0.7rem;
padding-left: 7px;  
}

.center_h2{
text-align: center;
margin: 0 auto;
padding: 0 0 10px;
text-transform: uppercase;   
}


.first_letter{
font-size: 3rem;
color: #e50012;    
}

img {
    max-width: 100%; /* 親要素の幅を超えない */
    height: auto;    /* 縦横比を維持 */
    display: block;  /* 下に謎の隙間ができるのを防ぐ */
    margin: 0 auto;  /* 画像自体も中央に寄せる（念のため） */
}

/* TOPカンパニー（スマホ） */
.company {
padding: 10px 0;
margin: 0 auto;
text-align: center; 
}


.sp-only {
display: inline;
}

/* 1段目の文章 */
.company_first {
font-size: 1.2rem;
line-height: 1.6;
margin: 5px 0 20px 0;
text-align: center;
}

/* 2段目の文章 */
.company_second {
font-size: 1rem;
line-height: 1.8;
margin: 0 0 30px;
text-align: left;
}

/* ボタンの調整 */
.company_button {
width: 100%;
max-width: 300px;
margin: 0 auto; 
}

/* TOPサービス（スマホ） */
.right_h2 {
text-align: right;
padding-bottom: 20px;
}

.top_service {
background-color: #f7f7f7;
padding: 120px 40px !important; 
margin: 0 auto !important;
clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
box-sizing: border-box; 
overflow: hidden; 
width: 100% !important;
}

.top_service br {
display: none; /* スマホでは改行を無視して流し込む */
}

.service_text {
text-align: left;
margin: 0 0 40px 0;
padding: 0 !important;
}

/* --- コンテナ内 --- */
.service_container, 
.service_container:nth-of-type(even) {
display: flex;
flex-direction: column !important;
margin: 0 0 60px 0 !important;
padding: 0 !important;
width: 100% !important;
text-align: center;
box-sizing: border-box;
}

.service_item, .service_item2 {
width: 100% !important;
padding: 0 !important;
}

.service_item img,
.service_item2 img {
width: 100% !important;
max-width: 100%;
height: auto;
margin: 0 auto 20px;
display: block;
}

/* --- テキスト内の装飾 --- */
.service_item h4,
.service_item2 h4 {
font-size: 1.3rem;
margin: 10px 0;
}

.number {
display: block;
font-size: 2.5rem;
font-weight: 900;
-webkit-text-stroke: 2px red;
margin: 10px 0 5px;
}
    
.service_item p, .service_item2 p {
text-align: left;
line-height: 1.6;
}

/* --- ボタン --- */
.service_button,
.service_button2 {
display: block;
width: 100%; 
max-width: 280px;
margin: 30px auto 0 !important;
padding: 12px 0;
box-sizing: border-box;
}

/* テキストが左側にある時（2, 4つ目） */
.service_container:nth-of-type(even) .service_item2 {
text-align: center;
}

 
/* TOPフロー（スマホ） */
.top_flow_container {
flex-direction: column;
align-items: center;
}

.top_flow_item {
padding-bottom: 0;
width: 100%;
}

.flow_button, .contact_button {
margin: 5px auto;
width: 90%;
max-width: 300px;
}


/* TOPリクルート（スマホ） */

.top_recruit img{
padding: 10px;  
}

.top_recruit{
padding: 70px 0 30px;  
}

.top_recruit p{
padding: 30px 40px;
text-align: left; 
}

/* TOPニュース＆トピックス（スマホ） */


.bg_pattern{
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 30px 30px;
background-repeat: repeat;
background-position: top left;
padding: 20px 0 20px;    
}

/* TOPsnsスタート（スマホ） */

.news_container{
display: flex;
flex-direction: column; 
}

.news_item{
padding: 10px;  
}

.news_container .news_item:last-child {
align-self: auto;
}

.news{
background-color: white;
border: 5px double gray;
width: 350px;
margin: 10px auto;
padding: 50px 20px 50px;  
}

.news h4{
text-align: center;
margin: 0 auto;  
}

.news dt{
padding-top: 20px;  
}

.news dd{
padding-top: 7px;  
}

.bg_pattern{
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 30px 30px;
background-repeat: repeat;
background-position: top left;
padding: 5px 0 10px;    
}

/* TOPCONTACT（スマホ） */

.bg_contact {
  background-image: url(../images/bg_contact_tate.png);
  background-repeat: no-repeat;
  background-size: cover; /* contain から cover に変更 */
  background-position: center; /* 中央を基準にする */
  height: 450px;
  position: relative;
}
.contact-container {
    flex-direction: column; /* 縦並びにする */
    justify-content: flex-end; /* 垂直方向の中央寄せ（下寄せにするなら flex-end） */
    align-items: center;    /* 水平方向の中央寄せ */
  }

  .bg_contact-item {
    padding: 10px 0; /* 左右の余白を削り、上下に余白を作る */
    width: 100%;
  }

  .tel-group a {
    font-size: 1.5rem; /* スマホに合わせてフォントサイズを調整 */
    margin-bottom: 10px;
  }

  .bg_contact-item p {
    font-size: 0.85rem;
    margin-bottom: 5px; /* メールボタンとの間隔を空ける */
  }

  .mail-link {
    width: 80%; /* ボタンを押しやすく広げる */
    padding: 20px 0;
  }



/* TOPフッター（スマホ） */

footer{
margin-top: 10px;  
}


.footer_container{
display: flex;
text-align: center;
flex-direction: column;    
}

.footer_item{
padding: 0 10px 0 10px;  
}

.footer_item p{
padding: 10px 0 0 10px;
line-height: 1.7;  
}

footer li{
padding-bottom: 20px;    
}

.footer_container2{
display: flex;
flex-direction: column; 
}

.footer_item2{
padding: 10px;
font-size: 1rem;    
}

footer h3{
border-bottom: 1px solid gray;
padding-bottom: 9px;
margin-bottom: 15px;
font-size: 1rem;     
}

.copyright{
font-size: 0.8rem;
text-align: center;
margin-top: 20px;
padding: 10px;
color: white;
background-color: #555;    
}


/* ★★★カンパニーページ（スマホ）★★★ */

.company p{
line-height: 2;
padding: 0 40px 0;
}

.strong{
color: #d71718; 
}

/* 外枠の余白調整 */
.company_profile {
margin: 0 auto;
padding: 0 40px;
}

.company h2{
padding: 30px 60px 30px;  
}

.company iframe{
width: 100%;       /* 親要素の幅いっぱいに広げる */
    max-width: 600px;  /* 広がりすぎを防ぎたい場合（任意） */
    height: 300px;     /* 高さはpx指定でOK（remでも可） */
    border: 0;

}


.company p{
text-align: left;  
}

/* ★★★事業内容ページ（スマホ）スタート★★★ */
.service{
padding: 0 40px !important; 
}



.service h3{
text-align: center;
padding: 80px 0 10px;
font-size: 1.8rem;
}

.service h4{
margin: 20px 0 20px;
font-size: 1.3rem;
line-height: 1.8;
border-left: 8px double #d71718;
padding: 5px 10px 5px;
}

.ser_container{
display: flex;
flex-direction: column;
margin: 0 auto;
}

.border{
border-bottom: 5px solid #d71718;
width: 100px;
margin: 0 auto;
padding: 3px;  
}

.ser_item {
flex: 0 0 40%;          /* 幅を47.5%に固定（隙間5%を考慮） */
box-sizing: border-box;
padding: 20px 0 0 0;
}

.ser_container:nth-child(even) {
flex-direction: column;
}
.kuro_midashi {
        width: 80%;
        max-width: 250px;
        font-size: 1.4rem;
        margin: 40px auto 10px; /* 下のナビとくっつけたいなら 0、少し開けるなら 10px */
        padding: 15px 0;
    }

    /* 2. ナビ全体：gapを0にしてpaddingで制御 */
    .ser_nav {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 0; /* 二重余白を防ぐため0に */
        width: 100%;
        background-color: #f7f7f7; /* PC版の色を引き継ぐ */
    }

    /* 3. 各項目 */
    .ser_nav_item {
        width: 100%;
        padding: 0;
    }

    .ser_nav_item a {
        display: block;
        padding: 18px 0; /* 高さを一定に保つ */
        font-size: 1.1rem;
        text-decoration: none;
        color: #333;
        /* 最初から透明な線を入れておくことで、ホバー時にガタつかない */
        border-bottom: 1px solid #ddd; 
        transition: all 0.3s ease; /* 動きを滑らかに */
    }

    /* 4. カクカクしないホバー/タップ演出 */
    .ser_nav_item a:hover,
    .ser_nav_item a:active {
        color: #d71718;
        background-color: #fff; /* 背景色を少し変えるとタップ感がわかりやすい */
        /* paddingを変えるとガタつくので、paddingは変えずに色だけ変える */
        border-bottom: 1px solid #d71718; 
    }

    /* 最後の項目の下線だけPC版のような赤にしたい、等の調整 */
    .ser_nav_item:last-child a {
        border-bottom: none;
    }


.last{
max-width: 1200px;
margin: 0 auto;
padding: 30px 5px;  
}
  

/* ★★★リクルートページ（スマホ）★★★ */
.recruit h3 {
        font-size: 1.6rem;
        padding-bottom: 5px;
        line-height: 1.8;
    }

    .form_grid {
        display: block; /* 縦並び */
    }
.form_grid dt {
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .form_grid dd {
        margin-left: 0;
        margin-bottom: 20px;
    }

.agree{
padding: 0;
margin: 0;    
}

/* ★★★フローページ（スマホ）★★★ */
.flow_container {
    flex-direction: column; /* 縦並びにする */
    align-items: center;    /* 中央寄せ */
    text-align: left;     /* テキストも中央寄せ */
    margin-bottom: 30px;    /* ステップ間の余白を広めに */
  }

  .flow_item {
    width: 100% !important; /* 幅を画面いっぱいに */
  }

  .flow_item p {
    width: 100%;            /* 固定幅(690px)を解除 */
    padding: 10px 40px;     /* 横のパディングをスマホ用に狭める */
    box-sizing: border-box; /* パディングを含めて100%にする */
  }

  .flow h3 {
    padding: 20px 40px 10px; /* 見出しの余白も調整 */
    font-size: 1.3rem;
    line-height: 1.8;
  }

  .flow_item img {
    max-width: 100px;       /* 画像が大きすぎないように調整（お好みで） */
    height: auto;
  }

/* ★★★お問い合わせページ（スマホ★★★ */

.contact {
    padding: 0 10px; /* 左右に少し余白を作る */
  }

  /* グリッドレイアウトを解除して縦並びにする */
  .form_grid {
    display: block; /* gridやflexを使っている場合はblockに戻す */
  }

  .form_grid dt {
    width: 100%;
    margin-bottom: 5px;
    padding-left: 0;
    text-align: left; /* 左寄せにする */
  }

  .form_grid dd {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px; /* 項目間の間隔 */
  }

  /* 入力欄を画面幅いっぱいにする */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  textarea {
    width: 100% !important; /* 左右の余白を考慮して広げる */
    box-sizing: border-box; /* 枠線を含めた幅計算にする */
    font-size: 16px; /* スマホでズームされるのを防ぐ（重要） */
    padding: 12px;  /* 指でタップしやすい高さ */
  }

  /* 電話番号のリンクを大きく押しやすく */
  .phone_number a {
    font-size: 1.5rem;
    display: inline-block;
    padding: 10px 0;
  }

  /* 送信ボタンを大きくする */
  .submit input[type="submit"] {
    width: 100%;
    padding: 20px;
    font-size: 1.2rem;
  }
}








}





/* --- ◎◎◎アニメーション◎◎◎ --- */

.fade-up {
  opacity: 0;
  transform: translateY(40px); 
  transition: all 1.2s ease-out;
  transition-property: opacity, transform;
}

.fade-up.is-show {
  opacity: 1;
  transform: translateY(0); 
}

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }


.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* JSでこのクラスがついたら動き出す */
.slide-in-left.is-show {
  opacity: 1;
  transform: translateX(0);
}

/* 時間差の設定（transition-delayを使う） */
.delay-short { transition-delay: 0.2s; }
.delay-mid { transition-delay: 0.5s; }

.delay-long {
  transition-delay: 0.8s; /* ホバー時のディレイをリセットして上書き */
}


.slide-in-right {
  opacity: 0;
  transform: translateX(50px); /* 右に50pxずらしておく */
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* クラスがついたら元の位置へ */
.slide-in-right.is-show {
  opacity: 1;
  transform: translateX(0);
}