@charset "utf-8";
html {
    overflow-x: hidden; /* iOS用でbodyタグのoverflow-x: hidden;を効かせる */
    scroll-behavior: smooth; /* スムーズスクロールを有効にする */
}

body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
    display: flex;
    flex-direction: column; /* 縦並びに設定 */
    align-items: center; /* 水平方向のセンタリング */
    /* height: 100vh; 画面の高さを使う */
}

/* シミュレーター領域 */
.container {
    position: relative;
    width: 360px;
    height: 585px;
    overflow: hidden;
}

/* スマホ領域 */
.frame {
    position: absolute;
    top: 0;
    left: 50%; /* 左からの基準を中央に */
    transform: translateX(-50%); /* 自身の幅の半分だけ左に移動 */
    width: 296px;
    height: 570px;
    background-size: cover;
}

/* スマホ領域（タイムライン背景画像） */
.frame-timeline {
    background: url('/home/demo/images/timelineframe.png') no-repeat center center;
}

/* スマホ領域（機器リスト背景画像） */
.frame-appliancelist {
    background: url('/home/demo/images/appliancelistframe.png') no-repeat center center;
}

/* スマホ領域（サービスリスト背景画像） */
.frame-servicelist {
    background: url('/home/demo/images/servicelistframe.png') no-repeat center center;
}

/* コンテンツ領域（スクロール部分のみ） */
.content-list {
    position: absolute;
    top: 94px;
    left: 50%; /* 左からの基準を中央に */
    transform: translateX(-50%); /* 自身の幅の半分だけ左に移動 */
    width: 270px;
    height: 395px;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox用でスクロールバーを隠す */
    -ms-overflow-style: none; /* Internet Explorer and Edge用 */
}
.content-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera用でスクロールバーを隠す */
}

/* コンテンツ領域（スクロール無し・ピクト以外） */
.content-nopict {
    top: 52px;
    height: 494px;
}

/* コンテンツ画像 */
.content-image {
    width: 100%; /* frameにフィット */
    display: block;
    margin: 0;
}

/* まとめて操作ボタン */
.matomete-button {
    position: absolute;
    top: 440px;
    left: 50%; /* 左からの基準を中央に */
    transform: translateX(-50%); /* 自身の幅の半分だけ左に移動 */
    width: 138px;
    height: 42px;
}

/* リンク（透明ボタン用） */
.content-link {
    display: block;
    position: absolute;
    border-radius: 15px;
    border: 1px solid rgba(188, 0, 127, 0); /* デバック時は透明度を「1」にする */
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    color: rgba(188, 0, 127, 0);
    line-height: 1px;
    height: 19px;
}

/* リンク（画像用） */
.image-link {
    display: block;
}

.translucent-white {
    opacity: 0.8;
}

/* グローバルフッター */
#globalFooter {
  width: 100%;
  max-width: 480px;
  background: #fff;
  text-align: center;
  font-size: 0.5rem;
}

/* コピーライト */
#copyright {
  margin: 0; 
  color: #808080;
}
#copyright a {
  color: #808080;
  text-decoration: none;
}
#copyright a:hover {
  text-decoration: underline;
}