@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

/* - reset  */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
a,
picture,
figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	text-decoration: none;
	vertical-align: baseline;
	background: transparent;
	box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
picture,
figure {
	display: block;
}

ul,
ol {
	list-style: none;
	list-style-position: inside;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after {
	content: "";
	content: none;
}

q:before,
q:after {
	content: "";
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
	box-sizing: border-box;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title],
dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	background-color: #D7DBE4;
	margin: 1em 0;
	padding: 0;
}

img,
input,
select {
	vertical-align: middle;
}

/* //////////////////////////////////////
- font size css
////////////////////////////////////// */

html {
	font-size: 62.5%;
}

/* //////////////////////////////////////
- common css
////////////////////////////////////// */

body {
	color: #333333;
	font-size: 1.6rem;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: 0em;
	min-width: auto;
}

.inner {
	max-width: 1000px;
	width: 100%;
	margin: auto;
}

.pc_none {
	display: none;
}

.sp_none {
	display: inline-block;
}

.fade {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}

.fade.fade_in {
	opacity: 1;
	transform: translateY(0);
}

picture img {
	width: 100%;
	height: auto;
}

.link_btn a {
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.4;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 456px;
	width: 100%;
	height: 75px;
	border-radius: 50px;
	transition: all 0.3s;
}

.link_btn.btn_red a {
	background-color: #F72A47;
	border: 3px solid #F72A47;
}

.link_btn.btn_red a:hover {
	background-color: #fff;
	color: #F72A47;
}

.link_btn.btn_pink a {
	background-color: #E53389;
	border: 3px solid #E53389;
}

.link_btn.btn_pink a:hover {
	background-color: #fff;
	color: #E53389;
}

.link_btn.btn_blue a {
	background-color: #5BB3E0;
	border: 3px solid #5BB3E0;
}

.link_btn.btn_blue a:hover {
	background-color: #fff;
	color: #5BB3E0;
}

.l-pageTop {
	bottom: 20px;
}

/* //////////////////////////////////////
- main
////////////////////////////////////// */

#top #contents {
	width: 100%;
	padding: 0;
}

#top #crumb {
	margin: 0 auto;
}

main {
	min-width: 1060px;
}

main section {
	position: relative;
	padding: 0 0 80px;
}

main section::after {
	content: "";
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 80px;
	margin: 0 auto;
}

main .keyVisual {
	background-color: #FFFB98;
}

main .keyVisual::after {
	background-image: url(../img/bg_yellow.png);
}

main .keyVisual h1 {
	max-width: 1000px;
	width: 100%;
	margin: auto;
}

main .page_nav {
	background-color: #FDFFCE;
}

main .page_nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto -30px;
	position: relative;
	top: -100px;
}

main .page_nav li {
	width: 320px;
	margin: 0 10px 10px;
}

main .page_nav a {
	color: #fff;
	border-radius: 10px;
	display: block;
	position: relative;
	width: 100%;
	height: 240px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='15'%3E%3Cpath fill='%23ffffff' d='M13.5 15a1.5 1.5 0 0 1-1.061-.439l-12-12A1.5 1.5 0 0 1 2.56.44L13.5 11.379 24.439.439A1.5 1.5 0 0 1 26.56 2.56l-12 12a1.5 1.5 0 0 1-1.06.44Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center bottom 20px;
	background-repeat: no-repeat;
	background-size: 24px 12px;
	transition: background-color 0.3s;
}

main .page_nav .voice01 {
	display: block;
	position: absolute;
	top: 20px;
	left: -4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='89'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23ffffff' d='M140 588h152v89H140z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' transform='translate(-140 -588)'%3E%3Cg fill='%23ffffff' opacity='.2' transform='translate(-1653.945 929.128)'%3E%3Cpath d='M1917.53-275.335a32.958 32.958 0 0 0 18.388-9.314 32.972 32.972 0 0 0 9.691-23.394 33.084 33.084 0 0 0-33.085-33.085H1721.03a32.968 32.968 0 0 0-23.393 9.692 32.968 32.968 0 0 0-9.692 23.393 33.084 33.084 0 0 0 33.085 33.086h173.782Z'/%3E%3Cpath d='M1877.537-274.957a11.361 11.361 0 0 1-11.363 11.362 11.361 11.361 0 0 1-11.362-11.362 11.361 11.361 0 0 1 11.362-11.363 11.359 11.359 0 0 1 11.356 10.985c.004.127.007.251.007.378Z'/%3E%3Ccircle cx='7.854' cy='7.854' r='7.854' transform='rotate(-76.806 777.561 -1312.52)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 178px;
	height: 108px;
	color: #fff;
	padding: 13px 10px;
	transition: background-color 0.3s;
}

