@charset "UTF-8";
/*=============================================================

* 童話キャラ診断　結果ページ

	Date: 2024-05-13
	
=============================================================*/

#result_fc .result_head,
#result_fc .result_chara{
opacity: 0;
animation: fade-fc 1.0s forwards 1s;
}

@keyframes fade-fc {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}





#wrap_fc .result_txt .link_list {
    margin: 1em auto 3em;
}
#wrap_fc .result_txt .link_list .link-item {}
#wrap_fc .result_txt .link_list .link-item a {
    width: 95%;
				max-width: 600px;
    padding: 0.6em 0;
    justify-content: flex-start;
}
#wrap_fc .result_txt .link_list .link-item a img {
    width: 4.5em;
    margin: 0 1.3em;
}
#wrap_fc .result_txt .link_list .link-item a span {}
/*------------------------------------

結果別 色設定

------------------------------------*/
/* c01 */
#wrap_fc.c01 .result_txt .midashi,
#wrap_fc.c01 .result_txt .habit ul li::before,
#wrap_fc.c01 #lesson .lesson-txt h3 {
		color: #b53e41;
}
#wrap_fc.c01 #common-result .about .link_list .link-item a,
#wrap_fc.c01 .result_txt .link_list .link-item a {
  background: #b53e41;
}

/* c02 */
#wrap_fc.c02 .result_txt .midashi,
#wrap_fc.c02 .result_txt .habit ul li::before,
#wrap_fc.c02 #lesson .lesson-txt h3 {
		color: #8d5249;
}
#wrap_fc.c02 #common-result .about .link_list .link-item a,
#wrap_fc.c02 .result_txt .link_list .link-item a  {
  background: #8d5249;
}

/* c03 */
#wrap_fc.c03 .result_txt .midashi,
#wrap_fc.c03 .result_txt .habit ul li::before,
#wrap_fc.c03 #lesson .lesson-txt h3 {
		color: #7d893d;
}
#wrap_fc.c03 #common-result .about .link_list .link-item a,
#wrap_fc.c03 .result_txt .link_list .link-item a  {
  background: #7d893d;
}

/* c04 */
#wrap_fc.c04 .result_txt .midashi,
#wrap_fc.c04 .result_txt .habit ul li::before,
#wrap_fc.c04 #lesson .lesson-txt h3 {
		color: #e68e22;
}
#wrap_fc.c04 #common-result .about .link_list .link-item a,
#wrap_fc.c04 .result_txt .link_list .link-item a  {
  background: #e68e22;
}

/* c05 */
#wrap_fc.c05 .result_txt .midashi,
#wrap_fc.c05 .result_txt .habit ul li::before,
#wrap_fc.c05 #lesson .lesson-txt h3 {
		color: #ac4c6e;
}
#wrap_fc.c05 #common-result .about .link_list .link-item a,
#wrap_fc.c05 .result_txt .link_list .link-item a  {
  background: #ac4c6e;
}


#wrap_fc.c01 #result_fc {
		background-image: url(../images/bg_c01.jpg);
}
#wrap_fc.c02 #result_fc {
		background-image: url(../images/bg_c02.jpg);
}
#wrap_fc.c03 #result_fc {
		background-image: url(../images/bg_c03.jpg);
}
#wrap_fc.c04 #result_fc {
		background-image: url(../images/bg_c04.jpg);
}
#wrap_fc.c05 #result_fc {
		background-image: url(../images/bg_c05.jpg);
}
/* 他の結果非表示 */
#wrap_fc.c01 #other-result ul li.c01-link {
		display: none;
}
#wrap_fc.c02 #other-result ul li.c02-link {
		display: none;
}
#wrap_fc.c03 #other-result ul li.c03-link {
		display: none;
}
#wrap_fc.c04 #other-result ul li.c04-link {
		display: none;
}
#wrap_fc.c05 #other-result ul li.c05-link {
		display: none;
}

/*------------------------------------

全体

------------------------------------*/
#main_fc {
    padding-bottom: 1em;
}
#wrap_fc.c01 {}

