@charset "UTF-8";

/* ---------------------
 * FONTSIZE MODEL * 
 * ---------------------
 *  63% ->  10pxに相当
 *  70% ->  11pxに相当
 *  75% ->  12pxに相当
 *  82% ->  13pxに相当
 *  88% ->  14pxに相当
 *  94% ->  15pxに相当
 * 100% ->  16pxに相当
 * 107% ->  17pxに相当
 * 113% ->  18pxに相当
 * 119% ->  19pxに相当
 * 125% ->  20pxに相当
 * --------------------- */


/* ========BASIC======== */
html {
   overflow-y:scroll;
}

body {
   margin:0;
   padding:0;
   line-height:1.6;
   letter-spacing:1px;
   font-family:Verdana, Helvetica, sans-serif;
   font-size:1.1rem;
   color:#fff;
   background:#000;
}

br {
   letter-spacing:normal;
}

a {
   color:#E5E1F9;
   font-weight: bolder;

}

a:hover {
   color:#B2A2F4;
   text-decoration:none;
}

a:visited {
   color:#FFD4E4;
   text-decoration:none;
}



img {
max-width: 100%;
height: auto;
   border:0;
   vertical-align:bottom;
}


h1{
   margin:0;
  font-size : 1.3rem;
}

/* ========TEMPLATE LAYOUT======== */
#top {
   width:1080px;
   margin:0 auto;
}

#contents {
   float:left;
   width:1080px;
}

#side {
   float:left;
   width:220px;
   background:#181818;
   padding:10px 0;
}

#main {
   float:right;
   width:840px;
   padding:10px 0;
}

#footer {
   width:1000px;

}

/* ========SIDE CUSTOMIZE======== */
#side h1 {
   margin:0;
   font-size:24px;
}

#side h1 a {
   color:#fff;
}

#side h1 a:hover {
   color:#ddd;
}

#side div.section {
   margin:0 10px;
}


/* ========MENU CUSTOMIZE======== */
#menu ul {
   margin:0 auto;
   padding:10px 0;
}

#menu li {
   color:#333;
   text-align:center;
   list-style-type:none;
}

#menu li a {
   display:block;
   width:220px;
   color:#f1f1f1;
   line-height:60px;
}

#menu li a:hover {
   color:#f1f1f1;
   background:#2d2d2d url("../images/bg_menu.gif") 0 0 repeat;
}


/* ========MAIN CONTENTS CUSTOMIZE======== */
#main #pr p {
   margin:0;
   padding:5px 0;
}

#main #icatch {
   margin-bottom:10px;
}

#main a {
   color:#d1d1d1;
}

#main a:hover {
   color:#f1f1f1;
   text-decoration:underline;
}

#main h2 {
   margin-bottom:8px;
   padding:0 0 0 10px;
   font-size:1.3rem;
   font-weight:bold;
   line-height:35px;
   border:1px solid #3e3e3e;
   background:#181818;
}

#main h3 {
   clear:both;
   margin:20px 0 8px 0;
   padding:0 0 0 5px;
   font-size:1.2rem;
   border-left:5px solid #3e3e3e;
}

#main h4 {
   margin-bottom:2px;
   font-size:1.2rem;
   border-bottom:2px solid #f1f1f1;
}

#main h5 {
   margin-bottom:2px;
   padding:2px 5px;
   font-size:1.2rem;
   background:#3e3e3e;
}

#main h6 {
   margin-bottom:2px;
   font-size:1.2rem;
   border-bottom:2px solid #3e3e3e;
}

#main p {
   margin:0 0 1em 0;
}

#main dt {
   margin-bottom:3px;
}

#main dd {
   padding:0;
   margin:0 0 0.5em 1em;
   padding:3px;
   color:#ddd;
   background:#181818;
}

/* INFORMATION CUSTOMIZE */
* html body #main dl.information dd div {
   display:inline-block;
}

#main dl.information dt {
   float:left;
   width:10em;
   margin:0;
   padding:0;
   color:#fff;
}

#main dl.information dd {
   margin:0 0 0.5em 10em;
   padding:0;
   color:#fff;
   background:transparent;
}

#main table {
   width:100%;
   border-collapse: collapse;
}

#main table th {
   padding:5px;
   font-size:12px;
   text-align:left;
   border:1px solid #ddd;
   background:#181818;
}

#main table td {
   padding:5px;
   font-size:12px;
   text-align:left;
   border:1px solid #ddd;
}


/* ========PAGETOP CUSTOMIZE========= */
#pageTop {
   padding:10px 0;
   text-align:right;
   font-size:11px;
}

#pageTop a{
   padding:0 0 0 12px;
   background:url("../images/bg_pagetop.gif") 0 60% no-repeat;
}



/* ========FOOTMENU CUSTOMIZE======== */
#footMenu ul {
   margin:0;
   padding:10px 0 0 0;
   text-align:right;
}

#footMenu li {
   display:inline;
   margin:0 0 0 10px;
   list-style:none;
}

#footMenu li a {
   padding-left:10px;
   background: url("../images/bg_footmenu.gif") 0 50% no-repeat;
}


/* ========FOOTER CUSTOMIZE======== */
.copyright {
   padding:10px 0;
   font-size:11px;
   color:#b4b4b4;
   font-style:normal;
   text-align:center;
}