main .page_nav .voice02 {
	box-sizing: border-box;
	display: block;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
	position: absolute;
	top: 64px;
	right: -4px;
	background-color: #fff;
	border-radius: 50px 0 0 50px;
	width: 205px;
	padding: 10px 0 10px 18px;
	transition: background-color 0.3s;
}

main .page_nav .course {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto auto 40px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	transition: color 0.3s;
}

main .page_nav .course small {
	font-size: 2.2rem;
}

main .page_nav .course strong {
	font-size: 2.6rem;
	font-weight: 900;
}

main .page_nav .design a {
	background-color: #E53389;
	border: 4px solid #E53389;
}

main .page_nav .design a .voice02 {
	color: #E53389;
}

main .page_nav .design a:hover {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='15'%3E%3Cpath fill='%23E53389' d='M13.5 15a1.5 1.5 0 0 1-1.061-.439l-12-12A1.5 1.5 0 0 1 2.56.44L13.5 11.379 24.439.439A1.5 1.5 0 0 1 26.56 2.56l-12 12a1.5 1.5 0 0 1-1.06.44Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

main .page_nav .design a:hover .voice01 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='89'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23E53389' d='M140 588h152v89H140z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' transform='translate(-140 -588)'%3E%3Cg fill='%23E53389' opacity='.2' transform='translate(-1653.945 929.128)'%3E%3Cpath d='M1917.53-275.335a32.958 32.958 0 0 0 18.388-9.314 32.972 32.972 0 0 0 9.691-23.394 33.084 33.084 0 0 0-33.085-33.085H1721.03a32.968 32.968 0 0 0-23.393 9.692 32.968 32.968 0 0 0-9.692 23.393 33.084 33.084 0 0 0 33.085 33.086h173.782Z'/%3E%3Cpath d='M1877.537-274.957a11.361 11.361 0 0 1-11.363 11.362 11.361 11.361 0 0 1-11.362-11.362 11.361 11.361 0 0 1 11.362-11.363 11.359 11.359 0 0 1 11.356 10.985c.004.127.007.251.007.378Z'/%3E%3Ccircle cx='7.854' cy='7.854' r='7.854' transform='rotate(-76.806 777.561 -1312.52)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #E53389;
}

main .page_nav .design a:hover .voice02 {
	color: #fff;
	background-color: #E53389;
}

main .page_nav .design a:hover .course {
	color: #E53389;
}

main .page_nav .revise a {
	background-color: #39A6DE;
	border: 4px solid #39A6DE;
}

main .page_nav .revise a .voice02 {
	color: #39A6DE;
}

main .page_nav .revise a:hover {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='15'%3E%3Cpath fill='%2339A6DE' d='M13.5 15a1.5 1.5 0 0 1-1.061-.439l-12-12A1.5 1.5 0 0 1 2.56.44L13.5 11.379 24.439.439A1.5 1.5 0 0 1 26.56 2.56l-12 12a1.5 1.5 0 0 1-1.06.44Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

main .page_nav .revise a:hover .voice01 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='89'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%2339A6DE' d='M140 588h152v89H140z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' transform='translate(-140 -588)'%3E%3Cg fill='%2339A6DE' opacity='.2' transform='translate(-1653.945 929.128)'%3E%3Cpath d='M1917.53-275.335a32.958 32.958 0 0 0 18.388-9.314 32.972 32.972 0 0 0 9.691-23.394 33.084 33.084 0 0 0-33.085-33.085H1721.03a32.968 32.968 0 0 0-23.393 9.692 32.968 32.968 0 0 0-9.692 23.393 33.084 33.084 0 0 0 33.085 33.086h173.782Z'/%3E%3Cpath d='M1877.537-274.957a11.361 11.361 0 0 1-11.363 11.362 11.361 11.361 0 0 1-11.362-11.362 11.361 11.361 0 0 1 11.362-11.363 11.359 11.359 0 0 1 11.356 10.985c.004.127.007.251.007.378Z'/%3E%3Ccircle cx='7.854' cy='7.854' r='7.854' transform='rotate(-76.806 777.561 -1312.52)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #39A6DE;
}

