/* ==============================================
   共通・基本設定
   ============================================== */
html{font-size:62.5%;color:#000;background:#FFF;-webkit-text-size-adjust:100%}
blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
p{font-size:1.3rem;line-height:1.6em}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}sub{vertical-align:text-bottom}
input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
body{
    font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", "Osaka", "MS PGothic", arial, helvetica, sans-serif;
    background:#fff;
    color:#555;
    line-height:1.7rem;
    width:100vw;
    box-sizing:border-box;
    overflow-x:hidden;
}
.wrapper{
    width:100%;
    box-sizing:border-box;
    height:auto;
    background-color:#fff;
    position:relative;
}
.inr{
    width:100%;
    height:100%;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

/* --------------------------------------------------
   各ページコンテンツ共通
   -------------------------------------------------- */
.top-img-wrapper{
    width:100%;
	margin-bottom: 100px;
    box-sizing:border-box;
}
.main-contents-wrapper{
    width:100%;
    margin: 0 auto 100px;
    box-sizing: border-box;
}

/* ==================================================
   ヘッダーレイアウト（PC・レスポンシブ共通基盤）
   ================================================== */
header{
    z-index:1000;
    top:0;
    position:fixed;
    width:100%;
    box-sizing:border-box;
    height:120px;
    background-color:#fff;
}
.header-inr{
    width:100%;
    height:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between; /* ロゴと右側エリアを分離 */
    margin:0;
    padding:0 30px 0 40px;
    border-bottom:solid 2px #000;
    position:relative;
}
header h1{
    position:absolute;
    top:10px;
    left:50px;
    font-size:10px;
    color:#707070;
}

/* ロゴ */
#logo{
    width:180px;
    height:55px;
    z-index:1010;
    flex-shrink: 0 !important; /* ロゴは縮小させない */
    display: block !important;
    margin-right: 10px;
}
#logo a img{
    width:100%;
    height:100%;
    box-sizing:border-box;
}

/* ==============================================
   ヘッダー右側レイアウト（修正版）
   ============================================== */

/* 1. 右側全体の大枠：横並び（Row） */
.headerwrapright {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: row !important; /* 横並び */
    justify-content: flex-end !important;
    align-items: center !important; /* 上下中央揃え */
    height: 100% !important;
    margin-left: auto !important;
    padding-right: 0 !important;
}

/* 2. 左側グループ（SNS + ナビメニュー）：縦並び */
.header-text-area {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important; /* 右寄せ */
    margin-right: 20px !important;    /* ボタンとの間隔 */
}

/* 3. 右側グループ（ボタンエリア）：横並び */
.header-btn-area {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important; /* ボタン同士の間隔 */
    flex-shrink: 0 !important; /* ボタンは潰さない */
}

/* --- 上段：SNS + Chat AI --- */
.header-upper {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 5px !important;
    white-space: nowrap !important;
}

