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

p {
  margin-top: 0;
  margin-bottom: 0;
}

a {
  color: rgba(90,90,90,1.00);
  text-decoration: none;
  background-color: transparent;
}

a:hover {
    color: rgba(90,90,90,0.5);
	text-decoration: none;
}

a:not([href]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):hover {
  color: inherit;
  text-decoration: none;
}


.top-illust-wrap{
	background-color: #F5F5F5;
	text-align: center;
}

.wap-main{
	background-color: #F5F5F5;
	margin-top: -60px;
	padding-bottom: 50px;
}


.top-illust{
	max-width: 980px;
}





.touka img:hover {
	position: relative;
	bottom: 3px;
}



.navbar-or{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 50px;
    padding: 0 1em;
	background-color: burlywood;
}


.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #fff;
  border-color: #D6D8DB;
}


.Toggle {
    /*display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    /*width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
    right:15px;
}

.Toggle span {
    display: block;
    position: absolute;
    width: 50px;
    border-bottom: solid 4px #333;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
}

.Toggle span:nth-child(1) {
    top:5px;
}
 .Toggle span:nth-child(2) {
    top: 18px;
}
 .Toggle span:nth-child(3) {
    top: 32px;
}
.Toggle.active span:nth-child(1) {
    top: 18px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}




.caption {
	font-size: 11px;
	margin-top: 5px;
	color: #616161;
}




/*トップへ戻るボタン*/
#page_top{
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-bottom: 15px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #353535;
  opacity: 0.8;
  border-radius: 50%;
  z-index: 5;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 30px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -20px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*トップへ戻るボタン*/



#header{
/*	background-color: #F2F0F0;*/
	background-color: #F5F5F5;
/*	padding-bottom: 30px;*/
	padding-top: 15px;
	margin-top: -25px;

}


.about-title{
    color: rgba(90,90,90,1.00);
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	margin-top: 80px;
	margin-bottom: 0px;
	
}

.contact{
  font-size: 17px;
  color: #A5A5A5;	
  width: 190px;
  height: 34px;
  padding-top: 5px; 
  background: #ffffff;
  border: solid 1px #A5A5A5;	
  border-radius: 5px;
  margin-bottom: 20px;	
  z-index: 2;
}
	

.container{
	max-width:980px;
}


.work{
	margin-bottom: 5px;
	margin-top: 0px;
}


.panel-heading {
	background-color: #DA474A;
}



.sidebar_fixed {
	 position: sticky;
}

.list-group{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  /*flex-direction: column;*/
  flex-direction: column;	
  padding-left: 0;
  margin-bottom: 0;

}



/*-----------------------------------------------------*/ 
/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

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

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: rgb(70, 70, 70);
  transition: 0.5s;
  position: absolute;
}

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

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

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

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

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}


/* メニューのデザイン*/
.nav_content {
  width: 100%;
  position: absolute;
  top:3%;
  /*left: -100%;  メニューを画面の外に飛ばす */
  /*left: 100%;  メニューを画面の外に飛ばす */
  left: -100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
    list-style: none;
	font-size: 14px;
	font-weight: 300;
	text-align: right;
	width: 100%;
	background-color: rgba(255,255,255,0.7);
/*	background-color: rgba(200,200,200,1.00);*/
	color: rgb(70, 70, 70);
	padding-top: 10px;
	padding-bottom: 20px;
	margin-top: 76px;
}

.nav_item{
  padding-right: 30px;
  /*padding-top: 20px;*/
  padding-top: 10px;
}


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

/*参照　https://web-camp.io/magazine/archives/88361*/
/*ここまでハンバーガーメニュー*/
/*-----------------------------------------------------*/ 



.logo{
/*	width: 180px;*/
	text-align: left;
}


.type{
    color: rgba(90,90,90,1.00);
	padding-top: 5px;
	padding-bottom: 8px;
	hight: 24px;
	font-size: 24px;
	font-weight: 600;
	border-top: solid 3px rgba(90,90,90,0.5);
	border-bottom: solid 3px rgba(90,90,90,0.5);
	text-align: center;
	margin-bottom: 10px;
}


.footer-line{
	height: 50px;
	background-color: gray;
	color: #ffffff;
	padding-top: 14px;
	margin-top: 50px;
}


@media screen and (min-width: 560px){
   #about{
	   width: 500px;
	   margin-left: auto;
	   margin-right: auto;
	   
       }
	}


.text-justify{
	text-align: justify;
}



	
#type-A {
	margin-top: 100px;
}

#ad {
	margin-bottom: 100px;

}

#logo {
		margin-top: 100px;
}

#web {
		margin-top: 100px;
}