main .page_nav .revise a:hover .voice02 {
	color: #fff;
	background-color: #39A6DE;
}

main .page_nav .revise a:hover .course {
	color: #39A6DE;
}

main .sect01 {
	background-color: #FDFFCE;
	padding: 0 20px 180px;
}

main .sect01::after {
	background-image: url(../img/bg_pink.png);
}

main .sect01 h2 {
	background-color: #5AB3E0;
	border-radius: 10px;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: center;
	max-width: 700px;
	padding: 10px;
	margin: 0 auto 33px;
}

main .sect01 .strong {
	font-size: 2.8rem;
	font-weight: 700;
	text-align: center;
	margin: 32px auto 17px;
}

main .sect01 .inner > div {
	position: relative;
	margin-bottom: 48px;
}

main .sect01 .inner > div picture {
	max-width: 449px;
	margin: auto;
}

main .sect01 .inner > div p {
	display: inline-block;
	font-size: 2rem;
	font-weight: 700;
	width: 180px;
	position: absolute;
	left: 600px;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}

main .sect01 .link_btn a {
	margin: auto;
}

main .sect02 {
	background-color: #FDECF1;
	padding: 50px 20px 200px;
}

main .sect02::after {
	background-image: url(../img/bg_blue.png);
}

main .sect02.trouble .inner h2 {
	background-color: #E53389;
}

main .sect02.trouble .trouble_cont {
	border: 4px solid #E53389;
}

main .sect02.trouble .trouble_cont h3 .hx_txt {
	background-color: #E53389;
}

main .sect02.trouble .trouble_cont h3 span {
	border-bottom: 3px solid #E53389;
}

main .sect02.trouble .trouble_cont li {
	background-color: #E53389;
}

main .sect02.trouble .trouble_cont li h4 span {
	color: #E53389;
}

main .sect02.trouble .trouble_cont li .btn a {
	color: #E53389;
}

main .sect02.trouble .trouble_cont li .btn a:hover {
	background-color: #E53389;
}

main .sect02.trouble .trouble_cont li:nth-child(1) picture {
	width: 140px;
}

main .sect02.trouble .trouble_cont li:nth-child(2) picture {
	padding-left: 30px;
	width: 291px;
}

main .sect02.trouble .trouble_cont .point b {
	color: #E53389;
}

main .sect02.trouble .trouble_answer h3 span {
	background-color: #E53389;
}

main .sect02.trouble .trouble_answer h3 b {
	color: #E53389;
}

main .sect03 {
	background-color: #F0F8FB;
	padding: 50px 20px 75px;
}

main .sect03::after {
	display: none;
}

main .sect03.trouble .inner h2 {
	background-color: #5AB3E0;
}

main .sect03.trouble .trouble_cont {
	border: 4px solid #5AB3E0;
}

main .sect03.trouble .trouble_cont h3 .hx_txt {
	background-color: #5AB3E0;
}

main .sect03.trouble .trouble_cont h3 span {
	border-bottom: 3px solid #5AB3E0;
}

main .sect03.trouble .trouble_cont li {
	background-color: #5AB3E0;
}

main .sect03.trouble .trouble_cont li h4 span {
	color: #5AB3E0;
}

main .sect03.trouble .trouble_cont li .btn a {
	color: #5AB3E0;
}

main .sect03.trouble .trouble_cont li .btn a:hover {
	background-color: #5AB3E0;
}

main .sect03.trouble .trouble_cont li:nth-child(1) picture {
	width: 140px;
}

main .sect03.trouble .trouble_cont li:nth-child(2) picture {
	padding-left: 40px;
	width: 245px;
}

main .sect03.trouble .trouble_cont .point b {
	color: #5AB3E0;
}

main .sect03.trouble .trouble_answer {
	position: relative;
	padding-top: 72px;
}

main .sect03.trouble .trouble_answer figure {
	position: absolute;
	top: 18px;
	right: 84px;
	width: 233px;
}

main .sect03.trouble .trouble_answer figure img {
	width: 100%;
	height: auto;
}

main .sect03.trouble .trouble_answer h3 {
	margin-bottom: 30px;
}

main .sect03.trouble .trouble_answer h3 span {
	background-color: #5AB3E0;
}

