@charset "UTF-8";
/* //////////////////////////////////////
- フォント読み込み
////////////////////////////////////// */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Roboto:wght@400;700;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 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: normal;
  text-decoration: none;
  vertical-align: baseline;
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
/*  font-size: 0;*/
}

body *,
body *::before,
body *::after {
	box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  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 {
  text-decoration: none;
}

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

hr {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}

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


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

html {
  font-size: 10px;
  font-family:'メイリオ', 'Meiryo', sans-serif;
  font-family: 'Noto Sans JP', sans-serif;
}
body {
  font-size: 0;
}
main {
	display: block;
	position: relative;
}

.pc_blk {
  display: block;
}
.pc_inblk {
  display: inline-block;
}
.sp_blk,
.sp_inblk {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc_blk,
  .pc_inblk {
    display: none;
  }
  .sp_blk {
    display: block;
  }
  .sp_inblk {
    display: inline-block;
  }
}

_::-webkit-full-page-media, _:future, :root ruby rt {
	transform: translate(0, 40%);
}



footer {}
footer p {
	background: #351504;
	text-align: center;
	padding: 22px 0;
}
footer p span {
	font-size: 18.5px;
	line-height: 1.7;
	color: white;
	margin: 0 10px;
	display: inline-block;
}
footer div {
	height: 120px;
	background: url(../../images/footer_logo.png) no-repeat center / auto 60% white;
}

@media screen and (max-width: 768px) {
footer {}
footer p {
	padding: 6vw 0 6vw;
}
footer p span {
	font-size: 4.25vw;
	line-height: 1.55;
}
footer div {
	height: 27.5vw;
}
}


nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
}
nav .menu_btn {
	position: fixed;
	top: 30px;
	right: 30px;
	z-index: 3;
	width: 90px;
	height: 90px;
	background: url(../../images/menu_wrap.png) no-repeat center / cover, url(../../images/menu_item.png) no-repeat left / auto 100%, #220d03;
	cursor: pointer;
	overflow: hidden;
	border-radius: 16px;
	transition: 0.3s;
	transition-timing-function: cubic-bezier(0.4, -0.4, 0.4, 1.4);
}
.lower nav .menu_btn {
	top: 40px;
	right: 60px;
}
nav .menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: #1c1c1cd1;
	clip-path: polygon(50% 0%, 50% 0, 50% 100%, 50% 100%);
	visibility: hidden;
	transition: clip-path 0.3s, visibility 0s 0.3s;
}
nav .menu div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
nav .menu div a {
	font-size: 24px;
	line-height: 1;
	font-weight: 500;
	margin: 20px auto;
	height: 68px;
	background: url(../../images/menu_btn_left.png) no-repeat center left / auto 100%,url(../../images/menu_btn_right.png) no-repeat center right / auto 100%, url(../../images/menu_btn_base.png) repeat-x center center / auto 100%;
	overflow: hidden;
	border-radius: 40px;
	color: white;
	padding: 20px 0 0;
	display: block;
	text-align: center;
	width: 440px;
}
nav.open .menu_btn {
	background: url(../../images/menu_wrap.png) no-repeat center / cover, url(../../images/menu_item.png) no-repeat center left 100% / auto 100%, #220d03;
}
nav.open .menu {
	clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	visibility: visible;
	transition: clip-path 0.3s, visibility 0s;
}

@media screen and (max-width: 768px) {
nav {}
nav .menu_btn {
	top: 2vw;
	right: 4vw;
	width: 15vw;
	height: 15vw;
	border-radius: 2vw;
}
.lower nav .menu_btn {
	top: 2vw;
	right: 3vw;
}
nav .menu {}
nav .menu div {}
nav .menu div a {
	font-size: 4.5vw;
	margin: 5vw auto;
	height: 12vw;
	width: 81vw;
	padding: 4vw 0 0;
}
nav.open .menu_btn {}
nav.open .menu {}
}










main.index h2 {
	font-size: 40px;
	line-height: 1;
	height: 154px;
	display: inline-block;
	padding: 59px 24px 0;
	background: url(../../images/index/h2_center.png) no-repeat center center / auto 100%, url(../../images/index/h2_base.png) repeat-x center center / auto 100%;
	position: relative;
	font-weight: 600;
}
main.index h2::before,
main.index h2::after {
	content: '';
	position: absolute;
	top: 0;
	height: 100%;
	width: 100px;
	background: url(../../images/index/h2_edge.png) no-repeat center right / auto 100%;
}
main.index h2::before {
	right: 99%;
}
main.index h2::after {
	left: 99%;
	transform: scale(-1, 1);
}
main.index h2 ruby rt {
	font-size: 36%;
}
main.index ruby {}
main.index ruby rt {}
main.index .elder {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 0;
	position: relative;
	text-align: right;
}
main.index .elder p {
	display: inline-block;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.85;
	text-align: center;
	background: url(../../images/index/elder_left.png) no-repeat center left / auto 100%,url(../../images/index/elder_right.png) no-repeat center right / auto 100%, url(../../images/index/elder_base.png) repeat-x center center / auto 100%;
	overflow: hidden;
	border-radius: 12px;
}
main.index .elder::before {
	content: '';
}
main.index .movies {
	width: 100%;
	max-width: 1366px;
	margin: 0 auto;
}
main.index .movies article {
	display: inline-block;
	vertical-align: top;
	width: 465px;
	margin: 0 30px 54px;
	position: relative;
	cursor: pointer;
}
main.index .movies article figure {
	margin: 0;
	position: relative;
	overflow: hidden;
}
main.index .movies article figure::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: 110px;
	height: 110px;
	background: url(../../images/index/movie_btn.png) no-repeat center / 100%;
	transition: 0.2s;
}
main.index .movies article figure::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%) scale(0.1);
	width: 100%;
	height: 100%;
	background: #00000040;
	transition: 0.3s;
}
main.index .movies article:hover figure::before {
	transform: translate(-50%, -50%) scale(0.9);
}
main.index .movies article:hover figure::after {
	transform: translate(-50%, -50%) scale(1);
}
main.index .movies article figure img {
	width: 100%;
}
main.index .movies article p {
	font-size: 24px;
	line-height: 1;
	font-weight: 500;
	margin: 0 0 18px;
	height: 68px;
	background: url(../../images/index/movie_title_left.png) no-repeat center left / auto 100%,url(../../images/index/movie_title_right.png) no-repeat center right / auto 100%, url(../../images/index/movie_title_base.png) repeat-x center center / auto 100%;
	overflow: hidden;
	border-radius: 40px;
	color: white;
	padding: 25px 0 0;
}