/*------------------------------------

結果表示 キャラクター

------------------------------------*/
#result_fc {
		background-size: 100%;
		background-position: center top;
		padding: 0 0 3.5em;
}
/* head */
#result_fc .result_head {
		display: flex;
		justify-content: center;
		align-items: center;
}
#result_fc .result_head .result_txt {
		width: 29%;
		margin-top: -6px;
		margin-left: 4%;
}
#result_fc .result_head .result_type {
		width: 70%;
		margin: 0;
}
#result_fc .result_head .result_type img {}
/* chara */
#result_fc .result_chara {
		position: relative;
		margin: -10% auto 1em;
}
#result_fc .result_chara img {
		position: relative;
}
#result_fc .result_chara::before {
		display: block;
		width: 122%;
		height: 67%;
		content: '';
		background-image: url(../images/result_bg.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right 0;
		position: absolute;
		top: 18%;
		right: 3%;
}
/*------------------------------------

結果テキスト

------------------------------------*/
.result_txt {
		width: 90%;
		margin: 0 auto;
}
.result_txt .midashi {
		font-family: "Shuei MaruGo B", sans-serif;
		font-size: 120%;
}
/* 【おしゃれの傾向】 */
.result_txt .habit {}
.result_txt .habit ul {
		text-align: left;
		margin-left: 1em;
		font-size: 90%;
		line-height: 1.5;
}
.result_txt .habit ul li {
		margin: 0.6em 0;
}
.result_txt .habit ul li::before {
		display: inline-block;
		width: 1em;
		height: 1em;
		content: '●';
		font-size: 90%;
		margin: 0 0.2em 0 -1.2em;
}
.result_txt .habit ul li .marker {
		background: #FFF;
}
/* 【おしゃれの価値観の割合】 */
.result_txt .ratio {
		margin: 3em 0;
}
.result_txt .ratio img {
		width: 94%;
}
.result_txt .ratio img:nth-child(1) {}
.result_txt .ratio img:nth-child(2) {
		margin: 0.7em 0 0.7em;
}
/*------------------------------------

LESSON!

------------------------------------*/
#lesson {
		margin: 0 0 7em;
}
#lesson h2 {}
#lesson h2 img {
		width: 85%;
}
#lesson .lesson-txt {
		position: relative;
}
#lesson .lesson-txt::before {
		display: block;
		width: calc(100% + 6em);
		height: calc(100% + 2.8em);
		content: '';
		background-image: url(../images/lesson_bg.png);
		background-size: 140% 100%;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 0.7em;
		right: -3em;
}
#lesson .lesson-txt img {
		width: 40%;
		position: relative;
}
#lesson .lesson-txt h3 {
		font-family: "Shuei MaruGo B", sans-serif;
		font-size: 120%;
		margin: 1.5em 0 0.8em;
		position: relative;
		line-height: 1.4;
}
#lesson .lesson-txt p {
		text-align: justify;
		font-size: 79%;
		width: 90%;
		margin: 0 auto;
		line-height: 2;
		letter-spacing: 0.1em;
		position: relative;
		font-family: "游ゴシック体 Pr6N D";
		transform: rotate(0.05deg)
}
/*------------------------------------

結果をシェア！

------------------------------------*/
.share {}
.share a {
		display: block;
		width: 90%;
		margin: 0 auto;
}
.share a img {}
/* ＼ 表示共通 ／ */
.point-txt {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 154%;
		font-family: "Shuei MaruGo B", sans-serif;
}
.point-txt::before, .point-txt::after {
		display: block;
		width: 2px;
		height: 1.3em;
		content: '';
		background: #000;
		transform: rotate(-35deg); /* margin: 0 0.8em 0 0; */
}
.point-txt::after {
		transform: rotate(35deg); /* margin: 0 0 0 0.8em; */
}
.point-txt span {
		margin: 0 0.9em;
		letter-spacing: 0.2em;
}
.point-txt span img {
		width: 1.2em;
		margin-right: 0.3em;
}
/*------------------------------------

プレゼントエリア

------------------------------------*/
#present {
		margin: 3em auto 0;
		width: 85%;
}
#present p {
		margin-bottom: 1.5em;
}
#present p .max-txt {
		font-size: 125%;
		line-height: 1.6;
		margin-top: 0.2em;
		display: inline-block;
}
#present p .marker {
		background: #FFF;
		color: #cb326d;
		padding: 0.1em;
}
#present .photo {
		width: 89%;
		margin: 0 auto 1.5em;
}
#present .photo img {}
#present .photo p.note {
		text-align: justify;
		font-size: 77%;
		margin: 0.7em 0 0;
		font-family: "游ゴシック体 Pr6N D";
		transform: rotate(0.05deg);
}
#present .link_list {}
#present .link_list .link-item {}
#present .link_list .link-item a {
		background: #cb326d;
		color: #FFF;
}
#present .link_list .link-item a span {}
/*------------------------------------

結果共通エリア

------------------------------------*/
#common-result {}
#common-result .common-ttl {
    margin: 3.2em auto 0em;
}
#common-result .common-ttl::before {
		display: block;
		width: 2em;
		height: 2em;
		content: '';
		background-image: url(../images/midashi_dia.svg);
		background-repeat: no-repeat;
		background-size: contain;
		margin: 0 auto 0.3em;
}
#common-result .common-ttl::after {
		display: block;
		width: 100%;
		height: 1em;
		content: '';
		background-image: url(../images/midashi_line.svg);
	background-repeat: no-repeat;
		background-size: contain;
}
#common-result .common-ttl h3 {
    font-family: "Shuei MaruGo B", sans-serif;
    color: #cb326d;
    font-size: 120%;
    line-height: 1.4;
    margin-bottom: 0.7em;
}
/* ファッション診断って？ */
#common-result .about {
    width: 85%;
    margin: 0 auto;
}
#common-result .about .about-image {
    width: 95%;
    margin: 0 auto 1em;
}
#common-result .about p {
    text-align: justify;
    font-size: 75%;
    font-family: "游ゴシック体 Pr6N D";
				transform: rotate(0.05deg);
}