/* SNSリスト */
.sns-list {
    display: flex !important;
    gap: 20px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sns-list li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.sns-list img {
    width: 20px !important;
    height: auto !important;
    display: block !important;
    opacity: 0.6;
    transition: 0.3s;
}
.sns-list img:hover { opacity: 1; }

/* Chat AI ボタン */
.chat-ai-btn-code {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background-color: #FF9F43 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    height: 28px !important;
    padding: 0 15px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    width: 150px;
}
.chat-ai-btn-code:hover {
    background-color: #FF6F20 !important;
    transform: translateY(-1px) !important;
    opacity: 1 !important;
}
.chat-ai-btn-code svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

/* --- 下段：ナビメニュー --- */
.header-lower {
    margin-bottom: 5px;
}
.header-lower ul.topnav {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none;
}
.header-lower ul li.global-list {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

/* リンクスタイル */
.global-list a {
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    color: #000;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap !important; /* 折り返し禁止 */
}
/* 下線アニメーション */
.global-list:after{
    content:'';
    width:0;
    transition:all .3s ease;
    border-bottom: solid 3px #000;
    display:block;
    padding-top:5px;
}
.global-list:hover:after{
    width:100%;
}

/* ==============================================
   ▼▼▼ 修正箇所：ドロップダウンメニュー ▼▼▼
   全幅（画面いっぱい）に広がるように修正
   ============================================== */
.headerwrapright nav ul .menu {
    position: fixed !important;    /* 画面基準で固定 */
    top: 120px !important;         /* ヘッダーの高さ分下げる */
    left: 0 !important;
    width: 100% !important;        /* 画面いっぱいに広げる */
    background: #f4f4f4 !important; /* 背景色（薄いグレー） */
    
    transition: all .2s ease-in;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;            /* 非表示時の誤クリック防止 */
    z-index: 2000;
    border-bottom: 1px solid #ccc; /* 下線 */
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}

/* ホバー時の表示 */
.headerwrapright nav ul li:hover .menu, 
.headerwrapright nav ul li:focus .menu {
    max-height: 9999px;
    opacity: 1;
    visibility: visible;
    padding-top: 40px;  /* 上の余白 */
    padding-bottom: 40px; /* 下の余白 */
}

/* メニュー内リスト（横並びにする） */
.headerwrapright nav ul .menu ul {
    display: flex !important;
    justify-content: center !important; /* 中央寄せ */
    flex-wrap: wrap !important;
    gap: 30px !important; /* アイテム間の隙間 */
    width: 100% !important;
    max-width: 1200px !important; /* コンテンツ幅制限 */
    margin: 0 auto !important;
}

.headerwrapright nav ul .menu .menu_inner,
.headerwrapright nav ul .menu .menu_inner3 {
    margin: 0 auto !important;
}

/* 各メニュー項目 */
.headerwrapright nav ul .menu li {
    position: relative;
    display: block !important; /* 横並びのためblock扱いで幅指定 */
    width: 260px !important;   /* 幅を固定して綺麗に並べる */
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.headerwrapright nav ul .menu li a {
    padding: 5px 0;
    border-bottom: 2px solid #000;
    width: 100%;
    text-align: left;
    display: block;
    font-size: 14px !important;
}

/* 矢印アイコン */
.headerwrapright nav ul .menu li a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    display: inline-block;
    transform: rotate(45deg);
    position: absolute;
    right: 0;
    bottom: 10px;
}

/* 画像アイコン */
.headerwrapright nav ul .menu img,
.global-list img {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 5px;
}

/* --- エントリーボタン（新卒・中途） --- */
#chuto-btn, .shinsotsu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 192px;
    height: 60px;
    background-color: #2980B9;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 100px;
    box-shadow: 3px 3px #3c586e;
    transition: .3s;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}
.shinsotsu-btn {
    background-color: #FF6F20;
    box-shadow: 3px 3px #956734;
}
#chuto-btn:hover, .shinsotsu-btn:hover {
    opacity: 0.7;
    transform: translateY(1px);
}

/* レスポンシブ用ボタン（非表示） */
#responsive-entry-btn, .responsive-shinsotsu-btn {
    display: none;
}

/* スペーサーなど */
.header-space{
    width:100vw;
    height:100px;
}
#responsive-menu, #hamburger{
    display:none;
}

/* ==================================================
   フッター
   ================================================== */
footer{
    width:100%;
    box-sizing:border-box;
    height:auto;
}
/* PAGE TOP */
.scroll-top{
    width:100%;
    height:100px;
    box-sizing:border-box;
    background-color:#fff;
    cursor:pointer;
    transition:.5s;
    margin-top: 120px;
    position: relative;
}
.scroll-top:hover{
    opacity:0.7;
}
.triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50vw 100px 50vw;
    border-color: transparent transparent #000 transparent;
    position:relative;
}
.arrow-top{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 30px 40px;
    border-color: transparent transparent #fff transparent;
    position:absolute;
    top:30px;
    left:-40px;
}
.arrow-top-overlap1{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 30px 40px;
    border-color: transparent transparent #000 transparent;
    position:absolute;
    top:33px;
    left:-40px;
}
.arrow-top-overlap2{
    width: 80px;
    height: 10px;
    background-color:#000;
    position:absolute;
    top:50px;
    left:-40px;
}
.page-top{
    width:106px;
    text-align:center;
    color:#fff;
    font-size:14px;
    letter-spacing:2px;
    position:absolute;
    top:55px;
    transform:translateX(-53px);
	cursor: pointer;
}

