/* レスポンシブデザイン対応 CSS */
/* SQサイト全ページ共通 */

/* タブレット・スマホ共通調整 */
@media (max-width: 768px) {
    
    /* メインコンテナ */
    #doc {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    /* SQロゴ */
    #sq-logo {
        width: 100% !important;
        max-width: none !important;
        background-size: contain !important;
        height: auto !important;
        aspect-ratio: 740/469;
        margin-bottom: -10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* ページタイトル */
    h1 {
        font-size: 140%;
        margin-bottom: 15px;
        padding: 0 10px;
    }
    
    /* ボックス要素 */
    div.box {
        padding: 20px 15px 15px 15px !important;
        margin: 0 0 20px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    div.box.no-icon-box {
        padding-left: 15px !important;
    }
    
    /* アイコン付きボックス */
    div.box img.icon {
        position: static !important;
        display: block;
        margin: 0 auto 10px auto;
        float: none !important;
    }
    
    /* ボックス内のh2 */
    div.box h2 {
        text-align: center;
        margin-top: 10px;
    }
    
    /* グローバルナビゲーション（フッター付近の固定ナビ） */
    body #globnav {
        position: relative !important;
        opacity: 1 !important;
        background-color: rgba(0,0,0, 0.85) !important;
        padding: 20px 10px !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        box-shadow: 0 2px 10px rgba(0,0,0, 0.5) !important;
        height: auto !important;
        margin: 20px 0 !important;
        border-radius: 8px !important;
    }
    
    body #globnav .nav-wrap {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
    }
    
    body #globnav a {
        position: relative !important;
        display: inline-block !important;
        width: 48px !important;
        height: 48px !important;
        margin: 5px !important;
        padding: 8px !important;
        background-color: rgba(42,64,80,0.95) !important;
        border-radius: 50px !important;
        background-size: 32px 32px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        text-indent: -9999px !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.3) !important;
    }
    
    body #globnav a:hover {
        width: 52px !important;
        height: 52px !important;
        background-size: 36px 36px !important;
        background-color: rgba(255,255,255,0.95) !important;
        border-radius: 8px !important;
        box-shadow: 4px 4px 12px rgba(0,0,0,0.5) !important;
        transform: scale(1.05) !important;
    }
    
    /* アイコン画像パスを明示的に指定（高優先度） */
    body #globnav a.glob-top { background-image: url(/static/sq/images/top.png) !important; }
    body #globnav a.glob-about { background-image: url(/static/sq/images/about.png) !important; }
    body #globnav a.glob-download { background-image: url(/static/sq/images/download.png) !important; }
    body #globnav a.glob-manual { background-image: url(/static/sq/images/manual.png) !important; }
    body #globnav a.glob-staff { background-image: url(/static/sq/images/staff.png) !important; }
    body #globnav a.glob-acc { background-image: url(/static/sq/images/acc.png) !important; }
    body #globnav a.glob-hagaki { background-image: url(/static/sq/images/hagaki.png) !important; }
    
    /* フッターリンク */
    #foot-links {
        font-size: 10px !important;
        text-align: center;
        padding: 15px 5px !important;
        line-height: 1.6 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #foot-links a {
        display: inline !important;
        margin: 0 2px !important;
        padding: 0 !important;
        white-space: normal !important;
        word-break: break-all !important;
    }
    
    /* ソーシャルリンク */
    #soclink {
        display: block !important;
        text-align: center !important;
        padding: 15px 0 !important;
        margin: 20px auto !important;
        width: 95% !important;
        height: auto !important;
        opacity: 1 !important;
        background-color: rgba(255,255,255, 0.9) !important;
        border-radius: 4px !important;
        box-shadow: 0px 0px 8px rgba(0,0,0,0.3) !important;
    }
    
    #soclink:hover {
        opacity: 1 !important;
    }
    
    #soclink li {
        display: inline-block !important;
        margin: 5px 10px !important;
        height: auto !important;
        vertical-align: top;
    }
    
    #soclink li.soc-twitter iframe,
    #soclink li.soc-hatena-b iframe,
    #soclink li.soc-facebook iframe {
        max-width: 120px;
        height: auto;
    }
}

/* スマホ専用調整 */
@media (max-width: 480px) {
    
    /* さらに細かい調整 */
    #doc {
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    h1 {
        font-size: 120%;
        padding: 0 5px;
    }
    
    div.box {
        margin: 0 0 15px 0 !important;
        padding: 15px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* テキストサイズ調整 */
    body {
        font-size: 14px;
    }
    
    /* グローバルナビをよりコンパクトに（スマホ向け） */
    body #globnav a {
        width: 40px !important;
        height: 40px !important;
        margin: 4px !important;
        padding: 6px !important;
        background-size: 26px 26px !important;
    }
    
    body #globnav a:hover {
        width: 42px !important;
        height: 42px !important;
        background-size: 28px 28px !important;
        transform: scale(1.02) !important;
    }
    
    body #globnav .nav-wrap {
        gap: 6px !important;
    }
    
    /* フッターリンクのスマホ調整 */
    #foot-links {
        font-size: 9px !important;
        padding: 15px 2px !important;
        line-height: 1.8 !important;
        width: 100% !important;
    }
    
    #foot-links a {
        margin: 0 1px !important;
        padding: 0 !important;
        font-size: 9px !important;
        display: inline !important;
        white-space: normal !important;
        word-break: break-all !important;
    }
    
    /* ソーシャルリンクもスマホ向けに調整 */
    #soclink {
        width: 98% !important;
        padding: 10px 0 !important;
    }
    
    #soclink li {
        display: block !important;
        margin: 8px 0 !important;
    }
}