#common-result .about .link_list {
    margin: 2em auto 0;
}
#common-result .about .link_list .link-item {}
#common-result .about .link_list .link-item a {
    width: 100%;
    padding: 0.6em 0;
    justify-content: flex-start;
}
#common-result .about .link_list .link-item a img {
    width: 4.5em;
    margin: 0 1.3em;
}
#common-result .about .link_list .link-item a span {}
/* 他の童話キャラの結果を見る */
#other-result {
    width: 90%;
    margin: 0 auto 5em;
}
#other-result ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0.5em auto;
}
#other-result ul li {
    width: 48%;
    margin-bottom: 1em;
}
#other-result ul li a {}
#other-result ul li a img {}
/* 最初から診断する */
#common-result #other-result .link_list {}
#common-result #other-result .link_list .link-item {}
#common-result #other-result .link_list .link-item a {}
#common-result #other-result .link_list .link-item a span {}

#common-result #other-result .link_list a::after {
		background-image: url(../images/icon_back.svg);
		width: 1.7em;
}
/*------------------------------------

監修

------------------------------------*/
#prof {
    background: #faeaf0;
    padding: 2em 0;
}
/* 監修紹介 */
#prof .prof-head {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}
#prof .prof-head img {
    width: 5.5em;
    margin-right: 1.2em;
}
#prof .prof-head .prof-name {}
#prof .prof-head .prof-name .prof-main {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.6em;
}
#prof .prof-head .prof-name .prof-main .prof_min {
    margin-right: 0.5em;
    font-size: 90%;
}
#prof .prof-head .prof-name .prof-main h3 {
    font-family: "Shuei MaruGo B", sans-serif;
    margin: 0;
    font-size: 150%;
}
#prof .prof-head .prof-name .prof-sub {
    font-size: 72%;
    line-height: 1.5;
}
/* 監修詳細 */
#prof .prof-detail {}
#prof .prof-detail p {
    width: 85%;
    margin: 2em auto;
    text-align: justify;
    font-size: 80%;
    letter-spacing: 0.1em;
    font-family: "游ゴシック体 Pr6N D";
				transform: rotate(0.05deg);
    line-height: 2.1;
}


#prof .link_list {}
#prof .link_list .link-item {}
#prof .link_list .link-item a {
    width: 90%;
    background: #FFF;
    color: #595757;
    padding: 1.0em 0;
    justify-content: flex-start;
    font-size: 66%;
}
#prof .link_list .link-item a img {
    width: 3.5em;
    margin: 0 1.3em 0 2em;
}