main.index {
	text-align: center;
}
main.index::before {
	content: '';
	background: url(../../images/index/bg.png) no-repeat center / cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}
main.index .top {
	padding: 215px 0 40px;
	background: url(../../images/index/top_map.png) no-repeat top -770px center / 1510px auto, url(../../images/index/top_bg.png) repeat-y top center / 100% auto;
}
main.index .top h1 {
	width: 100%;
	max-width: 1366px;
	height: 340px;
	background: url(../../images/index/h1.png) no-repeat center center / auto 90%, url(../../images/chara/main01.png) no-repeat center left 40px / auto 100%, url(../../images/chara/main02.png) no-repeat center right 35px / auto 97%;
	margin: 0 auto;
}
main.index .top h2 {
	margin: 270px 0 0;
	padding: 43px 25px 0;
	font-size: 32px;
	height: 122px;
}
main.index .top p {
	font-size: 24px;
	line-height: 2.5;
	font-weight: 500;
	padding: 20px 0 60px;
	width: 100%;
	max-width: 1366px;
	background: url(../../images/index/top_s_left.png) no-repeat center left 30px / auto 100%, url(../../images/index/top_s_right.png) no-repeat center right 30px / auto 100%;
	margin: 0 auto;
}
main.index .study {
	background: #00360c30;
	padding: 100px 0 40px;
}
main.index .study h2 {}
main.index .study .elder {
	margin: 35px auto 0;
	background: url(../../images/chara/elder01.png) no-repeat center left 25px / auto 100%;
}
main.index .study .elder p {
	margin: 64px 10px 80px 0;
	width: 604px;
	padding: 31px 0 30px;
}
main.index .study .elder::before {}
main.index .study .movies {
	margin-top: 45px;
}
main.index .practice {
	background: #001e0760;
	padding: 100px 0 105px;
}
main.index .practice h2 {}
main.index .practice .elder {
	text-align: left;
	margin: 35px auto 0;
	background: url(../../images/chara/elder02.png) no-repeat center right 20px / auto 100%;
}
main.index .practice .elder p {
	margin: 64px 0 80px 10px;
	width: 604px;
	padding: 56px 0 52px;
}
main.index .practice .elder::before {}
main.index .practice .movies {
	margin-top: 45px;
}
main.index .practice .movies article::before {
	content: '';
	position: absolute;
	top: -28px;
	left: -40px;
	z-index: 2;
	width: 100px;
	height: 120px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
}
main.index .practice .movies article:nth-of-type(1)::before {
	background-image: url(../../images/chara/sub01.png);
}
main.index .practice .movies article:nth-of-type(2)::before {
	background-image: url(../../images/chara/sub02.png);
}
main.index .practice .movies article:nth-of-type(3)::before {
	background-image: url(../../images/chara/sub03.png);
}
main.index .practice .movies article:nth-of-type(4)::before {
	background-image: url(../../images/chara/sub04.png);
}
main.index .practice .movies article:nth-of-type(5)::before {
	background-image: url(../../images/chara/sub05.png);
}
main.index .practice .movies article:nth-of-type(6)::before {
	background-image: url(../../images/chara/sub06.png);
}
main.index .quiz {
	padding: 100px 0 110px;
	background: url(../../images/index/top_bg.png) repeat-y top center / 100% auto;
}
main.index .quiz h2 {}
main.index .quiz p {
	width: 100%;
	max-width: 1000px;
	margin: -215px auto 25px;
	background: url(../../images/chara/main01.png) no-repeat center left 0 / auto 95%, url(../../images/chara/main02.png) no-repeat center right 0 / auto 93%;
	height: 285px;
}
main.index .quiz a {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	display: block;
	aspect-ratio: 1/ 0.32;
	background: url(../../images/index/quiz_btn.png) no-repeat center / cover;
	position: relative;
	overflow: hidden;
	border-radius: 28px;
}
main.index .quiz a::after {
	content: '';
	position: absolute;
	top: 255px;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%) scale(0.1);
	width: 100%;
	height: 100%;
	background: #00000040;
	transition: 0.2s;
}
main.index .quiz a:hover::after {
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
}
main.index .quiz a span {
	font-size: 24px;
	line-height: 1;
	font-weight: 500;
	height: 68px;
	background: url(../../images/menu_btn_left.png) no-repeat center left / auto 100%,url(../../images/menu_btn_right.png) no-repeat center right / auto 100%, url(../../images/menu_btn_base.png) repeat-x center center / auto 100%;
	overflow: hidden;
	border-radius: 40px;
	color: white;
	padding: 20px 0 0;
	display: block;
	text-align: center;
	width: 440px;
	position: absolute;
	top: 220px;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, 0);
	transition: 0.2s;
}
main.index .quiz a:hover span {
	transform: translate(-50%, 0) scale(0.95);
}