main .sect03.trouble .trouble_answer h3 b {
	color: #5AB3E0;
}

main .sect03.trouble .trouble_answer > div {
	background-color: #F0F8FB;
	border-radius: 10px;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 40px;
	padding: 38px;
}

main .sect03.trouble .trouble_answer > div .ttl {
	background-size: 110px 110px;
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 0 0 0 126px;
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	height: 110px;
	margin-bottom: 46px;
}

main .sect03.trouble .trouble_answer > div .ttl h4 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

main .sect03.trouble .trouble_answer > div .ttl h4 .course {
	background-color: #5AB3E0;
	border-radius: 10px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 282px;
	height: 34px;
	margin-right: 20px;
}

main .sect03.trouble .trouble_answer > div .ttl h4 .course small {
	font-size: 1.6rem;
}

main .sect03.trouble .trouble_answer > div .ttl h4 .course strong {
	font-size: 1.9rem;
	font-weight: 700;
}

main .sect03.trouble .trouble_answer > div .ttl h4 span {
	font-size: 2.8rem;
	font-weight: 700;
}

main .sect03.trouble .trouble_answer > div .ttl p {
	font-size: 1.8rem;
	font-weight: 500;
	margin-top: 8px;
}

main .sect03.trouble .trouble_answer > div picture {
	margin: 0 0 0 10px;
}

main .sect03.trouble .trouble_answer > div.course01 .ttl {
	background-image: url(../img/sect03_nem_1.svg);
}

main .sect03.trouble .trouble_answer > div.course01 picture {
	max-width: 874px;
}

main .sect03.trouble .trouble_answer > div.course02 .ttl {
	background-image: url(../img/sect03_nem_2.svg);
}

main .sect03.trouble .trouble_answer > div.course02 picture {
	max-width: 866px;
}

main .sect04 {
	background-color: #FDFFCE;
	padding: 77px 20px;
}

main .sect04::after {
	display: none;
}

main .sect04 .inner {
	background-color: #fff;
	border-radius: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 66px 90px;
}

main .sect04 .inner div {
	max-width: 520px;
	width: 63%;
}

main .sect04 .inner picture {
	max-width: 291px;
	width: 37%;
}

main .sect04 .inner picture img {
	width: 100%;
	height: auto;
}

main .sect04 h2 {
	padding-left: 15px;
	margin-bottom: 20px;
}

main .sect04 h2 span {
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.8;
}

main .sect04 p {
	line-height: 1.6;
	padding-left: 15px;
	max-width: 435px;
	margin-bottom: 20px;
}

main .sect04 p.link_btn {
	max-width: 456px;
	padding-left: 0;
}

main .trouble .inner h2 {
	border-radius: 10px;
	color: #fff;
	font-size: 4.2rem;
	letter-spacing: 0.1em;
	text-align: center;
	max-width: 778px;
	padding: 10px;
	margin: 0 auto 20px;
}

main .trouble .inner h2 span {
	font-weight: 500;
}

main .trouble .inner h2 + p {
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
}

main .trouble .inner picture {
	width: calc(100% + 8px);
	margin: 15px 0 80px -4px;
}

main .trouble .trouble_cont {
	background-color: #fff;
	border-radius: 40px;
	text-align: center;
	padding: 56px 40px 40px;
	max-width: 1000px;
	width: 100%;
	margin: 60px auto 80px;
}

main .trouble .trouble_cont h3 {
	position: relative;
	width: 410px;
	text-align: center;
	margin: 0 auto 45px;
}

main .trouble .trouble_cont h3 .hx_txt {
	border-radius: 8px;
	display: inline-block;
	width: auto;
	padding: 8px 16px 6px;
	position: absolute;
	top: -80px;
	left: 0;
	transform: rotate(-4deg);
}

main .trouble .trouble_cont h3 .hx_txt img {
	width: 226px;
}

main .trouble .trouble_cont h3 span {
	display: inline-block;
	font-size: 2.8rem;
	font-weight: 700;
	width: 410px;
	padding-bottom: 4px;
}

main .trouble .trouble_cont ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

main .trouble .trouble_cont li {
	border-radius: 500px;
	color: #fff;
	width: 340px;
	height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0 33px 10px;
}

main .trouble .trouble_cont li h4 span {
	background-color: #fff;
	border-radius: 50px;
	display: inline-block;
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	padding: 4px 0 5px;
	width: 200px;
}

