.main {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
background-color: #ffffff;
}
/* FV */

.main .bg {
position: relative;
width: 100%;
height: 720px;
background-color: #ffffff;
}

.main .overlap-group {
display: flex;
align-items: center;
justify-content: left;
width: 100%;
height: 720px;
padding-left: 100px;
background-image: url('/wp-content/themes/sctest/img/bg-img.png');
background-position: right;
background-repeat: no-repeat;
background-size: auto 100%;
}

.main .flexcontainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
}

.main .text {
position: relative;
align-self: stretch;
font-family: "Hiragino Sans-Regular", Helvetica;
font-weight: 600;
color: #464646;
font-size: 52px;
letter-spacing: 7.80px;
line-height: 52px;
}

.main .text-wrapper {
letter-spacing: 4.06px;
}

@media screen and (max-width: 768px) {
.main .bg {
width: 100%;
height: 100vh;
}
.main .flexcontainer{
display: none;
}
.main .overlap-group {
position: relative;
background-image: url('/wp-content/themes/sctest/img/bg-img-sp.png');
background-position: left;
width: 100%;
height: 100%;
padding-left: 0px;
}
.main .text{
font-size: 32px;
}
}

/* ABOUT */

.main .about {
padding: 200px;
width: 100%;
flex: 0 0 auto;
background-color: #4472c4;
border-radius: 120px 0px 0px 0px;
}

.main .contents {
width: 255px;
position: relative;
height: 79px;
margin-bottom: 100px;
}

.main .div {
width: 251px;
position: relative;
height: 79px;
}

.main .title {
position: absolute;
top: 0;
left: 0;
font-family: "Montserrat", Helvetica;
font-weight: 700;
color: #ffffff66;
font-size: 70px;
letter-spacing: 7.00px;
line-height: 70px;
white-space: nowrap;
}

.main .jp {
position: absolute;
top: 47px;
left: 0;
font-size: 32px;
letter-spacing: 3.20px;
line-height: 32px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
}

.main .message {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 50px;
position: relative;
width: 100%;
}

.main .message .title {
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
color: #ffffff;
font-size: 32px;
letter-spacing: 3.20px;
line-height: 32px;
white-space: nowrap;
}

.main .message .text {
position: relative;
align-self: stretch;
font-family: "Hiragino Sans-W5", Helvetica;
font-weight: 550;
color: #ffffff;
font-size: 18px;
letter-spacing: 2.00px;
line-height: 40px;
}

@media (max-width: 768px) {
.main .about {
border-radius: 60px 0px 0px 0px;
padding: 100px 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* ← contents含め縦方向中央揃え */
}
.main .contents div{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* ← contents含め縦方向中央揃え */
width: 100%; /* 必要に応じ調整 */ 
}
.main .title {
font-size: 40px;
width: 100%;
}
.main .jp{
font-size: 24px;
width: 100%;
margin-top: -10px;
}
.main .message .title{
font-size: 24px;
}
.main .message .text{
font-size: 16px;
}
}

/* サービス */

.main .service {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* ← contents含め縦方向中央揃え */
gap: 100px;
padding: 100px;
width: 100%;
background-color: #ffffff;
}

.overlap-group-wrapper {
position: relative;/* 基準位置 */
width: 100%;/* 固定幅は必須 */
height: 100px; /* 固定高さも指定 */
margin: 0 auto;/* 横中央寄せ */
}


.overlap-group-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;/* 中央揃え */
width: 100%; /* 必要に応じ調整 */
}


.overlap-group-2 .title {
font-size: 70px;
color: #e2e2e2;
letter-spacing: 7px;
line-height: 1;
white-space: nowrap;
width: 100%;
}

.overlap-group-2 .jp {
font-size: 32px;
color: #4472c4;
letter-spacing: 3.2px;
line-height: 1;
width: 100%;
}

.main .service .contents {
display: flex;
flex-wrap: wrap;
height: auto;
align-items: flex-start;
gap: 0px 0px;
position: relative;
align-self: stretch;
width: 100%;
}

