@charset "UTF-8";


/* reset ---------------------------------------*/

div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,
h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,
th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;word-break: break-all;font-size:inherit;width:100%;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q::before,q::after{content:'';}
abbr{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{font-size:100%;}
legend{color:#000;}
select,input,button,textarea{font-size:inherit;font-family:inherit;box-sizing: border-box;}
pre,code,kbd,samp{font-family:monospace;font-size:108%;line-height:100%;}
figure{padding:0;margin:0;}
input[type="submit"],
input[type="button"],
button {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
button::-webkit-search-decoration {display: none;}
input[type="submit"]::focus,
input[type="button"]::focus,
button::focus {outline-offset: -2px;}


/* base ---------------------------------------*/

*{box-sizing:border-box;}

html,body{height:100%;}

body{
	-webkit-text-size-adjust: 100%;
	padding:0;
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-feature-settings: "palt" 1;
	-webkit-font-feature-settings: "palt" 1;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: #291900;
}

a{
	text-decoration: none;
	color:inherit;
	transition: all .3s ease;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

a:hover{opacity: 0.5;}

img{
	vertical-align: top;
	line-height: 1;
	max-width:100%;
	height:auto;
}


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

.clearfix::after,
.inner::after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.ov-h{overflow: hidden;}

/* layout ---------------------------------------*/
.wrapper {
	overflow: hidden;
}

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

.text-link {text-decoration: underline;}
.text-link:hover {text-decoration: none;}


/* topcommon ---------------------------------------*/
.topwrapper {
	display: none;
	background: #F3EAE2;
}

.topwrapper.is-active {
	display: block;
}

.btn-start {
	width: 273px;
	aspect-ratio: 370 / 116;
	background: url('../img/btn_diagnosis.png') no-repeat center center / cover;
	cursor: pointer;
	transition: all .3s ease;
}

.btn-start:hover {
	opacity: 0.5;
}

.btn-start-text {
	position: absolute;
	top: 48%;
	left: 52%;
	transform: translate(-50%, -50%);
	width: calc(190 / 273 * 100%);
}

.btn-start-text img {
	width: 100%;
}

.topsection {
	position: relative;
}

.topsection + .topsection::before {
	position: absolute;
	top: -104px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: 36px;
	height: 23px;
	background: url('../img/icon_triangle.svg') no-repeat center center / contain;
	content: '';
}

.topsection-block {
	position: relative;
	background: #fff;
	border: 6px solid #F5A200;
	border-radius: 30px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.35);
}

.topsection-title {
	position: absolute;
	top: -52px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: 572px;
	height: 93px;
	background: url('../img/title_frame.png') no-repeat center center / contain;
	content: '';
}

.topkv-btn.btn-start {
	width: calc(273 / 1280 * 100%);
}


/* topkv ---------------------------------------*/
.topkv {
	position: relative;
	background: url('../img/kv.jpg') no-repeat center center / contain;
	width: 100%;
	aspect-ratio: 1280 / 720;
}

.topkv-title {
	position: absolute;
	top: 68.8%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(830 / 1280 * 100%);
}

.topkv-title img {
	width: 100%;
}

.topkv-text {
	position: absolute;
	top: 60.4%;
	left: 13.7%;
	transform: translate(-50%, -50%);
	width: calc(178 / 1280 * 100%);
}

.topkv-text img {
	width: 100%;
}

.topkv-logo {
	position: absolute;
	top: 3%;
	left: 4.5%;
	width: calc(190 / 1280 * 100%);
}

.topkv-logo img {
	width: 100%;
}

.topkv-btn {
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/* topintro ---------------------------------------*/
.topintro {
	padding: 60px 20px 136px;
}

.topintro-block {
	position: relative;
	padding: 30px 20px 22px;
	background: linear-gradient(to bottom, #E4201B 0%, #700007 60%, #291900 100%);
	border: 6px solid #fff;
	border-radius: 30px;
}

.topintro-title {
	margin: 0 auto 20px;
	max-width: 530px;
	width: 100%;
}

.topintro-title img {
	width: 100%;
}

.topintro-text {
	font-size: 24px;
	font-weight: 700;
	line-height: calc(40 / 24);
	text-align: center;
	letter-spacing: 0.05em;
	color: #F3EAE2;
}

.topintro-image-01 {
	position: absolute;
	bottom: -6px;
	left: -97.5%;
	right: 0;
	margin: 0 auto;
	width: min(calc(318 / 1280 * 100vw), 318px);
}

.topintro-image-01 img {
	width: 100%;
}

.topintro-image-02 {
	position: absolute;
	bottom: -6px;
	left: 0;
	right: -97.5%;
	margin: 0 auto;
	width: min(calc(318 / 1280 * 100vw), 318px);
}

.topintro-image-02 img {
	width: 100%;
}


/* tophowto ---------------------------------------*/
.tophowto {
	padding: 0 20px 136px;
}

.tophowto-block {
	padding: 76px 20px 40px;
}

.tophowto-title-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 457px;
}

.tophowto-title-text img {
	width: 100%;
}

.tophowto-list {
	max-width: 576px;
	width: 100%;
	margin: 0 auto;
}

.tophowto-list > li {
	display: flex;
	align-items: center;
	gap: 25px;
}

.tophowto-list > li + li {
	margin-top: 20px;
}

.tophowto-list-step {
	position: relative;
	width: 151px;
	height: 66px;
	background: url('../img/icon_step.png') no-repeat center center / contain;
	content: '';
}

.tophowto-list-step-num {
	position: absolute;
	top: 46%;
	left: 75%;
	transform: translate(-50%, -50%);
	width: auto;
	height: 37px;
}

.tophowto-list-step-num img {
	width: auto;
	height: 100%;
}

.tophowto-list-text {
	padding-bottom: 10px;
	font-size: 24px;
	font-weight: 700;
	line-height: calc(50 / 24);
}


/* topschedule ---------------------------------------*/
.topschedule {
	padding: 0 20px 136px;
}

.topschedule-block {
	padding: 40px 20px 20px;
}

.topschedule-title-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 365px;
}

.topschedule-title-text img{
	width: 100%;
}

.topschedule-text {
	font-size: 34px;
	font-weight: 700;
	line-height: calc(50 / 34);
	text-align: center;
}

.topschedule-text strong {
	font-size: 60px;
	font-weight: 700;
}


/* topprize ---------------------------------------*/
.topprize {
	padding: 0 20px 108px;
}

.topprize-block {
	padding: 90px 20px 34px;
	background: linear-gradient(to bottom, #DD213E 0%, #860311 100%);
}

.topprize-title-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 97px;
}

.topprize-title-text img{
	width: 100%;
}

.topprize-info {
	margin: 0 auto 46px;
	max-width: 668px;
	width: 100%;
}

.topprize-info img {
	width: 100%;
}

.topprize-image {
	margin: 0 auto 74px;
	max-width: 345px;
	width: 100%;
}

.topprize-image img {
	width: 100%;
}

.topprize-caption {
	padding-left: 20px;
	font-size: 14px;
	font-weight: 400;
	line-height: calc(24 / 14);
	color: #fff;
}


/* topterms ---------------------------------------*/
.topterms {
	padding: 0 20px 40px;
}

.topsection.topterms::before {
	top: -50px;
}

.topterms-title {
	margin: 0 auto 26px;
	width: 347px;
}

.topterms-title img {
	width: 100%;
}

.topterms-block-lead {
	font-size: 14px;
	font-weight: 400;
	line-height: calc(24 / 14);
	letter-spacing: 0.1em;
}

.topterms-block-title {
	margin-top: 24px;
	margin-bottom: 3px;
	font-size: 18px;
	font-weight: 700;
	line-height: calc(24 / 18);
}

.topterms-block-text {
	font-size: 14px;
	font-weight: 400;
	line-height: calc(24 / 14);
}

.topterms-block-numlist > li,
.topterms-block-list > li,
.topterms-block-captionlist > li {
	font-size: 14px;
	font-weight: 400;
	line-height: calc(24 / 14);
	padding-left: 14px;
	text-indent: -14px;
}

.topterms-block-list > li,
.topterms-block-captionlist > li {
	position: relative;
	text-indent: unset;
}

.topterms-block-list > li::before {
	position: absolute;
	top: 0;
	left: 3px;
	font-size: 14px;
	content: '・';
}

.topterms-block-captionlist > li::before {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 14px;
	content: '※';
}


/* topfooter ---------------------------------------*/
.topfooter {
	padding: 0 20px 50px;
}

.topfooter-copyright {
	margin-bottom: 40px;
	padding: 22px 20px;
	background: #fff;
	border-radius: 15px;
}

.topfooter-copyright small {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
}

.topfooter-btn {
	position: relative;
	margin: 0 auto;
}


/* diagnosiswrapper ---------------------------------------*/

.diagnosiswrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	background: #F3EAE2;
	z-index:2;
}

.diagnosiswrapper.is-active {
	display: block;
}

.diagnosis-head{
	position: relative;
	z-index:2;
}

.diagnosis-block-title {
	position: absolute;
	top: 1vw;
	left: 1.7%;
}

.diagnosis-block-title-image {
	display: block;
	width: calc(802 / 1920 * 100vw);
}

.diagnosis-block-title-image img {
	width: 100%;
}

.diagnosis-block-turn {
	position: absolute;
	top: 8.6vw;
	left: 22.4%;
}

.diagnosis-block-turn-image {
	display: block;
	width: calc(400 / 1920 * 100vw);
}

.diagnosis-block-turn-image img {
	width: 100%;
}

/* diagnosis ---------------------------------------*/

.diagnosis {
	height: calc(100% - 50px);
}

.diagnosis-block {
	display: none;
	position: relative;
	width: 100%;
	height: 100%;
}

.diagnosis-block.is-current {
	display: block;
}

.diagnosis-block::after {
	position: absolute;
	bottom: -1px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: 100%;
	aspect-ratio: 1920 / 220;
	background: url('../img/diagnosis/bg_bottom.jpg') no-repeat center center / contain;
	content: '';
}

.diagnosis-bg-01 {
	width: 100%;
	height: 100%;
	background: url('../img/diagnosis/bg_diagnosis_01.jpg') no-repeat center center / cover;
}

.diagnosis-bg-02 {
	width: 100%;
	height: 100%;
	background: url('../img/diagnosis/bg_diagnosis_02.jpg') no-repeat center center / cover;
}

.diagnosis-block-question {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.diagnosis-question-num {
	position: absolute;
	z-index: 3;
	transform: translate(-50%, -50%);
}

.diagnosis-remainingturn-num {
	position: absolute;
	z-index: 3;
	transform: translate(-50%, -50%);
}

.diagnosis-num-01 {
	aspect-ratio: 26 / 57;
	background: url('../img/diagnosis/img_num_01.png') no-repeat center center / contain;
}
.diagnosis-num-02 {
	aspect-ratio: 41 / 58;
	background: url('../img/diagnosis/img_num_02.png') no-repeat center center / contain;
}
.diagnosis-num-03 {
	aspect-ratio: 41 / 60;
	background: url('../img/diagnosis/img_num_03.png') no-repeat center center / contain;
}
.diagnosis-num-04 {
	aspect-ratio: 41 / 57;
	background: url('../img/diagnosis/img_num_04.png') no-repeat center center / contain;
}

.diagnosis-question-num.diagnosis-num-01 {
	width: calc(26 / 1920 * 100vw);
	top: 4.2vw;
	left: 6.3vw;
}
.diagnosis-question-num.diagnosis-num-02 {
	width: calc(40 / 1920 * 100vw);
	top: 4.2vw;
	left: 6.4vw;
}
.diagnosis-question-num.diagnosis-num-03 {
	width: calc(40 / 1920 * 100vw);
	top: 4.2vw;
	left: 6.4vw;
}
.diagnosis-question-num.diagnosis-num-04 {
	width: calc(40 / 1920 * 100vw);
	top: 4.2vw;
	left: 6.4vw;
}

.diagnosis-remainingturn-num.diagnosis-num-01 {
	width: calc(18 / 1920 * 100vw);
	top: 9.3vw;
	left: 35.9vw;
}
.diagnosis-remainingturn-num.diagnosis-num-02 {
	width: calc(27 / 1920 * 100vw);
	top: 9.3vw;
	left: 35.9vw;
}
.diagnosis-remainingturn-num.diagnosis-num-03 {
	width: calc(27 / 1920 * 100vw);
	top: 9.3vw;
	left: 35.9vw;
}
.diagnosis-remainingturn-num.diagnosis-num-04 {
	width: calc(27 / 1920 * 100vw);
	top: 9.3vw;
	left: 35.9vw;
}

.diagnosis-block-title-text {
	position: absolute;
	top: 49%;
	left: 57.2%;
	transform: translate(-50%, -50%);
	width: calc(710 / 802 * 100%);
}

.diagnosis-block-title-text img {
	width: 100%;
}

.diagnosis-block-character {
	position: absolute;
	bottom: 5.4vw;
	left: 21%;
	transform: translateX(-50%);
	width: calc(436 / 1920 * 100vw);
}

.diagnosis-block-character img {
	width: 100%;
}

.diagnosis-block-subcharacter {
	position: absolute;
	bottom: 7.7vw;
	left: 74.5%;
	transform: translateX(-50%);
	width: calc(628 / 1920 * 100vw);
}

.diagnosis-block-subcharacter img {
	width: 100%;
}

.diagnosis-block-speechbubble {
	position: absolute;
	bottom: 1vw;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	width: calc(1706 / 1920 * 100vw);
	aspect-ratio: 1706 / 324;
}

.diagnosis-block-speechbubble::after {
	position: absolute;
	bottom: 23%;
	left: 88.4%;
	z-index: 1;
	width: calc(34 / 1706 * 100%);
	aspect-ratio: 24 / 21;
	background: url('../img/diagnosis/icon_next.svg') no-repeat;
	background-size: contain;
	content: '';
}

.diagnosis-block-speechbubble-01 {background: url('../img/diagnosis/img_speechbubble_01.png') no-repeat center center / contain;}
.diagnosis-block-speechbubble-02 {background: url('../img/diagnosis/img_speechbubble_02.png') no-repeat center center / contain;}

.diagnosis-block-speechbubble-02::before {
	position: absolute;
	top: 3.8vw;
	left: 6.5%;
	transform: translateX(-50%);
	z-index: 1;
	width: calc(304 / 1706 * 100vw);
	aspect-ratio: 230 / 49;
	background: url('../img/diagnosis/icon_daijobu.png') no-repeat;
	background-size: contain;
	content: '';
}

.diagnosis-block-speechbubble-question {
	position: absolute;
	top: 55%;
	left: 18.5%;
	transform: translateY(-50%);
	width: auto;
	height: calc(44 / 324 * 100%);
}

.diagnosis-block-speechbubble-question img {
	width: auto;
	height: 100%;
}

.diagnosis-block-speechbubble-02 .diagnosis-block-speechbubble-question {
	top: 54%;
	left: 18.5%;
	height: calc(170 / 324 * 100%);
}

.diagnosis-block-speechbubble .icon-triangle {
	position: absolute;
	bottom: 2.8vw;
	left: 88.6%;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	border-top: 20px solid #291900;
	border-bottom: 0;
	content: '';
}

.diagnosis-block-answer {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	background: rgba(34, 24, 21, 0.6);
}

.diagnosis-block-answer.is-active {
	display: block;
}

.diagnosis-block-answer-list {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(calc(766 / 846 * 100vw), 766px);
	aspect-ratio: 1148 / 390;
	background: url('../img/diagnosis/img_anser_base.png') no-repeat center center / contain;
}

.diagnosis-block-answer-list > li {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(788 / 846 * 100%);
	aspect-ratio: 788 / 95;
	background: url('../img/diagnosis/btn_01.png') no-repeat center center / cover;
	cursor: pointer;
	transition: all .3s ease;
}

.diagnosis-block-answer-list > li:first-of-type {top: 34%;}
.diagnosis-block-answer-list > li:nth-of-type(2) {top: 66%;}

.diagnosis-block-answer-list > li:hover {
	opacity: 0.5;
}

.diagnosis-block-answer-list.diagnosis-block-answer-list-single {background: unset;}
.diagnosis-block-answer-list.diagnosis-block-answer-list-single > li {
	top: 47%;
	width: calc(365 / 846 * 100%);
	aspect-ratio: 495 / 171;
	background: url('../img/diagnosis/btn_02.png') no-repeat center center / cover;
}

.diagnosis-block-answer-list-text {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: calc(44 / 95 * 100%);
}

.diagnosis-block-answer-list-text img {
	width: auto;
	height: 100%;
}

.diagnosis-block-answer-list.diagnosis-block-answer-list-single .diagnosis-block-answer-list-text {
	top: 49%;
	height: calc(58 / 171 * 100%);
}

/* ===========================================
   ローディング画面
   =========================================== */

.diagnosis-loading {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 100%;
	background: rgba(20, 14, 12, 0.85);
}

.diagnosis-loading-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

/* 外側の回転リング */
.diagnosis-loading-circle {
	width: 100px;
	height: 100px;
	border: 3px solid transparent;
	border-top-color: #d4a844;
	border-bottom-color: #d4a844;
	border-radius: 50%;
	animation: loading-spin 1.2s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: -40px;
}

/* 内側の逆回転リング */
.diagnosis-loading-circle-02 {
	width: 70px;
	height: 70px;
	border: 2px solid transparent;
	border-left-color: #e8c96a;
	border-right-color: #e8c96a;
	animation: loading-spin-reverse 0.9s linear infinite;
}

/* 中央のドット */
.diagnosis-loading-dots {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: -40px;
	width: 30px;
	height: 30px;
}

.diagnosis-loading-dots span {
	position: absolute;
	width: 6px;
	height: 6px;
	background: #f0d878;
	border-radius: 50%;
	animation: loading-dot-pulse 1.2s ease-in-out infinite;
}

.diagnosis-loading-dots span:nth-child(1) {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: 0s;
}

.diagnosis-loading-dots span:nth-child(2) {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	animation-delay: 0.3s;
}

.diagnosis-loading-dots span:nth-child(3) {
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: 0.6s;
}

.diagnosis-loading-dots span:nth-child(4) {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	animation-delay: 0.9s;
}

/* テキスト */
.diagnosis-loading-text {
	position: relative;
	top: 40px;
	color: #e8c96a;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-shadow: 0 0 10px rgba(232, 201, 106, 0.5);
}

.diagnosis-loading-ellipsis::after {
	content: '';
	animation: loading-ellipsis 1.5s steps(4, end) infinite;
}

/* アニメーション */
@keyframes loading-spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes loading-spin-reverse {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes loading-dot-pulse {
	0%, 100% { opacity: 0.2; transform: translateX(-50%) scale(0.8); }
	50% { opacity: 1; transform: translateX(-50%) scale(1.3); }
}

@keyframes loading-ellipsis {
	0% { content: ''; }
	25% { content: '.'; }
	50% { content: '..'; }
	75% { content: '...'; }
}


/* ===========================================
   診断結果 - 修正版CSS
   変更点:
   1. background-image を削除し、img タグ用のスタイルに変更
   2. Canvas描画用ソース(.diagnosis-result-canvas-source)のスタイルを追加
   =========================================== */

/* 診断結果オーバーレイ */
.diagnosis-result {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(34, 24, 21, 0.6);
}

/* 診断結果ラッパー（表示用） */
.diagnosis-result-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(calc(1152 / 1200 * 100vw), 1152px);
	aspect-ratio: 1152 / 654;
}

/* 背景 */
.diagnosis-result-bg {
	width: 100%;
}

.diagnosis-result-bg img {
	width: 100%;
}

/* タイトル */
.diagnosis-result-title {
	position: absolute;
	top: 3.6%;
	left: 49.7%;
	z-index: 2;
	transform: translateX(-50%);
	width: calc(370 / 1152 * 100%);
}

.diagnosis-result-title img {
	width: 100%;
}

/* フレーム */
.diagnosis-result-frame {
	position: absolute;
	top: 16%;
	left: 25.6%;
	z-index: 2;
	transform: translateX(-50%);
	width: calc(486 / 1152 * 100%);
}

.diagnosis-result-frame img {
	width: 100%;
}

/* ポジション（前衛/後衛） */
.diagnosis-result-position {
	position: absolute;
	top: 18%;
	left: 11.3%;
	z-index: 3;
	transform: translateX(-50%);
	width: calc(115 / 1152 * 100%);
}

.diagnosis-result-position img {
	width: 100%;
	height: auto;
}

/* ジョブタイプ */
.diagnosis-result-jobtype {
	position: absolute;
	z-index: 3;
	transform: translateX(-50%);
}

/* ジョブタイプごとの幅・位置設定 */
.diagnosis-result-jobtype[data-jobtype="01"] {
	top: 17.8%;
	left: 32.3%;
	width: calc(120 / 1152 * 100%);
}
.diagnosis-result-jobtype[data-jobtype="02"] {
	top: 18%;
	left: 32.5%;
	width: calc(95 / 1152 * 100%);
}
.diagnosis-result-jobtype[data-jobtype="03"] {
	top: 18%;
	left: 32%;
	width: calc(71 / 1152 * 100%);
}
.diagnosis-result-jobtype[data-jobtype="04"] {
	top: 18.3%;
	left: 32.6%;
	width: calc(71 / 1152 * 100%);
}
.diagnosis-result-jobtype[data-jobtype="05"] {
	top: 18%;
	left: 33.2%;
	width: calc(71 / 1152 * 100%);
}
.diagnosis-result-jobtype[data-jobtype="06"] {
	top: 18%;
	left: 32.4%;
	width: calc(47 / 1152 * 100%);
}

.diagnosis-result-jobtype img {
	width: 100%;
	height: auto;
}

/* ジョブアイコン */
.diagnosis-result-jobicon {
	position: absolute;
	top: 24.5%;
	left: 44.2%;
	z-index: 3;
	transform: translateX(-50%);
	width: calc(57 / 1152 * 100%);
}

.diagnosis-result-jobicon img {
	width: 100%;
	height: auto;
}

/* キャラクター */
.diagnosis-result-character {
	position: absolute;
	z-index: 1;
	transform: translateX(-50%);
}

/* キャラクターごとの幅・位置設定 */
.diagnosis-result-character[data-character="01"] {
	top: 25%;
	left: 25.4%;
	width: calc(250 / 1152 * 100%);
}
.diagnosis-result-character[data-character="02"] {
	top: 24%;
	left: 25.2%;
	width: calc(301 / 1152 * 100%);
}
.diagnosis-result-character[data-character="03"] {
	top: 24.5%;
	left: 24%;
	width: calc(308 / 1152 * 100%);
}
.diagnosis-result-character[data-character="04"] {
	top: 25%;
	left: 25.4%;
	width: calc(315 / 1152 * 100%);
}
.diagnosis-result-character[data-character="05"] {
	top: 24.8%;
	left: 25.4%;
	width: calc(279 / 1152 * 100%);
}
.diagnosis-result-character[data-character="06"] {
	top: 24.5%;
	left: 26.8%;
	width: calc(283 / 1152 * 100%);
}

.diagnosis-result-character img {
	width: 100%;
	height: auto;
}

/* 特殊能力 */
.diagnosis-result-ability {
	position: absolute;
	top: 68.8%;
	left: 18.8%;
	z-index: 2;
	transform: translateX(-50%);
	width: calc(152 / 1152 * 100%);
}

.diagnosis-result-ability img {
	width: 100%;
	height: auto;
}

/* ランク */
.diagnosis-result-rank {
	position: absolute;
	top: 82%;
	z-index: 3;
	transform: translateX(-50%);
	width: calc(56 / 1152 * 100%);
}

.diagnosis-result-rank-01 { left: 7.6%; }
.diagnosis-result-rank-02 { left: 14.7%; }
.diagnosis-result-rank-03 { left: 22%; }
.diagnosis-result-rank-04 { left: 29.2%; }
.diagnosis-result-rank-05 { left: 36.5%; }
.diagnosis-result-rank-06 { left: 43.6%; }

.diagnosis-result-rank img {
	width: 100%;
	height: auto;
}

/* 説明文 */
.diagnosis-result-description {
	position: absolute;
	top: 24%;
	left: 52%;
	z-index: 3;
}

/* 説明文ごとの幅設定 */
.diagnosis-result-description[data-description="01"] { width: calc(390 / 1152 * 100%); }
.diagnosis-result-description[data-description="02"] { width: calc(428 / 1152 * 100%); }
.diagnosis-result-description[data-description="03"] { width: calc(468 / 1152 * 100%); }
.diagnosis-result-description[data-description="04"] { width: calc(370 / 1152 * 100%); }
.diagnosis-result-description[data-description="05"] { width: calc(322 / 1152 * 100%); }
.diagnosis-result-description[data-description="06"] { width: calc(466 / 1152 * 100%); }

.diagnosis-result-description img {
	width: 100%;
	height: auto;
}

/* シェアボタン */
.diagnosis-result-sharebtn {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 78.5%;
	left: 52%;
	width: calc(316 / 1152 * 100%);
	aspect-ratio: 316 / 104;
	background: url('../img/diagnosis/btn_share.png') no-repeat center center / cover;
	cursor: pointer;
	transition: all .3s ease;
}

.diagnosis-result-sharebtn-icon {
	width: calc(55 / 316 * 100%);
}

.diagnosis-result-sharebtn-icon img {
	width: 100%;
}

.diagnosis-result-sharebtn-text {
	width: calc(200 / 316 * 100%);
}

.diagnosis-result-sharebtn-text img {
	width: 100%;
}

/* リトライボタン */
.diagnosis-result-retrybtn {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 78.5%;
	left: 80%;
	width: calc(192 / 1152 * 100%);
	aspect-ratio: 192 / 104;
	background: url('../img/diagnosis/btn_retry.png') no-repeat center center / cover;
	cursor: pointer;
	transition: all .3s ease;
}

.diagnosis-result-retrybtn-text {
	width: calc(142 / 192 * 100%);
}

.diagnosis-result-retrybtn-text img {
	width: 100%;
}


/* ===========================================
   Canvas描画用ソース（非表示・固定サイズ）
   =========================================== */
.diagnosis-result-canvas-source {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1152px;
	height: 654px;
	overflow: hidden;
}

.diagnosis-result-canvas-source .canvas-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 1152px;
	height: 654px;
}

.diagnosis-result-canvas-source .canvas-title {
	position: absolute;
	top: 24px;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	width: 370px;
	height: auto;
}

.diagnosis-result-canvas-source .canvas-frame {
	position: absolute;
	top: 105px;
	left: 295px;
	z-index: 2;
	transform: translateX(-50%);
	width: 486px;
	height: auto;
}

.diagnosis-result-canvas-source .canvas-position {
	position: absolute;
	top: 118px;
	left: 130px;
	z-index: 3;
	transform: translateX(-50%);
	width: 115px;
	height: auto;
}

.diagnosis-result-canvas-source .canvas-jobtype {
	position: absolute;
	z-index: 3;
	transform: translateX(-50%);
	height: auto;
}

/* ジョブタイプごとの幅・位置（Canvas用・px指定） */
.diagnosis-result-canvas-source .canvas-jobtype[data-jobtype="01"] {
	top: 118px;
	left: 383px;
	width: 120px;
}
.diagnosis-result-canvas-source .canvas-jobtype[data-jobtype="02"] {
	top: 118px;
	left: 375px;
	width: 95px;
}
.diagnosis-result-canvas-source .canvas-jobtype[data-jobtype="03"] {
	top: 118px;
	left: 369px;
	width: 71px;
}
.diagnosis-result-canvas-source .canvas-jobtype[data-jobtype="04"] {
	top: 120px;
	left: 376px;
	width: 71px;
}
.diagnosis-result-canvas-source .canvas-jobtype[data-jobtype="05"] {
	top: 118px;
	left: 383px;
	width: 71px;
}
.diagnosis-result-canvas-source .canvas-jobtype[data-jobtype="06"] {
	top: 118px;
	left: 373px;
	width: 47px;
}

.diagnosis-result-canvas-source .canvas-jobicon {
	position: absolute;
	top: 160px;
	left: 509px;
	z-index: 3;
	transform: translateX(-50%);
	width: 57px;
	height: auto;
}

.diagnosis-result-canvas-source .canvas-character {
	position: absolute;
	z-index: 1;
	transform: translateX(-50%);
	height: auto;
}

/* キャラクターごとの幅・位置（Canvas用・px指定） */
.diagnosis-result-canvas-source .canvas-character[data-character="01"] {
	top: 164px;
	left: 293px;
	width: 250px;
}
.diagnosis-result-canvas-source .canvas-character[data-character="02"] {
	top: 157px;
	left: 290px;
	width: 301px;
}
.diagnosis-result-canvas-source .canvas-character[data-character="03"] {
	top: 160px;
	left: 276px;
	width: 308px;
}
.diagnosis-result-canvas-source .canvas-character[data-character="04"] {
	top: 164px;
	left: 293px;
	width: 315px;
}
.diagnosis-result-canvas-source .canvas-character[data-character="05"] {
	top: 162px;
	left: 293px;
	width: 279px;
}
.diagnosis-result-canvas-source .canvas-character[data-character="06"] {
	top: 160px;
	left: 309px;
	width: 283px;
}

.diagnosis-result-canvas-source .canvas-ability {
	position: absolute;
	top: 450px;
	left: 217px;
	z-index: 2;
	transform: translateX(-50%);
	width: 152px;
	height: auto;
}

/* ランク（Canvas用） */
.diagnosis-result-canvas-source .canvas-rank-01,
.diagnosis-result-canvas-source .canvas-rank-02,
.diagnosis-result-canvas-source .canvas-rank-03,
.diagnosis-result-canvas-source .canvas-rank-04,
.diagnosis-result-canvas-source .canvas-rank-05,
.diagnosis-result-canvas-source .canvas-rank-06 {
	position: absolute;
	top: 536px;
	z-index: 3;
	transform: translateX(-50%);
	width: 56px;
	height: auto;
}

.diagnosis-result-canvas-source .canvas-rank-01 { left: 89px; }
.diagnosis-result-canvas-source .canvas-rank-02 { left: 173px; }
.diagnosis-result-canvas-source .canvas-rank-03 { left: 253px; }
.diagnosis-result-canvas-source .canvas-rank-04 { left: 336px; }
.diagnosis-result-canvas-source .canvas-rank-05 { left: 421px; }
.diagnosis-result-canvas-source .canvas-rank-06 { left: 503px; }

.diagnosis-result-canvas-source .canvas-description {
	position: absolute;
	top: 157px;
	left: 599px;
	z-index: 3;
	height: auto;
}

/* 説明文ごとの幅（Canvas用・px指定） */
.diagnosis-result-canvas-source .canvas-description[data-description="01"] { width: 390px; }
.diagnosis-result-canvas-source .canvas-description[data-description="02"] { width: 428px; }
.diagnosis-result-canvas-source .canvas-description[data-description="03"] { width: 468px; }
.diagnosis-result-canvas-source .canvas-description[data-description="04"] { width: 370px; }
.diagnosis-result-canvas-source .canvas-description[data-description="05"] { width: 322px; }
.diagnosis-result-canvas-source .canvas-description[data-description="06"] { width: 466px; }


/* Canvas本体（非表示） */
#resultCanvas {
	position: absolute;
	left: -9999px;
	top: -9999px;
}


/* .diagnosis-result-sharebtn {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 78.5%;
	left: 52%;
	width: calc(316 / 1152 * 100%);
	aspect-ratio: 316 / 104;
	background: url('../img/diagnosis/btn_share.png') no-repeat center center / cover;
	cursor: pointer;
	transition: all .3s ease;
}

.diagnosis-result-sharebtn-icon {
	width: calc(55 / 316 * 100%);
}

.diagnosis-result-sharebtn-icon img {
	width: 100%;
}

.diagnosis-result-sharebtn-text {
	width: calc(200 / 316 * 100%);
}

.diagnosis-result-sharebtn-text img {
	width: 100%;
}

.diagnosis-result-retrybtn {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 78.5%;
	left: 80%;
	width: calc(192 / 1152 * 100%);
	aspect-ratio: 192 / 104;
	background: url('../img/diagnosis/btn_retry.png') no-repeat center center / cover;
	cursor: pointer;
	transition: all .3s ease;
}

.diagnosis-result-retrybtn-text {
	width: calc(142 / 192 * 100%);
}

.diagnosis-result-retrybtn-text img {
	width: 100%;

} */


/* diagnosiscopyright ---------------------------------------*/
.diagnosiscopyright {
	height: 50px;
	padding: 18px 20px;
}

.diagnosiscopyright small {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	letter-spacing: 0;
}



/* pc only */
@media screen and (min-width: 768px){
	.sp{display: none !important;}
	.spbr{display: none;}
}

/* small pc */
@media screen and (min-width: 768px) and (max-width: 1200px){
	.topintro-image-01 {
		left: -88%;
	}

	.topintro-image-02 {
		right: -88%;
	}
}

@media screen and (min-width: 768px) and (max-width: 950px){
	.topintro-image-01,
	.topintro-image-02 {
		bottom: -90px;
		width: 200px;
	}
}


/* sp only */
@media screen and (max-width: 767px){

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

	.pc{display: none !important;}
	.pcbr{display: none;}

	a:hover{opacity: 1;}

	/* layout ---------------------------------------*/

	.inner,
	.wrapper{
		min-width: 0;
		width: 100%;
	}

	.inner{
		max-width: 345px;
	}


	/* topcommon ---------------------------------------*/
	.btn-start {
		width: 238px;
	}

	.btn-start:hover {
		opacity: 1;
	}

	.topsection + .topsection::before {
		top: -60px;
	}

	.topsection-block {
		border: 2px solid #F5A200;
		border-radius: 15px;
	}

	.topsection-title {
		top: -24px;
		width: 285px;
		height: 44px;
		background: url('../img/title_frame_sp.png') no-repeat center center / contain;
	}

	.topkv-btn.btn-start {
		width: calc(238 / 375 * 100vw);
	}


	/* topkv ---------------------------------------*/
	.topkv {
		background: url('../img/kv_sp.jpg') no-repeat center center / contain;
		aspect-ratio: 375 / 630;
	}

	.topkv-title {
		top: 61.7%;
		width: calc(392 / 375 * 100vw);
	}

	.topkv-text {
		top: 76.5%;
		left: 50%;
		width: calc(300 / 375 * 100vw);
	}

	.topkv-logo {
		top: 4.6%;
		left: 7%;
		width: calc(96 / 375 * 100vw);
	}

	.topkv-btn {
		top: 89.7%;
	}


	/* topintro ---------------------------------------*/
	.topintro {
		padding: 103px 15px 76px;
	}

	.topintro-block {
		padding: 28px 15px 16px;
		border: 2px solid #fff;
		border-radius: 15px;
	}

	.topintro-title {
		margin: 0 auto 8px;
		max-width: 296px;
	}

	.topintro-text {
		font-size: 16px;
		line-height: calc(22 / 16);
	}

	.topintro-image-01 {
		bottom: calc(100% - 27px);
		left: -43%;
		width: 138px;
	}

	.topintro-image-02 {
		bottom: calc(100% - 27px);
		right: -43%;
		width: 138px;
	}


	/* tophowto ---------------------------------------*/
	.tophowto {
		padding: 0 15px 82px;
	}

	.tophowto-block {
		padding: 36px 28px 14px;
	}

	.tophowto-title-text {
		width: 205px;
	}

	.tophowto-list {
		max-width: 285px;
	}

	.tophowto-list > li {
		display: block;
	}

	.tophowto-list > li + li {
		margin-top: 12px;
	}

	.tophowto-list-step {
		width: 87px;
		height: 38px;
	}

	.tophowto-list-step-num {
		top: 46%;
		left: 75%;
		height: 21px;
	}

	.tophowto-list-text {
		padding: 2px 0 0;
		font-size: 16px;
		line-height: 1.5;
	}


	/* topschedule ---------------------------------------*/
	.topschedule {
		padding: 0 15px 76px;
	}

	.topschedule-block {
		padding: 38px 15px 14px;
	}

	.topschedule-title-text {
		width: 164px;
	}

	.topschedule-text {
		font-size: 16px;
		line-height: calc(22 / 16);
	}

	.topschedule-text strong {
		font-size: 26px;
	}


	/* topprize ---------------------------------------*/
	.topprize {
		padding: 0 15px 56px;
	}

	.topprize-block {
		padding: 36px 15px 26px;
	}

	.topprize-title-text {
		width: 45px;
	}

	.topprize-info {
		margin: 0 auto 20px;
		max-width: 285px;
	}

	.topprize-image {
		margin: 0 auto 40px;
		max-width: 204px;
	}

	.topprize-caption {
		padding: 0 15px;
		font-size: 16px;
		line-height: calc(24 / 16);
	}


	/* topterms ---------------------------------------*/
	.topterms {
		padding: 0 15px 14px;
	}

	.topsection.topterms::before {
		top: -40px;
	}

	.topterms-title {
		margin: 0 auto 16px;
		width: 238px;
	}

	.topterms-block-lead {
		line-height: calc(22 / 14);
	}

	.topterms-block-title {
		margin-top: 20px;
		margin-bottom: 2px;
		line-height: calc(22 / 18);
	}

	.topterms-block-text {
		line-height: calc(22 / 14);
	}

	.topterms-block-numlist > li,
	.topterms-block-list > li,
	.topterms-block-captionlist > li {
		line-height: calc(22 / 14);
	}


	/* topfooter ---------------------------------------*/
	.topfooter {
		padding: 0 15px 24px;
	}

	.topfooter-copyright {
		margin-bottom: 16px;
		padding: 8px 15px;
	}

	.topfooter-copyright small {
		font-size: 14px;
	}


	/* diagnosiswrapper ---------------------------------------*/
	.diagnosis-block-title {
		top: 11.4vw;
		left: 6.3%;
	}

	.diagnosis-block-title-image {
		width: calc(352 / 375 * 100vw);
	}

	.diagnosis-block-turn {
		top: 32.5vw;
		left: 9.4%;
	}

	.diagnosis-block-turn-image {
		width: calc(305 / 375 * 100vw);
	}


	/* diagnosis ---------------------------------------*/
	.diagnosis-block::after {
		aspect-ratio: 750 / 327;
		background: url('../img/diagnosis/bg_bottom_sp.jpg') no-repeat center center / contain;
	}

	.diagnosis-bg-01 {
		background: url('../img/diagnosis/bg_diagnosis_01_sp.jpg') no-repeat center center / cover;
	}

	.diagnosis-bg-02 {
		background: url('../img/diagnosis/bg_diagnosis_02_sp.jpg') no-repeat center center / cover;
	}

	.diagnosis-num-01 {
		aspect-ratio: 27 / 58;
		background: url('../img/diagnosis/img_num_01_sp.png') no-repeat center center / contain;
	}
	.diagnosis-num-02 {
		aspect-ratio: 41 / 59;
		background: url('../img/diagnosis/img_num_02_sp.png') no-repeat center center / contain;
	}
	.diagnosis-num-03 {
		aspect-ratio: 44 / 60;
		background: url('../img/diagnosis/img_num_03_sp.png') no-repeat center center / contain;
	}
	.diagnosis-num-04 {
		aspect-ratio: 41 / 57;
		background: url('../img/diagnosis/img_num_04_sp.png') no-repeat center center / contain;
	}

	.diagnosis-question-num.diagnosis-num-01 {
		width: calc(13 / 375 * 100vw);
		top: 20vw;
		left: 18vw;
	}
	.diagnosis-question-num.diagnosis-num-02 {
		width: calc(20 / 375 * 100vw);
		top: 19.5vw;
		left: 18vw;
	}
	.diagnosis-question-num.diagnosis-num-03 {
		width: calc(20 / 375 * 100vw);
		top: 19.5vw;
		left: 18vw;
	}
	.diagnosis-question-num.diagnosis-num-04 {
		width: calc(20 / 375 * 100vw);
		top: 19.5vw;
		left: 18vw;
	}

	.diagnosis-remainingturn-num.diagnosis-num-01 {
		width: calc(14 / 375 * 100vw);
		top: 35vw;
		left: 61.7vw;
	}
	.diagnosis-remainingturn-num.diagnosis-num-02 {
		width: calc(22 / 375 * 100vw);
		top: 35vw;
		left: 62vw;
	}
	.diagnosis-remainingturn-num.diagnosis-num-03 {
		width: calc(22 / 375 * 100vw);
		top: 35vw;
		left: 62vw;
	}
	.diagnosis-remainingturn-num.diagnosis-num-04 {
		width: calc(22 / 375 * 100vw);
		top: 35vw;
		left: 62vw;
	}

	.diagnosis-block-title-text {
		top: 49%;
		left: 56%;
		width: calc(278 / 352 * 100%);
	}

	.diagnosis-block-character {
		bottom: 43.4vw;
		left: 26%;
		width: calc(186 / 375 * 100vw);
	}

	.diagnosis-block-speechbubble {
		bottom: 2.5vw;
		width: calc(344 / 375 * 100vw);
		aspect-ratio: 688 / 427;
	}

	.diagnosis-block-speechbubble::after {
		bottom: 15%;
		left: 80%;
		width: calc(14 / 344 * 100%);
	}

	.diagnosis-block-speechbubble-01 {background: url('../img/diagnosis/img_speechbubble_01_sp.png') no-repeat center center / contain;}

	.diagnosis-block-speechbubble-question {
		top: 54%;
		left: 15.5%;
		height: calc(100 / 427 * 100%);
	}

	.diagnosis-block-speechbubble-question.diagnosis-block-speechbubble-question-large {
		top: 52%;
		left: 15.5%;
		height: calc(162 / 427 * 100%);
	}

	.diagnosis-block-answer-list {
		width: calc(335 / 375 * 100vw);
		aspect-ratio: 335 / 243;
		background: url('../img/diagnosis/img_anser_base_sp.png') no-repeat center center / contain;
	}

	.diagnosis-block-answer-list > li {
		width: calc(282 / 335 * 100%);
		aspect-ratio: 282 / 86;
		background: url('../img/diagnosis/btn_01_sp.png') no-repeat center center / cover;
	}

	.diagnosis-block-answer-list > li:first-of-type {top: 31.5%;}
	.diagnosis-block-answer-list > li:nth-of-type(2) {top: 70.5%;}
	.diagnosis-block-answer-list > li:hover {opacity: 1;}

	.diagnosis-block-answer-list-text {
		top: 48%;
		height: calc(29 / 86 * 100%);
	}

	.diagnosis-block-answer-list-text img {
		max-width: unset;
	}


	/* ===========================================
	診断結果 - 修正版CSS
	変更点:
	1. background-image を削除し、img タグ用のスタイルに変更
	2. Canvas描画用ソース(.diagnosis-result-canvas-source)のスタイルを追加
	=========================================== */

	/* 診断結果ラッパー（表示用） */
	.diagnosis-result-wrapper {
		width: calc(340 / 375 * 100vw);
		aspect-ratio: 340 / 595;
	}

	/* タイトル */
	.diagnosis-result-title {
		top: 4.8%;
		left: 50%;
		width: calc(202 / 340 * 100%);
	}

	/* フレーム */
	.diagnosis-result-frame {
		top: 12.5%;
		left: 50%;
		width: calc(263 / 340 * 100%);
	}

	/* ポジション（前衛/後衛） */
	.diagnosis-result-position {
		top: 13.6%;
		left: 24%;
		width: calc(60 / 340 * 100%);
	}

	/* ジョブタイプごとの幅・位置設定 */
	.diagnosis-result-jobtype[data-jobtype="01"] {
		top: 13.6%;
		left: 63%;
		width: calc(60 / 340 * 100%);
	}
	.diagnosis-result-jobtype[data-jobtype="02"] {
		top: 13.6%;
		left: 63%;
		width: calc(45 / 340 * 100%);
	}
	.diagnosis-result-jobtype[data-jobtype="03"] {
		top: 13.6%;
		left: 63%;
		width: calc(35 / 340 * 100%);
	}
	.diagnosis-result-jobtype[data-jobtype="04"] {
		top: 13.6%;
		left: 63%;
		width: calc(35 / 340 * 100%);
	}
	.diagnosis-result-jobtype[data-jobtype="05"] {
		top: 13.6%;
		left: 63%;
		width: calc(35 / 340 * 100%);
	}
	.diagnosis-result-jobtype[data-jobtype="06"] {
		top: 13.6%;
		left: 63%;
		width: calc(23 / 340 * 100%);
	}

	/* ジョブアイコン */
	.diagnosis-result-jobicon {
		top: 17.5%;
		left: 83.2%;
		width: calc(40 / 340 * 100%);
	}

	/* キャラクターごとの幅・位置設定 */
	.diagnosis-result-character[data-character="01"] {
		top: 15.7%;
		left: 50%;
		width: calc(138 / 340 * 100%);
	}
	.diagnosis-result-character[data-character="02"] {
		top: 16.8%;
		left: 52.5%;
		width: calc(178 / 340 * 100%);
	}
	.diagnosis-result-character[data-character="03"] {
		top: 14.1%;
		left: 49%;
		width: calc(184 / 340 * 100%);
	}
	.diagnosis-result-character[data-character="04"] {
		top: 18%;
		left: 49%;
		width: calc(172 / 340 * 100%);
	}
	.diagnosis-result-character[data-character="05"] {
		top: 15.8%;
		left: 53%;
		width: calc(156 / 340 * 100%);
	}
	.diagnosis-result-character[data-character="06"] {
		top: 17.2%;
		left: 58%;
		width: calc(156 / 340 * 100%);
	}

	/* 特殊能力 */
	.diagnosis-result-ability {
		top: 40.4%;
		left: 38.3%;
		width: calc(82 / 340 * 100%);
	}

	/* ランク */
	.diagnosis-result-rank {
		top: 48%;
		width: calc(33 / 340 * 100%);
	}

	.diagnosis-result-rank-01 { left: 17.1%; }
	.diagnosis-result-rank-02 { left: 30.4%; }
	.diagnosis-result-rank-03 { left: 43.5%; }
	.diagnosis-result-rank-04 { left: 56.7%; }
	.diagnosis-result-rank-05 { left: 69.9%; }
	.diagnosis-result-rank-06 { left: 83.1%; }


	/* 説明文 */
	.diagnosis-result-description {
		top: 59.3%;
		left: 7.8%;
	}

	/* 説明文ごとの幅設定 */
	.diagnosis-result-description[data-description="01"] { width: calc(282 / 340 * 100%); }
	.diagnosis-result-description[data-description="02"] { width: calc(232 / 340 * 100%); }
	.diagnosis-result-description[data-description="03"] { width: calc(272 / 340 * 100%); }
	.diagnosis-result-description[data-description="04"] { width: calc(248 / 340 * 100%); }
	.diagnosis-result-description[data-description="05"] { width: calc(248 / 340 * 100%); }
	.diagnosis-result-description[data-description="06"] { width: calc(254 / 340 * 100%); }


	/* シェアボタン */
	.diagnosis-result-sharebtn {
		top: 85.3%;
		left: 6%;
		width: calc(184 / 340 * 100%);
	}

	.diagnosis-result-sharebtn-icon {
		width: calc(34 / 184 * 100%);
	}

	.diagnosis-result-sharebtn-text {
		width: calc(122 / 184 * 100%);
	}

	/* リトライボタン */
	.diagnosis-result-retrybtn {
		top: 85.3%;
		left: 61%;
		width: calc(112 / 340 * 100%);
	}

	.diagnosis-result-retrybtn-text {
		width: calc(86 / 112 * 100%);
	}

	.diagnosis-result-retrybtn-text img {
		vertical-align: unset;
	}



	/* ===========================================
	Canvas描画用ソース（非表示・固定サイズ）
	=========================================== */




	/* diagnosiscopyright ---------------------------------------*/
	.diagnosiscopyright {
		padding: 18px 15px;
	}

	.diagnosiscopyright small {
		font-size: 14px;
	}


}




/* iphone5 iphoneSE用 */
@media screen and (max-width: 370px){

}