@charset "utf-8";


@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 900;
  font-display: swap;
  src: url('../../fonts/ZenMaruGothic-Black.ttf') format('TrueType');
}


/* ------------------------------------
	* メイン
* ------------------------------------ */
#mv { position: relative; overflow-y: hidden; padding-bottom: calc(56.25% + 120px); width: 100%; height: 0; background: linear-gradient(to bottom, #fff, rgba(26, 134, 255, .6) 11%, rgba(9, 32, 159, .6)), #fff; }
#cm, #cm:after { position: absolute; left: 50%; transform: translateX(-50%); }
#cm { top: 45px; width: 100%; max-width: 888px; height: 100%; }
#cm:after { content: ''; top: -45px; display: block; width: 55%; max-width: 288px; background: url('/pr/images/logo_video.png') no-repeat 0 0; background-size: contain; aspect-ratio: 16 / 9; }
#cm video { max-width: 888px; }
#mv h1 { color: #fff; opacity: 0.55; font-size: 12px; font-family: 'Zen Maru Gothic', sans-serif; text-align: center; position: absolute; bottom: 35px; left: 50%; z-index: 1; padding-top: 5px; transform: translateX(-50%); }
#mv h1:before, #mv h1:after { vertical-align: middle; content: ''; position: relative; display: inline-block; background-color: rgba(255, 255, 255, 0.77); width: 2px; height: 15px; }
#mv h1:before { margin-right: 8px; transform: rotate(-35deg); }
#mv h1:after { margin-left: 8px; transform: rotate(35deg); }

#contents { padding-bottom: 50px; background-color: rgba(234, 243, 253, 1); }

