@charset "UTF-8";
/* CSS Document */

/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll; font-size: 62.5%;}
body{ height: 100%; margin: 0; padding: 0; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif; font-weight:500; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1; }
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, dl, dt, dd{ margin: 0; padding: 0;}
li, ol{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
figure { margin: 0; padding: 0; }
header, nav, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}

/**********************************************************
*　追加ベース
**********************************************************/

.outer-wrap { width: 760px; margin-left: auto; margin-right: auto;}
.inner-wrap { position: relative; height: 1000px;}
.inner-wrap::before { position: absolute; top: 0; left: 0; display: block; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #808080; content: ""; pointer-events: none; z-index: 100;}

.contents{ display: flex; justify-content: space-between; height: 405px; margin: 30px 20px 20px; color: #1e3c78;}
.cont-l{ width: 430px; padding: 0 15px 0 0; border-right: 1px solid #b4b4b4;}
.cont-r{ width: 274px;}

.ttl{ position: relative;}
.ttl_sub{ font-size: 13px; font-weight: 700; line-height: 1;}
.ttl_text{ margin: 5px 0 0; font-size: 22px; font-weight: 700; line-height: 1.5;}
.ttl_text strong{ background: linear-gradient(transparent 15%, #fbe800 0%); display: inline; font-weight: 700;}
.ttl_text sup{ font-size: 60%; position: relative; top: 0.2em; vertical-align: top;}
.ttl-bubble{ display: flex; justify-content: center; align-items: center; flex-direction: column; background-image: linear-gradient(120deg, #4bbedc, #006edc); width: 100px; height: 100px; border-radius: 50%; position: absolute; top: -44px; font-size: 12px; font-weight: 500; line-height: 1.3; color: #fff; text-align: center;}
.ttl-bubble span{ font-size: 13px; text-decoration: underline; text-underline-offset: 0.3rem; transform: translateY(-3px);}
.ttl-bubble span strong{ font-size: 140%; text-decoration: underline; text-underline-offset: 0.3rem;}
.ttl-bubble-l{ right: 20px;}
.ttl-bubble-r{ right: -10px;}
.ttl-cap { margin: 8px 0 0; font-size: 10px; line-height: 1;}

.naitei{ display: flex; justify-content: space-between; margin: 20px 0 0;}
.naitei-l{ width: 225px;}
.naitei-l h3{ display: inline-block; position: relative; margin: -10px 0 5px; padding: 0 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #3291d7;}
.naitei-l h3::before{ content: ""; background: #3291d7; width: 6px; height: 44px; position: absolute; bottom: 0; left: 0;}
.naitei-l h3 span{ font-size: 150%;}
.naitei-l div{ width: 221px;}
.naitei-l p{ margin: 5px 0 0 13px; font-size: 10px; line-height: 1; color: #000;}
.naitei-r{ width: 189px; border: 1px solid #1e3c78; border-radius: 4px;}
.naitei-r h4{ display: flex; justify-content: center; align-items: center; background: #1e3c78; width: 100%; height: 36px; font-size: 16px; font-weight: 700; color: #fff;}
.naitei-r h4 span{ margin: 0 0 0 10px; padding: 0 0 0 10px; position: relative; font-size: 10px; line-height: 1.4; font-weight: 400;}
.naitei-r h4 span::before{ content: ""; background: #fff; width: 1px; height: 23px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.naitei-r p{ padding: 5px 8px; position: relative; font-size: 10px; line-height: 1.7; text-align: justify;}
.naitei-r p::after{ content: "ほか多数"; position: absolute; bottom: 5px; right: 8px;}

.naitei-other{ display: flex; justify-content: center; align-items: center; background: #1e3c78; margin: 16px 0 0; width: 100%; height: 30px; font-size: 14px; font-weight: 700; line-height: 1; color: #fff;}
.naitei-other strong{ color: #fbe800;}


.percentage{ margin: 30px 0 0 ;}
.percentage h3{ display: flex; flex-direction: column; justify-content: center; background-image: linear-gradient(135deg, #d77d32, #d77d32 50%, #d26432 50% 100%); width: 100%; height: 55px; border-radius: 3px; font-size: 16px; font-weight: 700; line-height: 1.5; color: #fff; text-align: center;}
.percentage h3 span{ font-size: 10px; font-weight: 500;}
.result{ position: relative; font: 700 130px/1 "Barlow Condensed", sans-serif; color: #cb5520; text-align: center;}
.decimal{ font-size: 70%;}
.note-num{ position: absolute; top: 25px; right: 12px; font: 500 14px/1 "Noto Sans JP", sans-serif;}
.note-text{ font-size: 10px; font-weight: 500; line-height: 1.5;}
.percentage a{ display: flex; align-items: center; background: #fbe800; width: 100%; height: 66px; margin: 10px 0 0; position: relative; padding: 0 0 0 75px; border-radius: 33px; font-size: 13px; font-weight: 700; line-height: 1.3; color: #000; transition: .2s linear;}
.percentage a:hover{ background: #f9d500;}
.percentage a::before{ content: "CHECK!"; display: flex; justify-content: center; align-items: center; background: #000; width: 50px; height: 50px; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); border-radius: 50%; font: 500 14px/1 "Barlow Condensed", sans-serif; color: #fff;}
.percentage a::after{ content: ""; width: 11px; height: 11px; position: absolute; top: 50%; right: 18px; border-top: 2px solid #000; border-right: 2px solid #000; transform: scaleY(.8) translateY(-50%)  rotate(45deg);}

footer{ position: relative;}
footer a{ display: flex; align-items: center; background: #fbe800; width: 165px; height: 44px; padding: 0 0 0 14px; position: absolute; bottom: 82px; right: 9px; font-size: 13px; font-weight: 700; line-height: 1.3; color: #000; transition: .2s linear;}
footer a:hover{ background: #f9d500;}
footer a::after{ content: ""; width: 11px; height: 11px; position: absolute; top: 50%; right: 18px; border-top: 2px solid #000; border-right: 2px solid #000; transform: scaleY(.8) translateY(-50%)  rotate(45deg);}

/*************************************************************************************************************************
* css for Recruit footer template
*************************************************************************************************************************/
.r-footer{ display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 5px 0; position: relative; z-index: 10; border-top: 1px solid #e1e1e1; overflow: hidden;}
.r-footer > a{ display: block; width: 258px; height: 37px;}

img[width="1"]{ width: auto; position: absolute; top: 0; left: 0; z-index: -1000;}