/* ==============================
診断ページ
============================== */

.shindan-page{
background:#081226;
color:#ffffff;
font-family:"Noto Sans JP",sans-serif;
}

h1.shindan-thanks-title{
    font-size : 24px;
	padding-top : 0px!important;
    margin-top : 0!important;
    margin-bottom : 40px;
}

/* ==============================
セクション
============================== */

.shindan-section{
padding:80px 20px;
}

.shindan-section-2{
padding:80px 20px;
background:#23314c;
}

.shindan-thanks-section{
padding:80px 20px;
background:#081226;
color:#ffffff;	
}

.shigyo-section{
padding:80px 20px;
}

.shigyo-section-2{
padding:80px 20px;
background:#23314c;
}

.shigyo-inner{
  position:relative;
  z-index:2;
    width : 800px;
    margin : 20px auto;
}

/* ==============================
共通レイアウト
============================== */

.shindan-inner{
max-width:1080px;
margin:0 auto;
text-align:center;
}

.shigyo-thanks-inner{
max-width:880px;
margin:0 auto;
text-align:left;
}

.shindan-heading{
font-size:26px;
margin-bottom:30px;
}

.shindan-title{
font-size:34px;
font-weight:700;
line-height:1.4;
margin-bottom:50px;
}

.shindan-lead{
font-size:18px;
margin-bottom:20px;
}

.shigyo-lead{
font-size:16px;
margin-bottom:20px;    
}

.shindan-target{
margin-bottom:10px;
}

/* ==============================
FV PC
============================== */

.shindan-fv-pc-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}

.shindan-fv-left{
flex:1;
text-align:center;
}

.shindan-fv-right{
flex:1;
text-align:center;
}

.shindan-fv-right img{
max-width:520px;
width:100%;
height:auto;
    border-radius : 10px;
}

/* ==============================
対象士業
============================== */

.shindan-target{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin-top:20px;
}

.shindan-target span{
padding:6px 14px;
border:1px solid #ffffff;
border-radius:4px;
font-size:14px;
}


/* ==============================
スマホFV
============================== */

.shindan-fv-sp{
display:none;
}

.shindan-fv-image img{
width:100%;
margin:10px auto;
    border-radius : 10px;
}


/* ==============================
レスポンシブ
============================== */

@media (max-width:768px){

.shindan-fv-pc{
display:none;
}

.shindan-fv-sp{
display:block;
}

.shindan-title{
margin-bottom:20px;
    margin-top : 0px!important;
    font-size : 27px;
}
    .shigyo-title{
margin-bottom:20px;
    margin-top : 0px!important;
    font-size : 24px!important;
    }
.shigyo-inner{
    width : auto!important;
    margin : 10px!important;
}

}

/* ==============================
CTA
============================== */
.shindan-cta{
display:inline-block;
margin-top:20px;
padding:16px 32px;
background:#2bb3b8;
color:#ffffff;
text-decoration:none;
font-weight:bold;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,0.2);
transition:all .3s ease;
animation:ctaFloat 3s ease-in-out infinite;
}

/* hover */

.shindan-cta:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,0.25);
}


/* ゆっくり浮く */

@keyframes ctaFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-4px);
}

100%{
transform:translateY(0);
}

}

/* ==============================
リスト
============================== */

.shindan-list{
text-align:left;
max-width:600px;
margin:0 auto;
line-height:2;
}

/* ==============================
悩みセクション
============================== */

.shindan-worry{
background:#1a2740;
}

.shindan-worry-list{
max-width:800px;
margin:0 auto!important;
text-align:left;
list-style:none;
padding-left:0!important;
}

.shindan-worry-list li{
background:#ffffff10;
padding:14px 18px;
margin-bottom:12px;
border-radius:6px;
position:relative;
padding-left:40px;
}

.shindan-worry-list li::before{
content:"✓";
position:absolute;
left:14px;
top:12px;
font-weight:bold;
}


/* ==============================
診断内容カード
============================== */

.shindan-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:30px;
}

.shindan-card{
padding:20px;
border-radius:8px;
border:1px solid #f4f4f4;
}

.shindan-card h3{
color:#ebe4ce;
}


