@charset "UTF-8";

/* ---------------------------------------------------------
	CSS Document title
--------------------------------------------------------- */

#title {
	margin-bottom: 80px;
}

#title figure {
	height: 251px;
	margin-bottom: 40px;
}

#title dt {
	margin-bottom: 25px;
	font-family: "Noto Serif JP", serif;
	font-weight: 660;
	font-size: 46px;
	line-height: 1;
	color: var(--blue);
}

#title .copy {
	margin-bottom: 16px;
	font-weight: 560;
	font-size: 22px;
	line-height: 1;
}

/* ---------------------------------------------------------
	CSS Document model
--------------------------------------------------------- */

#model {
	margin-bottom: 80px;
	padding: 80px 0;
	background: #F4F4F2;
}

#model .container {
	width: 772px;
}

#model h2 {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 28px;
	line-height: 1.4;
	position: relative;
}

#model h2:before,
#model h2:after {
	content: '';
	width: 33px;
	height: 82px;
	background: url(../images/model_left.svg) no-repeat left / 100% auto;
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
}

#model h2:before {
	left: -50px;
}

#model h2:after {
	background-image: url(../images/model_right.svg);
	right: -50px;
}

#model .memo {
	margin-bottom: 40px;
	font-weight: 500;
	font-size: 13px;
	color: #8E8E8E;
}

#model .comment p span {
	background: #fffe66;
}

#model .comment ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

#model .comment li {
	width: 380px;
	height: 60px;
	margin-bottom: 12px;
	border: solid 1px var(--black);
	background: #FDFF00;
	font-weight: 600;
	font-size: 22px;
	line-height: 52px;
}

#model .comment .orange {
	color: #F26400;
}

#model .comment .num {
	display: inline-block;
	vertical-align: -0.06em;
	font-weight: 700;
	font-size: 30px;
}

#model .model_01 {
	margin-top: 40px;
	padding: 40px;
	background: #fff;
}

#model .model_01 h3 {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 30px;
	font-weight: 700;
	font-size: 22px;
	line-height: 40px;
	position: relative;
}

#model .model_01 h3:before,
#model .model_01 h3:after {
	content: '';
	width: 33px;
	height: 82px;
	background: url(../images/model_left.svg) no-repeat left / 100% auto;
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
}

#model .model_01 h3:before {
	left: -50px;
}

#model .model_01 h3:after {
	background-image: url(../images/model_right.svg);
	right: -50px;
}

#model .model_01 h3 span {
	display: inline-block;
	vertical-align: top;
	width: 120px;
	height: 40px;
	margin: 0 5px;
	background: #F26400;
	line-height: 36px;
	color: #fff;
}

#model .model_01 figure {
	height: 165px;
}

#model .model_01 ul {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
}

#model .model_01 li {
	margin-bottom: 20px;
}

#model .model_01 li:before {
	display: inline-block;
	vertical-align: top;
	content: '';
	width: 33px;
	height: 26px;
	margin-right: 5px;
	background: url(../images/model_check.svg) no-repeat left / 100% auto;
}

/* ---------------------------------------------------------
	CSS Document graph
--------------------------------------------------------- */

#graph {
	margin-bottom: 80px;
}

#graph h2 {
	margin-bottom: 15px;
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
}

#graph h2 span {
	color: #F26400;
	font-size: 46px;
}

#graph .memo {
	margin-bottom: 20px;
}

#graph figure {
	height: 600px;
}

/* ---------------------------------------------------------
	CSS Document concept
--------------------------------------------------------- */

#concept {
	margin-bottom: 80px;
}

#concept h2 {
	height: 70px;
	margin-bottom: 25px;
	background: #175280;
	font-weight: 700;
	font-size: 26px;
	line-height: 68px;
	color: #fff;
}

#concept .copy {
	margin-bottom: 15px;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.3;
	color: var(--blue);
}

#concept .comment span {
	background: #fffe66;
}

#concept .section {
	margin-top: 30px;
	padding: 5px 50px 43px;
	box-shadow: 0 0 0 5px #175280 inset;
	position: relative;
}

#concept .section:after,
#concept .section:before {
	content: '';
	width: 56px;
	height: 56px;
	background: url(../images/concept_right.png) no-repeat 0 0;
	position: absolute;
}

#concept .section:after {
	background-image: url(../images/concept_left.png);
	bottom: 0;
	left: 0;
}

