/***** トップページ　メイン専用 ↓ *****/



/***** タイトル部分 ↓ *****/

/* タイトル部分は一見共通ですが、各ページで微妙に違うので、各ページ各々指定してます */

/* 左右の赤黒ベタのグリット位置 */
main aside.title-left {
    grid-area: worksleft;
}
main aside.title-left .blackbox {
    width: 100%;
    height: 360px;
    background-color: black;
    margin-top: 100px;
}
main aside.title-right {
    grid-area: worksright;
}
main aside.title-right .redbox {
    width: 100%;
    height: 360px;
    background-color: red;
}

.campaign {
  position: absolute;
  right: -50px;
  top: 20px;
  width: 250px;
}
.servicecampaign {
  position: absolute;
  right: -50px;
  top: 20px;
  width: 250px;
}
.accesscampaign {
  position: absolute;
  right: -50px;
  top: 20px;
  width: 250px;
}

/***** 共通 ↓ *****/
.only-sp{ display: none; }

/* ページトップボタンのスタイル */
        #pageTopBtn {
            /* 1. 画面に固定する */
            position: fixed; 
            /* 2. 表示位置 (右下から20px) */
            bottom: 20px;    
            right: 20px;     
            /* 3. 見た目の設定 */
            z-index: 99;     /* 他の要素より手前に表示 */
            border: none;
            outline: none;
            background-color: #007bff; /* 青系の背景色 */
            color: white;
            cursor: pointer;
            padding: 12px 18px; /* パディング */
            border-radius: 50%; /* 円形にする */
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影をつける */
            /* 4. 初期状態は非表示（JavaScriptによって制御されますが、念のため） */
            display: none; 
            /* 5. マウスオーバー時の変化を滑らかにする */
            transition: background-color 0.3s, opacity 0.3s;
        }

        #pageTopBtn:hover {
            background-color: #0056b3; /* ホバー時に少し暗い色に */
        }

/* スマホ用のスタイル */
@media only screen and (max-width: 768px) {
.only-pc{ display: none; }
.only-sp{ display: block; } 

/* ... 既存のスマホ用スタイル（@media only screen and (max-width: 768px)内） ... */

/* head_inのグリッドを調整して、ハンバーガーとロゴ類を配置 */
header #head_in {
    grid-area: headin;
    display: grid;
    grid-template:
        "ikeb humberger" auto
        "logo logo" auto
        / 1fr 60px; /* ハンバーガー用に幅を確保 */
    position: relative; /* 子要素の絶対配置の基準にする */
}

/* 既存のdrawer_toggle関連のCSSを修正 */
header #head_in #drawer_toggle {
    grid-area: humberger;
    display: block; /* スマホで表示 */
    position: absolute;
    top: 30px;
    right: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 100;
}

/* ハンバーガーアイコンのスタイル */
header #head_in #drawer_toggle span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #333;
    transition: 0.3s ease-in-out;
}

header #head_in #drawer_toggle span:nth-child(1) {
    top: 5px;
}
header #head_in #drawer_toggle span:nth-child(2) {
    top: 18px;
}
header #head_in #drawer_toggle span:nth-child(3) {
    top: 31px;
}

/* チェックボックス（非表示） */
#menu-check {
    display: none;
}

/* メニュー本体のスタイル */
header .header_nav {
    display: block; /* スマホで表示 */
    position: fixed;
    top: 0;
    right: -100vw; /* 画面外に隠す */
    width: 80vw;
    max-width: 300px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    padding-top: 80px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.5s ease-in-out;
    z-index: 99;
    overflow-y: auto;
}

header .header_nav ul {
    display: block; /* 縦並びに */
    padding: 0;
}

header .header_nav li {
    border-bottom: 1px solid #ccc;
    list-style: none;
}

header .header_nav a {
    display: block;
    padding: 15px 20px;
    font-size: 1.8rem;
    color: #333;
    text-decoration: none;
    margin-right: 0;
}

header .header_nav a:hover,
header .header_nav a:visited {
    background-color: #fcee21;
}

/* メニューが開いた状態 (チェックボックスがチェックされた状態) */
#menu-check:checked ~ .header_nav {
    right: 0; /* スライドインして表示 */
}

/* 閉じるボタン（ハンバーガーアイコンの変化） */
#menu-check:checked ~ #drawer_toggle span:nth-child(1) {
    transform: rotate(-45deg);
    top: 18px;
}
#menu-check:checked ~ #drawer_toggle span:nth-child(2) {
    opacity: 0;
}
#menu-check:checked ~ #drawer_toggle span:nth-child(3) {
    transform: rotate(45deg);
    top: 18px;
}
/* キャンペーンのアイコン位置表示・Service&Priceのみ、独自の指定(これの下) */
.campaign {
  position: absolute;
  right: -10px;
  top:-120px;
  width: 160px;
}
.servicecampaign {
  position: absolute;
  right: -10px;
  top:-140px;
  width: 160px;
}
.accesscampaign {
  position: absolute;
  right: -10px;
  top:300px;
  width: 160px;
}


/* 既存のナビゲーション関連の記述は不要になるので削除またはコメントアウト */
/* header .header_nav { display: none; } */
}