@charset "UTF-8";
/* CSS Document */

/* 全体のリセット */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    background-color: #000000;
}

a:hover img{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/* ヘッダー */
header {
    background-color: #2d2d2d;
    width: 100%;
    padding: 10px 0;
}

.header-container {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #CCC;
}

.logo {
    margin: 0;
}
.logo a {
    display: block;
}
.logo img {
    height: 50px;
}

/* PCメニュー */
.pc-menu ul {
    display: flex;
    gap: 20px;
}

.pc-menu ul li a {
    text-decoration:none;
    padding-left: 16px; /* 画像分の余白 */
    background: url('img/header_menu_ arrow.png') no-repeat left center;
    background-size: 10px; /* 画像サイズ調整 */
    color: #CCC;
    font-size: 0.8rem;
}
.pc-menu:hover{
    color: #FFFFFF;
}  


#mobile-menu {
    display: none;
    position: absolute;
    top: 60px;
    right: 10px;
    background: white;
    padding: 10px;
    border: 1px solid #ccc;
}

#mobile-menu ul {
    flex-direction: column;
}

#mobile-menu ul li {
    padding: 10px 0;
}

/* メインコンテンツ */
.container {
    width: 1000px;
    margin: 20px auto 180px;
}

    .top-contents {
        width: 100%;
    margin: 0px auto;
    }

.main-image img,
.single-image img {
    width: 100%;
    margin-bottom: 40px;
}

.image-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content:space-between;
}

.image-row img {
    /*width: 100%; */
}

/* フッター */
footer {
    background-color: #2d2d2d;
    width: 100%;
    text-align: center;
    padding: 80px 0;
}

.footer-container img {
    width: 220px;
}

.footer-content {
    margin: 0 auto 40px;
    color: #FFFFFF;
    text-align: center;
}

.footer-content a {
    color: #CCC;
    text-decoration: none;
    font-size: 0.8rem;
}

.footer-content ul {
    display: inline-flex;
    gap: 120px;
    padding: 0;
    margin: 0;
}

.footer-content li {
    list-style: none;    /* マーカーを削除 */
}



h2 {
    color: #FFFFFF;
    font-size: 2.6rem;
    text-align:center;
    margin-top:30px;
        font-weight: bold;
      }
h3 {
    color: #FFFFFF;
    font-size: 1.6rem;
    margin-bottom:10px; 
        font-weight: bold;
      }

.secondary-container {
    width: 800px;
    margin: 0px auto 180px;
    
      }

.secondary-content {
    margin-bottom: 80px;
          }
.secondary-content600 {
    width: 600px;
    margin-bottom: 80px;
    margin: 0px auto;
          }

.sub-title {
    color: #FF0004;
    font-size: 1.0rem;
    text-align:center;
    margin-bottom:30px; 
      }

.text-content {
    color: #FFFFFF;
    font-size: 1.0rem;
    margin-bottom: 40px;
      }

.text-content-right {
    text-align: right;
    color: #FFFFFF;
    font-size: 1.0rem;
      }

.hr {
        border: 1px solid #FFFFFF;
        width: '100%'; 
    margin-bottom:60px; 
      }

.privacypolicy-hr {
            border: 1px solid #666666;
        width: '100%'; 
    margin-bottom:10px; 
      }

.content-image img{
    width: 100%;
      }

.clear{
    clear:both;
      }

.content-area{
    float:left;
    width: 44%;
        color: #FFFFFF;
    background-color: #2d2d2d;
    padding: 10px;
    margin: 10px;
          }

.content-area-title{
        font-size: 1.2rem;
    font-weight: bold;
      }

.content-area li{
        font-size: 0.8rem;
      }

.size-content {
  overflow-x: scroll;
    scrollbar-width: none;
}

.size-content table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
    color: #FFFFFF;
    margin-bottom: 40px;
}
.size-content th {
    background-color: #595959;
    border: solid 1px; 
    border-color : #707070;
        font-size: 0.8rem;
}

.size-content td {
    border: solid 1px;
    text-align:  center;
    padding: 10px 0px;
    border-color : #707070;
}

.size-content td.size-left {
    text-align: left;
    padding-left: 10px;
}

.size-content a{
    color: #FFFFFF;
}

.whattire-content table {
  width: 100%;
  border-collapse: collapse;
    color: #FFFFFF;
    margin-bottom: 60px;
    font-size: 0.8rem;
}

.whattire-content th {
    background-color: #595959;
        padding: 10px 0px;
        font-size: 0.8rem;
}






.profile-content {
    margin: 0px auto;
    color: #FFFFFF;
        text-align:center;
}

.profile-content a{
    color: #FFFFFF;
}

.profile-content img {
    margin-bottom: 40px;
    width: 260px;
}

