@charset "utf-8";

/* ---------------------------------------- 
 - mainTitle 
---------------------------------------- */
#mainTitle{
	position:relative;
    background: url(../images/common/bg_pattern.png);
}
#mainTitle .mainTitle-inner {
	position:relative;
	width:86%;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	padding: 75px 0 0;
}
#mainTitle .lead {
    font-size: 3.6rem;
	font-weight: bold;
	margin-bottom: 30px;
}
#mainTitle .lead .marker {
    background: linear-gradient(transparent 75%, #f7d60f 75%);
}
#mainTitle .visual {
	position:relative;
	width:100%;
	max-width: 382px;
	margin: 0 auto;
	text-align: center;
}
@media screen and (max-width: 768px) {
	#mainTitle .mainTitle-inner {
		padding-top: 40px;
	}
	#mainTitle .lead {
		font-size: clamp(2.4rem, 6.4vw, 3.6rem);
		margin-bottom: 15px;
	}
}

/* ---------------------------------------- 
 - question-box 
---------------------------------------- */
.question-box{
	position:relative;
}
.question-box:nth-child(n+2):nth-child(odd) {
  background-color: #edf2f4;
}
.question-box .question-box-inner {
	position:relative;
	width:86%;
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	padding: 75px 0 100px;
}
.question-box .ttl {
    font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 35px;
}
.question-box .ttl > .underline {
	border-bottom: solid 2px #d90429;
}
.question-box .catch {
    font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 35px;
}
.question-box .visual {
	width: 100%;
	max-width: 600px;
	margin: 0 auto 50px;
}
.question-box .visual img {
	border:solid 1px #272a44;
}
.question-box .btn-box {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}
.question-box .btn-box .btn {
	margin-bottom: 20px;
}
.question-box .btn-box .btn:last-child {
	margin-bottom: 0;
}
.question-box .btn-box .btn a {
	display: block;
	background: #272a44;
	font-size: 2.0rem;
	font-weight: bold;
	color:#fff;
	text-decoration: none;
    transition: opacity .3s;
	padding: 0.25em;
}
.question-box .btn-box .btn a:hover{
	opacity: 0.6;
}
/* anewer-box */
.anewer-box {
	margin: 60px auto 0;
}
.anewer-ttl {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 25px;
}
.anewer-ttl span{
	position: relative;
	padding: 0 0.7em;
}
.anewer-ttl span::before,
.anewer-ttl span::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 1px;
    height: 20px;
    background: #d90429;
}
.anewer-ttl span::before {
    left: 0;
	transform: rotate(-20deg);
}
.anewer-ttl span::after {
    right: 0.1em;
	transform: rotate(20deg);
}
.anewer-catch {
    font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 30px;
}
.anewer-catch .name {
    font-size: 2.0rem;
}
.anewer-catch .name span {
    font-size: 1.6rem;
}
.anewer-lead {
	margin-bottom: 60px;
	text-align: left;
}
.anewer-lead .text {
	line-height: 1.6;
}
.anewer-lead .text .markar {
	background: #f7d60f;
	box-shadow: inset 0 .2em 0 #fff, inset 0 -.2em 0 #fff;
}
.question-box:nth-child(n+2):nth-child(odd) .anewer-lead .text .markar {
	background: #f7d60f;
	box-shadow: inset 0 .2em 0 #edf2f4, inset 0 -.2em 0 #edf2f4;
}
.anewer-lead .clamp {
	overflow: hidden;
	max-height: calc(1.6em * 3); /* line-height × 行数 */
}
@supports (-webkit-line-clamp: 3) {
  .anewer-lead .clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: none;
  }
}
.anewer-lead .toggle-btn {
	display: block;
	background: #272a44;
	border: none;
	color: #0066cc;
	cursor: pointer;
	padding: 0.25em;
	font-size: 2.0rem;
	font-weight: bold;
	color:#fff;
	transition: opacity .3s;
	width: 100%;
	margin-top: 30px;
}
.anewer-lead .toggle-btn:hover {
	opacity: 0.6;
	text-decoration: none;
}
.anewer-lead .toggle-btn span {
	position: relative;
	padding-left: 28px;
}
.anewer-lead .toggle-btn span::before{
	position: absolute;
    top: 50%;
    left: 0;
    margin: auto;
    margin-top: -5px;
    content: "";
    vertical-align: middle;
    box-sizing: border-box;
    border: 10px solid transparent;
    border-left: 16px solid #fff;
    transform: rotate(90deg);
}
.anewer-lead .toggle-btn.is-open span::before{
    transform: rotate(-90deg);
    margin-top: -14px;
}
@media screen and (max-width: 768px) {
	.question-box .question-box-inner {
		padding: 40px 0 60px;
	}
	.question-box .ttl {
		font-size: clamp(1.6rem, 5.8vw, 2.4rem);
		margin-bottom: 20px;
	}
	.question-box .catch {
		font-size: clamp(2.2rem, 6.4vw, 2.8rem);
		margin-bottom: 20px;
	}
	.question-box .visual {
		margin-bottom: 20px;
	}
	.question-box .visual-box {
		margin-bottom: 20px;
	}
	.question-box .visual-box .visual {
		margin-bottom: 20px;
	}	
	.question-box .btn-box .btn {
		margin-bottom: 15px;
	}
	.question-box .btn-box .btn a {
		font-size: clamp(1.6rem, 4vw, 2.0rem);
	}
	/* anewer-box */
	.anewer-box {
		margin-top: 40px;
	}
	.anewer-ttl {
		font-size: clamp(1.6rem, 5.8vw, 2.4rem);
		margin-bottom: 15px;
	}
	.anewer-ttl span::before,
	.anewer-ttl span::after {
		height: 18px;
	}
	.anewer-catch {
		font-size: clamp(1.6rem, 5.8vw, 2.4rem);
		margin-bottom: 20px;
	}
	.anewer-catch .name {
		font-size: clamp(1.6rem, 4.8vw, 2.0rem);
	}
	.anewer-catch .name span {
		font-size: clamp(1.5rem, 4vw, 1.6rem);
	}
	.anewer-lead {
		margin-bottom: 35px;
	}
	.anewer-lead .toggle-btn {
		font-size: clamp(1.6rem, 4vw, 2.0rem);
		margin-top: 20px;
	}
	.anewer-lead .toggle-btn span::before{
		margin-top: -3px;
		border: 8px solid transparent;
		border-left: 13px solid #fff;
	}
	.anewer-lead .toggle-btn.is-open span::before{
		margin-top: -11px;
	}
}