/* ==============================
診断フロー
============================== */

.shindan-flow{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:40px;
text-align:left;
}

.shindan-step{
background:#ffffff10;
padding:24px;
border-radius:8px;
text-align:center;
}

.shindan-step-no{
display:inline-block;
font-size:12px;
letter-spacing:0.1em;
margin-bottom:10px;
opacity:0.8;
}

.shindan-step h3{
font-size:18px;
margin-bottom:10px;
}

.shindan-step p{
font-size:14px;
line-height:1.6;
}

/* ==============================
診断で分かること
============================== */

.shindan-result{
background:#2f3d59;
}

.shindan-result-list{
max-width:800px;
margin:30px auto!important;
text-align:left;
list-style:none;
padding-left:0!important;
}

.shindan-result-list li{
background:#ffffff15;
padding:14px 18px;
margin-bottom:12px;
border-radius:6px;
position:relative;
padding-left:42px;
}

/* アイコン */

.shindan-result-list li::before{
content:"✓";
position:absolute;
left:16px;
top:12px;
font-weight:bold;
color:#8fd3ff;
}


/* ==============================
フォーム
============================== */

.shindan-form-section{
padding-bottom:120px;
}

.shindan-form-box{
background:#ffffff;
color:#000000;
padding:40px;
border-radius:10px;
max-width:720px;
margin:40px auto;
text-align:left;
}


/* フォームグループ */

.form-group{
margin-bottom:22px;
}


/* ラベル */

.form-group > label{
display:block;
font-weight:600;
margin-bottom:6px;
font-size:14px;
color:#333;
}


/* 必須 */

.required{
color:#ff0000;
margin-left:4px;
font-weight:bold;
}


/* 入力 */

.shindan-form-box input[type="text"],
.shindan-form-box textarea{
width:100%;
padding:12px;
border:1px solid #ccc;
border-radius:4px;
font-size:14px;
box-sizing:border-box;
}


/* ラジオ */

.radio{
display:inline-flex;
align-items:center;
margin-right:20px;
font-size:14px;
color:#333;
}

.radio input{
margin-right:6px;
}


/* 送信 */

.form-submit{
text-align:center;
margin-top:30px;
}

.form-submit input{
background:#081226;
color:#fff;
border:none;
padding:14px 40px;
font-size:16px;
border-radius:6px;
cursor:pointer;
}


/* ==============================
タブレット
============================== */

@media (max-width:1024px){

.shindan-section,
.shindan-section-2,
.shindan-thanks-section{
padding:40px 20px;
}
	
	

.shindan-grid{
grid-template-columns:repeat(2,1fr);
}

.shindan-flow{
grid-template-columns:repeat(2,1fr);
}

}

/* ==============================
診断者プロフィール
============================== */

.shindan-profile{
max-width:600px;
margin:0 auto;
text-align:center;
}

/* 写真 */

.shindan-profile-img{
width:90px;
height:90px;
border-radius:50%;
object-fit:cover;
margin:20px auto;
display:block;
}

/* 名前 */

.shindan-profile-name{
font-weight:700;
margin-bottom:16px;
line-height:1.6;
}

/* テキスト */

.shindan-profile-text{
line-height:1.9;
font-size:15px;
}

.shindan-footer{
	text-align : center;
}


/* ==============================
スマホ
============================== */

@media (max-width:768px){

.shindan-grid{
grid-template-columns:1fr;
}

.shindan-flow{
grid-template-columns:1fr;
    margin-left : -20px!important;
}

.shindan-form-box{
padding:25px;
}

}


/***********************************
 * 士業ホームページ制作用ページ
 * ********************************/
/* ==============================
士業LP 基本
============================== */

.shigyo-page{
background:#081226;
color:#ffffff;
font-family:"Noto Sans JP",sans-serif;
line-height:1.8;
}


/* ==============================
共通レイアウト
============================== */

.shigyo-section{
padding:90px 20px;
}

.shigyo-bg{
background:#23314c;
}

.shigyo-inner{
max-width:1080px;
margin:0 auto;
text-align:center;
}


/* ==============================
見出し
============================== */