.main .box {
display: flex;
flex-direction: column;
height: 482px;
align-items: center;
gap: 20px;
padding: 25px;
position: relative;
flex: 1;
flex-grow: 1;
border-right-width: 1px;
border-right-style: solid;
border-color: #e2e2e2;
}

.main .img {
position: relative;
align-self: stretch;
width: 100%;
height: auto;;
}

.main .img-2 {
position: relative;
align-self: stretch;
width: 100%;
height: auto;
}

.main .box .title {
position: relative;
height: 50px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
color: #4472c4;
font-size: 20px;
text-align: center;
letter-spacing: 2.00px;
line-height: 50px; /* ← 高さと同じにして縦中央 */
display: flex;
align-items: center;/* ← 縦中央揃え */
justify-content: center;/* ← 横中央揃え */
} 
.main .box .web {
position: relative;
align-self: stretch;
height: 50px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
color: #4472c4;
font-size: 20px;
text-align: center;
letter-spacing: 2.00px;
line-height: 28px;
}

.main .box .text {
position: relative;
align-self: stretch;
font-family: "Hiragino Sans-W4", Helvetica;
font-weight: 600;
color: #464646;
font-size: 16px;
letter-spacing: 1.60px;
line-height: 32px;
}

@media (max-width: 768px) {
.main .service{
padding: 50px 25px;
gap: 25px;
}
.overlap-group-2 .title{
font-size: 32px;
}
.overlap-group-2 .jp{
font-size: 24px;
margin-top: -30px;
}
.main .service .contents{
flex-direction: column;
}
.main .box{
height: auto;
border-right-width: 0px;
}
}

/* ニュース */
.main .news {
display: flex;
flex-direction: column;
align-items: center;
gap: 100px;
padding: 100px 200px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
background-color: #4472c4;
border-radius: 120px 0px 0px 0px;
overflow: hidden;
color: #ffffff;
font-family: "Hiragino Sans-W7", Helvetica;
}

.overlap-group-3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;/* 中央揃え */
width: 100%; /* 必要に応じ調整 */
}


.overlap-group-3 .title {
font-size: 70px;
color: #ffffff66;
letter-spacing: 7px;
line-height: 1;
white-space: nowrap;
width: 100%;
}

.overlap-group-3 .jp {
font-size: 32px;
color: #ffffff;
letter-spacing: 3.2px;
line-height: 1;
width: 100%;
}

.news-list {
list-style-type: none;
padding: 0;
}

.news-item {
margin-bottom: 15px;
}

.news-date {
font-size: 18px;
font-weight: 600;
color: #ffffff;
font-family: "Montserrat", Helvetica;
margin-right: 15px;
}

.news-title {
font-size: 18px;
font-weight: 600;
color: #ffffff;
text-decoration: none;
font-family: "Hiragino Sans-W7", Helvetica;
}

@media (max-width: 768px){
.main .news{
padding: 50px 25px;
border-radius: 60px 0px 0px 0px;
gap: 25px;
}
.overlap-group-3 .title{
font-size: 32px;
}
.overlap-group-3 .jp{
font-size: 24px;
margin-top: -30px;
}
.news-item{
display: flex;
gap: 10px;
flex-direction: column;
justify-content: left; 
}
.main .news-date{
  font-size: 16px;
}
.main .news-title{
  font-size: 16px;
}
}

/* 会社概要 */

.main .company {
display: flex;
flex-direction: column;
align-items: center;
gap: 100px;
padding: 100px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
background-color: #ffffff;
}

.main .text-wrapper-13 {
position: absolute;
top: 47px;
left: 112px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
color: #4472c4;
font-size: 32px;
letter-spacing: 3.20px;
line-height: 32px;
white-space: nowrap;
}

.main .list {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
position: relative;
flex: 0 0 auto;
}

.main .list .listcontents {
display: flex;
align-items: center;
gap: 25px;
padding: 25px 0px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #a6a6a6;
}

.main .list .listcontents .title{
position: relative;
width: 100px;
margin-top: -1.00px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
color: #464646;
font-size: 16px;
letter-spacing: 1.60px;
line-height: 24px;
}

.main .list .listcontents .text {
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
color: #464646;
font-size: 16px;
letter-spacing: 1.60px;
line-height: 24px;
}

