@charset "UTF-8"; /* ============================================================================ ■ PC ============================================================================ */ @media screen and (min-width:769px) , print { /* us-kv ---------------------------------------- */ .us-kv { position: relative; width: 100%; height: 475px; margin: 0; padding: 0; } .us-kv .us-pageTtl { position: absolute; height: 130px; top: 50%; left: 50%; margin: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .us-kv .us-pageTtl img { height: 100%; } /* contentsArea common ---------------------------------------- */ .us-contentsArea .us-contentTtl02 { font-size: 37px; font-weight: 700; letter-spacing: 0.1em; text-align: center; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000, 1px 0px 0px #000000, 0px 1px 0px #000000, -1px 0px 0px #000000, 0px -1px 0px #000000, 3px 3px 0px #000000; color: #ffffff; margin: 0 0 45px 0; padding: 25px 0 15px; background: url(../img/deco_contentTtl.png); background-repeat: no-repeat; background-position: center center; background-size: 240px 101px; } /* us-contentTask ---------------------------------------- */ .us-contentTask { padding-bottom: 80px; } .us-taskTxt { font-size: 26px; font-weight: 700; line-height: 1.8; text-align: center; } /* us-contentPlan ---------------------------------------- */ .us-plan { width: 100%; margin-bottom: 100px; overflow: hidden; } .us-planTtl { font-size: 28px; font-weight: 700; margin: 0 auto 35px; padding: 15px 0 15px 100px; } .us-number01 { background: url(../img/plan_number01.png); background-repeat: no-repeat; background-position: left center; background-size: 70px 70px; } .us-number02 { background: url(../img/plan_number02.png); background-repeat: no-repeat; background-position: left center; background-size: 70px 70px; } .us-planPh { width: 50%; float: right; margin-left: 30px !important; } .us-planPh img { width: 100%; } .us-planTxt { line-height: 2; text-align: justify; text-justify: inter-ideograph; } .us-marker { background: linear-gradient(transparent 0%, #fffa8e 0%); } /* us-contentResult ---------------------------------------- */ .us-contentResult { padding-bottom: 80px; } .us-result01 .us-resultTxt { font-size: 20px; font-weight: 700; line-height: 1.8; text-align: center; } .us-result02 { margin-top: 45px; } .us-result02 .us-resultTtl { font-size: 32px; font-weight: 700; text-align: center; margin: 0 auto 15px; } .us-result02 .us-resultTtl::before { content: "\005C"; font-size: 45px; font-weight: 100; padding-right: 25px; } .us-result02 .us-resultTtl::after { content: "/"; font-size: 45px; font-weight: 100; padding-left: 15px; } .us-result02 .us-whiteBox { max-width: 1052px; margin: 0 auto; background: #ffffff; border-radius: 8px; } .us-result02 .us-whiteBox .us-boxInner { padding: 50px; } .us-result02 .us-resultPh { width: 350px; float: right; margin-left: 50px !important; } .us-result02 .us-resultPh img { width: 100%; } .us-result02 .us-resultTxt dt { font-size: 18px; font-weight: 700; margin-bottom: 15px; } .us-result02 .us-resultTxt dd { line-height: 2; text-align: justify; text-justify: inter-ideograph; } /* us-contentMenu ---------------------------------------- */ .us-contentMenu .us-btnArea { text-align: center; margin-bottom: 100px; } .us-contentMenu .us-btn { display: inline-block; width: 485px; height: 69px; line-height: 69px; letter-spacing: 0.05em; color: #ffffff; text-align: center; border-radius: 6px; border: #000000 2px solid; background: #000000 url(../img/arrow_linkBtn.png); background-repeat: no-repeat; background-position: 8% center; background-size: 12px 16px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .us-contentMenu .us-btn:hover { color: #000000; border: #000000 2px solid; background: #ffffff url(../img/arrow_linkBtn_hover.png); background-repeat: no-repeat; background-position: 8% center; background-size: 12px 16px; filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } } /* ============================================================================ ■ SP ============================================================================ */ @media screen and (max-width:768px){ /* us-kv ---------------------------------------- */ .us-kv { position: relative; width: 100%; height: 240px; margin: 0; padding: 0; } .us-kv .us-pageTtl { position: absolute; height: 70px; top: 50%; left: 50%; margin: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .us-kv .us-pageTtl img { height: 100%; } /* contentsArea common ---------------------------------------- */ .us-contentsArea .us-contentTtl02 { font-size: 23px; font-weight: 700; letter-spacing: 0.1em; text-align: center; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000, 1px 0px 0px #000000, 0px 1px 0px #000000, -1px 0px 0px #000000, 0px -1px 0px #000000, 2px 2px 0px #000000; color: #ffffff; margin: 0 0 25px 0; padding: 15px 0 10px; background: url(../img/deco_contentTtl.png); background-repeat: no-repeat; background-position: center center; background-size: 150px 63px; } /* us-contentTask ---------------------------------------- */ .us-contentTask { padding-bottom: 45px; } .us-taskTxt { font-size: 16px; font-weight: 700; text-align: justify; text-justify: inter-ideograph; line-height: 1.8; } /* us-contentPlan ---------------------------------------- */ .us-plan { width: 100%; margin-bottom: 45px; overflow: hidden; } .us-planTtl { font-size: 18px; font-weight: 700; line-height: 1.5; margin: 0 auto 15px; padding: 0 0 0 50px; } .us-number01 { background: url(../img/plan_number01.png); background-repeat: no-repeat; background-position: left center; background-size: 40px 40px; } .us-number02 { background: url(../img/plan_number02.png); background-repeat: no-repeat; background-position: left center; background-size: 40px 40px; } .us-planPh { width: 100%; margin-bottom: 15px !important; } .us-planPh img { width: 100%; } .us-planTxt { line-height: 2; text-align: justify; text-justify: inter-ideograph; } .us-marker { background: linear-gradient(transparent 0%, #fffa8e 0%); } /* us-contentResult ---------------------------------------- */ .us-contentResult { padding-bottom: 45px; } .us-result01 .us-resultTxt { font-size: 16px; font-weight: 700; text-align: justify; text-justify: inter-ideograph; line-height: 1.8; } .us-result02 { margin-top: 25px; } .us-result02 .us-resultTtl { font-size: 21px; font-weight: 700; text-align: center; margin: 0 auto 10px; } .us-result02 .us-resultTtl::before { content: "\005C"; font-size: 30px; font-weight: 100; padding-right: 25px; } .us-result02 .us-resultTtl::after { content: "/"; font-size: 30px; font-weight: 100; padding-left: 15px; } .us-result02 .us-whiteBox { width: 100%; margin: 0 auto; background: #ffffff; border-radius: 8px; } .us-result02 .us-whiteBox .us-boxInner { padding: 30px; } .us-result02 .us-resultPh { width: 100%; margin-bottom: 20px; } .us-result02 .us-resultPh img { width: 100%; } .us-result02 .us-resultTxt dt { font-size: 16px; font-weight: 700; margin-bottom: 15px; } .us-result02 .us-resultTxt dd { line-height: 1.8; text-align: justify; text-justify: inter-ideograph; } /* us-contentMenu ---------------------------------------- */ .us-contentMenu .us-btnArea { text-align: center; margin-bottom: 60px; } .us-contentMenu .us-btn { display: inline-block; width: 80%; height: 60px; line-height: 60px; font-size: 16px; letter-spacing: 0.05em; color: #ffffff; text-align: center; border-radius: 6px; background: #000000 url(../img/arrow_linkBtn.png); background-repeat: no-repeat; background-position: 8% center; background-size: 12px 16px; } } /* ============================================================================ ■ SP iPhone5 ============================================================================ */ @media screen and (max-width:320px){ /* us-contentMenu ---------------------------------------- */ .us-contentMenu .us-btn { font-size: 15px; letter-spacing: 0; } .us-contentMenu .us-btn span { padding-left: 10px; } }