/*
Theme Name: DogSupport
Author: CEC Niigata Information Center
Author URI: https://www.cec-nis.co.jp/
Description: test
Version: 1.0
*/

.margin2em {
	margin-top: 2em;
  }
  /*お知らせ*/
  .news_box {
	display: flex;
	text-align: left;
	/*font-family: "Noto Serif CJK JP", "Noto Serif JP", serif;*/
	font-weight: 500;
	border-bottom: solid 1px #999999;
	/*margin-bottom: 2em;*/
  }
  
  .list_category {
	padding: 15px 0px 15px 0px;
	/*display: flex;*/
	/*font-family: "Noto Serif CJK JP", "Noto Serif JP", serif;*/
	font-size: 12px;
	pointer-events: none;
	margin-right: 10px;
  }
  .list_category a {
	color: #333;
	border: 1px solid #29926F;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 25px;
	margin-right: 10px;
	margin-left: 15px;
	font-size: 12px;
  }
  .news_list {
	display: flex;
  }
  .list_time {
	padding: 15px 10px 15px 10px;
	text-align: center;
	font-weight: 200;
	align-items: center;
	border-bottom: solid 2px #95b659;
  }
  .list_title {
	padding: 15px 10px 15px 10px;
	text-align: left;
	font-weight: 500;
	align-items: center;
  }
  
  /*不具合情報*/
  .listbox .ctg_icon01 {
	margin-left: 10px;
	background: #fff;
  }
  .listbox {
	line-height: 1.6;
	margin-bottom: 2em;
  }
  .ctg_icon01 {
	color: #fff;
	display: inline-block;
	color: #46cbf6;
	border: 1px solid #46cbf6;
	z-index: 3;
	border-radius: 2px;
	font-weight: bold;
	font-size: 10px;
	/*font-size: 1rem;*/
	background: rgba(70, 203, 246, 0.1);
	padding: 0 7px;
  }
  
  .listbox li div {
	padding-top: 5px;
	font-size: 12px;
	/*font-size: 1.8rem;*/
  }
  
  .listbox li {
	margin: 15px 0;
  }
  .listbox a {
	color: #333;
	padding: 20px;
  }
  
  .listbox a {
	display: block;
	text-decoration: none;
	color: #333;
	background: rgba(70, 203, 246, 0.1);
  }
  .listbox a:hover {
	background: rgba(70, 203, 246, 0.3);
  }
  
  
  /*
  新規にラベルの作成
  メニュー用のボタン
  */
  
  .headpanel {
	margin-bottom: 1em;
  }
  
  #supportmain h2 {
	color: #9f9fa0;
	font-size: 24px;
  }
  
  h2 {
	position: relative;
	padding: .5rem 2rem;
	text-align: center;
	color: #22ac38;
	border-radius: 10px 10px 10px 10px;
	border: olivedrab 1px solid;
	background: #e3f5d8;
  }
  
  /*botann*/
  /*
  https://jajaaan.co.jp/css/button/
  */
  
  #rightmenu {
	font-size: 18px;
  }
  #rightmenu span {
	font-size: 12px;
  }
  
  .btn--orange,
  a.btn--orange {
	color: #fff;
	width: 100%;
	background-color: #ee5f74;
	border-radius: 5px;
	border: #c93a4f 1px solid;
  }
  .btn--orange:hover,
  a.btn--orange:hover {
	color: #fff;
	background: #ff9999;
  }
  
  .fa-position-left {
	position: absolute;
	top: calc(50% - .5em);
	left: 1rem;
  }
  
  .btn--blue,
  a.btn--blue {
	color: #fff;
	width: 100%;
	background-color: #ee5f74;
	border-radius: 5px;
	border: #c93a4f 1px solid;
  }
  .btn--blue:hover,
  a.btn--blue:hover {
	color: #fff;
	background: #ff9999;
  }
  
  .btn--green,
  a.btn--green {
	color: #fff;
	width: 100%;
	background-color: #92cf3b;
	border-radius: 5px;
	border: #7cc01a 1px solid;
  }
  .btn--green:hover,
  a.btn--green:hover {
	color: #fff;
	background: #ade063;
  }
  
  .btn {
	margin-bottom: 12px;
  }
  
  .panel-green {
	border-color: #7cc01a;
  }
  .panel-green > .panel-heading {
	color: #fff;
	background-color: #92cf3b;
  }
  
  
  .panel-orange {
	border-color: #c93a4f;
  }
  .panel-orange > .panel-heading {
	color: #fff;
	background-color: #ee5f74;
  }
  
  .btn span {
	font-size:11px;
  }
  
  
  /*
  FAQ
  リクルートのものと同じ
  */
  .qa_fld {
	width: 90%;
	margin: auto;
  }
  .qa_fld dl {
	padding: 0 20px;
  }
  .qa_fld dt {
	font-weight: bold;
	padding: 8px;
		padding-left: 8px;
	padding-left: 45px;
	border-top: 1px solid #337ab7;
	text-indent: -4.2em;
  }
  .qa_fld dt:before {
	content: "Q.";
	margin-right: 8px;
  }
  
  .qa_fld dd {
	padding: 16px 16px 24px 45px;
	margin: 0;
	line-height: 140%;
	text-indent: -4.2em;
  }
  .qa_fld dd::before {
	content: "A.";
	margin-right: 8px;
  }
  .qa_fld dd:first-letter,
  .qa_fld dt:first-letter{
	font-size: 1.6em;
	font-weight: bold;
	/*margin-right:10px;*/
	margin-left: 30px;
	padding:5px;
	font-family: 'Nunito', sans-serif;
  }
  .qa_fld dt:first-letter{
	color: #0F78E1;
  }
  .qa_fld dd:first-letter{
	color: #ff6767;
  }
  
  .boxheader {
	display: block;
	padding: 10px;
	position: relative;
	background-color: #fffcf0;
	border-radius: 5px;
	border: #46cbf6 1px solid;
	margin-bottom: 0.4em;
  }
  .boxheader > .box-tools {
	position: absolute;
	right: 10px;
	top: 2px;
	background-color: #fffcf0;
	height: 35px;
	width: 35px;
	/*display: block;*/
  }
  
  .box-tools a {
	display: block;
	padding:10px;
  }
  /*
  a {
	color: #52d3aa;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
  }
  a:hover {
	text-decoration: underline !important;
	color: #52d3aa !important;
  }
  a:focus, a:active {
	outline: none;
  }
  
  p {
	margin-bottom: 1.5em;
	font-size: 20px;
	color: #848484;
	font-weight: 300;
	font-family: "Roboto", Arial, sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
	color: #000;
	font-family: "Roboto Slab", Arial, sans-serif;
	font-weight: 400;
	margin: 0 0 30px 0;
  }
  
  ::-webkit-selection {
	color: #fcfcfc;
	background: #52d3aa;
  }
  
  ::-moz-selection {
	color: #fcfcfc;
	background: #52d3aa;
  }
  
  ::selection {
	color: #fcfcfc;
	background: #52d3aa;
  }
  
  .box-wrap {
	background: #fff;
	max-width: 1300px;
	margin: 0 auto;
  }
  */
  
  #dogsp-header {
	/*padding-top: 70px;*/
	padding-bottom: 0;
	/*margin-bottom: 80px;*/
	/*background-color: rgb(134, 138, 136);*/
  }
  
  .submain {
	margin: 0;
	padding: 0;
	background-color: #d6effe;
  }
  
  #dogsp-header li {
	/*background-color: navajowhite;*/
	padding: 1em 0 1em 0;
  }
  
  @media screen and (max-width: 992px) {
	#dogsp-header {
	  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	  /*padding-bottom: 80px;*/
	}
  }
  #dogsp-header .navbar-default {
	border: transparent;
	/*background: #fff;*/
	background-color: #d6effe;
  }
  #dogsp-header .navbar {
	padding: 0;
	margin: 0;
  }
  #dogsp-header .dogsp-navbar-brand {
	width: 100%;
	margin: 0;
  }
  #dogsp-header .dogsp-navbar-brand .dogsp-logo {
	width: 52px;
	height: 30px;
	padding: 0;
	font-size: 18px;
  }
  @media screen and (max-width: 992px) {
	#dogsp-header .dogsp-navbar-brand {
	  text-align: center;
	  margin-bottom: 40px;
	}
  }
  #dogsp-header .nav {
	width: 100%;
  }
  #dogsp-header .nav li {
	font-size: 20px;
	display: inline-block;
	margin-left: 50px;
  }
  @media screen and (max-width: 480px) {
	#dogsp-header .nav li {
	  width: 100%;
	  margin-left: 0;
	}
  }
  #dogsp-header .nav li:first-child {
	margin-left: 0;
  }
  #dogsp-header .nav li a {
	font-family: "Roboto Slab", Arial, sans-serif;
	color: black;
	position: relative;
	font-weight: 400;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	padding: 0;
  }
  #dogsp-header .nav li a:hover, #dogsp-header .nav li a:focus {
	color: gray !important;
	background: transparent;
	text-decoration: none !important;
  }
  @media screen and (max-width: 480px) {
	#dogsp-header .nav li a {
	  padding: 10px 0;
	}
  }
  #dogsp-header .nav li.active a {
	color: #000;
	background: transparent;
	border-bottom: 2px solid #52d3aa;
  }
  @media screen and (max-width: 992px) {
	#dogsp-header .nav li.active a {
	  color: #000;
	}
  }
  /*480->600*/
  @media screen and (max-width: 480px) {
	#dogsp-header .nav li.active a {
	  border-bottom: 2px solid transparent;
	  color: #52d3aa;
	}
  }
  @media screen and (max-width: 992px) {
	#dogsp-header .nav {
	  /*margin-bottom: 40px;*/
	}
  }
  
  
  #work .dogsp-grid {
	height: 625px;
	background-size: cover;
	margin-bottom: 30px;
	position: relative;
  }
  @media screen and (max-width: 480px) {
	#work .dogsp-grid {
	  height: 400px;
	}
  }
  #work .dogsp-grid .image-popup {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background: rgba(255, 255, 255, 0.9);
	opacity: 0;
  }
  #work .dogsp-grid .image-popup .work-title {
	position: absolute;
	top: 50%;
	bottom: 20px;
	left: 20px;
	right: 20px;
	margin-top: -25px;
  }
  #work .dogsp-grid .image-popup .work-title span {
	color: gray;
	letter-spacing: 2px;
	font-size: 12px;
	text-transform: uppercase;
  }
  #work .dogsp-grid .image-popup .work-title h3 {
	margin-bottom: 10px;
  }
  
  #work .dogsp-grid:hover .image-popup {
	opacity: 1;
  }