@media (max-width: 768px){
.main .company{
padding: 50px 25px;
gap: 25px;
}
.main .list .listcontents{
flex-direction: column;
gap: 10px;
}
.main .list .listcontents .title{
width: 100%;
}

}

/* フッター */

.footer {
display: flex;
justify-content: space-between; /* 横並びで左右に配置 */
align-items: center;
padding: 50px 100px;
width: 100%;
flex: 0 0 auto;
background-color: #464646;
text-align: left;
}

.footer .SCRUM-CUBE {
width: 174.17px;
height: 18px;
margin-bottom: 0;
}

.footer .privacy a {
font-size: 16px;
font-weight: 600;
color: #ffffff;
font-family: "Hiragino Sans-W7", Helvetica;
}

/* スマホ用に縦並びへ */
@media (max-width: 768px) {
.footer {
flex-direction: column;
align-items: center;
text-align: center;
padding: 50px 25px;
}

.footer .SCRUM-CUBE {
width: auto;
height: 15px;
margin-bottom: 10px;
}

.footer .privacy {
margin-top: 10px;
}

.footer .privacy a{
font-size: 14px;
}
}


/* ヘッダー */

.main .navi {
display: flex;
width: 100%;
height: 80px;
align-items: center;
justify-content: space-between;
padding: 0px 0px 0px 25px;
position: fixed;
top: 0;
left: 0;
background-color: #ffffff;
box-shadow: 0px 4px 4px #00000040;
}

.main .logo {
position: relative;
width: 209.05px;
height: 30px;
}

.main .btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0px 50px;
position: relative;
align-self: stretch;
flex: 0 0 auto;
background-color: #4472c4;
}

.main .btn .text {
position: relative;
width: fit-content;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
color: #ffffff;
font-size: 16px;
letter-spacing: 1.60px;
line-height: 20px;
white-space: nowrap;
}

@media (max-width: 768px){
.main .navi{
height: 70px;
}
.main .logo{
width: auto;
height: 20px;
}
.main .btn .text{
font-size: 14px;
}
.main .btn{
padding: 0px 25px;

}

}

 /* フォーム */

.main .contact {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* ← contents含め縦方向中央揃え */
gap: 100px;
padding: 100px;
width: 100%;
background-color: #ffffff;
}

.wpcf7-form {
max-width: 700px;
margin: 0 auto;
padding: 0;/* 背景不要 */
background: none;
}

.form-row p{
display: flex;
align-items: center;
margin-bottom: 1em;
}

.form-row label {
width: 150px;
font-weight: bold;
margin-right: 10px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
font-size: 16px;
align-items: center;
}

.form-row span {
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
font-size: 14px;
color: #ff0000;
margin-left: 10px; 
}

.cf-input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

.form-row.full {
display: block;
}

.form-row.full label {
display: block;
margin-bottom: 0.5em;
}

textarea.cf-input {
width: 100%;
height: 120px;
resize: vertical;
}

.wpcf7 input[type="submit"] {
background-color: #4472c4;
color: #fff;
padding: 10px 50px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
font-size: 16px;
margin-top: 25px;
}

.submit-btn-wrapper {
text-align: center !important;
}

.modal {
display: none; /* 初期非表示 */
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
}

.modal-content {
background-color: #fff;
padding: 50px;/* 全体のパディング */
border-radius: 8px;
width: auto;/* 横幅は中身に応じる */
max-width: 90%; /* 画面幅に収まるように制限 */
height: auto; /* 高さも中身に応じる */
text-align: center;
}

.modal-content p {
margin-bottom: 25px;/* 文字とボタンの間隔 */
font-size: 18px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
}

#modal-close {
padding: 10px 50px;
font-size: 14px;
font-family: "Hiragino Sans-W7", Helvetica;
font-weight: 600;
cursor: pointer;
border: none;
background-color: #4472c4;/* お好みで変更可 */
color: white;
border-radius: 4px;
}

.wpcf7 .wpcf7-spinner {
display: none !important;
}