main .trouble .trouble_cont li picture {
	margin: 26px auto 0;
}

main .trouble .trouble_cont li .fs_small {
	font-size: 1.4rem;
	display: flex;
	align-items: center;
	height: 40px;
	margin: 12px auto 16px;
}

main .trouble .trouble_cont li .btn a {
	background-color: #fff;
	border: 2px solid #fff;
	border-radius: 8px;
	font-size: 1.8rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 184px;
	height: 50px;
	transition: all 0.3s;
}

main .trouble .trouble_cont li .btn a:hover {
	color: #fff;
}

main .trouble .trouble_cont li .btn a::after {
	content: "＞";
	font-size: 1.6rem;
}

main .trouble .trouble_cont .point {
	font-size: 1.9rem;
	font-weight: 500;
}

main .trouble .trouble_cont .point b {
	font-size: 2.8rem;
	font-weight: 700;
	padding: 0 4px;
}

main .trouble .trouble_cont .point b span {
	font-size: 2.6rem;
	font-weight: 700;
}

main .trouble .trouble_cont .point b.nop {
	font-size: 3.3rem;
}

main .trouble .trouble_cont .point small {
	font-size: 1.4rem;
}

main .trouble .trouble_answer {
	background-color: #fff;
	max-width: 1160px;
	width: 100%;
	margin: auto;
	padding: 80px 20px 70px;
}

main .trouble .trouble_answer h3 {
	text-align: center;
	margin: 0 auto 22px;
}

main .trouble .trouble_answer h3 span {
	border-radius: 50px;
	color: #fff;
	display: inline-block;
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0 auto 16px;
	padding: 3px 36px 4px;
}

main .trouble .trouble_answer h3 b {
	font-size: 2.6rem;
	font-weight: 700;
	display: block;
}

main .trouble .trouble_answer picture {
	max-width: 966px;
	margin: 22px auto 44px;
}

main .trouble .trouble_answer .btn_area {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: auto;
}

main .trouble .trouble_answer .btn_area li {
	width: 455px;
	margin: 0 25px 10px;
}

@media screen and (max-width: 1100px) {

main .sect03.trouble .trouble_answer figure {
	position: static;
	margin: 0 auto;
}

}

@media screen and (max-width: 900px) {

main .sect01 .inner > div p {
	display: block;
	text-align: center;
	width: auto;
	position: static;
	margin: 10px auto 0;
}

}

@media screen and (max-width: 768px) {

.pc_none {
	display: inline-block;
}

.sp_none {
	display: none;
}

.link_btn a {
	font-size: 1.9rem;
	line-height: 1.2;
	padding: 10px 0;
	height: 60px;
}

.l-pageTop {
	bottom: 72px;
}

main {
	min-width: auto;
}

main section::after {
	background-size: 150% 100% !important;
	background-position: 50% 0;
}

main .keyVisual {
	padding: 44px 15px 0;
}

main .keyVisual h1 {
	max-width: 345px;
	position: relative;
	z-index: 1;
}

main .page_nav {
	padding: 0 4vw;
}

main .page_nav ul {
	z-index: 2;
	top: -8vw;
}

main .page_nav li {
	width: 100%;
}

main .page_nav a {
	background: none;
	height: 48vw;
	z-index: 2;
}

main .page_nav .voice01 {
	background-size: cover;
	width: 43vw;
	height: 25vw;
	padding: 2vw 0 0 3vw;
	font-size: 4.2vw;
	top: 2vw;
}

main .page_nav .voice02 {
	border-radius: 50vw 0 0 50vw;
	width: 54vw;
	height: 19vw;
	font-weight: 600;
	line-height: 1.4;
	padding: 3vw 0 0 5vw;
	font-size: 4.7vw;
	top: 10vw;
}

main .page_nav .course {
	margin: auto auto 3vw;
}

main .page_nav .course small {
	font-size: 5vw;
}

main .page_nav .course strong {
	font-size: 6.4vw;
}

main .page_nav .course::after {
	content: "";
	display: inline-block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='15'%3E%3Cpath fill='%23ffffff' d='M13.5 15a1.5 1.5 0 0 1-1.061-.439l-12-12A1.5 1.5 0 0 1 2.56.44L13.5 11.379 24.439.439A1.5 1.5 0 0 1 26.56 2.56l-12 12a1.5 1.5 0 0 1-1.06.44Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 5vw;
	height: 4vw;
	position: relative;
	top: 0.3rem;
	margin-left: 2vw;
}

main .page_nav .design a:hover {
	background-color: #E53389;
	background-image: none;
}

main .page_nav .design a:hover .voice01 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='89'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23ffffff' d='M140 588h152v89H140z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' transform='translate(-140 -588)'%3E%3Cg fill='%23ffffff' opacity='.2' transform='translate(-1653.945 929.128)'%3E%3Cpath d='M1917.53-275.335a32.958 32.958 0 0 0 18.388-9.314 32.972 32.972 0 0 0 9.691-23.394 33.084 33.084 0 0 0-33.085-33.085H1721.03a32.968 32.968 0 0 0-23.393 9.692 32.968 32.968 0 0 0-9.692 23.393 33.084 33.084 0 0 0 33.085 33.086h173.782Z'/%3E%3Cpath d='M1877.537-274.957a11.361 11.361 0 0 1-11.363 11.362 11.361 11.361 0 0 1-11.362-11.362 11.361 11.361 0 0 1 11.362-11.363 11.359 11.359 0 0 1 11.356 10.985c.004.127.007.251.007.378Z'/%3E%3Ccircle cx='7.854' cy='7.854' r='7.854' transform='rotate(-76.806 777.561 -1312.52)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
}