#prof .link_list .link-item:nth-child(2) a img {
    width: 2.5em;
    margin: 0 1.3em 0 2.5em;
}

#prof .link_list .link-item a span {}

#prof .link_list a::after {
    background-image: url(../images/arrow_g.svg);
}

/*------------------------------------

応募方法ポップアップ

------------------------------------*/
.popup_wrap {
    position: relative;
    z-index: 10000000;
}
.popup_box {
		display: none;
		width: 100vw;
		height: 100vh;
		/* margin-left: calc(-50vw + 400px); */
		/* padding: 30px 0; */
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: rgba(0, 0, 0, 0.2);
}
.popup_box .popup_center {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		width: 100vw;
}
.popup_box .popup_inner {
		background-image: url(../images/bg_present.jpg?=new);
		border-radius: 0.5em;
		background-size: 100%;
		width: 90%;
		height: 90%;
		overflow-y: scroll;
		margin: 0 auto;
		padding: 1em 0;
		position: relative;
}
/* popup title */
.popup-ttl {
		color: #cb326d;
		margin: 2em 0;
}
.popup-ttl .marker {
		background: #FFF;
		padding: 0.1em;
		font-size: 125%;
		line-height: 1.6;
}
.popup-ttl h4 {
		font-family: "Shuei MaruGo B", sans-serif;
		font-size: 190%;
		margin: 0.3em 0 0;
}
/* popup step */
.step-wrap {}
.step-wrap ul {}
.step-wrap ul li {
		margin: 0 0 3em;
}
.step-wrap .step-head {
		width: 33%;
}
.step-wrap p {
		font-size: 80%;
		margin: 0.3em auto 1.6em;
		width: 85%;
		line-height: 1.9;
}
.step-wrap p a {
		text-decoration: underline !important;
}
.step-wrap .step-image {
		width: 80%;
		margin: 0 0 0.6em;
}
.step-wrap .link_list {}
.step-wrap .link_list .link-item {}
.step-wrap .link_list .link-item a {
		font-size: 59%;
		color: #808080;
		background: #FFF;
		justify-content: flex-start;
}
.step-wrap .link_list .link-item a img {
		margin: 0 2em 0 2em;
		width: 2em;
}
.step-wrap .link_list .link-item a span {}
.step-wrap .link_list a::after {
		background-image: url(../images/arrow_g.svg);
}
.step-wrap .shimekiri-txt {
		color: #cb326d;
		text-decoration: underline;
		letter-spacing: 0.1em;
		font-size: 90%;
}
#close-bottom {
		margin: 4em auto 1em;
}
#close-bottom img {}
#close-bottom img:nth-child(1) {
		width: 1.7em;
		display: block;
		margin: 0 auto 0.3em;
}
#close-bottom img:nth-child(2) {
		width: 3em;
}
/* close */
#close-fixed {
		position: fixed;
		top: 5%;
		right: 0;
		width: 100%
}
#close-fixed .close-inner {
		max-width: 600px;
		width: 90%;
		margin: 0 auto;
		position: relative;
}
#close-fixed span {
		width: 1.5em;
		height: 1.5em;
		background-image: url(../images/present_close.svg);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
		position: absolute;
		top: 1em;
		right: 1em;
}