section.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 101;
	width: 100%;
	height: 100%;
	background: #1c1c1cd1;
	clip-path: polygon(50% 0%, 50% 0, 50% 100%, 50% 100%);
	visibility: hidden;
	transition: clip-path 0.3s, visibility 0s 0.3s;
}
section.modal.open {
	clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	visibility: visible;
	transition: clip-path 0.3s, visibility 0s;
}
section.modal div {
	aspect-ratio: 560 / 315;
	width: 85.5%;
	max-width: 1080px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
}
section.modal div::before {
	content: '';
	background: url(../../images/close_btn.png) no-repeat center / cover;
	position: absolute;
	top: -30px;
	right: -30px;
	z-index: 2;
	width: 60px;
	height: 60px;
	cursor: pointer;
}
section.modal div iframe {
	width: 100%;
	height: 100%;
}
#totop {
	position: fixed;
	bottom: -220px;
	right: 40px;
	z-index: 8;
	width: 96px;
	height: 174px;
	background: url(../../images/pagetop.png) no-repeat center / contain;
	transition: 0.3s;
	transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#totop.show {
	bottom: 30px;
}

@media screen and (max-width: 768px) {
main.index h2 {
	font-size: 5vw;
	height: 21vw;
	padding: 8.5vw 7vw 0;
}
main.index h2::before,
main.index h2::after {
	width: 12vw;
}
main.index h2::before {}
main.index h2::after {}
main.index h2 ruby rt {}
main.index ruby {}
main.index ruby rt {}
main.index .elder {
	text-align: center;
}
main.index .elder p {
	font-size: 4.25vw;
	line-height: 1.95;
}
main.index .elder::before {}
main.index .movies {}
main.index .movies article {
	display: block;
	width: 86vw;
	margin: 0 auto 12vw;
}
main.index .movies article figure {}
main.index .movies article figure::before {
	width: 20vw;
	height: 20vw;
}
main.index .movies article figure::after {}
main.index .movies article:hover figure::before {}
main.index .movies article:hover figure::after {}
main.index .movies article figure img {}
main.index .movies article p {
	font-size: 4.25vw;
	margin: 0 1vw 2.5vw;
	height: 13vw;
	padding: 5vw 0 0;
}
main.index {}
main.index::before {
	background-image: url(../../images/index/bg_sp.png);
}
main.index .top {
	padding: 47vw 0 19vw;
	background: url(../../images/index/top_map.png) no-repeat top -39vw center / 205vw auto, url(../../images/index/top_bg.png) repeat-y top center / 100% auto;
}
main.index .top h1 {
	height: 96vw;
	background: url(../../images/index/h1.png) no-repeat center top / auto 36vw, url(../../images/chara/main01.png) no-repeat bottom left 11vw / auto 50vw, url(../../images/chara/main02.png) no-repeat bottom right 11vw / auto 48vw;
}
main.index .top h2 {
	margin: 43vw auto 0;
	font-size: 5vw;
	height: 18vw;
	padding: 6.5vw 2vw 0;
}
main.index .top p {
	font-size: 4.25vw;
	line-height: 2.3;
	padding: 7vw 0 6vw;
	background: url(../../images/index/top_s_sp.png) no-repeat center right 30px / auto 100%;
}
main.index .study {
	padding: 11vw 0 11vw;
}
main.index .study h2 {}
main.index .study .elder {
	margin: 4vw 0 0;
	background: url(../../images/chara/elder01.png) no-repeat center top / 57vw auto;
	padding: 45vw 0 0;
}
main.index .study .elder p {
	margin: 0;
	width: 87vw;
	padding: 6vw 6vw 6vw;
}
main.index .study .elder::before {}
main.index .study .movies {
	margin-top: 12vw;
}
main.index .practice {
	padding: 11vw 0 15vw;
}
main.index .practice h2 {}
main.index .practice .elder {
	margin: 4vw 0 0;
	background: url(../../images/chara/elder02.png) no-repeat center top / 57vw auto;
	padding: 44vw 0 0;
	text-align: center;
}
main.index .practice .elder p {
	margin: 0;
	width: 87vw;
	padding: 6vw 6vw 6vw;
}
main.index .practice .elder::before {}
main.index .practice .movies {}
main.index .practice .movies article::before {
	top: -7.5vw;
	left: -6vw;
	width: 18vw;
	height: 24vw;
}
main.index .practice .movies article:nth-of-type(1)::before {}
main.index .practice .movies article:nth-of-type(2)::before {}
main.index .practice .movies article:nth-of-type(3)::before {}
main.index .practice .movies article:nth-of-type(4)::before {}
main.index .practice .movies article:nth-of-type(5)::before {}
main.index .practice .movies article:nth-of-type(6)::before {}
main.index .quiz {
	padding: 11vw 0 16vw;
}
main.index .quiz h2 {}
main.index .quiz p {
	margin: 2vw 0 -6.5vw;
	height: 46vw;
	background: url(../../images/chara/main01.png) no-repeat bottom left 18vw / auto 46vw, url(../../images/chara/main02.png) no-repeat bottom right 18vw / auto 44vw;
}
main.index .quiz a {
	width: 86vw;
	height: 83vw;
	aspect-ratio: unset;
	background: url(../../images/index/quiz_btn_sp.png) no-repeat center / cover;
	border-radius: 12px;
}
main.index .quiz a::after {}
main.index .quiz a:hover::after {}
main.index .quiz a span {
	font-size: 4.25vw;
	top: 65vw;
	width: 74vw;
	height: 11vw;
	padding: 3.5vw 0 0;
}
main.index .quiz a:hover span {}
section.modal {}
section.modal.open {}
section.modal div {}
section.modal div::before {
	top: -4vw;
	right: -3vw;
	width: 8vw;
	height: 8vw;
}
section.modal div iframe {}
#totop {
	bottom: -35vw;
	right: 9vw;
	width: 17vw;
	height: 31vw;
}
#totop.show {
	bottom: 6vw;
}
}