main .page_nav .design a:hover .voice02 {
	color: #E53389;
	background-color: #fff;
}

main .page_nav .design a:hover .course {
	color: #fff;
}

main .page_nav .revise a:hover {
	background-color: #39A6DE;
	background-image: none;
}

main .page_nav .revise a:hover .voice01 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='89'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23ffffff' d='M140 588h152v89H140z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' transform='translate(-140 -588)'%3E%3Cg fill='%23ffffff' opacity='.2' transform='translate(-1653.945 929.128)'%3E%3Cpath d='M1917.53-275.335a32.958 32.958 0 0 0 18.388-9.314 32.972 32.972 0 0 0 9.691-23.394 33.084 33.084 0 0 0-33.085-33.085H1721.03a32.968 32.968 0 0 0-23.393 9.692 32.968 32.968 0 0 0-9.692 23.393 33.084 33.084 0 0 0 33.085 33.086h173.782Z'/%3E%3Cpath d='M1877.537-274.957a11.361 11.361 0 0 1-11.363 11.362 11.361 11.361 0 0 1-11.362-11.362 11.361 11.361 0 0 1 11.362-11.363 11.359 11.359 0 0 1 11.356 10.985c.004.127.007.251.007.378Z'/%3E%3Ccircle cx='7.854' cy='7.854' r='7.854' transform='rotate(-76.806 777.561 -1312.52)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
}

main .page_nav .revise a:hover .voice02 {
	color: #39A6DE;
	background-color: #fff;
}

main .page_nav .revise a:hover .course {
	color: #fff;
}

main .sect01 {
	padding: 100px 20px 130px;
}

main .sect01 h2 {
	font-size: 2rem;
	padding: 10px 0;
}

main .sect01 .strong {
	font-size: 2rem;
}

main .sect01 .inner > div p {
	font-size: 1.8rem;
}

main .sect02 {
	padding: 0px 20px 130px;
}

main .sect02.trouble .trouble_cont li:nth-child(1) picture {
	width: 130px;
}

main .sect02.trouble .trouble_cont li:nth-child(2) picture {
	width: 245px;
}

main .sect03 {
	padding: 0px 20px 25px;
}

main .sect03.trouble .trouble_cont li:nth-child(1) picture {
	width: 137px;
}

main .sect03.trouble .trouble_cont li:nth-child(2) picture {
	width: 230px;
}

main .sect03.trouble .trouble_answer figure {
	width: 192px;
}

main .sect03.trouble .trouble_answer > div {
	padding: 20px 15px;
	margin: 0 auto 30px;
}

main .sect03.trouble .trouble_answer > div .ttl {
	align-content: flex-start;
	padding: 0;
	background: none !important;
	height: auto;
	margin-bottom: 20px;
}

main .sect03.trouble .trouble_answer > div .ttl h4 {
	flex-direction: column;
	background-repeat: no-repeat;
	background-size: 53px 53px;
	width: 100%;
}

main .sect03.trouble .trouble_answer > div .ttl h4 .course {
	border-radius: 10px 0 0 10px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 50px);
	height: auto;
	padding: 3px 0;
	margin: 12px -15px 14px auto;
}

