@charset "UTF-8";

/* Normalize.css
======================================================== */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }
/* Soft reset */
figure { margin: 0; }
ul, ol, dd { margin: 0; padding: 0; list-style: none; }
h1, h2 h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
p { margin: 0; }

/* Initialize
======================================================== */
html { font-size: 62.5%; }
body { color: #222; font-family: "Zen Maru Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica, sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 1.6rem; font-weight: 400; letter-spacing: 0; position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: url(../img/body-bg.png); background-repeat: repeat; background-size: 16px auto; background-attachment: fixed; }
html.webp body { background-image: url(../img/body-bg.webp); }
a { text-decoration: none; }
img { width: 100%; height: auto; }
*:focus { outline: none; }
.--PC { display: block; }
.--SP { display: none; }
/* .--Mplus { font-family: "M PLUS 1p"; } */

@media screen and (max-width: 959px) {
  html { font-size: 50%; }
  body { width: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
  .--PC { display: none; }
  .--SP { display: block; }
}

/* Colorbox
======================================================== */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px;}
#cboxTopRight{width:21px; height:21px;}
#cboxBottomLeft{width:21px; height:21px;}
#cboxBottomRight{width:21px; height:21px;}
#cboxMiddleLeft{width:21px;}
#cboxMiddleRight{width:21px;}
#cboxTopCenter{height:21px;}
#cboxBottomCenter{height:21px; }
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);}
@media screen and (max-width: 959px) {
  #cboxOverlay{ background: #000; opacity: 0.8 !important; }
}

/* Main
======================================================== */
.Body__Frame { position: fixed; top: 53%; transform: translateY(-50%); margin: 0; padding: 0; width: 27%; /* width: 370px; */ }
.Body__Frame.--Left { left: 6vw; /* left: 80px; */ }
.Body__Frame.--Right { right: 6vw; /* right: 80px; */ }
.Frame { display: flex; flex-wrap: wrap; margin: 0; padding: 0; width: 100%; }
.Frame figure { padding: 0; width: 37%; /* width: 135px; */ transition: transform 0.5s; }
.Frame figure:hover { transform: scale(1.1); }
.Body__Frame.--Left .Frame figure { margin: 0 13% 45px 0; /* margin: 0 50px 40px 0; */ }
.Body__Frame.--Right .Frame { justify-content: flex-end; }
.Body__Frame.--Right .Frame figure { margin: 0 0 45px 13%; /* margin: 0 0 40px 50px; */ }
.Frame figure img { width: 100%; height: auto; }