/* フッターコンテンツ */
.footer-main{
    width:100%;
    height:250px;
    padding-top:70px;
    background-color: #FFE400;
}
.footer-contents{
    margin:0 auto;
}
.clinks-btn{
    width:142px;
    margin:0 auto;
}
.snsbtn{
    width:200px;
    margin:25px auto 25px auto;
    display:flex;
    justify-content:space-between;
}
.clinks-blogbtn:hover, .fb-btn:hover, .twitter-btn:hover, .youtube-btn:hover{
    opacity:0.5;
}
.copyright{
    margin-top:20px;
}
.copyright p{
    color:#000;
    font-size:10px;
    font-weight:bold;
    text-align:center;
}
.copyright :nth-child(2){
    margin-top:10px;
}

/* 採用エントリーバナー (Sticky) */
#sticky-right-banner {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9999;
  display: block;
}
@media (max-width: 1180px) {
  #sticky-right-banner { display: none; }
}
.sticky-mbti-link {
  display: block;
  text-decoration: none;
  background: #ffde59;
  color: #000;
  width: 280px;
  padding: 20px 15px;
  border: 3px solid #000;
  border-radius: 12px;
  box-shadow: 6px 6px 0 #000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  text-align: center;
  animation: floatWiggle 3s ease-in-out infinite;
}
.sticky-mbti-link:hover {
  transform: translate(-2px, -2px) scale(1.02);
  box-shadow: 8px 8px 0 #000;
  background: #ffea8a;
}
.sticky-sub { font-size: 14px; font-weight: bold; margin: 0 0 5px 0; color: #333; }
.sticky-main { font-size: 24px; font-weight: 900; margin: 0; line-height: 1.2; letter-spacing: 0.05em; }
.sticky-main-consultation {display: none;}
.sticky-arrow { display: inline-block; margin-top: 5px; font-size: 20px; font-weight: bold; transition: transform 0.2s; }
.sticky-mbti-link:hover .sticky-arrow { transform: translateX(5px); }
.sticky-badge {
  position: absolute;
  top: -15px;
  left: -15px;
  background: #ff4757;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 30px;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transform: rotate(-10deg);
}
@keyframes floatWiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(2deg) translateY(-5px); }
  75% { transform: rotate(-2deg) translateY(-5px); }
}

/* ==================================================
   レスポンシブ：PC（1200px〜1600px）の調整
   ボタンを縮小して横一列に収める設定
   ================================================== */
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    /* リンクの文字サイズと余白を詰める */
    .global-list a {
        font-size: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .header-lower ul li.global-list {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* ボタンを小さくして収める */
    #chuto-btn, .shinsotsu-btn {
        width: 110px !important;
        font-size: 13px !important;
        height: 45px !important;
        margin: 5px !important;
        padding: 5px !important;
    }
    /* エリア間隔調整 */
    .header-btn-area {
        gap: 5px !important;
        margin-bottom: 5px;
    }
    .header-text-area {
        margin-right: 10px !important;
    }
    .headerwrapright nav ul .menu img, .global-list img {
        width: 16px;
        height: 16px;
    }
    /* Chat AIボタンも少し小さく */
    .chat-ai-btn-code {
        width: 130px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
        height: 25px !important;
    }
    .header-upper {
        gap: 15px !important;
        margin-bottom: 5px !important;
        margin-right: 15px;
    }
    .header-lower {
        margin-top: -5px;
    }
}