#concept .section:before {
	top: 0;
	right: 0;
}

#concept h3 {
	height: 90px;
	margin-bottom: 20px;
	background: url(../images/concept_line.png) no-repeat bottom;
	font-weight: 500;
}

#concept h3 span {
	display: inline-block;
	vertical-align: top;
	line-height: 80px;
}

#concept h3 span:nth-child(1) {
	margin-right: 10px;
	font-size: 20px;
}

#concept h3 span:nth-child(2) {
	padding: 0 5px;
	font-size: 36px;
	color: #175280;
	position: relative;
	z-index: 0;
}

#concept h3 span:nth-child(2):before {
	content: '';
	width: 100%;
	height: 18px;
	background: #fffe66;
	position: absolute;
	top: 45px;
	left: 0;
	z-index: -1;
}

#concept .section .clearfix {
	display: flex;
	justify-content: space-between;
}

#concept .f_left {
	width: 500px;
	text-align: left;
}

#concept .f_right {
	width: 350px;
	height: 230px;
}

#concept .section ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 30px;
}

#concept .section li {
	width: 290px;
	height: 56px;
	margin-bottom: 13px;
	background: var(--blue);
	line-height: 54px;
	color: #fff;
}

#concept .section ul.n2 li {
	width: 440px;
}

#concept .option {
	margin-top: 30px;
	padding: 40px 90px;
	background: #E2F4FF;
	font-weight: 500;
	line-height: 1.5;
}

#concept .option .more {
	height: 90px;
}

#concept .option .catch {
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 26px;
	line-height: 1;
	color: #08AEAA;
}

#concept .option .list {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}

#concept .option .box {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 230px;
	height: 110px;
	border: solid 3px #08AEAA;
	background: linear-gradient(155deg, #fff 50%, rgba(8, 174, 170, 0.1) 50%);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.5;
}

#concept .option .box span {
	font-weight: 800;
	color: #F26400;
}

/* ---------------------------------------------------------
	CSS Document voice
--------------------------------------------------------- */

#voice {
	margin-bottom: 80px;
}

#voice .balloon {
	height: 60px;
	overflow: hidden;
	margin-bottom: 17px;
	font-size: 24px;
	line-height: 48px;
	color: #fff;
	position: relative;
	z-index: 0;
}

#voice .balloon:before {
	content: '';
	width: 0;
	height: 0;
	border: solid 150px transparent;
	border-top: solid 60px #175280;
	transform: translateX(-50%);
	position: absolute;
	left: 50%;
	top: 0;
	z-index: -1;
}

#voice .copy {
	margin-bottom: 7px;
	font-weight: 600;
	font-size: 26px;
	line-height: 1;
}

#voice h2 {
	margin-bottom: 20px;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 36px;
	line-height: 1.5;
	color: var(--blue);
}

#voice .container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: left;
}

#voice dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 485px;
	margin-bottom: 30px;
	padding: 15px 16px;
	background: #f5f2e8;
	font-size: 14px;
	line-height: 1.7;
}

#voice dt {
	width: 140px;
}

#voice dd {
	width: 290px;
}

#voice dd span {
	display: block;
	font-weight: 600;
	color: #cc9d14;
}

#voice p {
	font-size: 30px;
	line-height: 1;
	color: #ce1a02;
}

#voice li {
	margin-top: 30px;
	text-align: center;
}

#voice li a {
	display: inline-block;
	vertical-align: top;
	width: 270px;
	height: 51px;
	padding-right: 5px;
	border-radius: 5px;
	background: #c7ae5e;
	text-decoration: none;
	font-size: 22px;
	line-height: 48px;
	color: #fff;
	position: relative;
}

#voice li a:after {
	content: '';
	width: 0;
	height: 0;
	margin-top: -7px;
	border: solid 7px transparent;
	border-left: solid 10px #fff;
	position: absolute;
	top: 50%;
	right: 15px;
}

/* ---------------------------------------------------------
	CSS Document simulation
--------------------------------------------------------- */

#simulation {
	padding: 80px 0 80px;
	background: #f4f4f2 url(../images/simulation_bg.png) top;
}

#simulation h2 {
	margin-bottom: 30px;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 36px;
	line-height: 1.5;
	color: var(--blue);
}