.profile-list {

}

.profile-list li {
    list-style: none;
    text-align: center;
    margin:20px 0px;
}

/* ハンバーガーメニューアイコン */
.hamburger-menu {
    display: none; /* PCでは非表示 */
    position: relative;
    z-index: 1000; /* 画像より前面に表示 */
}

.hamburger-icon {
    width: 30px;
    height: 25px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 1001; /* さらに前面 */
}

.hamburger-icon span {
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #FFFFFF; /* 白色のアイコン */
    border-radius: 3px;
    transition: 0.3s ease;
}

/* ハンバーガーラインの配置 */
.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 10px; }
.hamburger-icon span:nth-child(3) { top: 20px; }

/* アクティブ状態（「×」に変形） */
.hamburger-icon.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.hamburger-icon.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-icon.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* モバイルメニュー */
#mobile-menu {
    display: none;
    position: absolute;
    width: 140px;
    top: 60px;
    right: 0; /* 右端にぴったり合わせる */
    background: rgba(0, 0, 0, 0.9); /* 背景を半透明に */
    padding: 10px;
    border: 1px solid #333;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 影をつけて浮き感 */
}

#mobile-menu.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobile-menu ul li {
    padding: 12px 0;
}

#mobile-menu ul li a {
    text-decoration: none;
    color: #FFF; /* メニュー項目を白色に */
    font-size: 12px;
}

/* PC用メニュー */
.pc-menu ul {
    display: flex;
    gap: 20px;
}

.pc-menu ul li {
    list-style: none;
}

.pc { display: block !important; }
.sp { display: none !important; }

/* スマホ対応 */
@media (max-width: 768px) {
    
.pc { display: none !important; }
.sp { display: block !important; }
    
h2 {
    color: #FFFFFF;
    font-size: 1.8rem;
    text-align:center;
    margin-top:30px;
        font-weight: bold;
      }
h3 {
    color: #FFFFFF;
    font-size: 1.2rem;
    margin-bottom:10px; 
        font-weight: bold;
      }
    
    .header-container {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box; /* パディングを含める */
    }
    .logo img {
    height: 30px;
}

    .pc-menu {
        display: none; /* スマホでは非表示 */
    }

    .hamburger-menu {
        display: block; /* スマホで表示 */
        margin-left: auto; /* 右寄せ */
    }

    .container {
        width: 100%;
        margin: 20px auto 20px;
    }
    
    .top-contents {
        width: 96%;
            margin: 0px auto;
    }
    
    .secondary-container {
        width: 100%;
        margin: 0px auto;
    }
    .secondary-content600 {
        width: 80%;
    }
    
.text-content {
    font-size: 1.0rem;
    margin-bottom: 40px;
      }
    
.text-content-right {
    font-size: 0.8rem;
      }
    
.content-area{
    width: 90%;
    padding: 10px;
          }
    
    .image-row {
        flex-direction: column;
        /*gap: 30px; */
        /*margin-bottom: 30px; */
    }

    .image-row img {
        width: 100%;
    }
    
    .footer-content {
        display: none; /* スマホでは非表示 */
}
    

.size-content td {
    border: solid 1px;
    text-align:  center;
    padding: 10px 20px;
    border-color : #707070;
    background-color: #000000;
}
}
/* TOP画像文字 */
.image-container {
    position: relative;
    display: inline-block;
    z-index: 1; /* デフォルトの前面に表示されるレイヤー */
    margin-bottom: 40px;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* 共通テキストスタイル */
.text-overlay {
    position: absolute;
    color: white;
    font-weight: bold;
    opacity: 0;  /* 初期は非表示 */
    animation: slideUp 0.8s ease forwards;
    white-space: nowrap; /* テキストが折り返さないように */
    z-index: 10; /* テキストも前面に出すが、ハンバーガーメニューよりは奥 */
}

/* 下からふわっと出てくるアニメーション */
@keyframes slideUp {
    from {
        transform: translateY(100%); /* 下に隠れている状態 */
        opacity: 0;
    }
    to {
        transform: translateY(0); /* 元の位置に移動 */
        opacity: 1;
    }
}

/* PC用スタイル */
@media screen and (min-width: 768px) {
    .text-overlay {
        bottom: 200px;   /* 画像の下から少し上 */
        left: 10%;      /* 中央寄せ */
        transform: translateX(-50%);
        font-size: 18px; /* 大きめの文字サイズ */
    }
}

/* スマホ用スタイル */
@media screen and (max-width: 767px) {
    .text-overlay {
        bottom: 40px;   /* 画像の下から近め */
        left: 52%;      /* 中央寄せ */
        transform: translateX(-50%);
        font-size: 16px; /* 小さめの文字サイズ */
        padding: 5px 10px;
    }
}