@charset "utf-8";

/* ======================================================
               main images
====================================================== */
#main_images{
	position:relative;
}

#main_image{
	width:100vw;
	overflow-y:hidden;
}

#main_title{
	z-index:10;
}
.main_table{
	width:50%;
	padding-top:30px;
	margin:0 auto;
}
.main_table th{
	width:20%;
	background:#4b5c76;
	color:#fff;
	padding:20px 30px 20px 30px;

}
.main_table td{
	width:60%;
	background:#f0f0f0;
}

.main_table th,td{
	border-bottom:dotted 1px #ccc;
}

.main_table td a{
	text-decoration:none;
	color:#000;
}

.title_main{
	text-shadow:1px 1px 3px #333;
	color:#fff;
	font-family:serif;
	font-weight:bold;
	letter-spacing:0.3em;
	font-size:70px;
	position:absolute;
	right:0; left:0;
 	margin:auto;
	top:250px;
	width:370px;
	border-bottom:solid 2px #fff;
}

.title_sub{
	text-shadow:1px 1px 3px #333;
	color:#fff;
	font-family:serif;
	font-size:30px;	
	letter-spacing:0.1em;
	font-weight:bold;
	position:absolute;
	right:0; left:0; margin:auto;
	top:380px;
	width:155px;
}
/*�T�u���j���[*/
.main_menu li ul{
	display: none;
	position: absolute;
	margin:0px;
	padding:10px 0 0 0; 
	text-align:center;
}
.main_menu li:hover ul{
	display: block;
	background-color:#fff80;
}
.main_menu a:hover{
	opacity:0.8;
}
.main_menu li{
	position: relative; 
}
.submenu li a {
   background-color:#4b5c76; 
   color: #000000;  
   line-height: 40px; 
   text-decoration: none;  
   font-weight: bold;        
   display: block;        
}

/* ======================================================
               main
====================================================== */
#main{
	padding:30px 0 30px 0;
	margin:0 auto;
	width:100vw;
	text-align:center;
}

#main_menu{
	text-align:center;
}

#main_menu ul{
	list-style:none;

}

#main_menu ul li{
	display:inline-block;
	padding:0 10px 0 10px;
	border-left:solid 1px #4b5c76;
}

#main_menu ul li:first-child{
	border:none;
}

#main_menu ul li a{
	text-decoration:none;
	color:#4b5c76;
	font-size:20px;
}

#main_menu ul li a:hover{
	opacity:0.5;
	border-bottom:solid 1px #fff;
}



#content{
	/*width:50vw;*/
	width:100vw;
	margin:0 auto;
}

.title_sub2 {
	color:#4b5c76;
	font-size:35px;
	text-align:center;
	border-bottom:solid 2px #4b5c76;
	width:300px;
	padding:20px 0 10px 0;
	margin:0 auto;
	font-family:serif;
	font-weight:bold;
}

.content_titlem{
	font-size:30px;
	padding:20px;
	font-family:serif;
	font-weight:bold;
	text-align:center;
}

.content_r{
	padding:10px 50px 10px 50px;
	text-align:center;
}
.content_m{
	padding:10px 50px 10px 50px;
	text-align:center;
	
}


/*#companyprofile table{
	padding:40px 0 10px 0;
	margin:0 auto;
}

#companyprofile table th{
	background:#4b5c76;
	color:#fff;
	padding:20px 30px 20px 30px;
	letter-spacing:0.3em;
}

#companyprofile table td{
	background:#f0f0f0;	
	padding:20px 100px 20px 30px;
}



#companyprofile table td a:hover{
	opacity:0.5;
}

*/

#libertylife_map{
	text-align:center;
	padding-top:25px;
}

/*↓↓表スタイルここから↓↓*/

/* 全体の余白とテーブルのスタイル */

.container{
    /*display: flex; フレックスボックスで中央寄せ */
    justify-content: center; /* 横方向の中央寄せ */
    align-items: center; /* 縦方向の中央寄せ（必要なら） */
    min-height: 100vh; /* 高さを100%にして中央配置を維持 */
    padding: 20px; /* 画面サイズが小さい時のための余白 */
    box-sizing: border-box; /* パディングが幅に影響しないように */

}

.company-table {
    width: 90%; /* または具体的な幅: 800pxなど */
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box; /* パディングが幅に影響しないようにする */
  }
  
  
  /* セルの基本スタイル */
  .company-table th, .company-table td {
    /*padding: 15px 20px;*/
    border-bottom: 1px solid #eaeaea;
    text-align: left;
    font-size: 16px;
    box-sizing: border-box;
    padding: 15px; /* 過剰なpaddingを避ける */
    word-wrap: break-word; /* 長い文字列は折り返す */
  }
  
  /* ヘッダーセルの背景色 */
  .company-table th {
    background-color: #f7f7f7;
    font-weight: bold;
    width: 30%;
  }
  
  /* 最後の行のボーダーを非表示 */
  .company-table tr:last-child td {
    border-bottom: none;
  }

  @media screen and (min-width: 769px) { /* PC用 */
    .company-table {
      width: 80%; /* PCでは80%幅 */
      max-width: 1000px; /* 最大幅を1000pxに設定 */
    }

    .company-table th {
        width: 20%;
        text-align: center;
    }

  }
  
  @media screen and (max-width: 768px) { /* スマホ用 */
    .company-table {
      width: 100%; /* スマホでは100%幅 */
    }
  }
  
  
  /* スマホ向け縦並びレイアウト */
  @media screen and (max-width: 768px) {
    .company-table {
      display: block;
      /* margin: 10px; スマホ画面時に周囲に余白 */
    }
  
    .company-table tbody tr {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #eaeaea;
    }
  
    .company-table th {
      width: 100%; /* 縦並びにする */
      /*background-color: transparent;*/
      border-bottom: none;
      /*font-weight: normal;*/
      color: #555;
    }
  
    .company-table td {
      width: 100%; /* 内容部分も縦に並べる */
      text-align: left;
      /*padding: 10px 0;*/
    }
  
    .company-table tr:last-child {
      border-bottom: none;
    }
  }
  
  

@media screen and (min-width: 768px) {
#main_image{
	height:auto;
 }
.main_table{
	width:60vw;
 }
.main_table td{
	padding:10px;
 }
}
@media screen and (max-width: 480px){
#main_image{
	height:auto;
}
.main_table th{
	font-size:18px;
	width:initial;
 }
.main_table{
	width:90vw;
 }
.main_table td{
	padding:10px;
 }
}