#simulation .copy02 {
	margin-bottom: 8px;
	font-weight: 560;
	font-size: 22px;
	line-height: 1;
}

#simulation .copy {
	margin-bottom: 15px;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.5;
}

#simulation .copy em {
	font-weight: 600;
	color: #F26400;
}

#simulation p {
	margin-bottom: 30px;
	font-weight: 500;
	font-size: 15px;
}

#simulation .clearfix {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

#simulation .f_left {
	margin-right: 30px;
}

#simulation .w485 {
	width: 485px;
	margin-bottom: 30px;
	position: relative;
}

#simulation h3 {
	height: 56px;
	background: #3398f2;
	font-weight: 500;
	font-size: 26px;
	line-height: 56px;
	color: #fff;
}

#simulation h3 .num {
	display: inline-block;
	vertical-align: top;
	margin: 0 5px;
	font-size: 32px;
	color: #fdff00;
}

#simulation h3 .mini {
	font-size: 18px;
}

#simulation h3 .mini span {
	color: #fdff00;
}

#simulation table {
	width: 100%;
	background: #fff;
}

#simulation th {
	width: 150px;
	padding: 0 20px;
	border: solid 1px #e3e2e1;
	background: #fffdee;
	text-align: left;
	font-weight: 500;
	line-height: 54px;
}

#simulation tr:last-child th {
	background: #fffe66;
	font-weight: 600;
	color: #3398f2;
}

#simulation td {
	padding: 0 20px;
	border: solid 1px #e3e2e1;
	text-align: left;
	font-weight: 500;
	line-height: 54px;
}

#simulation tr:last-child td {
	background: #fffe66;
	color: #ce1a02;
}

#simulation tr:last-child td span {
	display: inline-block;
	vertical-align: top;
	font-size: 26px;
}

#simulation figure {
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: -20px;
	right: 20px;
}

#simulation .note {
	font-weight: 500;
	font-size: 14px;
}

/* ---------------------------------------------------------
	CSS Document example
--------------------------------------------------------- */

#example {
	margin-bottom: 80px;
	padding: 80px 0;
	background: #E2F4FF;
}

#example h2 {
	margin-bottom: 40px;
	text-decoration: underline solid #08AEAA 10px;
	text-decoration-skip-ink: none;
	text-underline-offset: -0.15em;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.5;
}

#example #data_01 {
	margin-bottom: 80px;
}

#example table {
	width: 100%;
	background: #fff;
}

#example th {
	height: 40px;
	padding: 0;
	border: solid 1px #D8D8D8;
	background: #F8F8F8;
	font-weight: 500;
	font-size: 14px;
}

#example td {
	height: 50px;
	padding: 0 20px;
	border: solid 1px #D8D8D8;
	font-weight: 500;
	font-size: 14px;
}

#example #data_01 td {
	width: 150px;
}

#example #data_01 td.area {
	width: 255px;
	text-align: left;
}

#example #data_01 th.area {
	padding: 0 20px;
	text-align: left;
}

#example #data_02 td {
	text-align: left;
}

#example #data_02 .name {
	padding: 0 20px;
	text-align: left;
	position: relative;
}

#example #data_02 .w194 {
	padding: 0 20px;
	text-align: left;
}

#example #data_02 td.w140 {
	width: 140px;
}

#example #data_02 td.w80 {
	width: 80px;
	text-align: center;
	position: relative;
}

#example #data_02 .active {
	background: #FDF3EC;
	color: #F26400;
}

#example #data_02 .active td {
	height: 60px;
	border-top: solid 4px #F26400;
	border-bottom: solid 4px #F26400;
}

#example #data_02 .active td.name {
	font-weight: 600;
	font-size: 16px;
}

#example #data_02 .active td.name:before {
	content: '';
	width: 4px;
	height: 100%;
	background: #F26400;
	position: absolute;
	top: 0;
	left: -1px;
}

#example #data_02 .active td.w80:last-of-type:before {
	content: '';
	width: 4px;
	height: 100%;
	background: #F26400;
	position: absolute;
	top: 0;
	right: -1px;
}

/* ---------------------------------------------------------
	CSS Document interview
--------------------------------------------------------- */

#interview h2 {
	margin-bottom: 30px;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 36px;
	line-height: 1.5;
	color: var(--blue);
}

/* ---------------------------------------------------------
	CSS Document interview > name
--------------------------------------------------------- */