/* ========SAMPLEPAGE CUSTOMIZE======== */
div.menulist img {
   float:left;
   margin:0 10px 10px 0;
   padding:5px;
   background:#181c18;
}

div.menulist p.price {
   text-align:right;
   color:#d98f00;
   font-weight:bold;
}

/*その他
---------------------------------------------------------------------------*/
.look {color:#fff;background: #666;padding:5px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 1em;list-style: disc;}
.color1 {color: #c19135 !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;width: 30%;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;width: 30%;}
.big1 {font-size: 30px;letter-spacing: 0.2em;}
.mini1 {font-size: 11px;}
.sh{display:none;}
.dn{display:none;}
.blueline {
background:linear-gradient(transparent 70%, #9EC4DD 0%);
}
.menu-mg {
 margin: 2em auto;  
 padding: 1em;
 width: 80%; /*幅の調節*/
 color: #F7DFDF; /*文字色*/
 background-color: #1D1D44; /*背景色*/
 border: 2px solid #ccc; /*線の太さ・色*/
 border-radius: 8px; /*角の丸み*/ 
}
.youtube iframe{
  width: 100%;
}

/* ==========================================================================
   メディアクエリ：画面幅720px以下の設定（タブレット・大きめのスマホ向け）
   ========================================================================== */
@media screen and (max-width: 720px) {

   /* ========全体・レイアウトのリセット======== */
   #top {
      width: 100%;
      margin: 0 auto;
   }

   #contents {
      float: none;
      width: 100%;
   }

   /* サイドバーエリアを上部に配置し、横幅いっぱいに */
   #side {
      float: none;
      width: 100%;
      background: #181818;
      padding: 15px 10px;
      box-sizing: border-box;
   }

   /* ロゴ画像を中央寄せに */
   #side h1 {
      text-align: center;
      margin-bottom: 15px;
   }

   /* 問題のあったメインコンテンツのfloatを解除し、横幅を自動調整に */
   #main {
      float: none;
      width: 100%;
      padding: 20px 15px;
      box-sizing: border-box;
   }

   #footer {
      width: 100%;
      padding: 15px 10px;
      box-sizing: border-box;
   }

   /* ========メニューを横一覧（横並び）に整列======== */
   #menu {
      display: block;
      margin: 0 auto;
   }

   #menu ul {
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;         /* 項目が溢れた場合は綺麗に折り返す */
      justify-content: center; /* 中央寄せ */
      gap: 8px;                /* ボタン同士の間隔 */
   }

   #menu li {
      flex: 1;                 /* 子要素を均等に横並びにする */
      min-width: 130px;        /* ボタンが小さくなりすぎないよう最小幅を設定 */
      list-style-type: none;
   }

   #menu li a {
      display: block;
      width: 100%;
      line-height: 50px;       /* タップしやすい高さ */
      background: #252525;
      border: 1px solid #3a3a3a;
      border-radius: 6px;
      font-size: 0.95rem;
      color: #fff;
      text-align: center;
      box-sizing: border-box;
   }

   #menu li a:hover {
      background: #333;
   }

   /* フッターメニューの調整 */
   #footMenu ul {
      text-align: center;
   }
   #footMenu li {
      display: inline-block;
      margin: 5px 10px;
   }

} /* 720px以下のブロック終了 */


/* ==========================================================================
   メディアクエリ：画面幅480px以下の設定（一般的なスマートフォン向け）
   ========================================================================== */
@media screen and (max-width: 480px) {

   body {
      font-size: 1rem;
   }

   /* メインコンテンツの上下左右の余白をさらに詰め、画面を有効活用 */
   #main {
      padding: 10px 8px; 
   }

   /* ========スマホ向けメニューの超コンパクト化======== */
   #menu {
      margin: 5px auto;    /* メニューエリア全体の上下余白を半分に */
   }

   #menu ul {
      gap: 4px;            /* ボタン同士の隙間をさらに詰める（6px → 4px） */
   }

   #menu li {
      flex: none;
      width: 48%;          /* 隙間が狭くなった分、ボタンの横幅をわずかに拡大してバランス調整 */
   }

   #menu li a {
      line-height: 34px;   /* 高さをさらにスリムに（38px → 34px） */
      font-size: 0.8rem;   /* 文字サイズをもう一回り小さく（0.85rem → 0.8rem） */
      border: 1px solid #2d2d2d; /* 枠線の色を少し暗くして、線の主張を控えめに */
      border-radius: 3px;  /* サイズに合わせて角丸もさらに小さく */
      padding: 0 4px;      /* 文字が溢れそうなときのセーフティ余白 */
   }

} /* 480px以下のブロック終了 */


/* ==========================================================================
   SLIDESHOW CUSTOMIZE
   ========================================================================== */
.slideshow-container {
   position: relative;
   width: 100%;
   /* 画像の高さに合わせて調整。アスペクト比を維持する場合は、最初の画像に合わせて要素の高さを確保します */
   overflow: hidden;
}

/* 画像をすべて同じ位置に重ねる */
.slideshow-container .slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
   opacity: 0;
   transition: opacity 1.5s ease-in-out; /* 1.5秒かけてじわっと切り替わる */
   z-index: 1;
}

/* 1枚目の画像だけ高さを認識させて全体のエリアを確保する */
.slideshow-container .slide:first-child {
   position: relative;
}

/* アクティブな画像だけを表示する */
.slideshow-container .slide.active {
   opacity: 1;
   z-index: 2;
}