/************************************

PC用

************************************/
@media (min-width: 801px) {
/*------------------------------------

全体

------------------------------------*/
#main_fc { }
#wrap_fc.c01 { }

/*------------------------------------

結果表示 キャラクター

------------------------------------*/
#result_fc { }
/* head */
#result_fc .result_head {width: 85%;margin: 0 auto;}
#result_fc .result_head .result_txt { }
#result_fc .result_head .result_type { }
#result_fc .result_head .result_type img { }
/* chara */
#result_fc .result_chara {width: 85%;}
#result_fc .result_chara img { }
#result_fc .result_chara::before { }
/*------------------------------------

結果テキスト

------------------------------------*/
.result_txt { }
.result_txt .midashi { }
/* 【おしゃれの傾向】 */
.result_txt .habit {text-align: center;}
.result_txt .habit ul {font-size: 100%;display: inline-grid;}
.result_txt .habit ul li {display: inline-block;margin: 0.4em 0;}
.result_txt .habit ul li::before { }
.result_txt .habit ul li .marker { }
/* 【おしゃれの価値観の割合】 */
.result_txt .ratio { }
.result_txt .ratio img {width: 77%;}
.result_txt .ratio img:nth-child(1) { }
.result_txt .ratio img:nth-child(2) { }
/*------------------------------------

LESSON!

------------------------------------*/
#lesson { }
#lesson h2 {margin-bottom: 0.6em;}
#lesson h2 img {width: 74%;}
#lesson .lesson-txt { }
#lesson .lesson-txt::before {background-size: 100% 100%;}
#lesson .lesson-txt img {width: 31%;}
#lesson .lesson-txt h3 { }
#lesson .lesson-txt p { }
/*------------------------------------

結果をシェア！

------------------------------------*/
.share { }
.share a {width: 68%;}
.share a img { }
/* ＼ 表示共通 ／ */
.point-txt { }
.point-txt::before, .point-txt::after { }
.point-txt::after { }
.point-txt span { }
.point-txt span img { }
/*------------------------------------

プレゼントエリア

------------------------------------*/
#present { }
#present p { }
#present p .max-txt { }
#present p .marker { }
#present .photo { }
#present .photo img { }
#present .photo p.note { }
#present .link_list { }
#present .link_list .link-item { }
#present .link_list .link-item a { }
#present .link_list .link-item a span { }
/*------------------------------------

結果共通エリア

------------------------------------*/
#common-result { }
#common-result .common-ttl { }
#common-result .common-ttl::before {width: 3em;height: 3em;}
#common-result .common-ttl::after { }
#common-result .common-ttl h3 {font-size: 140%;}
/* ファッション診断って？ */
#common-result .about { }
#common-result .about .about-image { }
#common-result .about p { }

#common-result .about .link_list { }
#common-result .about .link_list .link-item { }
#common-result .about .link_list .link-item a { }
#common-result .about .link_list .link-item a img { }
#common-result .about .link_list .link-item a span { }
/* 他の童話キャラの結果を見る */
#other-result { }
#other-result ul { }
#other-result ul li { }
#other-result ul li a { }
#other-result ul li a img { }
/* 最初から診断する */
#common-result #other-result .link_list { }
#common-result #other-result .link_list .link-item { }
#common-result #other-result .link_list .link-item a { }
#common-result #other-result .link_list .link-item a span { }

#common-result #other-result .link_list a::after { }
/*------------------------------------

監修

------------------------------------*/
#prof {border-radius: 2em;}
/* 監修紹介 */
#prof .prof-head { }
#prof .prof-head img { }
#prof .prof-head .prof-name { }
#prof .prof-head .prof-name .prof-main { }
#prof .prof-head .prof-name .prof-main .prof_min { }
#prof .prof-head .prof-name .prof-main h3 { }
#prof .prof-head .prof-name .prof-sub { }
/* 監修詳細 */
#prof .prof-detail { }
#prof .prof-detail p { }


#prof .link_list { }
#prof .link_list .link-item { }
#prof .link_list .link-item a { }
#prof .link_list .link-item a img { }

#prof .link_list .link-item:nth-child(2) a img { }

#prof .link_list .link-item a span { }

#prof .link_list a::after { }

/*------------------------------------

応募方法ポップアップ

------------------------------------*/
.popup_wrap { }
.popup_box { }
.popup_box .popup_center { }
.popup_box .popup_inner {max-width: 600px;}
/* popup title */
.popup-ttl { }
.popup-ttl .marker { }
.popup-ttl h4 { }
/* popup step */
.step-wrap { }
.step-wrap ul { }
.step-wrap ul li { }
.step-wrap .step-head {width: 26%;}
.step-wrap p { }
.step-wrap p a { }
.step-wrap .step-image { }
.step-wrap .link_list { }
.step-wrap .link_list .link-item { }
.step-wrap .link_list .link-item a { }
.step-wrap .link_list .link-item a img { }
.step-wrap .link_list .link-item a span { }
.step-wrap .link_list a::after { }
.step-wrap .shimekiri-txt { }
#close-bottom { }
#close-bottom img { }
#close-bottom img:nth-child(1) { }
#close-bottom img:nth-child(2) { }
/* close */
#close-fixed { }
}