main.quiz {
	padding: 0 13px;
	background: url(../../images/index/top_bg.png) repeat-x center center / auto 100%;
	min-height: calc(100vh - 242px);
}
main.quiz header {
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	height: 170px;
	background: url(../../images/quiz/header_bg_left.png) no-repeat center left / auto 100%,url(../../images/quiz/header_bg_right.png) no-repeat center right / auto 100%, url(../../images/quiz/header_bg_base.png) repeat-x center center / auto 100%;
	position: relative;
}
main.quiz header::before {
	content: '';
	position: absolute;
	top: 49%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	width: 892px;
	height: 55%;
	max-width: 72%;
	background: url(../../images/quiz/header.png) no-repeat center center / contain;
}
main.quiz section.top {
	text-align: center;
}
main.quiz section.top p {
	font-size: 24px;
	line-height: 2.25;
	font-weight: 500;
	padding: 27px 180px 115px;
	margin: 0 auto -70px;
	max-width: 1120px;
	background: url(../../images/chara/main01.png) no-repeat top 4px left 0 / auto 290px, url(../../images/chara/main02.png) no-repeat top 11px right 0 / auto 290px;
}
main.quiz section.top p strong {
	font-size: inherit;
	font-weight: 600;
	color: #FF0000;
}
main.quiz section.top article {
	display: inline-block;
	vertical-align: top;
	width: 360px;
	height: 332px;
	border-radius: 20px;
	background: transparent;
	margin: 0 12px 80px;
	border: 12px solid transparent;
	border-image: url(../../images/frame_gold.png) 12 / 1 / 0 stretch;
	padding: 23px 0 0;
	position: relative;
	z-index: 1;
}
main.quiz section.top article::after {
	content: '';
	width: calc(100% + 12px);
	height: calc(100% + 12px);
	border-radius: 13px;
	background: linear-gradient(to bottom, #7C2900, #4E1A00);
	position: absolute;
	top: -6px;
	left: -6px;
	z-index: -1;
}
main.quiz section.top article.review {}
main.quiz section.top article.challenge {
	width: 700px;
}
main.quiz section.top article h2 {
	font-size: 33px;
	line-height: 1;
	font-weight: 500;
	height: 88px;
	background: url(../../images/index/movie_title_left.png) no-repeat center left / auto 100%,url(../../images/index/movie_title_right.png) no-repeat center right / auto 100%, url(../../images/index/movie_title_base.png) repeat-x center center / auto 100%;
	overflow: hidden;
	border-radius: 40px;
	color: white;
	padding: 28px 0 0;
	transform: scale(0.5) translate(-100%, 0);
	position: absolute;
	top: -56px;
	left: 50%;
	width: 620px;
}
main.quiz section.top article.review h2 {}
main.quiz section.top article.challenge h2 {
}
main.quiz section.top article a {
	display: inline-block;
	vertical-align: top;
	width: 322px;
	height: 276px;
	background-position: center;
	background-size: cover;
	margin: 0 7px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
	border-radius: 14px;
}
main.quiz section.top article a.review {
	background-image: url(../../images/quiz/review.png);
}
main.quiz section.top article a.basic {
	background-image: url(../../images/quiz/basic.png);
}
main.quiz section.top article a.advance {
	background-image: url(../../images/quiz/advance.png);
}
main.quiz section.top article a span {
	font-size: 26px;
	line-height: 1;
	font-weight: 500;
	height: 68px;
	background: url(../../images/menu_btn_left.png) no-repeat center left / auto 100%,url(../../images/menu_btn_right.png) no-repeat center right / auto 100%, url(../../images/menu_btn_base.png) repeat-x center center / auto 100%;
	overflow: hidden;
	border-radius: 40px;
	color: white;
	padding: 20px 0 0;
	display: block;
	text-align: center;
	width: 330px;
	position: absolute;
	top: 195px;
	left: 50%;
	z-index: 2;
	transform: scale(0.75) translate(-67%, 0);
	transition: 0.2s;
}
main.quiz section.top article a:hover span {
	transform: scale(0.70) translate(-72%, 0);
}
main.quiz section.top article a::after {
	content: '';
	position: absolute;
	top: 225px;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%) scale(0.1);
	width: 100%;
	height: 100%;
	background: #00000040;
	transition: 0.2s;
}
main.quiz section.top article a:hover::after {
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
}

@media screen and (max-width: 768px) {
main.quiz {
	padding: 3vw 4vw 0;
}
main.quiz header {
	height: 37vw;
	margin: 0 4vw;
	width: auto;
	background: url(../../images/quiz/header_bg_left.png) no-repeat center left / 25% 100%,url(../../images/quiz/header_bg_right.png) no-repeat center right / 25% 100%, url(../../images/quiz/header_bg_base.png) repeat-x center center / 50% 100%;
}
main.quiz header::before {
	top: 49%;
	max-width: 72vw;
	height: 25vw;
	background-image: url(../../images/quiz/header_sp.png);
}
main.quiz section.top {
	padding: 0 0 5vw;
}
main.quiz section.top p {
	padding: 4.5vw 3vw 50vw;
	font-size: 4.25vw;
	line-height: 2.1;
	background: url(../../images/chara/main01.png) no-repeat bottom -7vw left 13vw / auto 49vw, url(../../images/chara/main02.png) no-repeat bottom -8vw right 13vw / auto 49vw;
	margin: 0 auto;
}
main.quiz section.top p strong {}
main.quiz section.top article {
	margin: 0 0 11vw;
	width: 86vw;
	height: auto;
	padding: 5vw 0 0;
}
main.quiz section.top article.review {}
main.quiz section.top article.challenge {
	width: 86vw;
}
main.quiz section.top article h2 {
	width: 144vw;
	font-size: 7.75vw;
}
main.quiz section.top article.review h2 {}
main.quiz section.top article.challenge h2 {
	padding: 8.5vw 0 0;
}
main.quiz section.top article a {
	width: 74vw;
	height: 64vw;
	margin: 0 0 2vw;
}
main.quiz section.top article a.review {}
main.quiz section.top article a.basic {
	margin: 0 0 4vw;
}
main.quiz section.top article a.advance {}
main.quiz section.top article a span {
	top: 45vw;
	width: 76vw;
	font-size: 6vw;
	height: 17vw;
	padding: 5vw 0 0;
}
main.quiz section.top article a:hover span {}
main.quiz section.top article a::after {
	top: 54vw;
}
main.quiz section.top article a:hover::after {}
}


