/* --------------------------------------------------
 * html
-------------------------------------------------- */
html {
	scroll-behavior: smooth;
}
body {
	background: #fff;
}
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0;
}
p {
	margin: 0;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}
dl, ol, ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
dd {
	margin-bottom: 0;
}
address {
	margin: 0;
}
/* --------------------------------------------------
 * 全機種共通
-------------------------------------------------- */
.header {
	max-width: 640px;
	margin: 0 auto;
	background: #0c1161;
}
.header h1 {
	padding: 10px 0;
	font-size: 14px;
	font-weight: normal;
	color: #fff;
	text-align: center;
}
.main {
	margin: 0 auto;
	background: #a1dbdc url(../img/contents-bg.png) repeat;
}
.section {
	position: relative;
}

.qanda {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fbc2eb+0,a6c1ee+100 */
	background-image: -moz-linear-gradient(-80deg,  rgba(251,194,235,.5) 0%, rgba(166,193,238,.5) 25%, rgba(251,194,235,.5) 50%, rgba(166,193,238,.5) 100%); /* FF3.6-15 */
	background-image: -webkit-linear-gradient(-80deg,  rgba(251,194,235,.5) 0%,rgba(166,193,238,.5) 25%, rgba(251,194,235,.5) 50%,rgba(166,193,238,.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background-image: linear-gradient(170deg,  rgba(251,194,235,.5) 0%,rgba(166,193,238,.5) 25%, rgba(251,194,235,.5) 50%,rgba(166,193,238,.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.qa-separate {
	display: block;
	height: 4px;
	margin: 0;
	padding: 0;
	border: none;
	border-top: #cfa245 2px solid;
	border-bottom: #cfa245 2px solid;
	background: #016d90;
}
.qa-content li {
	padding: 5% 2.5%;
}
.qa-content li+li {
	margin-top: 2.5%;
}
.qa-content li:nth-child(odd) {
	background: rgba(255,255,255,.2);
}
.qa-content dl {
	width: 100%;
}
.answer {
	margin-top: 5%;
}
.qa-content dd {
	position: relative;
	width: 100%;
}
.qa-content dd:before {
	display: block;
	width: 100%;
	height: 24px;
	line-height: 24px;
	color: #0c1161;
	font-size: 20px;
}
.qa-content dd p {
	display: inline-block;
	position: relative;
	width: 86%;
	padding: 1em;
	text-align: left;
}
.qa-content dd p:before {
	margin-right: 8px;
	font-size: 1.25em;
}
.qa-content dd p:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 3px;
}
.question dt, .answer dd {
	float: left;
}
.question dd, .answer dt {
	float: right;
}
.question dd:before {
	padding-left: 7%;
	content: "Question";
}
.question dd p {
	float: right;
	margin-right: 7.5%;
	background: #bcf6f5;
	color: #0c1161;
	box-shadow: 1px 1px 0px 1px #cfa245;
}
.question dd p:before {
	color: #af1c6c;
	content: "Q.";
}
.question dd p:after {
	left: -19px;
	border: 8px solid transparent;
	border-right: 18px solid #bcf6f5;
	-webkit-transform: rotate(35deg);
	transform: rotate(35deg);
}
.answer dd:before {
	padding-right: 7%;
	text-align: right;
	content: "Answer";
}
.answer dd p {
	margin-left: 7.5%;
	background: #016d90;
	color: #fff;
	box-shadow: -1px 1px 0px 1px #cfa245;
}
.answer dd p:before {
	color: #0c1161;
	content: "A.";
}
.answer dd p:after {
	right: -19px;
	border: 8px solid transparent;
	border-right: 18px solid #016d90;
	-webkit-transform: rotate(145deg);
	transform: rotate(145deg);
}

.staff {
	padding-bottom: 30px;
	background: url(../img/staff-bg.png) repeat;
	color: #02173d;
}
.staff-title {
	background: #0c1161;
	text-align: center;
}
.staff-interview-contents {
	display: flex;
	flex-wrap: wrap;
}
.staff-interview-contents li {
	float: left;
	width: 100%;
	padding: 20px 10px;
}
.staff-interview-contents dt {
	margin-bottom: 0.75em;
}

.float-nav {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	z-index: 10;
	margin-top: -80px;
}
@keyframes navi {
	0%   {transform: translateY(100%);opacity: 0;}
	66%  {transform: translateY(100%);opacity: 0;}
	100% {transform: translateY(0);opacity: 1;}
}
.float-btn {
	border-top: #5383c3 2px solid;
	border-right: #5383c3 1px solid;
	background: rgba(255,255,255,.75);
	font-size: 0;
	animation: navi 3s ease 0s 1 normal;
}
.float-btn>li {
	width: calc((100% - 3px) / 3);
	display: inline-block;
	border-left: #5383c3 1px solid;
	box-sizing: content-box;
	font-size: 14px;
	text-align: center;
}
.float-btn a {
	display: block;
}
.float-btn img {
	max-width: 80%
}
.float-back {
	min-height: 70px;
	animation: navi 4s ease -1s 1 normal;
}
.float-back>li {
	float: right;
	width: 70px;
	margin: 0 10px 10px;
	border: #5383c3 1px solid;
	border-radius: 50%;
	background: rgba(255,255,255,.75);
}

.footer {
	padding: 10px 0;
	background: #0c1161;
	text-align: center;
}
.footer a {
	color: #fff;
	font-size: 14px;
}

/* --------------------------------------------------
 * スマホ
-------------------------------------------------- */
@media(max-width:640px) {
	.qa-content dt {
		width: 64px;
	}
	.qa-content dd {
		width: calc(100% - 64px);
	}
	.qa-content dd p {
		border-radius: 10px;
	}

	.staff-interview>li:nth-child(n+2) {
		border-top: #0c1161 10px solid;
	}
	.staff-interview-contents li+li {
		border-top: #016d90 3px double;
	}
}
/* --------------------------------------------------
 * タブレット＆PC
-------------------------------------------------- */
@media(min-width:641px) {
	body {
		background: #a1dbdc;
	}
	.header, .main, .footer {
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
	.width-keeper {
		width: 640px;
		margin-left: auto;
		margin-right: auto;
	}

	.float-nav {
		width: 960px;
		margin-left: auto;
		margin-right: auto;
	}

	.qa-content dt {
		width: 128px;
	}
	.qa-content dd {
		width: calc(100% - 128px);
	}
	.qa-content dd p {
		border-radius: 20px;
	}

	.staff-interview>li:nth-child(n+2) {
		border-top: #0c1161 20px solid;
	}
	.staff-contents-title {
		margin-bottom: 10px;
	}
	.staff-interview-contents li {
		padding: 30px 40px;
		width: 50%;
	}
	.staff-interview-contents li:nth-child(odd) {
		padding-right: 30px;
	}
	.staff-interview-contents li:nth-child(even) {
		padding-left: 30px;
	}
}
/* --------------------------------------------------
 * タブレット
-------------------------------------------------- */
@media(min-width:641px) and (max-width:1024px) {
	
}
/* --------------------------------------------------
 * PC
-------------------------------------------------- */
@media(min-width:1025px) {
	
}

/* --------------------------------------------------
 * common
-------------------------------------------------- */
.cf:after, .clearfix:after {
	display: block;
	clear: both;
	content: "";
}