#interview #name {
	margin-bottom: 90px;
	padding: 70px 0;
	background: #F8F8F8;
}

#interview #name .container {
	display: flex;
	align-items: center;
}

#interview #name figure {
	width: 500px;
	height: 300px
	overflow: hidden;
	margin-right: 60px;
}

#interview #name .row {
	flex: 1;
	text-align: left;
}

#interview #name ul {
	display: flex;
	margin-bottom: 10px;
}

#interview #name li {
	height: 22px;
	margin-right: 10px;
	padding: 0 0.5em;
	border: solid 1px var(--blue);
	font-size: 13px;
	line-height: 20px;
	color: var(--blue);
}

#interview #name .description {
	font-weight: 500;
	font-size: 20px;
	color: var(--blue);
}

#interview #name .copy {
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.4;
}

#interview #name .message {
	margin-bottom: 20px;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.8;
}

#interview #name .keywords {
	font-size: 16px;
	color: #8b8a8a;
}

/* ---------------------------------------------------------
	CSS Document interview > entry
--------------------------------------------------------- */

#interview #entry {
	margin-bottom: 80px;
	text-align: justify;
}

#interview #entry h3 {
	margin-bottom: 20px;
	padding: 1px 0 5px 20px;
	border-left: solid 5px var(--blue);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.3;
}

#interview #entry .summary {
	display: flex;
	justify-content: space-between;
	flex-flow: row-reverse;
	margin-bottom: 60px;
}

#interview #entry figure {
	width: 240px;
	height: 240px;
	overflow: hidden;
	transform: translateY(-70px);
}

#interview #entry .row {
	width: 700px;
}

#interview #entry h4 {
	font-weight: 500;
	font-size: 22px;
	line-height: 1.5;
	color: #cc9d14;
}

#interview #entry p {
	margin-top: 20px;
}

#interview #entry .entry_open {
	display: inline-block;
	vertical-align: top;
	font-weight: 500;
	font-size: 16px;
	color: #038EB1;
	cursor: pointer;
	transition: opacity, .4s;
}

#interview #entry .entry_open:hover {
	text-decoration: underline;
	opacity: 0.6;
}

#interview #entry .entry_close {
	display: none;
}

/* ---------------------------------------------------------
	CSS Document business
--------------------------------------------------------- */

#business h2 {
	margin-bottom: 40px;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 36px;
	line-height: 1.5;
	color: var(--blue);
}

#business .copy02 {
	margin-bottom: 16px;
	font-weight: 560;
	font-size: 22px;
	line-height: 1;
}

#business .copy {
	margin-bottom: 15px;
	font-weight: 500;
	font-size: 26px;
	line-height: 1;
	color: var(--blue);
}

#business h3 {
	height: 85px;
	margin-bottom: 40px;
	background: var(--blue);
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 85px;
	color: #fff;
	position: relative;
}

#business h3:after {
	content: '';
	width: 0;
	height: 0;
	border: solid 16px transparent;
	border-top: solid 20px #00529b;
	transform: translateX(-50%);
	position: absolute;
	left: 50%;
	bottom: -30px;
}

/* ---------------------------------------------------------
	CSS Document business > income
--------------------------------------------------------- */

#business .income {
	margin-bottom: 60px;
}

#business .income h3 > span {
	display: inline-block;
	vertical-align: top;
	margin-left: 25px;
}

#business .income h3 > span span:first-child {
	display: inline-block;
	vertical-align: top;
	margin-left: 5px;
	color: #ffc502;
}

#business .income h3 > span span:last-child {
	display: inline-block;
	vertical-align: top;
	font-size: 48px;
	color: #ffc502;
}

#business .income ul {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

#business .income img {
	height: 180px;
}

/* ---------------------------------------------------------
	CSS Document business > royalty
--------------------------------------------------------- */

#business .royalty {
	margin-bottom: 40px;
}

#business .royalty h3 span {
	display: inline-block;
	vertical-align: top;
	color: #ffc502;
}

#business .royalty h3 > span span:last-child {
	font-size: 48px;
}

#business .royalty h4 {
	margin-top: 40px;
	text-align: left;
	font-weight: 500;
	font-size: 20px;
}

#business .royalty .price {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

#business .royalty .price li {
	width: 300px;
	background: #05ada9;
	font-size: 20px;
	line-height: 40px;
	color: #fff;
	position: relative;
}