/* ==================================================
   レスポンシブ：タブレット・スマホ（〜1199px）
   ================================================== */
@media screen and (max-width: 1199px){
    /* PCメニュー非表示 */
    .headerwrapright{
        display:none !important;
    }

    /* レスポンシブエントリーボタン表示 */
    #responsive-entry-btn{
        display:block;
        width:100px;
        height:38px;
        line-height:38px;
        text-align:center;
        border: solid 2px #000;
        background-color: #000;
        transition:.3s;
        margin-right: 60px;
    }
    #responsive-entry-btn a{
        width:100%;
        display:inline-block;
        text-decoration: none;
        font-style:oblique;
        font-size: 14px;
        font-weight:bold;
        letter-spacing:0px;
        color:#FFE400;
    }
    #responsive-entry-btn:hover{
        background-color:#FFE400;
    }
    #responsive-entry-btn a:hover{
        background-color:transparent;
        color:#000;
        transition:.3s;
    }

    /* ハンバーガー（メニュー本体） */
    #responsive-menu{
        display:block;
        height:70vh;
        max-height:500%;
        width:353px;
        position:absolute;
        top:88px;
        right:-355px;
        background-color:#000;
        transition:.7s;
    }
    #responsive-menu ul{
        width:100%;
        height:100%;
        box-sizing:border-box;
        overflow-y:scroll;
    }
    #responsive-menu ul li{
        height:40px;
        line-height:40px;
        padding-left:53px;
        list-style-type:none;
        border-bottom:0.5px solid #fff;
    }
    #responsive-menu ul li:nth-child(1), #responsive-menu ul li:nth-child(8), 
    #responsive-menu ul li:nth-child(12), #responsive-menu ul li:nth-child(13), 
    #responsive-menu ul li:nth-child(14){
        padding-left:22px;
    }
    #responsive-menu ul li a{
        display:inline-block;
        font-size:16px;
        font-weight:bold;
        text-decoration:none;
        color:#fff;
        transition:.5s;
    }
    #responsive-menu ul li a img{
        display:inline-block;
        vertical-align: middle;
        width:25px;
        height:25px;
        margin-left:10px;
    }

    /* ハンバーガー（ボタン） */
    #hamburger{
        display:block;
        position:absolute;
        top:20px;
        right:21px;
        width:40px;
        height:38px;
        cursor:pointer;
        transition:1s;
        z-index:1001;
    }
    #hamburger .inner_line{
        display:block;
        position:absolute;
        top:0;
        right:0;
        width:44px;
        height:3px;
        background-color:#000;
    }
    #hamburger #line1{top:6px;}
    #hamburger #line2{top:20px;}
    #hamburger #line3{top:34px;}
    .in{transform:translateX(-353px);}
    #hamburger .line_1,  #hamburger .line_2,  #hamburger .line3{
        background-color:#000;
    }
    #hamburger .line_1{
        transform:translateY(14px) rotate(-45deg);
        transition:1s;
    }
    #hamburger .line_2{
        opacity:0;
    }
    #hamburger .line_3{
        transform:translateY(-14px) rotate(45deg);
        transition:1s;
    }
    #sub-menu1, #sub-menu2{
        display:none;
        opacity:0;
    }
    .header-space{
        height:70px;
    }

    #sticky-right-banner {
        right: 20px;
        bottom: 20px;
        display: block;
    }
    .sticky-mbti-link {
        width: 200px;
        padding: 15px 10px;
        border: 2px solid #000;
        box-shadow: 2px 2px 0 #000;
    }

    /* ホバー打消し(UX対策) */
    .sticky-mbti-link:hover {
        transform: none;
        box-shadow: 2px 2px 0 #000;
        background: #ffde59;
    }

    .sticky-sub , .sticky-arrow , .sticky-badge {
        display: none;
    }
    .sticky-main { font-size: 16px; font-weight: 600 }
    .sticky-main-consultation {display: inline;}
}

