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

body{
	background: #b8b8b8;
	margin: 0;
}
#menu li {
    display: inline-block;
}
#menu li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 15px;
}
#container{
	background-image: url("../img/ca_back.png");
	 background-repeat: repeat;
}
.caslogo{
	position: absolute;
	right: 20px;
	top: 0px;
	width: 80px;
}
h2{
	margin-top: 50px;
	text-align: center;
	  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #ffffff;
  font-size: 30px;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
  font-weight: bold;
	padding: 50px;
}
.accordion {
margin: 3em auto;
max-width: 60vw;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
box-shadow: 2px 2px 2px 2px rgb(0, 0, 0);
  transform: translateY(2px);
	
padding: 1em;
display: block;
color: #FFFFFFF;
font-weight: bold;
	font-size: 1.2rem;
}
.title span{
	font-size: 0.9rem;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
bottom: 1.25em;
width: 2px;
height: 0.75em;
background-color: #FFFFFF;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
	    margin-top: 25px;
    text-align: left;
    padding-left: 20px;
    font-size: 1.3rem;
    font-weight: 800;
	
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
	
	margin-bottom: 10px;
	  background-image: linear-gradient(to right bottom,#000000 40%,#595959 90%);
}
.content span{
	font-size: 0.7rem;
	position: absolute;
	right: 15px;
	margin-top: 10px;
}

.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}
.foot{
	background-image: url("../img/bg02.png");
	background-size: auto;
	height: 200px;
}
@media screen and (max-width:900px){
	
	table td{
		border: 1px solid #E9E9E9;
    padding: 1%;
	}
	table{
		    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
		margin-bottom: 50px;
		font-size: 0.6rem;
	}
	.nouki_title{
		text-align: center;
		font-size: 1.3rem;
		font-weight: 800;
		margin-bottom: 50px;
		padding-top: 61px;
	}
	
	.nouki1{
		
	text-align: center;
	}
	.nouki2{
		
	text-align: center;
	}
	.nouki3{
		
	text-align: center;
	}
	.nouki4{
		
	text-align: center;
	}
	
	.toggle:checked + .title + .content {
    max-height: 730px;
transition: all 1.5s;
}
	
	#menu{
		display: none;
	}
	.im img{
		width: 80%;
		position: absolute;
		right: 0.5%;
		top:1vh;
		opacity: 0.5;
		z-index: 1!important;
	}
	h2{
		z-index: 40!important;
		position: relative;
		top: 6vh;
	}
	.cate1{
		padding: 1rem;
		 box-shadow: 5px 5px 5px 5px rgb(0, 0, 0);
  transform: translateY(5px);
	}
	.ca_right{
		margin-top: -10vh;
		padding-bottom: 2vh;
	}
	.ca_left{
		padding-top: 2vh;
	}
	.foot{
	background-size: cover!important;	
	}
	#footer{
		left: 10px!important;
		top:5px!important;
		z-index: 52!important;
	}
	#footer img{
		width: 150px;
		z-index: 100!important;
		position: relative;
	}
	#header{
		background: #000000;
		height: 50px;
		width: 100%;
		position: fixed;
		top:0px;
		z-index: 51!important;
	}
	
	/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  height: 80px;
  width: 80px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99999;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 30px;
  border-radius: 3px;
  background: white;
  transition: 0.5s;
  position: fixed;
	right: 15px;
	top: 25px;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  top: 15px;
	
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 35px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  top: 30px;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 30px;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: black;
  transition: .5s;
	line-height: 53px;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
    margin-top: 11vh;
    text-align: center;
    padding: 0;
	line-height: 43px;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}

	
}

@media screen and (min-width:900px){
	table td{
		border: 1px solid #E9E9E9;
    padding: 8px;
	}
	table{
		    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
		margin-bottom: 50px;
	}
	.nouki_title{
		text-align: center;
		font-size: 1.3rem;
		font-weight: 800;
		margin-bottom: 50px;
	}
	
	.nouki1{
		
	text-align: center;
	}
	.nouki2{
		
	text-align: center;
	}
	.nouki3{
		
	text-align: center;
	}
	.nouki4{
		
	text-align: center;
	}
	
	.toggle:checked + .title + .content {
max-height:321px;
transition: all 1.5s;
		overflow-y: auto;
}
	
	.content::-webkit-scrollbar{
   width: 10px;
}
.content::-webkit-scrollbar-track{
   background-color: #000000;
}
.content::-webkit-scrollbar-thumb{
   background-color: #014181;
}
	
	#container{
		padding-top: 14vh;
	}
	.cate1{
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
		height:600px;
	}
	.ca_left{
		width: 450px;
		float: left;
	}
	.ca_left img{
		 box-shadow: 5px 5px 5px 5px rgb(0, 0, 0);
  transform: translateY(5px);
	}
	.ca_right{
		width: 450px;
		height: 450px;
		float: right;
		text-align: center;
	}
	header{
		background: #000000;
		 position: fixed;
		top:0px;
		width: 100%;
		z-index: 55!important;
	}
	.im img{
		position:absolute;
		right: 55px;
		top: 105px;
	}
	#footer img{
		width: 150px;
		
	}
	.pc_none{
		display: none;
	}
}