main.quiz_l {
	/* padding-bottom: 80px; */
}
main.quiz_l .title {
	width: calc(100% - 140px);
	max-width: 1200px;
	margin: 18px auto 0;
	height: 80px;
	border-bottom: solid 3px #351504;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto 65px;
	position: relative;
}
main.quiz_l.review .title {
	background-image: url(../../images/quiz_l/title_review.png);
}
main.quiz_l.basic .title {
	background-image: url(../../images/quiz_l/title_basic.png);
}
main.quiz_l.advance .title {
	background-image: url(../../images/quiz_l/title_advance.png);
}
main.quiz_l .title .num {
	position: absolute;
	top: 10px;
	right: 0;
	font-size: 28px;
	line-height: 1;
	font-weight: 700;
	vertical-align: text-bottom;
	font-family: 'Roboto', sans-serif;
	display: none;
}
main.quiz_l .title .num i {
	display: inline-block;
	font-size: 28px;
	line-height: 1;
	font-weight: 700;
	vertical-align: baseline;
	font-style: normal;
}
main.quiz_l .title .num strong {
	display: inline-block;
	font-size: 54px;
	line-height: 1;
	font-weight: 700;
	vertical-align: text-bottom;
}
main.quiz_l .title .num strong::after {
	content: '/';
	font-weight: 400;
	margin: 0 2px 0 5px;
}
main.quiz_l .qa {
	width: calc(100% - 140px);
	max-width: 1200px;
	margin: 40px auto 0;
	position: relative;
	min-height: 490px;
	position: relative;
	z-index: 2;
}
main.quiz_l .qa::before {
	content: '';
}
main.quiz_l .qa sup {
	display: inline-block;
	vertical-align: baseline;
	font-size: 0.7em;
	font-weight: inherit;
}
main.quiz_l .qa .left {
	display: inline-block;
	vertical-align: top;
	width: 270px;
}
main.quiz_l .qa .left .icon {
	width: 220px;
	height: 220px;
	margin: -18px 0 0;
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain #FFFCF7;
	overflow: hidden;
	border-radius: 10px;
	display: none;
}
main.quiz_l .qa .left .icon.good {
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain, url(../../images/quiz_l/good.png) no-repeat center / 50% #FFFCF7;
}
main.quiz_l .qa .left .icon.bad {
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain, url(../../images/quiz_l/bad.png) no-repeat center / 50% #FFFCF7;
}
main.quiz_l .qa .left .icon.rank_s {
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain, url(../../images/quiz_l/rank_s.png) no-repeat center / 80% #FFFCF7;
}
main.quiz_l .qa .left .icon.rank_a {
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain, url(../../images/quiz_l/rank_a.png) no-repeat center / 80% #FFFCF7;
}
main.quiz_l .qa .left .icon.rank_b {
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain, url(../../images/quiz_l/rank_b.png) no-repeat center / 80% #FFFCF7;
}
main.quiz_l .qa .left .icon.rank_c {
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain, url(../../images/quiz_l/rank_c.png) no-repeat center / 80% #FFFCF7;
}
main.quiz_l .qa .left .icon.rank_d {
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain, url(../../images/quiz_l/rank_d.png) no-repeat center / 80% #FFFCF7;
}
main.quiz_l .qa .right {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 270px);
	padding: 0 0 10px;
	/* overflow: hidden; */
}
main.quiz_l .qa .right .question {
	font-size: 24px;
	line-height: 1.6;
	font-weight: 600;
	padding: 0 0 20px;
	display: none;
}
main.quiz_l .qa .right .question span {
	font-size: inherit;
	font-weight: inherit;
	display: inline-block;
	color: #003ECB;
	text-decoration: underline;
	position: relative;
}
main.quiz_l .qa .right .question span i {
	position: absolute;
	font-size: 18px;
	line-height: 1.6;
	display: block;
	width: max-content;
	max-width: 800px;
	font-style: normal;
	background: #351504;
	color: white;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 2;
	transform: translate(-50%, 0);
	padding: 12px 19px 7px;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0s 0.2s;
}
main.quiz_l .qa .right .question span.show i {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s, opacity 0.2s;
}
main.quiz_l .qa .right .question span::before {
	content: '';
	position: absolute;
	background: #351504;
	width: 20px;
	height: 20px;
	bottom: calc(100% - 10px);
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%) rotate(45deg);
	opacity: 0;
	visibility: hidden;
}
main.quiz_l .qa .right .question span.show::before {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s, opacity 0.2s 0.001s;
}
main.quiz_l .qa .right .selecter {
	margin: 14px 0 18px;
	position: relative;
	cursor: pointer;
	display: none;
}
main.quiz_l .qa .right .selecter span {
	display: block;
	border: solid 4px #9C6E3E;
	padding: 6px 50px 8px;
	position: relative;
	z-index: 2;
	margin: 0 0 0 44px;
	text-align: center;
	font-size: 30px;
	line-height: 1.7;
	font-weight: 500;
	background: linear-gradient(to bottom, #FFFCF7, #FFF1D5);
	border-radius: 16px;
	transition: 0.2s;
}
main.quiz_l .qa .right .selecter span::after {
	content: '';
	position: absolute;
	top: -8px;
	left: -8px;
	z-index: 5;
	width: calc(100% + 16px);
	height: calc(100% + 16px);
	border-radius: 20px;
	border: solid 4px #FFC433;
	transition: 0.2s;
}
main.quiz_l .qa .right .selecter::after {
	content: '';
	position: absolute;
	top: -6px;
	left: 0;
	z-index: 5;
	width: 86px;
	height: 86px;
	overflow: hidden;
	border-radius: 50%;
}
main.quiz_l .qa .right .selecter.no1::after {
	background: url(../../images/quiz_l/circle.png) no-repeat center / contain, url(../../images/quiz_l/no1.png) no-repeat center / auto 42% #FFF6E3;
}
main.quiz_l .qa .right .selecter.no2::after {background: url(../../images/quiz_l/circle.png) no-repeat center / contain, url(../../images/quiz_l/no2.png) no-repeat center / auto 42% #FFF6E3;}
main.quiz_l .qa .right .selecter.no3::after {background: url(../../images/quiz_l/circle.png) no-repeat center / contain, url(../../images/quiz_l/no3.png) no-repeat center / auto 42% #FFF6E3;}
main.quiz_l .qa .right .selecter.selected {cursor: auto;}
main.quiz_l .qa .right .selecter.selected span {
	background: #4E1A00;
	color: white;
	border-color: #9C6E3E!important;
	outline-color: #FFC433!important;
}
main.quiz_l .qa .right .selecter.selected::after {
	background-color: #4E1A00;
}
main.quiz_l .qa .right .selecter:hover span {border-color: red;}
main.quiz_l .qa .right .selecter:hover span::after {
	border-color: red;
}
main.quiz_l .qa .right .selecter.selected:hover::before {opacity: 0;}
main.quiz_l .qa .right .tips {font-size: 20px;line-height: 1.6;font-weight: 400;padding: 0 20px 20px;display: none;}
main.quiz_l .qa .right .anser {
	border: 12px solid;
	border-image: url(../../images/quiz_l/grid_selecter.png) 12 / 1 / 0 stretch;
	padding: 6px 36px 4px;
	position: relative;
	text-align: center;
	font-size: 30px;
	line-height: 1.7;
	font-weight: 500;
	background: #FFFCF7;
	border-radius: 16px;
	position: relative;
	text-align: left;
	margin: 0 0 20px;
	display: none;
}
main.quiz_l .qa .right .anser .main {
	font-size: 24px;
	line-height: 1.4;
	font-weight: 600;
	border-bottom: dashed 2px #351504;
	padding: 0 2px 11px;
}
main.quiz_l .qa .right .anser .main strong {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 600;
	display: inline-block;
	vertical-align: baseline;
	color: #D80006;
	margin: 0 6px;
}
main.quiz_l .qa .right .anser .sub {
	font-size: 18px;
	line-height: 2.1;
	margin: 20px 0 32px;
	font-weight: 500;
}
main.quiz_l .qa .right .anser .sub span {
	font-size: inherit;
	font-weight: inherit;
	display: inline-block;
	color: #003ECB;
	text-decoration: underline;
	position: relative;
}
main.quiz_l .qa .right .anser .sub span i {
	position: absolute;
	font-size: 18px;
	line-height: 1.6;
	display: block;
	width: max-content;
	max-width: 800px;
	font-style: normal;
	background: #351504;
	color: white;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 2;
	transform: translate(-50%, 0);
	padding: 12px 19px 7px;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0s 0.2s;
	transform: scale(0);
}
main.quiz_l .qa .right .anser .sub span.show i {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s, opacity 0.2s;
}
main.quiz_l .qa .right .anser .sub span::before {
	content: '';
	position: absolute;
	background: #351504;
	width: 20px;
	height: 20px;
	bottom: calc(100% - 10px);
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%) rotate(45deg);
	opacity: 0;
	visibility: hidden;
}
main.quiz_l .qa .right .anser .sub span.show::before {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s, opacity 0.2s 0.001s;
}
main.quiz_l .qa .right .anser .sub img {
	display: block;
	margin: 20px auto 0;
	width: 640px;
	max-width: 100%;
}
main.quiz_l .qa .right .result {
	display: none;
}
main.quiz_l .qa .right .result .point {
	font-size: 24px;
	line-height: 1;
	font-weight: 500;
	margin: 30px 0 0;
}
main.quiz_l .qa .right .result .point span {
	font-size: 24px;
	line-height: 1;
	font-weight: 500;
	display: inline-block;
	vertical-align: baseline;
	margin: 0 20px;
}
main.quiz_l .qa .right .result .point span strong {
	font-size: 40px;
	line-height: 1;
	font-weight: 500;
	display: inline-block;
	vertical-align: bottom;
}
main.quiz_l .qa .right .result .point .show_detail {
	font-weight: 500;
	display: inline-block;
	vertical-align: bottom;
	font-size: 15px;
	line-height: 1;
	height: 38px;
	background: url(../../images/index/movie_title_left.png) no-repeat center left / auto 100%,url(../../images/index/movie_title_right.png) no-repeat center right / auto 100%, url(../../images/index/movie_title_base.png) no-repeat center center / 236px 100%;
	overflow: hidden;
	border-radius: 40px;
	color: white;
	padding: 10px 0 0;
	width: 270px;
	text-align: center;
	cursor: pointer;
}
main.quiz_l .qa .right .result .ranking {
	font-size: 24px;
	line-height: 1;
	font-weight: 500;
	margin: 28px 0 0;
}
main.quiz_l .qa .right .result .ranking strong {
	font-size: 48px;
	line-height: 1;
	font-weight: 600;
	display: inline-block;
	vertical-align: baseline;
	margin: 0 2px;
	color: #D80006;
}
main.quiz_l .qa .right .result .comment {
	display: block;
	border: 12px solid;
	border-image: url(../../images/quiz_l/grid_selecter.png) 12 / 1 / 0 stretch;
	padding: 30px 36px 30px;
	position: relative;
	text-align: center;
	font-size: 18px;
	line-height: 2.2;
	font-weight: 600;
	background: #FFFCF7;
	overflow: hidden;
	border-radius: 16px;
	position: relative;
	text-align: left;
	margin: 40px 0 12px;
}
main.quiz_l .qa .btn {
	text-align: center;
	padding-left: 270px;
	display: none;
}
main.quiz_l .qa .btn .wrap {}
main.quiz_l .qa .btn .wrap span {
	font-size: 24px;
	line-height: 1;
	height: 62px;
	background: url(../../images/menu_btn_left.png) no-repeat center left / auto 100%,url(../../images/menu_btn_right.png) no-repeat center right / auto 100%, url(../../images/menu_btn_base.png) repeat-x center center / auto 100%;
	overflow: hidden;
	border-radius: 40px;
	color: white;
	padding: 20px 0 0;
	display: inline-block;
	text-align: center;
	width: 294px;
	cursor: pointer;
}
main.quiz_l .elder {
	position: absolute;
	position: sticky;
	bottom: 0;
	left: calc(50% - 750px);
	z-index: 1;
	width: 400px;
	height: 290px;
	background: url(../../images/chara/elder01.png) no-repeat bottom -150px right 10px / auto 420px;
	margin: -220px 0 0;
}

@media screen and (max-width: 768px) {
main.quiz_l {
	padding: 3vw 0 0;
}
main.quiz_l .title {
	width: 87vw;
	height: 15.5vw;
	margin: 5vw auto 0;
	background-size: auto 11vw;
}
main.quiz_l.review .title {}
main.quiz_l.review .basic {}
main.quiz_l.review .advance {}
main.quiz_l .title .num {
	top: 2vw;
}
main.quiz_l .title .num i {
	font-size: 5vw;
}
main.quiz_l .title .num strong {
	font-size: 10vw;
}
main.quiz_l .title .num strong::after {}
main.quiz_l .qa {
	width: 100%;
	margin: 3vw auto 0;
	min-height: unset;
}
main.quiz_l .qa::before {
	display: none;
}
main.quiz_l .qa .left {
	display: block;
	width: 100%;
}
main.quiz_l .qa .left .icon {
	margin: 4vw auto 5vw;
	width: 47vw;
	height: 47vw;
}
main.quiz_l .qa .left .icon.good {}
main.quiz_l .qa .left .icon.bad {}
main.quiz_l .qa .left .icon.rank_s {}
main.quiz_l .qa .left .icon.rank_a {}
main.quiz_l .qa .left .icon.rank_b {}
main.quiz_l .qa .left .icon.rank_c {}
main.quiz_l .qa .left .icon.rank_d {}
main.quiz_l .qa .right {
	display: block;
	width: 100%;
	padding: 0 0 10vw;
}
main.quiz_l .qa .right .question {
	font-size: 4.5vw;
	padding: 0 0 4vw;
	width: 87vw;
	margin: 0 auto;
}
main.quiz_l .qa .right .selecter {
	margin: 4vw auto 7vw;
	width: 87vw;
}
main.quiz_l .qa .right .selecter span {
	margin: 0 0 0 9vw;
	font-size: 5vw;
	padding: 1.75vw 5vw 1.75vw 7vw;
}
main.quiz_l .qa .right .tips {
	font-size: 3.5vw;
	padding: 0 5vw 3vw 10vw;
}
main.quiz_l .qa .right .question span i {
	max-width: 88vw;
	font-size: 4vw;
	padding: 5vw 5vw 3vw;
}
main.quiz_l .qa .right .selecter::before {display: none;}
main.quiz_l .qa .right .selecter::after {
	top: -2vw;
	width: 18vw;
	height: 18vw;
}
main.quiz_l .qa .right .selecter.no1::after {}
main.quiz_l .qa .right .selecter.no2::after {}
main.quiz_l .qa .right .selecter.no3::after {}
main.quiz_l .qa .right .selecter.selected {}
main.quiz_l .qa .right .selecter.selected span {}
main.quiz_l .qa .right .selecter.selected::after {}
main.quiz_l .qa .right .selecter:hover::before {}
main.quiz_l .qa .right .selecter.selected:hover::before {}
main.quiz_l .qa .right .anser {
	margin: 4vw auto 4vw;
	width: 87vw;
	padding: 7vw 3vw 0vw;
}
main.quiz_l .qa .right .anser .main {
	font-size: 4vw;
	padding: 0 0 4vw;
}
main.quiz_l .qa .right .anser .main strong {
	font-size: 6.5vw;
	margin: 0 1vw;
}
main.quiz_l .qa .right .anser .sub {
	font-size: 4.25vw;
	margin: 3vw 0 4vw;
}
main.quiz_l .qa .right .anser .sub span {}
main.quiz_l .qa .right .anser .sub span i {
	max-width: 88vw;
	font-size: 4vw;
	padding: 5vw 5vw 3vw;
}
main.quiz_l .qa .right .anser .sub span i::before {}
main.quiz_l .qa .right .anser .sub img {
	margin: 4vw auto 0;
}
main.quiz_l .qa .right .result {
	margin: 0 auto 0;
	width: 87vw;
	text-align: center;
}
main.quiz_l .qa .right .result .point {
	font-size: 4.5vw;
	margin: 0vw 0 0;
}
main.quiz_l .qa .right .result .point span {
	font-size: 5vw;
}
main.quiz_l .qa .right .result .point span strong {
	font-size: 6vw;
}
main.quiz_l .qa .right .result .point .show_detail {
	font-size: 4vw;
	height: 11vw;
	width: 70vw;
	padding: 3vw 0 0;
	margin: 3vw 0 0;
}
main.quiz_l .qa .right .result .ranking {
	font-size: 4.5vw;
}
main.quiz_l .qa .right .result .ranking strong {
	font-size: 6.5vw;
}
main.quiz_l .qa .right .result .comment {
	margin: 6vw 0 6vw;
	font-size: 4.5vw;
	line-height: 1.8;
	padding: 3vw 5vw;
}
main.quiz_l .qa .btn {
	padding: 0;
	position: sticky;
	bottom: 0;
	z-index: 5;
	width: 100%;
	height: 23.5vw;
	text-align: right;
	padding: 6vw 7vw 0;
	background: #fedfb1;
	box-shadow: 0px 0px 10px 3px #00000047;
}
main.quiz_l .qa .btn::before {
	content: '';
	background: url(../../images/chara/elder01.png) no-repeat bottom -22vw right 0 / auto 55vw;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 41vw;
	height: 33vw;
}
main.quiz_l .qa .btn .wrap {}
main.quiz_l .qa .btn .wrap span {
	font-size: 5.5vw;
	height: 13vw;
	width: 50vw;
	padding: 3.5vw 0 0;
}
main.quiz_l .elder {
	display: none;
}
}


.resultmodal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 101;
	width: 100%;
	height: 100%;
	background: #1c1c1cd1;
	clip-path: polygon(50% 0%, 50% 0, 50% 100%, 50% 100%);
	transition: 0.3s;
}
.resultmodal.open {
	clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}
.resultmodal .wrap {
	display: block;
	border: 12px solid;
	border-image: url(../../images/quiz_l/grid_selecter.png) 12 / 1 / 0 stretch;
	padding: 42px 6px 4px 58px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: calc(100% - 100px);
	max-width: 1040px;
	height: 68vh;
	text-align: left;
}
.resultmodal .wrap::before {
	content: '';
	background: url(../../images/close_btn.png) no-repeat center / cover;
	position: absolute;
	top: -36px;
	right: -36px;
	z-index: 2;
	width: 50px;
	height: 50px;
	cursor: pointer;
}
.resultmodal .wrap::after {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	z-index: -1;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	background: #FFFCF7;
	overflow: hidden;
	border-radius: 6px;
}
.resultmodal .area {
	height: calc(100% - 48px);
	overflow: auto;
	counter-reset: resultmodalnumber 0;
}
.resultmodal h1 {
	font-size: 30px;
	line-height: 1;
	font-weight: 500;
	padding: 0 0 27px;
}
.resultmodal article {
	border: solid 2px #351504;
	width: calc(100% - 35px);
	margin: 0 0 15px;
	border-radius: 8px;
	background: linear-gradient(to right, #351504 0px,  #351504 130px, white 130px, white);
}
.resultmodal article::before {
	counter-increment: resultmodalnumber 1; 
	content: '問題 ' counter(resultmodalnumber);
	display: inline-block;
	vertical-align: middle;
	font-size: 22px;
	line-height: 1;
	font-weight: 500;
	width: 130px;
	text-align: center;
	color: white;
}
.resultmodal article .icon {
	display: inline-block;
	vertical-align: middle;
	width: 120px;
	height: 120px;
	margin: 0 32px 0 32px;
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain #FFFCF7;
	overflow: hidden;
	border-radius: 10px;
}
.resultmodal article .icon.good {
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain, url(../../images/quiz_l/r_good.png) no-repeat center / 60% #FFFCF7;
}
.resultmodal article .icon.bad {
	background: url(../../images/quiz_l/grid_rank.png) no-repeat center / contain, url(../../images/quiz_l/r_bad.png) no-repeat center / 60% #FFFCF7;
}
.resultmodal article .detail {
	display: inline-block;
	vertical-align: middle;
	padding: 29px 0 8px;
	width: calc(100% - 340px);
}
.resultmodal article .detail p {
	font-size: 18px;
	line-height: 1.6;
	padding: 0 0 18px;
}
.resultmodal article .detail p span {
	font-size: inherit;
	font-weight: inherit;
}
.resultmodal article .detail .anser {
	background: #EBEBEB;
	font-size: 18px;
	line-height: 1.6;
	display: block;
	padding: 16px 24px;
	border-radius: 30px;
	margin: 0 0 10px;
	position: relative;
	padding-left: 158px;
}
.resultmodal article .detail .anser::before {
	content: '正しい答え 　｜ ';
	position: absolute;
	top: 17px;
	left: 24px;
	z-index: 1;
}
.resultmodal article .detail .your_anser::before {
	content: 'あなたの答え ｜ ';
	float: left;
	display: block;
	padding: 0 0 2px;
}
.resultmodal article .detail i {
	display: none;
}

@media screen and (max-width: 768px) {
.resultmodal {}
.resultmodal.open {}
.resultmodal .wrap {
	width: 80vw;
	height: 88vh;
	padding: 6vw 0 0vw;
}
.resultmodal .wrap::before {
	top: -6vw;
	right: -6vw;
	width: 8vw;
	height: 8vw;
}
.resultmodal .wrap::after {}
.resultmodal .area {
	height: calc(100% - 11vw);
	padding: 0 2vw;
}
.resultmodal h1 {
	font-size: 6vw;
	text-align: center;
	padding: 0 0 6vw;
}
.resultmodal article {
	width: 100%;
	margin: 0 0 4vw;
	background: white;
	text-align: center;
	position: relative;
}
.resultmodal article::before {
	font-size: 4.5vw;
	width: auto;
	display: block;
	background: #351504;
	padding: 2vw 0 2vw;
}
.resultmodal article .icon {
	position: absolute;
	top: 12vw;
	left: 3vw;
	margin: 0;
	width: 16.5vw;
	height: 16.5vw;
	border-radius: 0;
}
.resultmodal article .icon.good {}
.resultmodal article .icon.bad {}
.resultmodal article .detail {
	width: 100%;
	padding: 0 3vw 3vw;
}
.resultmodal article .detail p {
	font-size: 3.5vw;
	line-height: 2;
	font-weight: 500;
	padding: 5vw 0 4vw 19vw;
	text-align: left;
	min-height: 20vw;
}
.resultmodal article .detail .anser {
	font-size: 3.5vw;
	padding: 3vw 4vw 3.25vw;
	text-align: left;
	margin: 0 0 2vw;
	padding-left: 30.5vw;
}
.resultmodal article .detail .anser::before {
	top: 3vw;
	left: 5vw;
}
.resultmodal article .detail .your_anser::before {}
}