@charset "UTF-8"; .mr-wrap { font-family: 'Noto Sans', sans-serif; letter-spacing: 0.05em; } #mr-report01 .mr-box { background: #fff5f0; } #mr-report02 .mr-box { background: #f0faf0; } #mr-report03 .mr-box { background: #f0fafa; } #mr-report04 .mr-box { background: #fdf3fa; } #mr-report05 .mr-box { background: #fff4ec; } #mr-report06 .mr-box { background: #eff6fb; } #mr-report07 .mr-box { background: #fffcf0; } #mr-report08 .mr-box { background: #fff5f0; } /* ==================================================== ■ PC ==================================================== */ @media screen and (min-width:640px){ .mr-brSp { display: none; } /* mr-kv ---------------------------------------- */ .mr-kv { width: 100%; margin: 0 0 150px 0; padding: 30px 0; background: #dcf5f5; } .mr-kv .mr-phBox01 { width: 100%; background: url(../img/bg_kv_ph01.png); background-repeat: repeat-x; background-position: top; background-size: 1500px 120px; } .mr-kv .mr-phBox02 { width: 100%; background: url(../img/bg_kv_ph02.png); background-repeat: repeat-x; background-position: bottom; background-size: 1500px 120px; } .mr-kv .mr-inner { width: 850px; height: 630px; position: relative; margin: 0 auto; } .mr-kv h1.mr-pageTtl { position: absolute; top: 180px; left: 30px; margin: 0; } .mr-kv h1.mr-pageTtl img { width: 450px; } .mr-kv .mr-balloon { width: 310px; height: 160px; position: absolute; top: 185px; right: 30px; background-image: url(../img/deco_kv_balloon.png); background-repeat: no-repeat; background-size: 310px 160px; } .mr-kv .mr-txt01 { font-size: 13px; line-height: 1.8; letter-spacing: 0; text-align: center; margin-top: 37px; } .mr-kv img.mr-scancut { width: 210px; position: absolute; top: 340px; right: 77px; } /* contentsArea ---------------------------------------- */ .mr-contentsArea { width: 1052px; margin: 0 auto; padding: 0; } .mr-contentsArea .mr-contentsTtl { text-align: center; margin-bottom: 50px; } .mr-contentsArea .mr-contentsTtl img { width: 180px; } /* .mr-contentsArea .mr-contentsTtl { text-align: center; margin-bottom: 80px; } .mr-contentsArea .mr-contentsTtl img.mr-deco { width: 144px; margin-bottom: 40px; } .mr-contentsArea .mr-contentsTtl h2 { font-size: 42px; font-weight: 700; line-height: 1.5; margin: 0; } */ /* jumpNav */ .mr-jumpNav { text-align: center; margin-bottom: 105px; padding: 0; } .mr-jumpNav li { width: 100px; display: inline-block; font-size: 12px; line-height: 1.5; letter-spacing: 0; text-align: center; margin-right: 30px; } .mr-jumpNav li:last-child { margin-right: 0; } .mr-jumpNav li img.mr-icon { width: 100%; border: #000000 1px solid; border-radius: 50px; } .mr-jumpNav li span { display: block; } .mr-jumpNav li .mr-name { font-size: 14px; margin-top: 10px; } .mr-jumpNavSmall { width: 850px; margin: 120px auto 100px; } .mr-jumpNavSmall li { width: 80px; margin-right: 24px; } .mr-jumpNav a { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } /* report */ .mr-report { width: 100%; position: relative; margin-bottom: 90px; padding-top: 80px; } .mr-report img.mr-icon { width: 130px; display: block; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); border: #000000 1px solid; border-radius: 65px; } .mr-report .mr-box { border: #000000 1px solid; } .mr-report .mr-inner { padding: 85px 100px 100px; } .mr-report .mr-profile { text-align: center; margin: 0 0 50px 0; } .mr-report .mr-name { font-size: 20px; font-weight: 700; } .mr-report .mr-section { margin-bottom: 60px; } .mr-report .mr-section:last-child { margin-bottom: 0; } .mr-report .mr-question { font-size: 16px; font-weight: 700; padding-bottom: 15px; margin-bottom: 30px; background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 6px); background-size: 8px 2px; background-position: bottom; background-repeat: repeat-x; } .mr-report .mr-question img.mr-iconQ { width: 22px; vertical-align: text-bottom; margin-right: 10px; } .mr-report .mr-answer { font-size: 16px; line-height: 2; margin: 0; } .mr-report .mr-answer .mr-ph { width: 180px; float: right; margin: 5px 0 0 50px; } .mr-report .mr-answer .mr-point { font-weight: 700; background: #fffa8c; } .mr-report .mr-works { width: 100%; padding: 45px 0; background: #ffffff; border: #000000 1px solid; } .mr-report .mr-works .mr-workList3 { width: 730px; margin: 0 auto; padding: 0; } .mr-report .mr-works .mr-workList3 li { width: 210px; display: inline-block; margin-right: 45px; } .mr-report .mr-works li img.mr-ph { width: 100%; } .mr-report .mr-works li:last-child { margin-right: 0; } /* linkArea ---------------------------------------- */ .mr-linkArea { width: 100%; position: relative; padding: 300px 0 150px; background-color: #dcf5f5; } .mr-linkArea .mr-linkAreaBG { width: 100%; height: 155px; position: absolute; top: 0; background-image:url(../img/bg_linkArea.png); background-position: top center; background-repeat: no-repeat; background-size: 100% 100%; } .mr-linkArea a.mr-linkBtn { width: 490px; height: 95px; display: block; font-size: 21px; text-align: center; line-height: 95px; color: #ffffff; margin: 0 auto; background: #000000; border: #000000 2px solid; border-radius: 6px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .mr-linkArea a.mr-linkBtn span { padding: 0 40px 0 35px; background-image:url(../img/arrow_linkBtn.png); background-repeat: no-repeat; background-position: center right; background-size: 18px 25px; } .mr-linkArea a.mr-linkBtn:hover { color: #000000; border: #000000 2px solid; background-color: #ffffff; filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } .mr-linkArea a.mr-linkBtn:hover span { background-image:url(../img/arrow_linkBtn_hover.png); } } /* ==================================================== ■ SP ==================================================== */ @media screen and (max-width:640px){ /* mr-kv ---------------------------------------- */ .mr-kv { width: 100%; margin: 0 0 80px 0; padding: 4vw 0; background: #dcf5f5; } .mr-kv .mr-phBox01 { width: 100%; background: url(../img/bg_kv_ph01.png); background-repeat: repeat-x; background-position: top; background-size: 200vw 16vw; } .mr-kv .mr-phBox02 { width: 100%; background: url(../img/bg_kv_ph02.png); background-repeat: repeat-x; background-position: bottom; background-size: 200vw 16vw; } .mr-kv .mr-inner { height: 154vw; position: relative; margin: 0 auto; } .mr-kv h1.mr-pageTtl { position: absolute; top: 20vw; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } .mr-kv h1.mr-pageTtl img { width: 84vw; } .mr-kv .mr-balloon { width: 68vw; height: 30.6vw; position: absolute; bottom: 42vw; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); background-image: url(../img/deco_kv_balloon.png); background-repeat: no-repeat; background-size: 68vw 30.6vw; } .mr-kv .mr-txt01 { font-size: 2.9vw; line-height: 1.6; letter-spacing: 0; text-align: center; margin-top: 6.6vw; } .mr-kv img.mr-scancut { width: 40vw; position: absolute; bottom: 24vw; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } /* contentsArea ---------------------------------------- */ .mr-contentsArea { margin: 0 auto; padding: 0 10px; } .mr-contentsArea .mr-contentsTtl { text-align: center; margin-bottom: 40px; } .mr-contentsArea .mr-contentsTtl img { width: 145px; } /* .mr-contentsArea .mr-contentsTtl img.mr-deco { width: 100px; margin-bottom: 20px; } .mr-contentsArea .mr-contentsTtl h2 { font-size: 24px; font-weight: 700; line-height: 1.5; margin: 0; } */ /* jumpNav */ .mr-jumpNav { text-align: center; margin-bottom: 50px; padding: 0; } .mr-jumpNav li { width: 65px; display: inline-block; font-size: 12px; line-height: 1.4; letter-spacing: 0; text-align: center; vertical-align: top; margin: 0 10px 20px; } .mr-jumpNav li img.mr-icon { width: 100%; border: #000000 1px solid; border-radius: 33px; } .mr-jumpNav li span { display: block; } .mr-jumpNav li .mr-name { font-size: 14px; margin-top: 10px; } .mr-jumpNavSmall { margin: 60px auto 80px; } /* report */ .mr-report { width: 100%; position: relative; margin-bottom: 40px; padding-top: 60px; } .mr-report img.mr-icon { width: 100px; display: block; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); border: #000000 1px solid; border-radius: 50px; } .mr-report .mr-box { border: #000000 1px solid; } .mr-report .mr-inner { padding: 65px 25px 25px; } .mr-report .mr-profile { font-size: 12px; text-align: center; margin: 0 0 40px 0; } .mr-report .mr-name { font-size: 16px; font-weight: 700; } .mr-report .mr-section { margin-bottom: 50px; } .mr-report .mr-section:last-child { margin-bottom: 25px; } .mr-report .mr-question { font-size: 14px; font-weight: 700; padding-bottom: 15px; margin-bottom: 20px; background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 6px); background-size: 8px 2px; background-position: bottom; background-repeat: repeat-x; } .mr-report .mr-question img.mr-iconQ { width: 22px; vertical-align: text-bottom; margin-right: 10px; } .mr-report .mr-answer { font-size: 14px; line-height: 2; margin: 0; } .mr-report .mr-answer .mr-ph { width: 100%; margin-bottom: 10px; } .mr-report .mr-answer .mr-point { font-weight: 700; background: #fffa8c; } .mr-report .mr-works { padding: 25px; background: #ffffff; border: #000000 1px solid; } .mr-report .mr-works ul { margin: 0; padding: 0; } .mr-report .mr-works li { width: 100%; display: inline-block; margin-bottom: 20px; } .mr-report .mr-works li img.mr-ph { width: 100%; } .mr-report .mr-works li:last-child { margin-bottom: 0; } /* linkArea ---------------------------------------- */ .mr-linkArea { width: 100%; position: relative; padding: 120px 0 90px; background-color: #dcf5f5; } .mr-linkArea .mr-linkAreaBG { width: 100%; height: 155px; position: absolute; top: 0; background-image:url(../img/bg_linkArea.png); background-position: top center; background-repeat: no-repeat; background-size: 100% 25%; } .mr-linkArea a.mr-linkBtn { width: 90%; height: 80px; display: block; font-weight: 700; text-align: center; line-height: 80px; color: #ffffff; margin: 0 auto; background: #000000; border-radius: 6px; } .mr-linkArea a.mr-linkBtn span { padding-right: 25px; background-image:url(../img/arrow_linkBtn.png); background-repeat: no-repeat; background-position: center right; background-size: 12px 17px; } }