/* その他微調整 */
@media screen and (max-width: 1280px){
    .header-space { height: 73px; }
	.top-img-wrapper{ margin-bottom: 50px; }
	.main-contents-wrapper{ margin-bottom: 100px; }
    header{ height:90px; }
    header h1{ display:none; }
    #logo{ width:180px; height:55px; }
    
    /* ▼▼▼ 追加修正：ヘッダー高さ変更に合わせてメニュー位置も調整 ▼▼▼ */
    .headerwrapright nav ul .menu {
        top: 90px !important; /* 120px -> 90pxに変更 */
    }

    /* フッター縮小 */
    .scroll-top{ height:90px; background-color:#000; position:relative; }
    .triangle{ border-width: 0 50vw 80px 50vw; border-color:transparent; }
    .arrow-top{top:24px;}
    .arrow-top-overlap1{top:27px;}
    .arrow-top-overlap2{ top:40px; height:15px; }
    .page-top{ font-size:14px; letter-spacing:2px; top:45px; }
}

/* ==================================================
   iOS / Android 調整
   ================================================== */
.iPhone .top-img-wrapper, .iPad .top-img-wrapper, .Android .top-img-wrapper{
    margin-bottom: 50px;
}
.iPhone .main-contents-wrapper, .iPad .main-contents-wrapper, .Android .main-contents-wrapper{
    margin-bottom: 100px;
}
.iPhone header, .iPad header, .Android header{
    height:90px;
}
.iPhone .header-inr, .iPad .header-inr, .Android .header-inr{
    padding:0 90px 0 25px;
    position:relative;
}
.iPhone header h1, .iPad header h1, .Android header h1{
    display:none;
}
.iPhone #logo, .iPad #logo, .Android #logo{
       width:130px;
        height:40px;
}
.iPhone .headerwrapright, .iPad .headerwrapright, .Android .headerwrapright{
    display:none;
}
.iPhone .scroll-top, .iPad .scroll-top, .Android .scroll-top{
    height:90px;
    background-color:#000;
    position:relative;
}
.iPhone .triangle, .iPad .triangle, .Android .triangle{
    border-width: 0 50vw 80px 50vw;
    border-color:transparent;
}
.iPhone .arrow-top, .iPad .arrow-top, .Android .arrow-top{top:24px;}
.iPhone .arrow-top-overlap1, .iPad .arrow-top-overlap1, .Android .arrow-top-overlap1{top:27px;}
.iPhone .arrow-top-overlap2, .iPad .arrow-top-overlap2, .Android .arrow-top-overlap2{
    top:40px;
    height:15px;
}
.iPhone .page-top, .iPad .page-top, .Android .page-top{
    font-size:14px;
    letter-spacing:2px;
    top:45px;
}
.iPhone .main-contents-wrapper, .iPad .main-contents-wrapper, .Android .main-contents-wrapper{
    margin-bottom: 100px;
}
/* ==============================================
   追加：よくある質問ボタン（ヘッダー用）
   ============================================== */
.faq-btn-header {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    /* 黒背景でオレンジのChat AIと対比させる */
    background-color: #333 !important; 
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    height: 28px !important;
    padding: 0 15px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    width: 130px; /* Chat AIより少し短く */
}
.faq-btn-header:hover {
    background-color: #000 !important; /* ホバー時は真っ黒に */
    transform: translateY(-1px) !important;
    opacity: 1 !important;
}
.faq-btn-header svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

/* 
   レスポンシブPC（1200px〜1600px）の調整に追加 
   既存のメディアクエリ内に追加するか、これを最後に追記してください
*/
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    /* よくある質問ボタンも縮小 */
    .faq-btn-header {
        width: 110px !important;
        font-size: 10px !important;
        padding: 0 8px !important;
    }
    /* スペース確保のためSNSアイコンの間隔も少し詰める */
    .sns-list {
        gap: 10px !important;
    }
}