main { position: relative; z-index: 1; margin: 0 auto; padding: 0; width: 29.283vw; /* width: 400px; */ }
.MainVisual { margin: 0; padding: 0; width: 100%; line-height: 0; /* ▼MV */ }
.Intro { position: relative; margin: 0; padding: 0; width: 100%; /* ▼MBTI話って盛り上がる */ }
.Intro__Bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.Intro__Bg picture,
.Intro__Bg img { width: 100%; height: auto; }
.Intro__Heading { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; padding: 4.026vw 0 0.732vw; /* padding: 55px 0 10px; */ width: 60%; }
.Intro__Heading figure:nth-of-type(1) { width: 54%; }
.Intro__Heading figure:nth-of-type(2) { width: 46%; }
/* .Intro__Heading figure:nth-of-type(3) { margin-top: -1.464vw; width: 100%; } */
.Intro__Heading img { width: 100%; height: auto; }
.Intro__Heading3.--a { margin: -0.366vw 0 0 1.83vw; width: 17%; }
.Intro__Heading3.--b { margin-top: -0.366vw; width: 12%; }
.Intro__Heading3.--c { margin-top: -0.585vw; width: 16.5%; }
.Intro__Heading3.--d { margin-top: -0.732vw; width: 16%; }
.Intro__Heading3.--e { margin-top: -0.951vw; width: 14%; }
.Intro__Heading3.--f { margin-top: -1.39vw; width: 5.5%; }
.Intro__Text { position: relative; z-index: 1; margin: 0 auto; padding: 0 0 4vw; width: 75%; font-size: 1.024vw; /* font-size: 1.4rem; */ line-height: 1.55; text-align: center; }
.Intro__Text p { font-weight: 500; padding-bottom: 1.464vw; /* padding-bottom: 20px; */ }
.Search { margin: 0; padding: 2.196vw 0 1.464vw; /* padding: 30px 0 20px; */ width: 100%; background-image: url(../img/search-bg.png); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; /* ▼MBTIを探す */ }
html.webp .Search { background-image: url(../img/search-bg.webp); }
.Search__Heading { position: relative; margin: 0 auto; padding: 3% 0; width: 90%; color: #fff; font-size: 1.464vw; /* font-size: 2.0rem; */ font-weight: 700; text-align: center; background-color: #222; border-radius: 0.367vw 0.367vw 0 0; /* border-radius: 5px 5px 0 0; */ transition: background-color 0.5s; }
.Search__Heading:hover { background-color: #666; }
.Search__Heading .--Acd { position: absolute; z-index: 1; left: 0; top: 0; display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 100%; }
.Search__Heading .--Acd:after { content: ""; margin-right: 2%; width: 2.196vw; height: 2.196vw; /* width: 30px; height: 30px; */ background-color: #fff; background-image: url(../img/search-arrow.png); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; border-radius: 100px; transition: transform 0.5s; }
html.webp .Search__Heading .--Acd:after { background-image: url(../img/search-arrow.webp); }
.Search__Heading .--Acd.--Selected:after { transform: rotate(180deg); }
.Search__Heading .--Acd:hover { cursor: pointer; }
.Search__List { margin: 0 auto; padding: 4%; width: 81.5%; background-color: #fff; border: 1px solid #222; border-radius: 0 0 0.367vw 0.367vw; /* border-radius: 0 0 5px 5px; */ }
.Search__List ul { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto 3%; padding: 0; }
.Search__List ul:nth-last-of-type(1) { margin-bottom: 0; }
.Search__List ul li { margin: 0; padding: 0; width: 22.5%; }
.Search__List ul li a { display: block; margin: 0; padding: 10% 0; width: 100%; color: #222; font-size: 1.464vw; /* font-size: 2.0rem; */ font-weight: 700; text-align: center; text-decoration: none; background-color: #f8f8f8; border: 1px solid #222; border-radius: 0.367vw; box-shadow: 0 0.22vw 0.22vw 0 rgba(0,0,0,0.2); /* border-radius: 5px; box-shadow: 0 3px 3px 0 rgba(0,0,0,0.2); */ transition: color 0.5s, background-color 0.5s; }
.Search__List ul li a:hover { color: #fff; }
.Search__List ul.--Purple li a { background-color: #e8e1ff; }
.Search__List ul.--Purple li a:hover { background-color: #775ec6; }
.Search__List ul.--Green li a { background-color: #cff2e5; }
.Search__List ul.--Green li a:hover { background-color: #4a986d; }
.Search__List ul.--Blue li a { background-color: #cef5ff; }
.Search__List ul.--Blue li a:hover { background-color: #1aa0c7; }
.Search__List ul.--Yellow li a { background-color: #fff1bd; }
.Search__List ul.--Yellow li a:hover { background-color: #fcb100; }
.Type { margin: 0; padding: 0 0 15%; width: 100%; background-color: #e6e6e6; background-image: url(../img/type-bg.png); background-repeat: repeat; background-position: center top; background-size: 16px auto; }
html.webp .Type { background-image: url(../img/type-bg.webp); }
.Type__Image { margin: 0 auto 3%; padding: 0; line-height: 0; }
.Type__Heading { position: relative; z-index: 1; display: block; margin: 0 auto; padding: 2% 0; width: 62%; color: #fff; font-size: 1.171vw; /* font-size: 1.6rem; */ font-weight: 700; text-align: center; background-color: #999; border: 1px solid #222; border-radius: 100px; }
.Type__Text { display: flex; justify-content: center; align-items: center; margin: -1.317vw 0 1.317vw; /* margin: -18px 0 18px; */ padding: 0 1% 0 0; width: 99%; height: 8.272vw; font-size: 1.171vw; /* height: 113px; font-size: 1.6rem; */ font-weight: 500; line-height: 1.5; text-align: center; background-image: url(../img/type-text-bg.png); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; }
html.webp .Type__Text { background-image: url(../img/type-text-bg.webp); }
.Type__User { display: flex; justify-content: space-between; margin: 0 auto; padding: 0; width: 90%; }
.Type__User figure { position: relative; margin: 0; padding: 0; width: 28%; }
.Type__User figure.--ComingSoon:hover { opacity: 1.0; }
.Type__User figure a { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; }
.Type__User figure img { width: 100%; height: auto; transition: transform 0.5s; }
.Type__User figure figcaption { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0.366vw 0 0; font-size: 1.024vw; /* padding: 5px 0; font-size: 1.4rem; */ font-weight: 500; line-height: 1.25; text-align: center; transition: transform 0.5s; }
.Type__User figure:not(.--ComingSoon):hover img { transform: scale(1.05); cursor: pointer; }
.Type__User figure:not(.--ComingSoon):active img { pointer-events: none; }
.Type__User figure figcaption strong { padding-top: 1%; font-weight: 500; }
.--Purple .Type { background-color: #e8e1ff; }
.--Purple .Type__Heading { background-color: #775ec6; }
.--Green .Type { background-color: #cff2e5; }
.--Green .Type__Heading { background-color: #4a986d; }
.--Green #enfp .Type__Heading { width: 70%; }
.--Blue .Type { background-color: #cef5ff; }
.--Blue .Type__Heading { background-color: #1aa0c7; }
.--Yellow .Type { background-color: #fff1bd; }
.--Yellow .Type__Heading { background-color: #fcb100; }
.--Yellow .Type:nth-last-of-type(1) .Type__Heading { width: 82%; }
.Footer { position: relative; margin: 0 auto; padding: 5% 0; width: 100%; background-image: url(../img/footer-bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; pointer-events: none; /* ▼Footer */ }
html.webp .Footer { background-image: url(../img/footer-bg.webp); }
.Footer__Navi { margin: 0 auto; padding: 0 0 4%; width: 90%; pointer-events: initial; }
.Footer__Navi li { margin: 0 0 5%; padding: 0; }
.Footer__Navi li a { position: relative; display: inline-block; margin: 0; padding: 6% 0; width: 100%; color: #222; font-size: 1.317vw; /* font-size: 1.8rem; */ font-weight: 500; text-align: center;  background-color: #fff; background-image: url(../img/footer-navi-icon.png); background-repeat: no-repeat; background-position: right 15px center; background-size: 11% auto; border-radius: 100px; filter: drop-shadow(0px 0px 10px rgba(171, 186, 162, 0.9)); transition: transform 0.5s; }
html.webp .Footer__Navi li a { background-image: url(../img/footer-navi-icon.webp); }
.Footer__Navi li a:hover { transform: scale(1.05); }
.Footer__Navi li a img { position: absolute; left: 2.562vw; /* left: 35px; */ top: 50%; transform: translateY(-50%); width: 11%; }
.Footer__Navi .--PageTop a { margin: 0 15%; padding: 4% 0; width: 70%; font-size: 1.171vw; /* font-size: 1.6rem; */ background-image: url(../img/footer-navi-pagetop-icon.png); }
html.webp .Footer__Navi .--PageTop a { background-image: url(../img/footer-navi-pagetop-icon.webp); }
.Footer__Copyright { font-size: 0.658vw; /* font-size: 0.9rem; */ font-weight: 700; text-align: center; }

@media only screen and (min-width:960px) and (max-width:1365px) {
  main { width: 400px; }
  .Intro__Heading { padding: 55px 0 10px; }
  .Intro__Heading3.--a { margin: -5px 0 0 25px; }
  .Intro__Heading3.--b { margin-top: -5px; }
  .Intro__Heading3.--c { margin-top: -8px; }
  .Intro__Heading3.--d { margin-top: -10px; }
  .Intro__Heading3.--e { margin-top: -13px; }
  .Intro__Heading3.--f { margin-top: -19px; }
  .Intro__Text { font-size: 1.4rem; }
  .Intro__Text p { padding-bottom: 20px; }
  .Search { padding: 30px 0 20px; }
  .Search__Heading { font-size: 2.0rem; border-radius: 5px 5px 0 0; }
  .Search__Heading .--Acd:after { width: 30px; height: 30px; }
  .Search__List { border-radius: 0 0 5px 5px; }
  .Search__List ul li a { font-size: 2.0rem; border-radius: 5px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); }
  .Type__Heading { font-size: 1.6rem; }
  .Type__Text { margin: -18px 0 18px; height: 113px; font-size: 1.6rem; }
  .Type__User figure figcaption { padding: 5px 0; font-size: 1.4rem; }
  .Footer__Navi li a { font-size: 1.8rem; }
  .Footer__Navi .--PageTop a { font-size: 1.6rem; }
  .Footer__Copyright { font-size: 0.9rem; }
}

@media only screen and (min-width:960px) and (max-width:1020px) {
  .Body__Frame.--Left { left: 3vw; }
  .Body__Frame.--Right { right: 3vw; }
}

@media screen and (max-width: 959px) {
  .Body__Frame { display: none; }
  main { width: 100%; }
  .Intro { height: 161vw; }
  .Intro__Heading { padding: 14vw 0 3vw; }
  .Intro__Heading3.--a { margin: -0.5vw 0 0 6vw; }
  .Intro__Heading3.--b { margin-top: -0.8vw; }
  .Intro__Heading3.--c { margin-top: -1.4vw; }
  .Intro__Heading3.--d { margin-top: -2vw; }
  .Intro__Heading3.--e { margin-top: -3vw; }
  .Intro__Heading3.--f { margin-top: -4.5vw; }
  .Intro__Text { padding: 0; width: 100%; font-size: 1.7rem; }
  .Intro__Text p { padding-bottom: 5vw; }
  .Search { padding: 3vw 0 5vw; }
  .Search__Heading { padding: 3.5vw 0; font-size: 2.4rem; border-left: 1px solid #222; border-radius: 5px 5px 0 0; }
  .Search__Heading .--Acd:after { margin-right: 3vw; width: 7vw; height: 7vw; }
  .Search__List { border-radius: 0 0 5px 5px; }
  .Search__List ul li a { padding: 2.5vw 0; font-size: 2.4rem; border-radius: 5px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); }
  .Type { padding: 0 0 12vw; }
  .Type__Image { margin: 0 auto 3vw; }
  .Type__Heading { padding: 2vw 0; font-size: 2.1rem; }
  .Type__Text { margin: -4.5vw 0 4.5vw; height: 29vw; font-size: 2.0rem; }
  .Type__User figure figcaption { padding: 1vw 0 0; font-size: 1.8rem; }
  .Footer__Navi li a { font-size: 2.2rem; }
  .Footer__Navi li a img { left: 8vw; }
  .Footer__Navi .--PageTop a { font-size: 2.0rem; }
  .Footer__Copyright { font-size: 1.2rem; }
}

/* Modal
======================================================== */
#cboxOverlay { background-color: rgb(34 34 34 / 0.9); }
#cboxContent { overflow: visible; background: none; }
#cboxLoadedContent { background-color: #f8f8f8; margin-bottom: 0; border-radius: 10px; }
#cboxCurrent { display: none !important; }
#cboxLoadedContent::-webkit-scrollbar { width: 6px; }
#cboxLoadedContent::-webkit-scrollbar-track { background: #bbb; border-radius: 3px; }
#cboxLoadedContent::-webkit-scrollbar-thumb { background: #222; border-radius: 3px; }
#cboxPrevious,
#cboxNext { z-index: 1; top: 36%; /* width: 3.513vw; height: 3.513vw; */ width: 48px; height: 48px; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; transition: filter 0.5s; }
#cboxPrevious { /* left: -1.464vw; */ left: -20px; background-image: url(../img/modal-prev.png); }
html.webp #cboxPrevious { background-image: url(../img/modal-prev.webp); }
#cboxNext { left: initial; /* right: -1.464vw; */ right: -20px; background-image: url(../img/modal-next.png); }
html.webp #cboxNext { background-image: url(../img/modal-next.webp); }
#cboxPrevious:hover,
#cboxNext:hover { background-position: center center; filter: invert(100%); }
.Modal .--Close { position: absolute; right: 1%; /* top: -1.464vw; width: 22%; */ top: -20px; width: 75px; transition: opacity 0.5s; }
.Modal .--Close:hover { cursor: pointer; opacity: 0.5;  }
.Modal { margin: 0; padding: 5%; width: 90%; }
.Modal__Heading { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 2%; padding: 0; width: 100%; }
.Modal__HeadingType { margin: 0; padding: 0; width: 35%; }
.Modal__HeadingNumber { margin: 0 3% 0 0; padding: 0; width: 15%; }
.Modal__Heading.--Small .Modal__HeadingType { width: 31%; }
.Modal__Heading.--Small .Modal__HeadingNumber { margin-right: 8%; }
.Modal__Heading.--Medium .Modal__HeadingType { width: 37.5%; }
.Modal__Heading.--Medium .Modal__HeadingNumber { margin-right: 5%; }
.Modal__Heading.--Large .Modal__HeadingType { width: 42%; }
.Modal__Heading.--Large .Modal__HeadingNumber { margin-right: 3%; }
.Modal__HeadingRuby { display: inline-block; margin: 0; padding: 1.5% 5%; color: #fff; font-size: 1.024vw; /* font-size: 1.4rem; */ font-weight: 500; line-height: 1.1; text-align: center; background-color: #222; border-radius: 100px; }
.Modal__Image { position: relative; margin: 0 auto 6%; padding: 0 5%; width: 90%; }
.Modal__Image:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/modal-image-bg.png); background-repeat: no-repeat; background-position: center top; background-size: 100%; auto; }
html.webp .Modal__Image:before { background-image: url(../img/modal-image-bg.webp); }
.Modal__Image figcaption { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -1.098vw auto 0; /* margin: -15px auto 0; */ padding: 0; text-align: center; }
.Modal__Image figcaption small,
.Modal__Image figcaption strong { display: inline-block; background-color: #fff; border: 1px solid #222; border-radius: 0.366vw; /* border-radius: 5px; */ }
.Modal__Image figcaption small { margin: 0; font-size: 1.024vw; padding: 0.366vw 6%; /* padding: 5px 6%; */ font-weight: 500; }
.Modal__Image figcaption strong { margin: -0.073vw 0 0; padding: 0 5% 0.366vw; font-size: 1.464vw; /* margin: -2px 0 0; font-size: 2.0rem; */ font-weight: 700; border-top-color: #fff; border-radius: 0 0 0.366vw 0.366vw; /* border-radius: 0 0 5px 5px; */ }
.Modal__List { margin: 0 auto 6%; padding: 0; width: 100%; }
.Modal__List:nth-last-of-type(1) { margin-bottom: 10%; }
.Modal__List dt { position: relative; z-index: 1; display: inline-block; margin: 0; padding: 3% 4% 3% 10%; color: #fff; font-size: 1.12vw; /* font-size: 1.53rem; */ font-weight: 700; background-color: #999; border: 1px solid #222; border-radius: 100px; }
.Modal__List:nth-last-of-type(1) dt { padding-right: 0; width: 91%; }
.Modal__List dt:before { position: absolute; left: 2%; top: 50%; transform: translateY(-50%); content: "Q"; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0 0 0.146vw; width: 1.464vw; height: 1.317vw; font-size: 1.024vw; /* padding: 0 0 2px; width: 20px; height: 18px; font-size: 1.4rem; */ font-weight: 900; background-color: #222; border-radius: 50%; }
.Modal__List dd { margin: -0.732vw 2% 0 5%; /* margin: -10px 2% 0 5%; */ padding: 6% 3% 4%; width: 89%; font-size: 1.024vw; /* font-size: 1.4rem; */ font-weight: 500; line-height: 1.7; background-color: #fff; border: 1px solid #222; border-radius: 0.732vw; /* border-radius: 10px; */ }
.Modal__List dd span { background-image: linear-gradient(90deg, #f6ff0f, #f6ff0f); background-position: left bottom; background-repeat: no-repeat; background-size: 0 100%; }
.Modal__Navi { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 0; width: 100%; overflow-y: hidden; }
.Modal__Navi li { margin: 0; padding: 0; width: 31%; }
.Modal__Navi li figure { display: flex; align-items: center; width: 100%; transition: filter 0.5s; }
.Modal__Navi li figure:before { content: ""; position: relative; width: 4.099vw; height: 4.099vw; /* width: 56px; height: 56px; */ background-repeat: no-repeat; background-position: center center; background-size: 100%; auto; }
.Modal__Navi figure.--Prev:before { margin-right: -10%; background-image: url(../img/modal-navi-prev.png); transition: filter 0.5s; }
html.webp .Modal__Navi figure.--Prev:before { background-image: url(../img/modal-navi-prev.webp); }
.Modal__Navi .--Next:before { margin-left: -10%; background-image: url(../img/modal-navi-next.png); transition: filter 0.5s; }
html.webp .Modal__Navi figure.--Next:before { background-image: url(../img/modal-navi-next.webp); }
.Modal__Navi figure.--Prev { margin-right: -10%; }
.Modal__Navi figure.--Next { flex-direction: row-reverse; }
.Modal__Navi figure.--Prev:hover,
.Modal__Navi figure.--Next:hover { cursor: pointer; }
.Modal__Navi figure.--Prev:hover:before,
.Modal__Navi figure.--Next:hover:before { filter: invert(100%); }
.Modal__Navi .--Close { position: initial; width: 25.5%; transition: filter 0.5s; }
.Modal__Navi .--Close:hover { opacity: 1.0; filter: invert(100%); }
#colorbox.--Purple #cboxLoadedContent { background-color: #e8e1ff; /* ▼INTP */ }
#colorbox.--Purple .Modal__List dt { background-color: #775ec6; }
#colorbox.--Green #cboxLoadedContent { background-color: #cff2e5; /* ▼INFJ〜 */ }
#enfp1 .Modal__HeadingRuby,
#enfp2 .Modal__HeadingRuby,
#enfp3 .Modal__HeadingRuby { border-radius: 0.732vw; /* border-radius: 10px; */ }
#colorbox.--Green .Modal__List dt { background-color: #4a986d; }
#colorbox.--Blue #cboxLoadedContent { background-color: #d1f5ff; /* ▼ISTJ */ }
#colorbox.--Blue .Modal__List dt { background-color: #1aa0c7; }
#colorbox.--Yellow #cboxLoadedContent { background-color: #fff1bd; /* ▼ISTP */ }
#colorbox.--Yellow #istp1 .Modal__HeadingNumber { margin-right: 10%; }
#colorbox.--Yellow .Modal__List dt { background-color: #fcb100; }
#infj1 .Modal__HeadingNumber,
#infj2 .Modal__HeadingNumber { margin-right: 15%; }
#esfp1 .Modal__HeadingNumber,
#esfp2 .Modal__HeadingNumber,
#esfp3 .Modal__HeadingNumber { margin-right: 1%; }
#esfp1 .Modal__HeadingRuby,
#esfp2 .Modal__HeadingRuby,
#esfp3 .Modal__HeadingRuby { padding: 1.5% 2%; border-radius: 0.732vw; /* border-radius: 10px; */ }

@media only screen and (min-width:960px) and (max-width:1365px) {
  #cboxPrevious,
  #cboxNext { /* width: 48px; height: 48px; */ }
  #cboxPrevious { /* left: -20px; */ }
  #cboxNext { /* right: -20px; */ }
  .Modal .--Close { /* top: -20px; width: 22%; */ }
  .Modal__HeadingRuby { font-size: 1.4rem; }
  .Modal__Image figcaption { margin: -15px auto 0; }
  .Modal__Image figcaption small,
  .Modal__Image figcaption strong { border-radius: 5px; }
  .Modal__Image figcaption small { padding: 5px 6%; font-size: 1.4rem; }
  .Modal__Image figcaption strong { margin: -1px 0 0; padding: 0 6% 5px; font-size: 2.0rem; border-radius: 0 0 5px 5px; }
  .Modal__List dt { font-size: 1.53rem; }
  .Modal__List dt:before { padding: 0 0 2px; width: 20px; height: 18px; font-size: 1.4rem; }
  .Modal__List dd { margin: -10px 2% 0 5%; font-size: 1.4rem; border-radius: 10px; }
  .Modal__Navi li figure:before { width: 56px; height: 56px; }
  #enfp1 .Modal__HeadingRuby,
  #enfp2 .Modal__HeadingRuby,
  #enfp3 .Modal__HeadingRuby,
  #esfp1 .Modal__HeadingRuby,
  #esfp2 .Modal__HeadingRuby,
  #esfp3 .Modal__HeadingRuby { border-radius: 10px; }
}

@media screen and (max-width: 959px) {
  #cboxPrevious,
  #cboxNext { top: 43%; width: 12vw; height: 12vw; }
  #cboxPrevious { left: -5vw; }
  #cboxNext { right: -5vw; }
  #cboxContent { position: relative; }
  #cboxContent .--Close.--TopRight { position: absolute; top: -5vw;  right: 1%; width: 75px; z-index: 9999; }
  #cboxContent .--Close.--TopRight img { width: 100%; height: auto; }
  #colorbox .--Close.--TopRight { opacity: 0; }
  #colorbox.--Complete .--Close.--TopRight { opacity: 1; }
  .Modal__HeadingNumber { width: 17%; }
  .Modal__HeadingRuby { padding: 1.0vw 5%; font-size: 1.7rem; }
  .Modal__Image { margin: 0 auto 6vw; }
  .Modal__Image figcaption { margin: -3.5vw auto 0; }
  .Modal__Image figcaption small,
  .Modal__Image figcaption strong { padding: 1.5vw 6%; }
  .Modal__Image figcaption small { font-size: 1.8rem; border-radius: 5px; }
  .Modal__Image figcaption strong { margin: -0.25vw 0 0; padding: 0 4% 1.5vw; font-size: 2.5rem; border-radius: 0 0 5px 5px; }
  .Modal__List { margin: 0 auto 5vw; }
  .Modal__List:nth-last-of-type(1) { margin-bottom: 6vw; }
  .Modal__List dt { padding: 3% 4% 3% 12%; font-size: 1.9rem; }
  .Modal__List dt:before { left: 2vw; width: 6vw; height: 6vw; font-size: 1.6rem; }
  .Modal__List dd { margin: -3vw 2% 0 6%; padding: 6% 5% 4%; width: 85%; font-size: 1.7rem; border-radius: 10px; }
  .Modal__Navi li figure:before { width: 15vw; height: 15vw; }
  .Modal__Navi figure.--Prev:before { margin-right: -15%; } {  }
  .Modal__Navi .--Next:before { margin-left: -15%; }
  #enfp1 .Modal__HeadingRuby,
  #enfp2 .Modal__HeadingRuby,
  #enfp3 .Modal__HeadingRuby { border-radius: 10px; }
  #infj1 .Modal__HeadingNumber,
  #infj2 .Modal__HeadingNumber { margin-right: 10%; }
  #esfp1 .Modal__HeadingNumber,
  #esfp2 .Modal__HeadingNumber,
  #esfp3 .Modal__HeadingNumber { margin-right: 0; }
  #esfp1 .Modal__HeadingRuby,
  #esfp2 .Modal__HeadingRuby,
  #esfp3 .Modal__HeadingRuby { padding: 1vw 2%; border-radius: 10px; }
}