#business .royalty .price li:after {
	content: '';
	width: 16px;
	height: 16px;
	background: url(../images/business_plus_pc.png) no-repeat 0 0;
	position: absolute;
	top: 92px;
	right: -32px;
}

#business .royalty .price li:last-child {
	margin-right: 0;
	color: #fdff00;
}

#business .royalty .price li:last-child:after {
	display: none;
}

#business .royalty .note {
	margin-top: 10px;
	text-align: left;
}

#business .royalty .note li {
	padding-left: 18px;
	background: url(../images/business_icon.png) no-repeat 0 8px;
}

#business .royalty .note p {
	margin-bottom: 2em;
}

#business .royalty .memo {
	text-align: center;
}

/* ---------------------------------------------------------
	CSS Document business > about
--------------------------------------------------------- */

#business .about {
	margin-bottom: 60px;
	padding: 30px 280px 30px 40px;
	background: #fffdee url(../images/comment.png) no-repeat 752px bottom;
	text-align: left;
}

#business .about h4 {
	font-weight: 600;
	font-size: 20px;
	color: var(--blue);
}

#business .about dl {
	font-weight: 500;
	line-height: 1.4;
	color: #ce1a02;
}

#business .about dt {
	margin-top: 20px;
	font-size: 20px;
}

#business .about dd {
	font-size: 30px;
}

/* ---------------------------------------------------------
	CSS Document business > design
--------------------------------------------------------- */

#business .design {
	margin-bottom: 80px;
}

#business .design h3 span {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
	font-size: 48px;
	color: #ffc502;
}

#business .design .flex {
	display: flex;
	justify-content: space-between;
	margin: 0 50px;
}

#business .design .f_left {
	width: 500px;
	text-align: left;
}

#business .design ul {
	width: 350px;
}

#business .design ul li {
	height: 34px;
	margin-bottom: 3px;
	border-radius: 5px;
	background: #08aeaa;
	font-size: 20px;
	line-height: 34px;
	color: #fff;
}

#business .design ul li span {
	color: #fdff00;
}

/* ---------------------------------------------------------
	CSS Document market
--------------------------------------------------------- */

#market {
	margin-bottom: 80px;
	padding: 80px 0 20px;
	background: #F8F8F8;
}

#market .copy {
	margin-bottom: 30px;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.5;
}

#market .copy02 {
	margin-bottom: 40px;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 36px;
	line-height: 1.5;
	color: var(--blue);
}

#market h2 {
	height: 70px;
	margin-bottom: 30px;
	background: #175280;
	font-weight: 600;
	font-size: 26px;
	line-height: 70px;
	color: #fff;
	position: relative;
}

#market h2 span {
	display: inline-block;
	vertical-align: top;
	width: 100px;
	height: 100px;
	margin-top: -16px;
	margin-right: 20px;
	border-radius: 100%;
	border: solid 4px #175280;
	background: #fff;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 60px;
	line-height: 86px;
	color: #175280;
}

#market h3 {
	margin-bottom: 40px;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 1.1;
	color: var(--blue);
}

#market .flex {
	display: flex;
	justify-content: space-between;
	margin-bottom: 60px;
}

#market .row {
	width: 710px;
	text-align: justify;
}

#market .row p {
	margin-bottom: 2em;
}

#market .flex figure img {
	height: 230px;
}

/* ---------------------------------------------------------
	CSS Document about
--------------------------------------------------------- */

#about {
	margin-bottom: 40px;
}

#about h2 {
	margin-bottom: 10px;
	padding-bottom: 10px;
	background: url(../images/about_line.png) no-repeat bottom;
	font-weight: 600;
	font-size: 26px;
}

#about dt {
	margin-bottom: 20px;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.5;
	color: var(--blue);
}

#about dd em {
	font-weight: 700;
	color: #f26400;
}

#about dd span {
	padding-left: 3px;
	background: #fce9d8;
}

/* ---------------------------------------------------------
	CSS Document point
--------------------------------------------------------- */

#point {
	margin-bottom: 80px;
	padding: 30px 0 50px;
	background: #e2f4ff;
}

#point .container {
	position: relative;
}