main .sect03.trouble .trouble_answer > div .ttl h4 .course small {
	font-size: 1.6rem;
}

main .sect03.trouble .trouble_answer > div .ttl h4 .course strong {
	font-size: 1.7rem;
	font-weight: 700;
}

main .sect03.trouble .trouble_answer > div .ttl h4 span {
	font-size: 2.2rem;
}

main .sect03.trouble .trouble_answer > div .ttl p {
	font-size: 1.7rem;
}

main .sect03.trouble .trouble_answer > div picture {
	margin: 0;
}

main .sect03.trouble .trouble_answer > div.course01 h4 {
	background-image: url(../img/sect03_nem_1.svg);
}

main .sect03.trouble .trouble_answer > div.course02 h4 {
	background-image: url(../img/sect03_nem_2.svg);
}

main .sect04 {
	padding: 40px 20px;
}

main .sect04 .inner {
	flex-direction: column;
	padding: 30px 15px;
}

main .sect04 .inner div {
	order: 2;
	max-width: none;
	width: 100%;
}

main .sect04 .inner picture {
	order: 1;
	max-width: 234px;
	width: 100%;
	margin-bottom: 15px;
}

main .sect04 h2 {
	padding: 0 8px;
	margin-bottom: 10px;
}

main .sect04 h2 span {
	font-size: 2.4rem;
}

main .sect04 p {
	line-height: 1.8;
	padding: 0 8px;
	max-width: none;
	margin-bottom: 20px;
}

main .sect04 p.link_btn {
	margin: auto;
	padding: 0;
}

main .sect04 p.link_btn a {
	margin: auto;
}

main .trouble .inner h2 {
	font-size: 3.2rem;
	padding: 14px 10px;
	margin: 0 auto 20px;
}

main .trouble .inner h2 + p {
	text-align: left;
	font-size: 1.8rem;
	padding: 0 15px;
}

main .trouble .trouble_cont {
	padding: 46px 22px 40px;
	margin: 0 auto 40px;
}

main .trouble .trouble_cont h3 {
	width: 100%;
}

main .trouble .trouble_cont h3 .hx_txt {
	padding: 5px 10px 6px;
	width: 180px;
	top: -70px;
	left: 0;
	right: 0;
	margin: auto;
}

main .trouble .trouble_cont h3 .hx_txt img {
	width: 100%;
}

main .trouble .trouble_cont h3 span {
	font-size: 2.4rem;
	width: 100%;
}

main .trouble .trouble_cont ul {
	margin: auto;
	flex-direction: column;
}

main .trouble .trouble_cont li h4 span {
	font-size: 1.9rem;
	width: 170px;
}

main .trouble .trouble_cont li picture {
	margin: 16px auto 0;
}

main .trouble .trouble_cont li .fs_small {
	height: auto;
	margin: 10px auto 14px;
}

main .trouble .trouble_cont li .btn a {
	font-size: 1.5rem;
	width: 162px;
	height: 44px;
}

main .trouble .trouble_cont li .btn a::after {
	font-size: 1.3rem;
}

main .trouble .trouble_cont li {
	max-width: 290px;
	max-height: 290px;
	width: 100%;
	height: 75vw;
	margin: 0 auto 20px;
}

main .trouble .trouble_cont .point {
	line-height: 1;
}

main .trouble .trouble_cont .point b {
	display: inline-block;
	margin-top: 12px;
}

main .trouble .trouble_cont .point + .point {
	line-height: 1.6;
	text-align: left;
	margin-top: 1.5rem;
}

main .trouble .trouble_cont .point small {
	display: block;
	margin-top: 14px;
}

main .trouble .trouble_answer {
	padding: 40px 20px 20px !important;
}

main .trouble .trouble_answer h3 b {
	text-align: left;
	font-size: 2.2rem;
	padding: 0 14px;
}

main .trouble .trouble_answer .btn_area {
	flex-direction: column;
}

main .trouble .trouble_answer .btn_area li {
	width: 100%;
	margin: 0 auto 20px;
	text-align: center;
}

main .trouble .trouble_answer .btn_area li a {
	margin: auto;
}

main #design_course,
main #revise01_course,
main #revise02_course {
	display: block;
	margin-top: -60px;
	padding-top: 60px;
}

}