@charset "utf-8";
/* Scss Document */
@import "../css/common.css";
@import "../css/header.css";

#mainimage{
	color:#fff;
	padding: 2rem 0 6rem;
	position: relative;
	margin-bottom: 2rem;
	margin-top: 3rem;
}

#qa,#work{
	background: #f7f7f7;
	padding-bottom: 2rem;
}

#qa #mainimage{
	background: url(../img/qa/main.jpg) no-repeat center top;
}

#work #mainimage{
	background: url(../img/work/main.jpg) no-repeat center top;
}

.main-title{
	position: absolute;
	left: 0;
	right:0;
	top:0;
	bottom:0;
	margin: auto;
	padding: 4rem 0;
	width:80%;
	}

@media screen and (min-width: 769px){
	#qa #mainimage,#work #mainimage{
		height:300px;
	background-size: cover;
}
}

@media screen and (max-width: 768px){
#qa #mainimage,#work #mainimage{
	height:300px;
	background-size: auto 100%;
}
}

#q{
	max-width:1200px;
	width:90%;
	margin: auto;
}


#q dt {
  position: relative;
  padding: 0.6em 0.6rem 0.6rem 1.5rem;
  background: #c70079;
	color:#fff;
}

#q dt:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 5px solid transparent;
border-top: 10px solid #c70079;
width: 0;
height: 0;
}
#q dt p{
	text-indent: -1.2rem;
	padding-left: 1rem;
}

#q dt p:before{
	content:"Q.";
	font-weight:bold;
	padding-right: .5rem;
	vertical-align: middle;
	font-size:1.1rem;
}

#q dd{
	background: #fff;
	margin-bottom: 2rem;
	padding: 20px 0.6rem 0.6rem 1.5rem;
	font-size:.8rem;
}

#q dd p{
	text-indent: -1.2rem;
	padding-left: 1rem;
}

#q dd p:before{
	content: "A";
	font-weight:bold;
	padding-right: .5rem;
	vertical-align: middle;
	font-size:1.1rem;
	color:#bfbfbf;
}

#q dd a{
	color:#212121;
	text-decoration: underline;
}

#q dd a:before{
	font-family: "Font Awesome 5 Free";
	content: '\f061';
	font-weight: bold;
	padding-right: 0.5rem;
}


/*work*/

@media screen and (min-width: 769px) {
  .work-inner {
    display: table;
    margin-bottom: 1.5rem;
	width: 100%;}

  .work-inner img {
    vertical-align: middle; }

  .work-inner dt, .work-inner dd {
    display: table-cell;
    vertical-align: middle; }

  .work-inner dd {
    background: #fff; }
	
	.work-info{
		display: table;
	}
	
	.work-info li{
		display: table-cell;
		vertical-align: middle;
	} 

  .work-photo {
    width: 220px;
    padding-right: 1rem; }

  .work-name {
    width: 6rem;
    text-align: center;
	border-right: 2px solid #c70079;
	font-size:bold;}

  .work-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem; } }

@media screen and (max-width: 768px) {
	.work-inner {
		margin-bottom: 2rem;
	}
	.work-photo {
    width: 40%;
		margin: auto;
	max-width: 220px;
    text-align: center;}
.work-inner dd {
    background: #fff;
	padding: 1rem;}
	
.work-name{
  position: relative;
  margin-bottom: 1em;
	text-align: center;
	font-weight:bold;
	font-size:1.1rem;
}

/*以下で線を表示*/
.work-name:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 2px;/*線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #c70079;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}
	
}