#point h2 > span:first-child {
	width: 208px;
	height: 180px;
	background: url(../images/point_balloon_left.png) no-repeat 0 0;
	text-align: left;
	font-weight: 500;
	font-size: 22px;
	line-height: 180px;
	color: #fff;
	position: absolute;
	top: 60px;
	left: 0;
}

#point h2 > span:last-child {
	width: 208px;
	height: 180px;
	background: url(../images/point_balloon_right.png) no-repeat 0 0;
	text-align: right;
	font-weight: normal;
	font-size: 22px;
	line-height: 180px;
	color: #fff;
	position: absolute;
	top: 60px;
	right: 0;
}

#point h2 > span span {
	display: inline-block;
	vertical-align: middle;
	width: 180px;
	text-align: center;
	line-height: 1.4;
}

#point ol {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 30px;
}

#point ol li {
	padding-left: 32px;
	background: url(../images/point_check_pc.png) no-repeat left;
	text-align: left;
	font-size: 18px;
}

/* ---------------------------------------------------------
	CSS Document faq
--------------------------------------------------------- */

#faq {
	margin-bottom: 120px;
}

#faq h2 {
	margin-bottom: 30px;
	text-align: center;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.5;
	color: var(--blue);
}

#faq dl {
	margin-bottom: 20px;
	padding: 30px;
	padding-right: 80px;
	background: #F8F8F8;
	text-align: left;
}

#faq dt {
	padding-left: 40px;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.8;
	position: relative;
	cursor: pointer;
	transition: .4s;
}

#faq dt:active,
#faq dt:hover {
	color: var(--blue);
}

#faq dt:before {
	content: 'Q';
	width: 36px;
	height: 36px;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 26px;
	line-height: 36px;
	color: var(--blue);
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	left: 0;
}

#faq dt i {
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	right: -36px;
}

#faq dl i:before {
	content: '';
	width: 2px;
	height: 16px;
	background: var(--blue);
	position: absolute;
	top: 0;
	right: 7px;
	transition-property: transform;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	transform: rotate(0);
}

#faq dt.active i:before {
	transform: rotate(90deg);
}

#faq dl i:after {
	content: '';
	width: 16px;
	height: 2px;
	background: var(--blue);
	position: absolute;
	top: 7px;
	right: 0;
}

#faq dd {
	display: none;
	margin-top: 20px;
	padding-left: 40px;
	font-size: 15px;
	line-height: 2.1;
	position: relative;
}

#faq dd:before {
	content: 'A';
	width: 36px;
	height: 36px;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 26px;
	line-height: 36px;
	color: #08AEAA;
	position: absolute;
	top: 0;
	left: 0;
}

/* ---------------------------------------------------------
	CSS Document flow
--------------------------------------------------------- */

#flow {
	margin-bottom: 80px;
	padding: 40px 0 50px;
	background: #f4f4f2;
	text-align: left;
	font-size: 0;
}

#flow h2 {
	margin-bottom: 30px;
	text-align: center;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.5;
	color: var(--blue);
}

#flow ol {
	height: 220px;
	background: url(../images/flow_01.png) no-repeat top;
	font-size: 0;
}

/* ---------------------------------------------------------
	CSS Document outline
--------------------------------------------------------- */

#outline {
	margin-bottom: 80px;
}

#outline h2 {
	margin-bottom: 30px;
	text-align: center;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.5;
	color: var(--blue);
}

#outline .container {
	border-top: solid 1px #e3e2e1;
	text-align: left;
}

#outline .nth1 dl,
#outline .nth2 dl {
	display: flex;
	border-bottom: solid 1px #e3e2e1;
}

#outline .dt {
	width: 160px;
	padding: 15px 20px;
	border-right: solid 1px #e3e2e1;
	background: #f8f8f8;
	text-align: left;
	font-weight: normal;
	font-size: 16px;
}

#outline .dd {
	flex: 1;
	padding: 15px 20px;
	border-right: solid 1px #e3e2e1;
}

#outline .nth1 {
	display: flex;
	border-left: solid 1px #e3e2e1;
}

#outline .nth1 dl {
	width: 50%;
}

#outline .nth1 dd {
}

#outline .nth2 {
	border-left: solid 1px #e3e2e1;
}

#outline .nth3 {
	display: flex;
	border-left: solid 1px #e3e2e1;
	border-bottom: solid 1px #e3e2e1;
}

#outline .dd dl:first-of-type {
	margin-bottom: 20px;
}