.shigyo-heading{
font-size:28px;
margin-bottom:40px;
line-height:1.4;
font-weight:700;
}

.shigyo-text{
max-width:720px;
margin:0 auto 20px;
}


/* ==============================
FV
============================== */

.shigyo-fv{
padding:140px 20px 100px;
}

.shigyo-title{
font-size:38px;
line-height:1.4;
margin-bottom:20px;
font-weight:700;
}

.shigyo-lead{
font-size:18px;
margin-bottom:30px;
}


/* CTAボタン */

.shigyo-cta{
display:inline-block;
padding:16px 36px;
background:#ffffff;
color:#081226;
text-decoration:none;
font-weight:bold;
border-radius:6px;

border:2px solid #081226;
box-shadow:0 6px 18px rgba(0,0,0,0.15);

transition:0.2s;
}

.shigyo-cta:hover{
transform:translateY(-2px);
}


/* ==============================
悩みリスト
============================== */

.shigyo-list{
max-width:600px;
margin:40px auto 0;
text-align:left;
line-height:2;
}

.shigyo-list li{
margin-bottom:10px;
}


/* ==============================
カード
============================== */

.shigyo-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.shigyo-card{
padding:25px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.3);
background:rgba(255,255,255,0.05);
}

.shigyo-card h3{
margin-bottom:10px;
font-size:18px;
}


/* ==============================
特徴
============================== */

.shigyo-feature{
max-width:600px;
margin:40px auto 0;
text-align:left;
line-height:2;
}

.shigyo-feature li{
margin-bottom:12px;
}


/* ==============================
制作の流れ
============================== */

.shigyo-flow{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
margin-top:40px;
list-style:none;
padding:0;
}

.shigyo-flow li{
padding:20px;
border-radius:8px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.2);
}


/* ==============================
CTAセクション
============================== */

.shigyo-cta-section{
padding:120px 20px;
}

.shigyo-cta-section h2{
font-size:28px;
margin-bottom:30px;
}

/* ===============================
士業LP 無料診断
=============================== */

.sigyo-shindan-section{
padding:80px 20px;
background:#faf4f2;
}

.sigyo-shindan-inner{
max-width:1100px;
margin:0 auto;
}

.sigyo-shindan-heading{
text-align:center;
font-size:32px;
margin-bottom:50px;
color:#fff;
}

/* グリッド */

.sigyo-shindan-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* カード */

.sigyo-shindan-card{
background:#ffffff;
border-radius:12px;
padding:30px 24px;
text-align:center;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
position:relative;
}

/* チェックラベル */

.sigyo-shindan-check{
display:inline-block;
font-size:13px;
background:#506d2f;
color:#fff;
padding:6px 14px;
border-radius:20px;
margin-bottom:10px;
}

/* タイトル */

.sigyo-shindan-card h3{
font-size:20px;
margin-bottom:18px;
color:#333;
}

/* 画像 */

.sigyo-shindan-image{
margin-bottom:16px;
}

.sigyo-shindan-image img{
width:100%;
max-width:360px;
height:auto;
    border-radius : 10px;
display:block;
margin:0 auto;
}

/* テキスト */

.sigyo-shindan-card p{
font-size:15px;
line-height:1.7;
color:#555;
}

/* ===============================
タブレット
=============================== */

@media (max-width:900px){

.sigyo-shindan-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* ===============================
スマホ
=============================== */

@media (max-width:600px){

.sigyo-shindan-grid{
grid-template-columns:1fr;
}

.sigyo-shindan-heading{
font-size:26px;
}

}


/* ==============================
レスポンシブ
============================== */

@media (max-width:1024px){

.shigyo-grid{
grid-template-columns:repeat(2,1fr);
}

.shigyo-flow{
grid-template-columns:repeat(3,1fr);
}

}

@media (max-width:768px){

.shigyo-title{
font-size:30px;
}

.shigyo-lead{
font-size:16px;
}

.shigyo-grid{
grid-template-columns:1fr;
}

.shigyo-flow{
grid-template-columns:1fr;
}

.shigyo-section{
padding:70px 20px;
}

.shigyo-fv{
padding:110px 20px 80px;
}

}