.contact { text-align: center; position: relative; z-index: 1; margin-right: 5px; margin-left: 5px; padding-top: 25px; padding-bottom: 30px; background-image: url('/sp/pr/images/contact_bg_sp.jpg'); background-color: rgba(255, 255, 255, 0.22); background-repeat: no-repeat; background-position: center bottom; background-size: cover; background-blend-mode: lighten; border-radius: 12px; }
.contact.top { margin-top: -30px; }
.contact h2, .contact p { font-weight: bold; }
.contact h2 { font-size: 18px; line-height: 1; position: relative; display: inline-block; margin-bottom: 25px; padding: 10px 20px 15px 25px; background: #ffe71b url('/pr/images/bg_heading.png') no-repeat 0 0; background-size: auto 100%; border-radius: 99px; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05); }
.contact h2:before, .contact h2:after { content: ''; }
.contact h2:before { vertical-align: middle; display: inline-block; margin-right: 10px; width: 36px; height: 26px; background: url('/pr/images/icon_movie.svg') no-repeat 0 0; background-size: contain; }
.contact h2:after { position: absolute; bottom: -15px; left: 20px; display: block; width: 0; height: 0; border-width: 19px 13px 0 13px; border-style: solid; border-color: #ffe71b transparent transparent transparent; }
.contact p:nth-of-type(1) { line-height: 2.222; font-size: 16px; }
.contact p:nth-of-type(2) { line-height: 1.888; margin-top: 2px; }
.contact .rainbow { margin-right: 2px; padding: 2px 8px 2.5px; background: linear-gradient(to right, #ff0, #ff89d9, #00ecb7); border-radius: 50px; text-shadow: 1px 0 0 rgba(255,255,255, 0.88), -1px 0 0 rgba(255,255,255, 0.88), 0 1px 0 rgba(255,255,255, 0.88), 0 -1px 0 rgba(255,255,255, 0.88), 1px 1px 0 rgba(255,255,255, 0.88), 1px -1px 0 rgba(255,255,255, 0.88), -1px -1px 0 rgba(255,255,255, 0.88), -1px 1px 0 rgba(255,255,255, 0.88); }
.contact .buttons { margin-top: 30px; margin-right: 5px; margin-left: 5px; }
.contact .buttons a { font-size: 18px; line-height: 1.333; display: block; padding-top: 13px; padding-bottom: 13px; }
.contact .buttons a:first-of-type { margin-bottom: 15px; }
.contact .buttons a .s { font-size: 12px; display: block; margin-top: 10px; opacity: 0.75; }

#service { position: relative; z-index: 0; margin-top: 70px; padding-top: 50px; padding-bottom: 33px; }
#service:before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: linear-gradient(#75b4fd, #6399ea); background-size: 100% auto; mask-image: url('/pr/images/clipmask.png'); -webkit-mask-image: url('/pr/images/clipmask.png'); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: top center; -webkit-mask-position: top center; mask-size: 100% auto; -webkit-mask-size: 100% auto; }
#service h2, #service h3 { font-weight: bold; text-align: center; }
#service h2 { color: #fff; font-size: 18px; text-shadow: 1px 0 0 #092095, -1px 0 0 #092095, 0 1px 0 #092095, 0 -1px 0 #092095, 1px 1px 0 #092095, 1px -1px 0 #092095, -1px -1px 0 #092095, -1px 1px 0 #092095; position: relative; margin-bottom: 15px; }
#service h2 .shadow { filter: drop-shadow(0 3px 0 #092095); }
#service h2:before { content: ''; position: absolute; top: -75px; left: 50%; display: block; width: 101px; height: 65px; background: url('/pr/images/pr_video_doctor.png') no-repeat center; background-size: contain; transform: translateX(-50%) rotate(-10deg); }

#slider { overflow: hidden; }

#fivethou { overflow-x: hidden; }
#fivethou .balloon, #fivethou figure { margin-right: auto; margin-left: auto; }
#fivethou .balloon { position:relative; margin-top: 25px; margin-bottom: 35px; padding-top: 10px; padding-bottom: 22px; width: 100%; background-color: #f6fdff; border-radius: 25px; }
#fivethou .balloon:before, #fivethou .balloon:after { content:' '; position: absolute; display: block; width: 100%; height: 35px; background-color: #73aaf4; }
#fivethou .balloon:before { top: 100%; left: -50%; border-radius: 0 70px 0 0; box-shadow: 70px 0 0 0 #f6fdff; }
#fivethou .balloon:after { top: 100%; right: -50%; border-radius: 70px 0 0 0; }
#fivethou h3 { color: #003399; font-size: 20px; }
#fivethou h3 .em { color: #ff6699; }
#fivethou h3 span:nth-of-type(2) { margin-left: 3px; }
#fivethou .balloon p { text-align: center; }
#fivethou .balloon p .em { font-weight: bold; }
#fivethou .parent { position: relative; }
#fivethou figure { padding: 30px 2px 22px 0; width: fit-content; background-color: #f6fdff; border-radius: 15px; }
#fivethou .easy { color: #003b95; font-size: 18px; font-family: 'Zen Maru Gothic', sans-serif; position: absolute; right: 5px; top: 0; transform: rotate(-5deg); padding-right: 35px; padding-left: 35px; }
#fivethou .easy:before, #fivethou .easy:after { content: ''; position: absolute; bottom: 0; display: block; width: 2px; height: 100%; background-color: #fabf01; }
#fivethou .easy:before { left: 20px; transform: rotate(-28deg); }
#fivethou .easy:after { right: 20px; transform: rotate(28deg); }
#fivethou .easy .slash { display: inline-block; width: 100%; height: 100%; }
#fivethou .easy .slash:before, #fivethou .easy .slash:after { content: ''; position: absolute; bottom: 0; display: block; width: 2px; height: 50%; background-color: #fabf01; }
#fivethou .easy .slash:before { left: 10px; transform: rotate(-42deg); }
#fivethou .easy .slash:after { right: 10px; transform: rotate(42deg); }

#point { margin-top: 35px; margin-right: 10px; margin-left: 10px; padding-top: 18px; padding-bottom: 135px; background: url('/pr/images/bg_dot.png') repeat top left; border-radius: 20px; }
#point h3 { color: transparent; -webkit-text-fill-color: transparent; font-size: 18px; position: relative; margin-bottom: 22px; padding-bottom: 8px; background-image: linear-gradient(to right, rgba(3, 122, 204, 0.88), rgba(8, 201, 227, 0.88) 80%, rgba(12, 216, 203, 0.88)); background-clip: text; -webkit-background-clip: text; }
#point h3:before { content: ''; position: absolute; bottom: 0; left: calc(50% - (132px / 2)); width: 132px; height: 4px; border-right: 44px solid #037acc; border-left: 44px solid #83eae7; background-color: #13Bde5; }
#point li { margin-inline: auto; width: 300px; height: 300px; background: url('/pr/images/bg_point_detail.png') no-repeat center; background-size: contain; }
#point li + li { margin-top: 140px; }
#point h4, #point h5 { font-weight: bold; text-align: center; position: relative; }
#point h4 { color: #fff; font-size: 18px; padding: 20px; width: fit-content; border-radius: 99px; margin-inline: auto; }
#point h4:before, #point h5:after { content: ''; position: absolute; display: block; }
#point h4:before { bottom: -10px; left: 8px; width: 30px; height: 30px; border-radius: 18px 0 6px 18px / 18px 0 1px 18px; transform: rotate(-85deg); }
#point li:first-child h4 { background-color: #08d9be; }
#point li:first-child h4:before { box-shadow: -3px -15px 0 -5px #08d9be inset; }
#point li:last-child h4:before { box-shadow: -3px -15px 0 -5px #fcc800 inset; }
#point li:last-child h4 { background-color: #fcc800; }
#point h5 { font-size: 18px; margin-top: 25px; }
#point h5:after { left: 50%; background-repeat: no-repeat; background-size: contain; transform: translateX(-50%); }
#point li:first-child h5:after { bottom: -105px; width: 121px; height: 77px; background-image: url('/pr/images/pr_point_img1.png'); }
#point li:last-child h5:after { bottom: -135px; width: 111px; height: 111px; background-image: url('/pr/images/pr_point_img2.png'); }
#point p { margin-top: 160px; padding-right: 15px; padding-left: 15px; }

#road { padding-top: 30px; background-image: linear-gradient(to bottom, #ecf6ff 0%, #dff0ff 100%), url('/pr/images/bg_road.svg'); background-color: rgba(239,249,251,0.9); background-repeat: no-repeat; background-position: center; background-size: cover; background-blend-mode: lighten; border-radius: 0 0 15px 15px; }
#road ul { display: flex; justify-content: space-between; margin-right: 3px; margin-left: 3px; height: 266px; background: url('/pr/images/pr_road_dr1.png') no-repeat bottom center; background-size: 170px 133px; }
#road ul li, #road ul li:before, #road ul li:after { background-color: #9fccf8; }
#road ul li { font-weight: bold; position: relative; display: flex; justify-content: center; align-items: center; width: 240px; height: 140px; border-radius: 50%; }
#road ul li:before, #road ul li:after { content: ''; position: absolute; border-radius: 50%; }
#road ul li:before { width: 30px; height: 30px; bottom: -15px; }
#road ul li:after { width: 13px; height: 13px; bottom: -30px; }
#road ul li.left:before { right: 83px; }
#road ul li.left:after { right: 80px; }
#road ul li.right:before { left: 76px; }
#road ul li.right:after { left: 73px; }
#road p { color: #2183e5; font-weight: bold; font-size: 16px; text-align: center; position: relative; margin-top: 10px; width: fit-content; height: 160px; background: url('/pr/images/pr_road_dr2.png') no-repeat center top 55px; background-size: 215px 130px; margin-inline: auto; }
#road p:before, #road p:after { content: ''; position: absolute; top: -2px; display: inline-block; width: 53px; height: 57px; background: no-repeat 0% / contain url('/pr/images/furikake.svg'); }
#road p:before { left: -53px; transform: rotateY(180deg) rotateZ(91deg); }
#road p:after { right: -43px; transform: rotate(270deg); }


/* ------------------------------------
	* 入力フォーム
* ------------------------------------ */
#register { padding-bottom: 25px; background-color: #fff4fb; }
#register h2 { color: #fff; font-size: 22px; text-align: center; line-height: 1.333; padding-top: 9px; padding-bottom: 9px; background-color: #e3007b; }
#register .in { padding-right: 7px; padding-left: 7px; }
#register .tabs { display: flex; margin-top: 20px; padding-right: 10px; padding-left: 10px; }
#register .tabs li { font-weight: bold; font-size: 18px; text-align: center; line-height: 1.333; flex: 1; padding-top: 8px; padding-bottom: 8px; background-color: #fff; border-width: 2px; border-style: solid; border-radius: 5px 5px 0 0; cursor: pointer; }
#register .tabs li:first-child { color: #01b4b6; margin-right: 5px; border-color: #01b4b6; }
#register .tabs li:last-child { color: #3eca01; margin-left: 5px; border-color: #3eca01; }
#register .tabs li.active { color: #fff; }
#register .tabs li.active:first-child { background-color: #01b4b6; }
#register .tabs li.active:last-child { background-color: #3eca01; }
#register .inside { display: none; }
#register .inside.show { display: block; margin-top: -2px; padding-top: 22px; padding-bottom: 15px; border-width: 4px 2px 2px; border-style: solid; border-radius: 0 0 15px 15px; filter: drop-shadow(rgba(3, 122, 204, 0.25) 0px 4px 4px); }
#register .inside.show#inquiry { background-color: #d9f4f4; border-color: #01b4b6; }
#register .inside.show#download { background-color: #e2f7d9; border-color: #3eca01; }
#register .lead { margin-right: 25px; margin-left: 25px; }

#register form { margin-top: 22px; padding: 25px 8px; background-color: #fff; border-top-width: 4px; border-top-style: solid; border-radius: 0 0 12px 12px; box-shadow: 0 0 3px #ccc; }
#register form#inquiryForm { border-top-color: #01b4b6; }
#register form#downloadForm { border-top-color: #3eca01; }
legend { color: #fff; font-weight: bold; font-size: 16px; padding-top: 5px; padding-bottom: 5px; padding-left: 15px; width: 100%; background-color: #03a277; border-radius: 8px; }
#register table { font-size: 16px; margin-top: 15px; width: 100%; border-bottom: 1px solid #ccc; }
#register th, #register td { display: block; border-top: 1px solid #ccc; }
#register th { font-weight: bold; width: 100%; background-color: #eee6cf; }
#register td { padding-top: 5px; padding-bottom: 15px; }
#register th label { position: relative; display: block; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; cursor: default; }
#register th .required { color: #f635b0; font-weight: bold; font-size: 12px; text-align: center; position: absolute; top: 5px; right: 10px; padding-top: 2px; padding-bottom: 2px; width: 5em; background-color: #fff; border-radius: 4px; }
input.text, textarea.textarea { padding: 8px 7px; width: 100%; border: 1px solid #0A3F94; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px 0px inset; }
select.select { padding: 8px 50px 8px 15px; background: none; border: none; cursor: pointer; }
#fAddress input { margin-top: 5px; }

.action { font-size: 16px; text-align: center; margin-top: 35px; margin-bottom: 25px; }
.action .agree { font-size: 14px; display: block; margin-top: 22px }
.submit_btn { font-size: 18px; margin-top: 10px; margin-right: auto; margin-left: auto; padding-top: 15px; padding-bottom: 15px; width: 95%; max-width: 366px; }

p.error { color: #d72332; font-weight: bold; font-size: 14px; padding: 5px 15px; background-color: #ffF2f3; }
p.error:before { color: #fff; text-align: center; content: '!'; display: inline-block; margin-right: 5px; width: 20px; height: 20px; background-color: #e01e2f; border-radius: 50%; }


/* ------------------------------------
	* 送信完了
* ------------------------------------ */
#container { padding: 15px 15px 30px; }
#thanks { padding-top: 20px; padding-bottom: 30px; border-radius: 10px; background: #fff; }
#thanks h1, #thanks h2, #thanks h3 { font-weight: bold; text-align: center; }
#thanks h2, #thanks h3 { color: #013B96; font-size: 16px; }
#thanks h1 { font-size: 18px; margin-bottom: 15px; }
#thanks ul { margin-right: 15px; margin-left: 15px; }
#thanks li { margin-top: 20px; padding-left: 33px; background: url('/employer/images/zacked_together_check.png') no-repeat 0 0; background-size: 22px 22px; }
#thanks span.time { color: #009900; font-weight: bold; }
#thanks h4 { font-weight: bold; margin-top: 15px; }
#thanks .tel a { color: #ff48af; font-family: verdana,arial,helvetica,sans-serif; font-weight: bold; font-size: 18px; }

#backHome { margin-top: 15px; text-align: center; }
#backHome a { font-size: 16px; padding: 10px 33px; }