/* チェックボックス行（PC表示） */
.checkbox {
  display: flex;
  flex-direction: column;  /* 縦並びにする */
  align-items: flex-start; /* 左寄せ */
  gap: 6px;                /* 項目間の隙間 */
  margin-top: 20px;
  font-family: "Hiragino Sans-W7", Helvetica;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer; /* ラベルの場合のみ */
}

/* CF7ラップ要素をフレックス化し、余白をリセット */
.checkbox > span.wpcf7-form-control-wrap {
  display: flex;
  align-items: center; /* ここも中央揃え */
  margin: 0;
  padding: 0;
}

/* チェックボックス自体のスタイルを安定させる */
.checkbox input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
  width: 18px;
  height: 18px;
}

/* エラー時の枠や余白でずれが出る場合の調整 */
.wpcf7-not-valid.checkbox input[type="checkbox"] {
  vertical-align: middle;
  margin: 0;
}

/* テキストの余白・高さ調整 */
.checkbox .privacy-label {
  line-height: 1.6;
  color: #000;
  font-size: 14px;
}

.wpcf7-list-item{
  margin: 0;
}

/* チェックボックスの label テキスト */
.checkbox .privacy-label {
  color: #000;
  font-size: 14px;
  line-height: 1.8;
}

/* 同意リンクのスタイル */
.checkbox .privacy-label a {
  color: #4472c4;
  text-decoration: underline;
}

.form-note{
  font-size: 14px;
}

/* モバイル対応（幅768px以下） */
@media (max-width: 768px) {
  .checkbox {
    flex-direction: column;
    align-items: flex-start;
  }

  .checkbox .privacy-label {
    margin-top: 8px;
    font-size: 13px;
  }
}


@media (max-width: 768px){
.main .contact{
padding: 50px 25px;
gap: 50px;
}
.form-row{
width: 100%;
}
.form-row p{
flex-direction: column;
gap: 0px;
align-items: flex-start;
}
.form-row span{
margin-left: 0px;
width: 100%;
}
}

/* ニュース詳細 */
.news-detail{
margin-top: 80px;
padding: 100px;
}

.news-detail .news-title{
font-size: 32px;
letter-spacing: 2px;
color: #464646;
font-family: "Hiragino Sans-W7", Helvetica;
margin-bottom: 25px;
}

.news-detail .news-date{
font-size: 20px;
color: #747474;
font-family: "Montserrat", Helvetica;
}

.news-content{
margin-top: 25px;
font-size: 16px;
font-weight: 600;
letter-spacing: 2px;
line-height: 32px;
color: #464646;
font-family: "Hiragino Sans-W7", Helvetica;
}

@media (max-width: 768px){
.news-detail{
padding: 50px 25px;
}
.news-detail .news-title{
font-size: 24px;
letter-spacing: 2px;
line-height: 32px;
}
.news-detail .news-date{
font-size: 16px;
}
}

/* プライバシーポリシー */
.privacy-policy{
margin-top: 80px;
padding: 100px;
}

.privacy-policy h2{
font-size: 24px;
letter-spacing: 2px;
color: #747474;
font-family: "Montserrat", Helvetica;
margin-bottom: 25px;
letter-spacing: 1.60px;
}

.privacy-policy h3{
font-size: 32px;
font-weight: 600; 
color: #4472c4;
font-family: "Hiragino Sans-W7", Helvetica;
margin-bottom: 25px;
letter-spacing: 1.60px;
line-height: 40px;
}

.privacy-policy h4{
font-size: 20px;
font-weight: 600; 
color: #464646;
font-family: "Hiragino Sans-W7", Helvetica;
margin-top: 20px;
margin-bottom: 20px;
letter-spacing: 1.60px;
line-height: 32px;
}

.privacy-policy p{
font-size: 16px;
letter-spacing: 2px;
line-height: 32px;
font-weight: 500; 
color: #464646;
font-family: "Hiragino Sans-W7", Helvetica;
}

.privacy-policy ol{
font-size: 16px;
letter-spacing: 2px;
line-height: 32px;
font-weight: 500; 
color: #464646;
font-family: "Hiragino Sans-W7", Helvetica;
}

@media (max-width: 768px){
.privacy-policy{
padding: 50px 25px;
}
}