/* aboutページ用 - スクリーンショットレスポンシブ */
@media (max-width: 768px) {
    
    .screenshots {
        text-align: center !important;
    }
    
    .screenshots .image {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }
    
    .screenshots .image img {
        max-width: 100%;
        height: auto;
        width: auto !important;
        max-height: 300px;
    }
    
    .screenshots img.large {
        max-width: 100%;
        width: auto !important;
        height: auto !important;
        max-height: 400px;
    }
    
    .screenshots .image .caption {
        padding: 0 10px;
        text-align: center;
    }
}

/* staffページ用 - 2カラムレスポンシブ */
@media (max-width: 768px) {
    
    div.column2 dl {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }
    
    dl.left-column,
    dl.right-column {
        text-align: left !important;
        padding: 0 !important;
    }
    
    dl.stafflist dt {
        font-size: 110%;
    }
    
    dl.stafflist dd {
        font-size: 120%;
        margin-left: 10px;
    }
}

/* 画像・動画のレスポンシブ */
@media (max-width: 768px) {
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* YouTube動画のレスポンシブ */
    .fullbox {
        width: 95% !important;
        height: auto !important;
        padding: 10px;
    }
    
    .fullbox iframe {
        width: 100% !important;
        height: 200px !important;
    }
}

/* トップページのミニボックス - モバイル対応 */
@media (max-width: 768px) {
    
    /* メインナビゲーション（minibox）をモバイル用にレイアウト調整 */
    .minibox-wrap.main-block {
        padding: 10px 5px !important;
        margin: 20px 0 !important;
    }
    
    .minibox-wrap.main-block .minibox-line {
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    
    .minibox-wrap.main-block .minibox {
        width: 30% !important;
        height: 120px !important;
        margin: 5px 1.5% !important;
        display: inline-block !important;
        float: none !important;
        position: relative !important;
    }
    
    .minibox-wrap.main-block .minibox img {
        width: 60% !important;
        height: auto !important;
        left: 20% !important;
        top: 10px !important;
        position: absolute !important;
    }
    
    .minibox-wrap.main-block .minibox:hover img {
        width: 70% !important;
        left: 15% !important;
        top: 5px !important;
    }
    
    .minibox-wrap.main-block .minibox span {
        font-size: 11px !important;
        position: absolute !important;
        bottom: 8px !important;
        left: 0 !important;
        right: 0 !important;
        text-align: center !important;
        top: auto !important;
    }
    
    /* 通常のminibox-wrap（動画など）は別途調整 */
    .minibox-wrap:not(.main-block) {
        padding: 0 10px;
    }
    
    .minibox-wrap:not(.main-block) .minibox-line {
        width: 100% !important;
        height: auto !important;
        text-align: center;
    }
    
    .minibox-wrap:not(.main-block) .minibox {
        width: 45% !important;
        height: 180px !important;
        margin: 5px 2% !important;
        display: inline-block;
        float: none;
    }
    
    .minibox-wrap:not(.main-block) .minibox img {
        width: 80% !important;
        left: 10% !important;
        top: 5px !important;
    }
    
    .minibox-wrap:not(.main-block) .minibox:hover img {
        width: 90% !important;
        left: 5% !important;
        top: 0px !important;
    }
    
    .minibox-wrap:not(.main-block) .minibox span {
        font-size: 12px;
        top: 160px !important;
    }
}

@media (max-width: 480px) {
    
    /* メインナビゲーション（minibox）をスマホ用に縦並び */
    .minibox-wrap.main-block .minibox {
        width: 45% !important;
        height: 100px !important;
        margin: 8px 2.5% !important;
    }
    
    .minibox-wrap.main-block .minibox img {
        width: 50% !important;
        left: 25% !important;
        top: 8px !important;
    }
    
    .minibox-wrap.main-block .minibox:hover img {
        width: 60% !important;
        left: 20% !important;
        top: 5px !important;
    }
    
    .minibox-wrap.main-block .minibox span {
        font-size: 10px !important;
        bottom: 5px !important;
    }
    
    /* 通常のminibox（動画など）のスマホ調整 */
    .minibox-wrap:not(.main-block) .minibox {
        width: 95% !important;
        margin: 10px 2.5% !important;
        height: 140px !important;
    }
    
    .minibox-wrap:not(.main-block) .minibox span {
        top: 120px !important;
        font-size: 14px;
    }
}

/* ダウンロードページのボタン調整 */
@media (max-width: 768px) {
    
    a.link.download {
        display: block !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        text-align: center;
    }
    
    a.link.download img.icon {
        display: block;
        margin: 0 auto 10px auto;
        float: none !important;
    }
    
    a.link.download .name,
    a.link.download .size {
        display: block;
        text-align: center;
    }
}