@charset "utf-8";


:root{
	--concept-color: #004270;
	--accent-color: #000;
	--base-color: #000;
	--page-wrap : 1040px;
	--font-min: "游明朝", YuMincho, "Hiragino Mincho", "ヒラギノ明朝", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 main 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
body { width: 100lvw; overflow-X: hidden; }
#nikkei-header .nikkei-header_inner { max-width: 960px!important; margin-inline: auto!important; }
#nikkei-header .nikkei-header_aside { width: 76px!important; }
.page-wrap { max-width: 740px; margin-inline: auto; padding-inline: 30px; }
.page-txt { font-size: 1.8rem; line-height: 1.71; }
.page-txt + .page-txt { margin-top: 1em; }
.page-txt__note { font-size: 1.4rem; margin-bottom: 1.5em; }
.page-note { margin-top: 1em; color: var(--concept-color); }


@media (max-width: 767px) {
	.page-wrap { max-width: 740px; margin-inline: auto; padding-inline: 15px; }
	.page-txt { font-size: 1.6rem; }
	.page-txt__note { font-size: 1.3rem; }
}



.inner { background: #f7f7f7; }
.main { background: url(../../img/img_visual_bg.webp) no-repeat; background-size: contain; background-position: 0 54px; padding-bottom: 60px; }

.visual-head { position: relative; width: 100%; height: 54px; background: var(--concept-color); }
.visual-head::before { position: absolute; content: ""; inset: auto auto 0 0; background: linear-gradient(to bottom,rgba(211,211,211,0) 0,rgba(211,211,211,0) 32px,rgba(211,211,211,1) 32px,rgba(211,211,211,1) 33px,rgba(211,211,211,0) 33px,#fff 34px); width: calc((100% - 900px) / 2); z-index: 10; height: 34px; }
.visual-head::after { position: absolute; content: ""; inset: auto 0 0 auto; background: linear-gradient(to top,rgba(211,211,211,0) 0,rgba(211,211,211,0) 32px,rgba(211,211,211,1) 32px,rgba(211,211,211,1) 33px,rgba(211,211,211,0) 33px,#fff 34px); width: calc( 100% - ((100% - 900px) / 2) - 312px); z-index: 10; height: 34px; }
.visual-head__wrap { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 960px; margin-inline: auto; padding-top: 20px; background: var(--concept-color); padding: 20px 30px 0; }
.visual-head__copy { width: 312px; background: var(--concept-color); }
.visual-head__logo { width: 160px; transform: translate(0,10px); }

.visual-main { position: relative; max-width: 960px; margin: 25px auto 0; padding: 0 30px; }
.visual-main__title { position: absolute; content: ""; inset: 0 auto 0 30px; margin: auto 0; max-width: 560px; aspect-ratio: 560/140; min-width: 0; z-index: 10; width: 60%; }
.visual-main__title.title--omron { position: absolute; content: ""; inset: 0 auto 0 30px; margin: auto 0; max-width: 440px; aspect-ratio: 893/423; min-width: 0; z-index: 10; width: 60%; }
.visual-main__title-offer { margin-top: 10px; font-size: 1.4rem; margin-left: 10px; }
.visual-main__img { position: relative; max-width: 540px; width: 56.25%; margin-left: auto; margin-right: 0; }
.visual-main__img-name { position: absolute; content: ""; inset: auto auto 0.5em -1em; color: #fff; font-size: 2.2rem; font-weight: 700; padding: 3px 1em; }
.visual-main__img-name::before { position: absolute; content: ""; inset: 0 auto 0 0; width: 100%; height: 100%; background: linear-gradient(to right,rgba(0,73,137,1) 0%,rgba(0,73,137,0) 100%); mix-blend-mode: multiply; }
.visual-main__img-name span { position: relative; z-index: 10; }
.visual-main__img-name .cap { font-size: 1.4rem; }
.visual-main__offer { max-width: 960px; margin: 10px auto 0; font-size: 1.4rem; text-align: right; padding: 0 30px; }


.contents { padding: 0 30px; }
.contents-wrap { max-width: 900px; margin-inline: auto; background: #fff; padding: 45px 30px; margin-top: 30px; }
.lead-copy { position: relative; padding: 15px; font-size: 1.8rem; line-height: 1.71; margin-top: 45px; color: var(--concept-color); font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 700; }
.lead-copy::before { position: absolute; content: ""; inset: 0 auto auto 0; width: 100%; height: 1px; background: linear-gradient(to left,#fff 5%,var(--concept-color) 50%,#fff 95%); }
.lead-copy::after  { position: absolute; content: ""; inset: auto auto 0 0; width: 100%; height: 1px; background: linear-gradient(to left,#fff 5%,var(--concept-color) 50%,#fff 95%); }

.lead-nav { margin-top: 50px; }
.resume-list { max-width: 680px; margin-inline: auto; width: 100%; display: flex; flex-wrap: wrap; gap: 15px 15px; }
.resume-item { position: relative; inline-size: calc((100% - 15px) / 2); }
.resume-item::before { position: absolute; content: ""; inset: 5px auto auto 0; width: 100%; height: 1px; background: var(--concept-color); pointer-events: none; }
.resume-item::after { position: absolute; content: ""; inset: auto auto 5px 0; width: 100%; height: 1px; background: var(--concept-color); pointer-events: none; }
a.resume-list__btn { background: linear-gradient(to left,#e6f2fb 0%,#fff 50%,#e6f2fb 100%); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; align-content: center; padding: 15px 30px 15px 10px; height: 70px; color: #000; }
.resume-list__btn::before { position: absolute; content: ""; inset: 0 12px 0 auto; margin: auto 0; width: 23px; border-radius: 100%; aspect-ratio: 1/1; min-width: 0; background: var(--concept-color); }
.resume-list__btn::after { position: absolute; content: ""; inset: 0 20px 0 auto; margin: auto 0; width: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); aspect-ratio: 1/1; min-width: 0; }
.resume-list__title { flex: 1; font-size: 1.4rem; line-height: 1.71; }
.resume-list__title span { font-size: 1.7rem; display: block; }
.resume-list__img { width: 70px; }
.resume-list__note { margin-top: 15px; font-size: 1.3rem; }

* + .sct { margin-top: 70px; }
.sct + .sct { margin-top: 100px; }
.sct-head { background: var(--concept-color); color: #fff; font-weight: 700; font-size: 2.4rem; padding: 10px 15px; margin-bottom: 30px; text-align: center; line-height: 1.31; }
.sct-wrap + .sct-wrap { margin-top: 45px; }
.sct-wrap figcaption { margin-top: 20px;  font-size: 1.4rem; }
.sct-wrap { display: flex; flex-wrap: wrap; gap: 30px 30px; }
.sct-ex { flex: 1; }
.sct-img { max-width: 635px; margin-inline: auto; }
.sct-img--side { width: 240px; }
.sct-img__cap { margin-top: 10px; font-size: 1.3rem; }
.cap-c { text-align: center; }

.sct-comment { position: relative; background: url(../../img/img_sct_comment_bg.webp) no-repeat center/cover; padding: 50px 30px; }
.sct-comment::before { position: absolute; content: ""; background: url(../../img/acce_quo.svg) no-repeat center/contain; inset: 25px auto auto 25px; aspect-ratio: 30/24; min-width: 0; width: 30px; }
.sct-comment::after  { position: absolute; content: ""; background: url(../../img/acce_quo.svg) no-repeat center/contain; inset: auto 25px 25px auto; aspect-ratio: 30/24; min-width: 0; width: 30px; transform: rotate(180deg); }
.sct-comment__wrap { max-width: 510px; margin-inline: auto; }
.sct-comment__txt { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
.sct-comment__name { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; text-align: right; position: relative; margin-top: 10px; font-size: 1.8rem; }
.sct-comment__name::before { position: absolute; content: ""; inset: 0 auto 0 130px; margin: auto 0; height: 1px; width: calc(100% - 130px - 6em); background: #000; }
.sct-comment__note { text-align: right; font-size: 1.4rem; margin-top: 10px; }


.page-footer { margin-top: 60px; }
.page-footer__logo { width: 175px; margin: 70px auto 0; }

.logo-omron { aspect-ratio: 92/18; min-width: 0; }


@media (max-width: 960px) {
	.visual-head::before { width: 30px;}
	.visual-head::after { width: calc(100% - 342px); }
}

@media (max-width: 767px) {
	.visual-head { height: 36.5px; }
	.visual-head::before { display: none; }
	.visual-head::after { display: none; }

	.visual-main { margin-top: 30px; }
	.visual-main__title { position: static; max-width: 500px; width: 80%; margin-inline: auto; margin-bottom: 20px; }
	.visual-main__title.title--omron { position: static; max-width: 360px; width: 80%; margin-inline: auto; margin-bottom: 20px; }
	.visual-main__title-offer { text-align: center; }
	.visual-main__img { max-width: 500px; width: 100%; margin-inline: auto; }
	.visual-main__img-name { font-size: 1.8rem; line-height: 1.31; padding: 3px 1em; }
	.visual-head__wrap { padding-inline: 15px; }
	.visual-head__copy { width: 210px; }
	.visual-head__logo { width: 120px; transform: translate(0,0); }
	
	.main { background: url(../../img/img_visual_bg.webp) no-repeat; background-size: contain; background-position: 0 36.5px; padding-bottom: 60px; }
	
	.contents { padding: 0 15px; }
	.contents-wrap { padding: 20px 0; }
	
	.lead-copy { padding: 10px; font-size: 1.6rem; margin-top: 20px; }
	
	.resume-list { max-width: 400px; gap: 15px 15px; }
	.resume-item { inline-size: calc(100%); }
	.resume-list__title { font-size: 1.3rem; }
	.resume-list__title span { font-size: 1.5rem; }
	
	* + .sct { margin-top: 40px; }
	.sct + .sct { margin-top: 60px; }
	.sct-head { font-size: 1.8rem; padding: 12px 15px; margin-bottom: 20px; text-align: left; }
	.sct-wrap + .sct-wrap { margin-top: 45px; }
	.sct-ex { flex: 0 1 auto; width: 100%; }
	.sct-img { max-width: 635px; margin-inline: auto; }
	.sct-wrap figcaption { margin-top: 10px;  font-size: 1.2rem; }
	
	.sct-comment { padding-block: 40px; }
	.sct-comment::before { inset: 15px auto auto 25px; width: 20px; }
	.sct-comment::after  { inset: auto 25px 15px auto; width: 20px; }
	.resume-list__note { margin-inline: auto; max-width: 400px; }
}








/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 pageTop 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#pageTop { height: 180px; padding-top: 40px; }
#pageTop a { position: relative; overflow: hidden; display: block; width: 200px; font-size: 2rem; line-height: 3rem; color: #044b89; font-weight: 700; text-align: center; text-decoration: none; padding-top: 55px; padding-bottom: 15px; margin-right: auto; margin-left: auto; }
#pageTop a::before,
#pageTop a::after { position: absolute; top: 26px; display: block; width: 12px; height: 2px; background-color: #044b89; content: ""; margin-right: auto; margin-left: auto; }
#pageTop a::before { right: 0; left: 8px; transform: rotate(45deg); }
#pageTop a::after { right: 8px; left: 0; transform: rotate(-45deg); }

@media screen and (min-width: 821px) {
	#pageTop a::before,
	#pageTop a::after { transition: 0.2s ease; }
	#pageTop a:hover::before,
	#pageTop a:hover::after { top: 21px; }
}

@media screen and (max-width: 767px) {
	#pageTop { height: 180px; padding-top: 0px; margin-top: 30px; }
}



header,
footer { position: relative; z-index: 10000; }
main { position: relative; }
.headAnchor { position: relative; z-index: 10; }
.logoSlider { position: relative; z-index: 10; }
.contentsInner { position: relative; z-index: 10; }
.confetti { position: fixed; height: 100%; width: 100%; top: 0; z-index: 0; pointer-events: none; touch-action: none; }
.confetti canvas { height: 100%; width: 100%; pointer-events: none; touch-action: none; }


.cursorWrap { position: fixed; left: 0; top: 0; transform: translate(-12px, -12px); pointer-events: none; z-index: 2000; }
.cursorImage { transform-origin: center; pointer-events: none; position: fixed; width: 32px; aspect-ratio: 1; background: url(../images/cursor_icon.svg) no-repeat center/contain; border-radius: 50%; opacity: 1; transform: translate(-50%, -50%); transition: .05s; z-index: 2000; bottom: 100px; right: 100px; overflow: visible; opacity: 0; }
.is-active.cursorImage { animation: curstorker .5s forwards, .5s cursorGlow ease-out forwards; opacity: 1; }