@charset "utf-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; height: auto; vertical-align: bottom; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* base */ :root { --root-font-size: 16; } body { background: #FFF8EA; color: #654D37; font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif; font-size: calc( 18 / var(--root-font-size) * 1rem ); font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.5; overscroll-behavior-y: none; } html,body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { animation-name: fadeIn; animation-duration: 1s; } body.active { overflow: hidden; height:100%; } a {color: #654D37; text-decoration: none;} a:hover {color: #2CAEDA; text-decoration: none;} a:hover img { filter: alpha(opacity=80); -khtml-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } a, a:hover, a img, a:hover img { transition: 0.5s 0s; } .clear {clear: both;} .clearfix:after { content: ""; display: block; clear: both; } ::selection { background: rgba(255, 223, 38, 0.5); } ::-moz-selection { background: rgba(255, 223, 38, 0.5); } /* layout */ #wrap { width: auto !important; width: 100%; margin: 0; } #container { width: 100%; margin: 0 auto; } .pc { display: block; } .sp { display: none; } @media screen and (max-width: 960px) { .pc { display: none; } .sp { display: block; } } /*----- common -----*/ main { display: block; /* IE */ padding: 160px 0 0; } .mainTtl { display: flex; justify-content: center; margin: 0 auto 75px; } .mainTtl.left { justify-content: flex-start; padding: 0 0 0 75px; } .mainTtl.right { justify-content: flex-end; padding: 0 75px 0 0; } .mainTtl div.inner { position: relative; display: inline-block; font-family: "Zen Maru Gothic", serif; text-align: center; } .mainTtl div.inner.bg_left::before { content: ""; position: absolute; top: -20px; left: -100px; width: 80px; height: 100px; background: url("../images/recruit/main_ttl_left.png") no-repeat center center; background-size: contain; } .mainTtl.left div.inner.bg_left::before { top: -60px; left: -75px; } .mainTtl div.inner.bg_right::after { content: ""; position: absolute; top: -20px; right: -100px; width: 80px; height: 100px; background: url("../images/recruit/main_ttl_right.png") no-repeat center center; background-size: contain; } .mainTtl.right div.inner.bg_right::after { top: -60px; right: -75px; } .mainTtl .jp { font-size: calc( 18 / var(--root-font-size) * 1rem ); font-weight: 700; } .mainTtl .en { color: #2CAEDA; font-size: calc( 48 / var(--root-font-size) * 1rem ); font-weight: 500; } .mainTtl .en span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .mainTtl .en span.beige { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF8EA calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .mainTtl .en span.brown { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #EFE3D5 calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } div.flexWrap { display: flex; } div.btnWrap { display: flex; justify-content: center; padding: 0 0 75px; } div.gBtn { position: relative; width: 300px; height: 60px; background: #FFDF26; border-radius: 30px; text-align: center; transition: 0.5s 0s; } div.btnWrap div.gBtn { margin: 0 15px; } div.gBtn:hover { background: #654D37; } div.gBtn.brown { background: #654D37; } div.gBtn.brown:hover { background: #FFDF26; } div.gBtn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } div.gBtn p { position: relative; display: inline-block; font-family: "Zen Maru Gothic", serif!important; font-size: calc( 20 / var(--root-font-size) * 1rem )!important; font-weight: 500!important; line-height: 60px!important; padding: 0 0 0 40px!important; transition: 0.5s 0s; } div.gBtn:hover p { color: #FFF; } div.gBtn.brown p { color: #FFF; } div.gBtn.brown:hover p { color: #654D37; } div.gBtn p::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 20px; height: 20px; background: url("../images/recruit/anchor_brown.png") no-repeat center center; background-size: contain; margin: auto 0; transition: 0.5s 0s; } div.gBtn:hover p::before { bottom: -5px; background: url("../images/recruit/anchor_white.png") no-repeat center center; background-size: contain; } div.gBtn.brown p::before { background: url("../images/recruit/anchor_white.png") no-repeat center center; background-size: contain; } div.gBtn.brown:hover p::before { background: url("../images/recruit/anchor_brown.png") no-repeat center center; background-size: contain; } @media screen and (max-width: 960px) { main { display: block; /* IE */ padding: 80px 0 0; } .mainTtl { display: flex; justify-content: center; margin: 0 auto 50px; } .mainTtl.left { justify-content: center; padding: 0; } .mainTtl.right { justify-content: center; padding: 0; } .mainTtl div.inner { position: relative; display: inline-block; font-family: "Zen Maru Gothic", serif; text-align: center; } .mainTtl div.inner.bg_left::before { content: ""; position: absolute; top: -10px; left: -50px; width: 40px; height: 50px; background: url("../images/recruit/main_ttl_left.png") no-repeat center center; background-size: contain; } .mainTtl div.inner.bg_left.long::before { top: -20px; left: -10px; } .mainTtl.left div.inner.bg_left::before { top: -40px; left: -50px; } .mainTtl div.inner.bg_right::after { content: ""; position: absolute; top: -10px; right: -50px; width: 40px; height: 50px; background: url("../images/recruit/main_ttl_right.png") no-repeat center center; background-size: contain; } .mainTtl div.inner.bg_right.long::after { top: -20px; right: -10px; } .mainTtl.right div.inner.bg_right::after { top: -40px; right: -50px; } .mainTtl .jp { font-size: calc( 18 / var(--root-font-size) * 1rem ); font-weight: 700; } .mainTtl .en { color: #2CAEDA; font-size: calc( 36 / var(--root-font-size) * 1rem ); font-weight: 500; } .mainTtl .en span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .mainTtl .en span.beige { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF8EA calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .mainTtl .en span.brown { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #EFE3D5 calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } div.flexWrap { display: flex; } div.btnWrap { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 0 25px; } div.gBtn { position: relative; width: 270px; height: 50px; background: #FFDF26; border-radius: 25px; text-align: center; transition: 0.5s 0s; } div.btnWrap div.gBtn { margin: 5px 15px; } div.gBtn:hover { background: #654D37; } div.gBtn.brown { background: #654D37; } div.gBtn.brown:hover { background: #FFDF26; } div.gBtn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } div.gBtn p { position: relative; display: inline-block; font-family: "Zen Maru Gothic", serif!important; font-size: calc( 18 / var(--root-font-size) * 1rem )!important; font-weight: 500!important; line-height: 50px!important; padding: 0 0 0 40px!important; transition: 0.5s 0s; } div.gBtn:hover p { color: #FFF; } div.gBtn.brown p { color: #FFF; } div.gBtn.brown:hover p { color: #654D37; } div.gBtn p::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 20px; height: 20px; background: url("../images/recruit/anchor_brown.png") no-repeat center center; background-size: contain; margin: auto 0; transition: 0.5s 0s; } div.gBtn:hover p::before { bottom: -5px; background: url("../images/recruit/anchor_white.png") no-repeat center center; background-size: contain; } div.gBtn.brown p::before { background: url("../images/recruit/anchor_white.png") no-repeat center center; background-size: contain; } div.gBtn.brown:hover p::before { background: url("../images/recruit/anchor_brown.png") no-repeat center center; background-size: contain; } } /*----- header -----*/ header { position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 160px; background: #C3AB8F; } header .logo { display: flex; align-items: center; width: 90%; max-width: 1125px; height: 60px; padding: 30px 0 20px; margin: 0 auto; } header .logo img { width: auto; height: 100%; } header .logo span { height: 30px; background: #FFDF26; border-radius: 15px; font-family: "Zen Maru Gothic", serif; font-weight: 500; line-height: 30px; padding: 0 25px; margin: 5px 0 0 25px; } header div.btnArea { position: absolute; top: 0; right: 5%; display: flex; flex-wrap: wrap; justify-content: flex-end; width: 320px; } header div.btnArea div.job-descriptions, header div.btnArea div.entry { position: relative; width: 50%; height: 50px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; transition: 0.5s 0s; } header div.btnArea div.job-descriptions { background: #FFDF26; } header div.btnArea div.entry { background: #654D37; } header div.btnArea div.job-descriptions:hover, header div.btnArea div.entry:hover { background: #FFF; } header div.btnArea div.job-descriptions a, header div.btnArea div.entry a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } header div.btnArea div.job-descriptions p, header div.btnArea div.entry p { font-family: "Zen Maru Gothic", serif; line-height: 50px; text-align: center; transition: 0.5s 0s; } header div.btnArea div.entry p { color: #FFF; } header div.btnArea div.entry:hover p { color: #654D37; } header div.btnArea a.site { position: relative; font-family: "Zen Maru Gothic", serif; font-size: calc( 16 / var(--root-font-size) * 1rem ); line-height: 20px; padding: 0 0 0 25px; margin: 15px 10px 0 0; } header div.btnArea a.site::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 20px; height: 20px; background: url("../images/recruit/anchor_brown.png") no-repeat center center; background-size: contain; margin: auto 0; transform: rotate(-90deg); } header div.btnArea a.site:hover { color: #FFF; } header nav { } header nav ul { display: flex; align-items: center; justify-content: center; } header nav ul li ul { display: inherit; } header nav ul li.gnav { position: relative; border-right: #FFF solid 1px; font-family: "Zen Maru Gothic", serif; font-size: min(1.25vw, calc( 16 / var(--root-font-size) * 1rem )); line-height: 20px; padding: 0 min(2vw, 30px); } header nav ul li.gnav:last-child { border-right: none; } header nav ul li.gnav a.gnav, header nav ul li p.gnav { position: relative; color: #FFF; } header nav ul li.gnav a.gnav:hover { position: relative; color: #FFDF26; } header nav ul li.gnav a.gnav::after { content: ""; position: absolute; left: 0; bottom: -14px; width: 100%; height: 4px; background: #FFDF26; border-radius: 2px; opacity: 0; transition: 0.5s 0s; } header nav ul li.gnav a.gnav:hover::after { content: ""; position: absolute; left: 0; bottom: -9px; width: 100%; height: 4px; background: #FFDF26; border-radius: 2px; opacity: 100; } @media screen and (max-width: 960px) { header { position: fixed; top: 0; left: 0; z-index: 99; display: flex; align-items: center; width: 100%; height: 80px; background: #C3AB8F; } header .logo { display: flex; align-items: center; flex-wrap: wrap; width: 90%; max-width: 1125px; height: 50px; padding: 0; margin: 0 auto; } header .logo img { width: 250px; height: 30px; } header .logo span { display: block; height: 20px; background: #FFDF26; border-radius: 10px; font-family: "Zen Maru Gothic", serif; font-size: calc( 16 / var(--root-font-size) * 1rem ); font-weight: 500; line-height: 20px; padding: 0 25px; margin: 0 0 0 85px; } } /*----- bnrBlock -----*/ section.bnrBlock { position: relative; width: 100%; background: #F8ECDD; padding: 25px 0 calc(100px + 5vw); } section.bnrBlock::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_lb.png") no-repeat center bottom; background-size: cover; } @media screen and (min-width: 1921px) { section.bnrBlock::before { background: url("../images/recruit/bg_round_lb.png") no-repeat center top; background-size: cover; } } section.bnrBlock div.img { width: 80vw; max-width: 1050px; text-align: center; margin: 0 auto; } section.bnrBlock div.btnWrap { margin-top: -30px; padding: 0; } @media screen and (max-width: 960px) { section.bnrBlock { position: relative; width: 100%; background: #F8ECDD; padding: 25px 0 calc(50px + 5vw); } section.bnrBlock::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_lb.png") no-repeat center bottom; background-size: cover; } section.bnrBlock div.img { width: 90%; max-width: 335px; text-align: center; margin: 0 auto; } section.bnrBlock div.btnWrap { margin-top: -30px; padding: 0; } } /*----- greetings -----*/ section#greetings { position: relative; width: 100%; background: #FFF url("../images/recruit/greetings_bg.png") no-repeat center top 50px; background-size: 1450px 900px; padding: 100px 0 calc(150px + 5vw); } section#greetings::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_white.png") no-repeat center bottom; background-size: cover; } section#greetings div.flexWrap { align-items: flex-end; justify-content: space-between; width: 90%; max-width: 1050px; margin: 0 auto; } section#greetings div.flexWrap div.flexL { width: 50%; padding: 0 0 15px; } section#greetings div.flexWrap div.flexL .mainTtl.left { padding: 0; } section#greetings div.flexWrap div.flexL p.copy { font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 0 0 50px; } section#greetings div.flexWrap div.flexL p.txt { line-height: 1.75; } section#greetings div.flexWrap div.flexR { width: 45%; } @media screen and (max-width: 960px) { section#greetings { position: relative; width: 100%; background: #FFF url("../images/recruit/greetings_bg_sp.png") no-repeat center bottom calc(50px + 5vw); background-size: 420px 380px; padding: 75px 0 calc(50px + 5vw); } section#greetings::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_white.png") no-repeat center bottom; background-size: cover; } section#greetings div.flexWrap { align-items: flex-end; flex-wrap: wrap; justify-content: space-between; width: 85%; max-width: 1050px; margin: 0 auto; } section#greetings div.flexWrap div.flexL { width: 100%; padding: 0 0 50px; } section#greetings div.flexWrap div.flexL .mainTtl.left { padding: 0; } section#greetings div.flexWrap div.flexL p.copy { font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 0 0 50px; } section#greetings div.flexWrap div.flexL p.txt { line-height: 1.75; } section#greetings div.flexWrap div.flexR { width: 75vw; max-width: 440px; margin: 0 auto; } } /*----- about -----*/ section#about { position: relative; width: 100%; background: #FFF8EA; padding: 100px 0 0; } section#about::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_beige.png") no-repeat center bottom; background-size: cover; } @media screen and (min-width: 1921px) { section#about::before { background: url("../images/recruit/bg_round_beige.png") no-repeat center top; background-size: cover; } } section#about div.imgWrap { width: 100%; margin: 0 auto; } section#about div.introduction div.flexWrap { flex-wrap: wrap; justify-content: space-between; width: 90%; max-width: 1125px; margin: 0 auto; } section#about div.introduction div.flexWrap div.flexL, section#about div.introduction div.flexWrap div.flexR, section#about div.introduction div.flexWrap div.flexC { background: #FFF; border-radius: 30px; } section#about div.introduction div.flexWrap div.flexL, section#about div.introduction div.flexWrap div.flexR { width: 47.5%; padding: 50px 0 100px; margin: 0 0 75px; } section#about div.introduction div.flexWrap div.flexL .subTtl, section#about div.introduction div.flexWrap div.flexR .subTtl { position: relative; width: 90%; max-width: 460px; background: url("../images/recruit/ttl_bg.png") no-repeat center bottom; background-size: contain; color: #2CAEDA; font-family: "Zen Maru Gothic", serif; font-size: calc( 30 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; padding: 0 0 28px; margin: 0 auto 50px; } section#about div.introduction div.flexWrap div.flexL p.txt, section#about div.introduction div.flexWrap div.flexR p.txt { font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; line-height: 1.75; text-align: center; } section#about div.introduction div.flexWrap div.flexC { width: 100%; padding: 50px 0; margin: 0 0 150px; } section#about div.introduction div.flexWrap div.flexC div.block { padding: 100px 0; } section#about div.introduction div.flexWrap div.flexC .subTtl { position: relative; width: 80vw; max-width: 975px; font-family: "Zen Maru Gothic", serif; font-size: calc( 30 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; margin: 0 auto 50px; } section#about div.introduction div.flexWrap div.flexC .subTtl::before { content: ""; position: absolute; top: -77px; left: 0; right: 0; width: 72px; height: 72px; margin: 0 auto; } section#about div.introduction div.flexWrap div.flexC .subTtl.icon1::before { background: url("../images/recruit/icon1.png") no-repeat center center; background-size: contain; } section#about div.introduction div.flexWrap div.flexC .subTtl.icon2::before { background: url("../images/recruit/icon2.png") no-repeat center center; background-size: contain; } section#about div.introduction div.flexWrap div.flexC .subTtl.icon3::before { background: url("../images/recruit/icon3.png") no-repeat center center; background-size: contain; } section#about div.introduction div.flexWrap div.flexC .subTtl.icon4::before { background: url("../images/recruit/icon4.png") no-repeat center center; background-size: contain; } section#about div.introduction div.flexWrap div.flexC .subTtl span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } section#about div.introduction div.flexWrap div.flexC table { width: 80vw; max-width: 975px; margin: 0 auto; } section#about div.introduction div.flexWrap div.flexC table tr { border-bottom: #654D37 solid 1px; } section#about div.introduction div.flexWrap div.flexC table th, section#about div.introduction div.flexWrap div.flexC table td { font-weight: 500; } section#about div.introduction div.flexWrap div.flexC table th { width: 180px; color: #2CAEDA; font-family: "Zen Maru Gothic", serif; font-size: calc( 30 / var(--root-font-size) * 1rem ); padding: 20px 30px; } section#about div.introduction div.flexWrap div.flexC table td { font-size: calc( 24 / var(--root-font-size) * 1rem ); padding: 20px 0; } section#reason { padding: 150px 0 0; } section#reason div.inner { position: relative; width: 90%; max-width: 1200px; background: #D6C3AD; border-radius: 15px; padding: 100px 0 50px; margin: 0 auto; } section#reason .subTtl { position: absolute; top: -120px; left: 0; right: 0; width: 700px; height: 180px; margin: 0 auto; } section#reason ol { display: flex; flex-wrap: wrap; justify-content: space-between; width: 80vw; max-width: 1050px; margin: 0 auto; } section#reason ol li { width: calc(48.75% - 5%); background: #FFF; border-radius: 15px; padding: 25px 2.5% 50px; margin: 0 0 50px; } section#reason ol li figure { position: relative; margin: 0 0 50px; } section#reason ol li figure::after { position: absolute; bottom: -30px; left: 0; right: 0; width: 60px; height: 60px; background: #FFDF26; border-radius: 50%; font-family: "Zen Maru Gothic", serif; font-size: calc( 36 / var(--root-font-size) * 1rem ); line-height: 55px; text-align: center; margin: 0 auto; } section#reason ol li:nth-child(1) figure::after { content: "1"; } section#reason ol li:nth-child(2) figure::after { content: "2"; } section#reason ol li:nth-child(3) figure::after { content: "3"; } section#reason ol li:nth-child(4) figure::after { content: "4"; } section#reason ol li figure img { border-radius: 15px; } section#reason ol li p.ttl { font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; padding: 0 0 25px; } section#system { padding: 150px 0; } section#system div.inner { position: relative; width: 90%; max-width: 1200px; background: #FFF; border-radius: 15px; padding: 100px 0 50px; margin: 0 auto; } section#system .subTtl { position: absolute; top: -120px; left: 0; right: 0; width: 500px; height: 180px; margin: 0 auto; } section#system div.flexWrap { flex-wrap: wrap; justify-content: space-between; width: 80vw; max-width: 1050px; margin: 0 auto; } section#system div.flexWrap div.flexL { width: 42.5%; padding: 0 0 150px; } section#system div.flexWrap div.flexR { width: 55%; padding: 0 0 150px; } section#system div.flexWrap div.flexC { width: 100%; } section#system div.flexWrap .ttl { background: #C3AB8F; border-radius: 30px; color: #FFF; font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; padding: 10px 30px; margin: 0 0 30px; } section#system div.flexWrap div.flexC .ttl { position: relative; } section#system div.flexWrap div.flexC .ttl::before { content: ""; position: absolute; top: -90px; right: 45px; width: 110px; height: 90px; background: url("../images/recruit/system_illust.png") no-repeat center center; background-size: contain; } section#system div.flexWrap div.flexC div.img { width: 80vw; max-width: 1050px; text-align: center; margin: 0 auto; } section#system div.flexWrap ul { padding: 0 25px; } section#system div.flexWrap ul li { position: relative; padding: 0 0 0 1.25em; } section#system div.flexWrap ul li::before { content: "\025cf"; position: absolute; top: 0; left: 0; } section#system div.flexWrap ul li span { font-weight: 500; } div.recruit_slider { padding: 0 0 150px; } div.recruit_slider .slick-slide { margin: 0 3.75vw!important;/*スライド左右の余白調整*/ } div.recruit_slider .slick-slide img { width: 100%; height: auto; border-radius: 15px; } .slick-slide { height: inherit!important; } /*ドットナビゲーションの設定*/ .slick-dots { line-height: 0; text-align: center; margin: 50px 0 0; } .slick-dots li { display: inline-block; margin: 0 10px; } .slick-dots button { color: transparent; outline: none; width: 20px; height: 20px; display: block; background: #FFF; border-radius: 10px; border: none; } .slick-dots .slick-active button { background: #654D37; } @media screen and (max-width: 960px) { section#about { position: relative; width: 100%; background: #FFF8EA; padding: 75px 0 0; } section#about::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_beige.png") no-repeat center bottom; background-size: cover; } section#about div.imgWrap { width: 100%; margin: 0 auto; } section#about div.introduction div.flexWrap { flex-wrap: wrap; justify-content: space-between; width: 90%; max-width: 1125px; margin: 0 auto; } section#about div.introduction div.flexWrap div.flexL, section#about div.introduction div.flexWrap div.flexR, section#about div.introduction div.flexWrap div.flexC { background: #FFF; border-radius: 15px; } section#about div.introduction div.flexWrap div.flexL, section#about div.introduction div.flexWrap div.flexR { width: 100%; padding: 25px 0 50px; margin: 0 0 25px; } section#about div.introduction div.flexWrap div.flexL .subTtl, section#about div.introduction div.flexWrap div.flexR .subTtl { position: relative; width: 90%; max-width: 460px; background: url("../images/recruit/ttl_bg_sp.png") no-repeat center bottom; background-size: contain; color: #2CAEDA; font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; padding: 0 0 28px; margin: 0 auto 25px; } section#about div.introduction div.flexWrap div.flexL p.txt, section#about div.introduction div.flexWrap div.flexR p.txt { font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; line-height: 1.75; text-align: center; } section#about div.introduction div.flexWrap div.flexC { width: 100%; padding: 25px 0; margin: 0 0 50px; } section#about div.introduction div.flexWrap div.flexC div.block { padding: 93px 0 25px; } section#about div.introduction div.flexWrap div.flexC .subTtl { position: relative; width: 80vw; max-width: 975px; font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; margin: 0 auto 25px; } section#about div.introduction div.flexWrap div.flexC .subTtl::before { content: ""; position: absolute; top: -68px; left: 0; right: 0; width: 63px; height: 63px; margin: 0 auto; } section#about div.introduction div.flexWrap div.flexC .subTtl.icon1::before { background: url("../images/recruit/icon1.png") no-repeat center center; background-size: contain; } section#about div.introduction div.flexWrap div.flexC .subTtl.icon2::before { background: url("../images/recruit/icon2.png") no-repeat center center; background-size: contain; } section#about div.introduction div.flexWrap div.flexC .subTtl.icon3::before { background: url("../images/recruit/icon3.png") no-repeat center center; background-size: contain; } section#about div.introduction div.flexWrap div.flexC .subTtl.icon4::before { background: url("../images/recruit/icon4.png") no-repeat center center; background-size: contain; } section#about div.introduction div.flexWrap div.flexC .subTtl span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } section#about div.introduction div.flexWrap div.flexC table { width: 80vw; max-width: 975px; margin: 0 auto; } section#about div.introduction div.flexWrap div.flexC table tr { border-bottom: #654D37 solid 1px; } section#about div.introduction div.flexWrap div.flexC table th, section#about div.introduction div.flexWrap div.flexC table td { display: block; font-weight: 500; text-align: center; } section#about div.introduction div.flexWrap div.flexC table th { width: 100%; color: #2CAEDA; font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); padding: 25px 0 10px; } section#about div.introduction div.flexWrap div.flexC table td { width: 100%; font-size: calc( 18 / var(--root-font-size) * 1rem ); padding: 0 0 25px; } section#reason { padding: 100px 0 0; } section#reason div.inner { position: relative; width: 90%; max-width: 90%; background: #D6C3AD; border-radius: 0; padding: 50px 5% calc(50px + 5vw); margin: 0 auto; } section#reason .subTtl { position: absolute; top: -90px; left: 0; right: 0; width: 370px; height: 120px; margin: 0 auto; } section#reason ol { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 1050px; margin: 0 auto; } section#reason ol li { width: calc(100% - 10vw); max-width: calc(511.875px - 10vw); background: #FFF; border-radius: 15px; padding: 5vw 5vw 25px; margin: 0 0 25px; } section#reason ol li:last-child { margin: 0; } section#reason ol li figure { position: relative; margin: 0 0 50px; } section#reason ol li figure::after { position: absolute; bottom: -20px; left: 0; right: 0; width: 40px; height: 40px; background: #FFDF26; border-radius: 50%; font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); line-height: 35px; text-align: center; margin: 0 auto; } section#reason ol li:nth-child(1) figure::after { content: "1"; } section#reason ol li:nth-child(2) figure::after { content: "2"; } section#reason ol li:nth-child(3) figure::after { content: "3"; } section#reason ol li:nth-child(4) figure::after { content: "4"; } section#reason ol li figure img { border-radius: 15px; } section#reason ol li p.ttl { font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; padding: 0 0 25px; } section#system { position: relative; width: 100%; background: #FFF8EA; padding: 100px 0 0; } section#system::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_beige.png") no-repeat center bottom; background-size: cover; } section#system div.inner { position: relative; width: 90%; max-width: 1200px; background: #FFF; border-radius: 15px; padding: 50px 0; margin: 0 auto 50px; } section#system .subTtl { position: absolute; top: -90px; left: 0; right: 0; width: 290px; height: 120px; margin: 0 auto; } section#system div.flexWrap { flex-wrap: wrap; justify-content: space-between; width: 80vw; max-width: 1050px; margin: 0 auto; } section#system div.flexWrap div.flexL { width: 100%; padding: 0 0 50px; } section#system div.flexWrap div.flexR { width: 100%; padding: 0 0 150px; } section#system div.flexWrap div.flexC { width: 100%; } section#system div.flexWrap .ttl { background: #C3AB8F; border-radius: 30px; color: #FFF; font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; padding: 5px 30px; margin: 0 0 30px; } section#system div.flexWrap div.flexC .ttl { position: relative; } section#system div.flexWrap div.flexC .ttl::before { content: ""; position: absolute; top: -90px; right: 45px; width: 110px; height: 90px; background: url("../images/recruit/system_illust.png") no-repeat center center; background-size: contain; } section#system div.flexWrap div.flexC div.img { width: 80vw; max-width: 1050px; text-align: center; margin: 0 auto; } section#system div.flexWrap ul { padding: 0; } section#system div.flexWrap ul li { position: relative; padding: 0 0 1em 1.25em; } section#system div.flexWrap ul li::before { content: "\025cf"; position: absolute; top: 0; left: 0; } section#system div.flexWrap ul li span { font-weight: 500; } div.recruit_slider { padding: 0 0 75px; } div.recruit_slider .slick-slide { margin: 0 3.75vw!important;/*スライド左右の余白調整*/ } div.recruit_slider .slick-slide img { width: 100%; height: auto; border-radius: 15px; } .slick-slide { height: inherit!important; } /*ドットナビゲーションの設定*/ .slick-dots { line-height: 0; text-align: center; margin: 25px 0 0; } .slick-dots li { display: inline-block; margin: 0 5px; } .slick-dots button { color: transparent; outline: none; width: 10px; height: 10px; display: block; background: #FFF; border-radius: 10px; border: none; } .slick-dots .slick-active button { background: #654D37; } } /*----- works-routine -----*/ section#works-routine { width: 100%; background: #EFE3D5; padding: 150px 0 calc(200px + 5vw); } section#works-routine div.innerWrap { position: relative; width: 90%; max-width: 1200px; background: #FFF; border-radius: 30px; padding: 75px 0 150px; margin: 0 auto; } section#works-routine div.innerWrap::before { content: ""; position: absolute; top: -106px; right: 45px; width: 144px; height: 106px; background: url("../images/recruit/works-routine_illust.png") no-repeat center center; background-size: contain; } section#works-routine div.innerWrap p.copy, section#works-routine div.innerWrap p.txt { width: 80vw; max-width: 1050px; text-align: center; margin: 0 auto; } section#works-routine div.innerWrap p.copy { font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 0 0 15px; } section#works-routine div.innerWrap p.txt { padding: 0 0 75px; } section#works-routine div.innerWrap div.img { width: 80vw; max-width: 1050px; text-align: center; margin: 0 auto; } @media screen and (max-width: 960px) { section#works-routine { width: 100%; background: #FFF8EA; padding: 75px 0 0; } section#works-routine .mainTtl .en span.brown { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF8EA calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } section#works-routine div.innerWrap { position: relative; width: 100%; max-width: 100%; background: #EFE3D5; border-radius: 0; padding: 75px 0 calc(75px + 5vw); margin: 75px auto 0; } section#works-routine div.innerWrap::before { content: ""; position: absolute; top: -53px; right: 5%; width: 72px; height:53px; background: url("../images/recruit/works-routine_illust.png") no-repeat center center; background-size: contain; } section#works-routine div.innerWrap p.copy, section#works-routine div.innerWrap p.txt { width: 80vw; max-width: 1050px; text-align: center; margin: 0 auto; } section#works-routine div.innerWrap p.copy { font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 0 0 15px; } section#works-routine div.innerWrap p.txt { padding: 0 0 75px; } section#works-routine div.innerWrap div.img { width: 80vw; max-width: 1050px; text-align: center; margin: 0 auto; } } /*----- our-jobs -----*/ section#our-jobs { position: relative; width: 100%; background: #FFF8EA; padding: 100px 0 0; } section#our-jobs::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_beige.png") no-repeat center bottom; background-size: cover; } @media screen and (min-width: 1921px) { section#our-jobs::before { background: url("../images/recruit/bg_round_beige.png") no-repeat center top; background-size: cover; } } section#our-jobs section#nurse { padding: 75px 0 150px; } section#our-jobs section#medical-administration { background: #EFE3D5; padding: 150px 0 calc(200px + 5vw); } section#our-jobs section#nurse .subTtl, section#our-jobs section#medical-administration .subTtl { font-family: "Zen Maru Gothic", serif; font-size: calc( 30 / var(--root-font-size) * 1rem ); font-weight: 700; } section#our-jobs section#nurse .subTtl span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF8EA calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } section#our-jobs section#medical-administration .subTtl span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #EFE3D5 calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } section#our-jobs section#nurse div.flexWrap, section#our-jobs section#medical-administration div.flexWrap { flex-wrap: wrap; justify-content: space-between; padding: 0 0 50px; } section#our-jobs section#nurse div.flexWrap div.imgBlock, section#our-jobs section#medical-administration div.flexWrap div.imgBlock { width: 50%; } section#our-jobs section#nurse div.flexWrap div.txtBlock, section#our-jobs section#medical-administration div.flexWrap div.txtBlock { width: 35%; max-width: 450px; margin: 0 min(10vw, 112.5px) 0 auto; } section#our-jobs section#nurse section.job-details div.flexWrap div.txtBlock, section#our-jobs section#medical-administration section.job-details div.flexWrap div.txtBlock { margin: 0 auto 0 min(10%, 112.5px); } section#our-jobs section#nurse div.flexWrap .centerBlock, section#our-jobs section#medical-administration div.flexWrap .centerBlock { width: 90%; max-width: 1125px; margin: 50px auto; } section#our-jobs section#nurse div.flexWrap div.txtBlock .copy, section#our-jobs section#medical-administration div.flexWrap div.txtBlock .copy { font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 500; padding: 25px 0; } section#our-jobs section#nurse div.flexWrap div.txtBlock .note, section#our-jobs section#medical-administration div.flexWrap div.txtBlock .note { background: #FFF; border-radius: 15px; padding: 25px 1em; margin: 50px 0 0; } section#our-jobs section#nurse section.job-details div.flexWrap div.txtBlock img.img, section#our-jobs section#medical-administration section.job-details div.flexWrap div.txtBlock img.img { border-radius: 15px; margin: 150px 0 0; } section#our-jobs section#nurse div.gift { position: relative; width: calc(90% - 270px); max-width: 555px; background: #FFF; border-radius: 15px; padding: 25px 220px 25px 50px; margin: 0 auto 75px; } section#our-jobs section#nurse div.gift div.target { position: absolute; top: -30px; right: 25px; width: 170px; height: 170px; } section#our-jobs section#nurse div.gift .ttl { font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; margin: 0 0 25px; } section#our-jobs section#nurse div.gift .ttl span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } section#our-jobs section#nurse section.job-details, section#our-jobs section#medical-administration section.job-details, section#our-jobs section#nurse section.staff-voice, section#our-jobs section#medical-administration section.staff-voice { padding: 75px 0 0; } section#our-jobs section#nurse section.staff-voice div.mainTtl, section#our-jobs section#medical-administration section.staff-voice div.mainTtl { width: 90%; max-width: 1050px; } section#our-jobs section#nurse section.staff-voice div.ttlWrap, section#our-jobs section#medical-administration section.staff-voice div.ttlWrap { position: relative; width: 90%; max-width: 1125px; margin: 0 auto; } section#our-jobs section#nurse section.staff-voice div.ttlWrap::after, section#our-jobs section#medical-administration section.staff-voice div.ttlWrap::after { content: ""; position: absolute; bottom: 0; width: 138px; height: 104px; background: url("../images/recruit/staff-voice_illust.png") no-repeat center center; background-size: contain; } section#our-jobs section#nurse section.staff-voice div.ttlWrap::after { right: 30px; } section#our-jobs section#medical-administration section.staff-voice div.ttlWrap::after { left: 30px; } section#our-jobs section#nurse section.staff-voice div.ttlWrap p, section#our-jobs section#medical-administration section.staff-voice div.ttlWrap p { width: calc(100% - 260px); max-width: 865px; background: #FFF; border-top-left-radius: 30px; border-top-right-radius: 30px; font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 25px 30px 0; } section#our-jobs section#nurse section.staff-voice div.ttlWrap p span, section#our-jobs section#medical-administration section.staff-voice div.ttlWrap p span { color: #2CAEDA; font-size: calc( 60 / var(--root-font-size) * 1rem ); margin: 0 15px 0 0; } section#our-jobs section#medical-administration section.staff-voice div.ttlWrap p { margin: 0 0 0 auto; } section#our-jobs section#nurse section.staff-voice div.innerWrap, section#our-jobs section#medical-administration section.staff-voice div.innerWrap { width: 90%; max-width: 1125px; background: #FFF; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; padding: 75px 0; margin: 0 auto; } section#our-jobs section#nurse section.staff-voice div.innerWrap { border-top-right-radius: 30px; } section#our-jobs section#medical-administration section.staff-voice div.innerWrap { border-top-left-radius: 30px; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul { width: 80vw; max-width: 1050px; margin: 0 auto; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul li, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul li { padding: 0 0 50px; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul li:last-child, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul li:last-child { padding: 0; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul li .question, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul li .question { background: #C3AB8F; border-radius: 30px; color: #FFF; font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 10px 30px; margin: 0 0 25px; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul li .answer, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul li .answer { padding: 0 30px; } @media screen and (max-width: 960px) { section#our-jobs { position: relative; width: 100%; background: #FFF8EA; padding: 75px 0 0; } section#our-jobs::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_beige.png") no-repeat center bottom; background-size: cover; } section#our-jobs section#nurse { padding: 0 0 75px; } section#our-jobs section#medical-administration { background: #EFE3D5; padding: 0 0 calc(75px + 5vw); } section#our-jobs section#nurse .subTtl, section#our-jobs section#medical-administration .subTtl { font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; } section#our-jobs section#nurse .subTtl span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF8EA calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } section#our-jobs section#medical-administration .subTtl span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #EFE3D5 calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } section#our-jobs section#nurse div.flexWrap, section#our-jobs section#medical-administration div.flexWrap { flex-wrap: wrap; justify-content: space-between; padding: 0 0 25px; } section#our-jobs section#nurse div.flexWrap div.imgBlock, section#our-jobs section#medical-administration div.flexWrap div.imgBlock { order: 1; width: 100%; padding: 0 0 25px; } section#our-jobs section#nurse div.flexWrap div.txtBlock, section#our-jobs section#medical-administration div.flexWrap div.txtBlock { order: 2; width: 90%; max-width: 1125px; margin: 0 auto; } section#our-jobs section#nurse section.job-details div.flexWrap div.txtBlock, section#our-jobs section#medical-administration section.job-details div.flexWrap div.txtBlock { width: 100%; max-width: 100%; margin: 0 auto; } section#our-jobs section#nurse div.flexWrap .centerBlock, section#our-jobs section#medical-administration div.flexWrap .centerBlock { order: 3; width: 90%; max-width: 1125px; margin: 25px auto; } section#our-jobs section#nurse div.flexWrap div.txtBlock .copy, section#our-jobs section#medical-administration div.flexWrap div.txtBlock .copy { font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 500; text-align: center; padding: 25px 0; } section#our-jobs section#nurse div.flexWrap div.txtBlock .note, section#our-jobs section#medical-administration div.flexWrap div.txtBlock .note { background: #FFF; border-radius: 15px; padding: 25px 1em; margin: 25px 0 0; } section#our-jobs section#nurse section.job-details div.flexWrap div.txtBlock p.txt, section#our-jobs section#medical-administration section.job-details div.flexWrap div.txtBlock p.txt { width: 90%; margin: 25px auto 0; } section#our-jobs section#nurse section.job-details div.flexWrap div.txtBlock img.img, section#our-jobs section#medical-administration section.job-details div.flexWrap div.txtBlock img.img { display: block; width: 80%; border-radius: 15px; margin: 25px auto 0; } section#our-jobs section#nurse div.gift { position: relative; width: 80%; max-width: 555px; background: #FFF; border-radius: 15px; padding: 25px 5%; margin: 0 auto 25px; } section#our-jobs section#nurse div.gift div.target { position: relative; top: inherit; right: inherit; width: 170px; height: 170px; margin: 0 auto 15px; } section#our-jobs section#nurse div.gift .ttl { font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; margin: 0 0 15px; } section#our-jobs section#nurse div.gift .ttl span { background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } section#our-jobs section#nurse section.job-details, section#our-jobs section#medical-administration section.job-details, section#our-jobs section#nurse section.staff-voice, section#our-jobs section#medical-administration section.staff-voice { padding: 75px 0 0; } section#our-jobs section#nurse section.staff-voice div.mainTtl, section#our-jobs section#medical-administration section.staff-voice div.mainTtl { width: 90%; max-width: 1050px; } section#our-jobs section#nurse section.staff-voice div.ttlWrap, section#our-jobs section#medical-administration section.staff-voice div.ttlWrap { position: relative; width: 90%; max-width: 1125px; margin: 75px auto 0; } section#our-jobs section#nurse section.staff-voice div.ttlWrap::after, section#our-jobs section#medical-administration section.staff-voice div.ttlWrap::after { content: ""; position: absolute; top: -52px; bottom: inherit; width: 69px; height: 52px; background: url("../images/recruit/staff-voice_illust.png") no-repeat center center; background-size: contain; } section#our-jobs section#nurse section.staff-voice div.ttlWrap::after { right: 2.5vw; } section#our-jobs section#medical-administration section.staff-voice div.ttlWrap::after { left: 2.5vw; } section#our-jobs section#nurse section.staff-voice div.ttlWrap p, section#our-jobs section#medical-administration section.staff-voice div.ttlWrap p { width: calc(100% - 10vw); max-width: calc(1125px - 10vw); background: #FFF; border-top-left-radius: 15px; border-top-right-radius: 15px; font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 25px 5vw; } section#our-jobs section#nurse section.staff-voice div.ttlWrap p span, section#our-jobs section#medical-administration section.staff-voice div.ttlWrap p span { color: #2CAEDA; font-size: calc( 40 / var(--root-font-size) * 1rem ); margin: 0 15px 0 0; } section#our-jobs section#medical-administration section.staff-voice div.ttlWrap p { margin: 0 0 0 auto; } section#our-jobs section#nurse section.staff-voice div.innerWrap, section#our-jobs section#medical-administration section.staff-voice div.innerWrap { width: 90%; max-width: 1125px; background: #FFF; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 0 0 50px; margin: 0 auto; } section#our-jobs section#nurse section.staff-voice div.innerWrap { border-top-right-radius: 0; } section#our-jobs section#medical-administration section.staff-voice div.innerWrap { border-top-left-radius: 0; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul { width: 80vw; max-width: 1050px; margin: 0 auto; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul li, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul li { padding: 0 0 50px; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul li:last-child, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul li:last-child { padding: 0; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul li .question, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul li .question { background: #C3AB8F; border-radius: 15px; color: #FFF; font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 10px 5vw; margin: 0 0 25px; } section#our-jobs section#nurse section.staff-voice div.innerWrap ul li .answer, section#our-jobs section#medical-administration section.staff-voice div.innerWrap ul li .answer { padding: 0; } } /*----- lets-grow-together -----*/ section#lets-grow-together { position: relative; width: 100%; background: #FFF; padding: 100px 0; } section#lets-grow-together::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_white.png") no-repeat center bottom; background-size: cover; } @media screen and (min-width: 1921px) { section#lets-grow-together::before { background: url("../images/recruit/bg_round_white.png") no-repeat center top; background-size: cover; } } section#lets-grow-together div.introduction .copy, section#lets-grow-together ol li .ttl { font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; padding: 0 0 25px; } section#lets-grow-together div.introduction { width: 90%; max-width: 1125px; margin: 0 auto 75px; } section#lets-grow-together div.introduction .txt { text-align: center; } section#lets-grow-together div.introduction .txt span { font-weight: 500; } section#lets-grow-together div.get { position: relative; width: 90%; max-width: 750px; min-height: 175px; background: #FFF8EA url("../images/recruit/lets-grow-together_get_bg.png") no-repeat center bottom; background-size: 700px 275px; border-radius: 15px; text-align: center; padding: 50px 0; margin: 0 auto 100px; } section#lets-grow-together ol { display: flex; justify-content: space-between; width: 90%; max-width: 1050px; margin: 0 auto 100px; } section#lets-grow-together ol { display: flex; justify-content: space-between; width: 90%; max-width: 1050px; margin: 0 auto 100px; } section#lets-grow-together ol li { width: 31.25%; font-family: "Zen Maru Gothic", serif; } section#lets-grow-together ol li figure { position: relative; margin: 0 0 50px; } section#lets-grow-together ol li figure::after { position: absolute; bottom: -30px; left: 0; right: 0; width: 60px; height: 60px; background: #FFDF26; border-radius: 50%; font-size: calc( 36 / var(--root-font-size) * 1rem ); line-height: 55px; text-align: center; margin: 0 auto; } section#lets-grow-together ol li:nth-child(1) figure::after { content: "1"; } section#lets-grow-together ol li:nth-child(2) figure::after { content: "2"; } section#lets-grow-together ol li:nth-child(3) figure::after { content: "3"; } section#lets-grow-together ol li figure img { border-radius: 15px; } section#lets-grow-together div.imgWrap { width: 100%; margin: 0 auto 100px; } section#lets-grow-together div.message { position: relative; width: 90%; max-width: 1125px; background: #FFF8EA url("../images/recruit/lets-grow-together_message_bg.png") no-repeat center top; background-size: 1125px 950px; border-radius: 30px; padding: 150px 0; margin: 0 auto; } section#lets-grow-together div.message::after { content: ""; position: absolute; right: min(5vw, 75px); bottom: 50px; width: 124px; height: 152px; background: url("../images/recruit/lets-grow-together_message_illust.png") no-repeat center center; background-size: contain; } section#lets-grow-together div.message .mainTtl div.inner.bg_left::before, section#lets-grow-together div.message .mainTtl div.inner.bg_left::after { top: inherit; bottom: 0; } section#lets-grow-together div.message .mainTtl p { font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; } section#lets-grow-together div.message p.txt { width: 80vw; max-width: 675px; line-height: 1.75; margin: 0 auto; } section#lets-grow-together div.message p.txt span { font-weight: 500; background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF8EA calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } @media screen and (max-width: 960px) { section#lets-grow-together { position: relative; width: 100%; background: #FFF; padding: 75px 0 25px; } section#lets-grow-together::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_white.png") no-repeat center bottom; background-size: cover; } section#lets-grow-together div.introduction .copy, section#lets-grow-together ol li .ttl { font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; text-align: center; padding: 0 0 25px; } section#lets-grow-together div.introduction { width: 90%; max-width: 1125px; margin: 0 auto 50px; } section#lets-grow-together div.introduction .txt { text-align: center; } section#lets-grow-together div.introduction .txt span { font-weight: 500; } section#lets-grow-together div.get { position: relative; width: 90%; max-width: 750px; min-height: inherit; background: #FFF8EA url("../images/recruit/lets-grow-together_get_bg_sp.png") no-repeat center bottom; background-size: 320px 100px; border-radius: 15px; text-align: center; padding: 50px 0 125px; margin: 0 auto 50px; } section#lets-grow-together ol { display: flex; flex-wrap: wrap; justify-content: center; width: 90%; max-width: 1050px; margin: 0 auto 75px; } section#lets-grow-together ol li { width: 100%; max-width: calc(511.875px - 10vw); font-family: "Zen Maru Gothic", serif; margin: 0 0 50px; } section#lets-grow-together ol li:last-child { margin: 0; } section#lets-grow-together ol li figure { position: relative; margin: 0 0 50px; } section#lets-grow-together ol li figure::after { position: absolute; bottom: -20px; left: 0; right: 0; width: 40px; height: 40px; background: #FFDF26; border-radius: 50%; font-size: calc( 24 / var(--root-font-size) * 1rem ); line-height: 35px; text-align: center; margin: 0 auto; } section#lets-grow-together ol li:nth-child(1) figure::after { content: "1"; } section#lets-grow-together ol li:nth-child(2) figure::after { content: "2"; } section#lets-grow-together ol li:nth-child(3) figure::after { content: "3"; } section#lets-grow-together ol li figure img { border-radius: 15px; } section#lets-grow-together div.imgWrap { width: 100%; margin: 0 auto 50px; } section#lets-grow-together div.message { position: relative; width: 90%; max-width: 1125px; background: #FFF8EA url("../images/recruit/lets-grow-together_message_bg_sp.png") no-repeat center bottom 25px; background-size: 330px 90px; border-radius: 30px; padding: 50px 0 150px; margin: 0 auto; } section#lets-grow-together div.message::after { content: ""; position: absolute; right: 7.5vw; bottom: 25px; width: 62px; height: 76px; background: url("../images/recruit/lets-grow-together_message_illust.png") no-repeat center center; background-size: contain; } section#lets-grow-together div.message .mainTtl div.inner.bg_left::before, section#lets-grow-together div.message .mainTtl div.inner.bg_left::after { top: inherit; bottom: 0; } section#lets-grow-together div.message .mainTtl p { font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; } section#lets-grow-together div.message p.txt { width: 80vw; max-width: 675px; line-height: 1.75; margin: 0 auto; } section#lets-grow-together div.message p.txt span { font-weight: 500; background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF8EA calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } } /*----- recruit -----*/ main section#job-descriptions { width: 100%; background: #FFF; padding: 100px 0 calc(200px + 5vw); } main section#job-descriptions p.nothing { font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 500; text-align: center; padding: 0 0 50px; } main section#job-descriptions div.flexWrap { width: calc(90% - 50px); max-width: 1075px; border-bottom: #654D37 solid 1px; padding: 50px 25px; margin: 0 auto; } main section#job-descriptions div.flexWrap:last-of-type { border-bottom: none; } main section#job-descriptions div.flexWrap div.flexL { width: 40%; } main section#job-descriptions div.flexWrap div.flexR { width: 60%; } main section#job-descriptions div.flexWrap .ttl { position: relative; font-family: "Zen Maru Gothic", serif; font-size: calc( 30 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 0 0 0 65px; } main section#job-descriptions div.flexWrap .ttl::before { content: ""; position: absolute; top: -5px; left: 0; width: 60px; height: 60px; background: url("../images/recruit/icon_flower.png") no-repeat left top; background-size: contain; } main section#job-descriptions div.flexWrap p, main section#job-descriptions div.flexWrap ul li, main section#job-descriptions div.flexWrap ol li { font-size: calc( 20 / var(--root-font-size) * 1rem ); } main section#job-descriptions div.flexWrap p strong, main section#job-descriptions div.flexWrap ul li strong { font-size: calc( 30 / var(--root-font-size) * 1rem ); font-weight: 500; background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } main section#job-descriptions div.flexWrap ol li { position: relative; padding: 0 0 0 1em; } main section#job-descriptions div.flexWrap ul li::before { content: "\025cf"; } main section#job-descriptions div.flexWrap ol li::before { position: absolute; top: 0; left: 0; } main section#job-descriptions div.flexWrap ol li:nth-child(1)::before { content: "\02776"; } main section#job-descriptions div.flexWrap ol li:nth-child(2)::before { content: "\02777"; } main section#job-descriptions div.flexWrap ol li:nth-child(3)::before { content: "\02778"; } main section#job-descriptions div.flexWrap ol li:nth-child(4)::before { content: "\02779"; } main section#job-descriptions div.flexWrap ol li:nth-child(5)::before { content: "\0277a"; } main section#job-descriptions div.flexWrap div.noteWrap { position: relative; width: calc(100% - 220px); background: #FFF8EA; border-radius: 15px; padding: 15px 110px 15px 25px; margin: 25px 0 0 0; } main section#job-descriptions div.flexWrap div.noteWrap div.target { position: absolute; top: 0; bottom: 0; right: -85px; width: 170px; height: 170px; margin: auto 0; } main section#job-descriptions div.flexWrap div.noteWrap p { font-size: calc( 18 / var(--root-font-size) * 1rem ); } @media screen and (max-width: 960px) { main section#job-descriptions { width: 100%; background: #FFF; padding: 75px 0 calc(75px + 5vw); } main section#job-descriptions p.nothing { font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 500; text-align: center; padding: 0 0 50px; } main section#job-descriptions div.flexWrap { flex-wrap: wrap; width: 90%; max-width: 1075px; border-bottom: #654D37 solid 1px; padding: 25px 0; margin: 0 auto; } main section#job-descriptions div.flexWrap:last-of-type { border-bottom: none; } main section#job-descriptions div.flexWrap div.flexL { width: 100%; } main section#job-descriptions div.flexWrap div.flexR { width: 100%; } main section#job-descriptions div.flexWrap .ttl { position: relative; font-family: "Zen Maru Gothic", serif; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 0 0 0 55px; margin: 0 0 25px; } main section#job-descriptions div.flexWrap .ttl::before { content: ""; position: absolute; top: -5px; left: 0; width: 50px; height: 50px; background: url("../images/recruit/icon_flower.png") no-repeat left top; background-size: contain; } main section#job-descriptions div.flexWrap p, main section#job-descriptions div.flexWrap ul li, main section#job-descriptions div.flexWrap ol li { font-size: calc( 18 / var(--root-font-size) * 1rem ); } main section#job-descriptions div.flexWrap p strong, main section#job-descriptions div.flexWrap ul li strong { font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 500; background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } main section#job-descriptions div.flexWrap ol li { position: relative; padding: 0 0 0 1em; } main section#job-descriptions div.flexWrap ul li::before { content: "\025cf"; } main section#job-descriptions div.flexWrap ol li::before { position: absolute; top: 0; left: 0; } main section#job-descriptions div.flexWrap ol li:nth-child(1)::before { content: "\02776"; } main section#job-descriptions div.flexWrap ol li:nth-child(2)::before { content: "\02777"; } main section#job-descriptions div.flexWrap ol li:nth-child(3)::before { content: "\02778"; } main section#job-descriptions div.flexWrap ol li:nth-child(4)::before { content: "\02779"; } main section#job-descriptions div.flexWrap ol li:nth-child(5)::before { content: "\0277a"; } main section#job-descriptions div.flexWrap div.noteWrap { position: relative; width: calc(100% - 10vw); background: #FFF8EA; border-radius: 15px; padding: 15px 5vw; margin: 25px 0 0 0; } main section#job-descriptions div.flexWrap div.noteWrap div.target { position: relative; top: inherit; bottom: inherit; right: inherit; display: block; width: 170px; height: 170px; margin: 15px auto 0; } main section#job-descriptions div.flexWrap div.noteWrap p { font-size: calc( 18 / var(--root-font-size) * 1rem ); } } /*アコーディオン全体*/ main section#job-descriptions .accordion-area { } main section#job-descriptions .accordion-area li { width: 90%; max-width: 1125px; border: #C3AB8F solid 3px; border-radius: 20px; margin: 0 auto 50px; } main section#job-descriptions .accordion-area section { } /*アコーディオンタイトル*/ main section#job-descriptions .accordion-area .title { position: relative;/*+マークの位置基準とするためrelative指定*/ cursor: pointer; display: flex; align-items: center; background: #FFF; border-top-left-radius: 17px; border-top-right-radius: 17px; border-bottom-left-radius: 17px; border-bottom-right-radius: 17px; padding: 25px 2.5%; transition: 0.5s 0s; } main section#job-descriptions .accordion-area .title.close { background: #C3AB8F; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #FFF; } main section#job-descriptions .accordion-area .title p { font-family: "Zen Maru Gothic", serif; font-size: calc( 30 / var(--root-font-size) * 1rem ); } main section#job-descriptions .accordion-area .title p.full { width: 130px; background: #FFDF26; border-radius: 25px; line-height: 50px; text-align: center; margin: 0 20px 0 0; transition: 0.5s 0s; } main section#job-descriptions .accordion-area .title.close p.full { color: #654D37; } main section#job-descriptions .accordion-area .title p.part { width: 130px; background: #C3AB8F; border-radius: 25px; color: #FFF; line-height: 50px; text-align: center; margin: 0 20px 0 0; transition: 0.5s 0s; } main section#job-descriptions .accordion-area .title.close p.part { background: #FFDF26; color: #654D37; } /*アイコンの＋と×*/ main section#job-descriptions .accordion-area .title::before, main section#job-descriptions .accordion-area .title::after { content:''; position: absolute; width: 20px; height: 2px; background-color: #654D37; transition: 0.5s 0s; } main section#job-descriptions .accordion-area .title::before { top: 50%; right: 2.5%; } main section#job-descriptions .accordion-area .title::after { top: 50%; right: 2.5%; transform: rotate(90deg); } /*　closeというクラスがついたら形状変化　*/ main section#job-descriptions .accordion-area .title.close::before { background-color: #FFF; } main section#job-descriptions .accordion-area .title.close::after { background-color: #FFF; transform: rotate(0); } /*アコーディオンで現れるエリア*/ main section#job-descriptions .accordion-area .box { display: none;/*はじめは非表示*/ } main section#job-descriptions .accordion-area .box table { width: 100%; } main section#job-descriptions .accordion-area .box table th { width: 200px; background: #FFF8EA; border-bottom: #C3AB8F solid 1px; font-weight: 500; text-align: center; vertical-align: middle; padding: 25px 0; } main section#job-descriptions .accordion-area .box table tr.last th { border-bottom-left-radius: 17px; border-bottom: none; } main section#job-descriptions .accordion-area .box table td { width: calc(100% - 250px); border-bottom: #C3AB8F solid 1px; padding: 25px; } main section#job-descriptions .accordion-area .box table tr.last td { border-bottom-right-radius: 17px; border-bottom: none; } @media screen and (max-width: 960px) { /*アコーディオン全体*/ main section#job-descriptions .accordion-area { } main section#job-descriptions .accordion-area li { width: 90%; max-width: 1150px; border: #C3AB8F solid 3px; border-radius: 15px; margin: 0 auto 25px; } main section#job-descriptions .accordion-area section { } /*アコーディオンタイトル*/ main section#job-descriptions .accordion-area .title { position: relative;/*+マークの位置基準とするためrelative指定*/ cursor: pointer; display: flex; align-items: center; background: #FFF; border-top-left-radius: 13px; border-top-right-radius: 13px; border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; padding: 25px 5%; transition: 0.5s 0s; } main section#job-descriptions .accordion-area .title.close { background: #C3AB8F; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #FFF; } main section#job-descriptions .accordion-area .title p { font-family: "Zen Maru Gothic", serif; font-size: calc( 20 / var(--root-font-size) * 1rem ); } main section#job-descriptions .accordion-area .title p.full { width: 75px; background: #FFDF26; border-radius: 25px; line-height: 30px; text-align: center; margin: 0 10px 0 0; transition: 0.5s 0s; } main section#job-descriptions .accordion-area .title.close p.full { color: #654D37; } main section#job-descriptions .accordion-area .title p.part { width: 75px; background: #C3AB8F; border-radius: 25px; color: #FFF; line-height: 30px; text-align: center; margin: 0 10px 0 0; transition: 0.5s 0s; } main section#job-descriptions .accordion-area .title.close p.part { background: #FFDF26; color: #2CAEDA; } /*アイコンの＋と×*/ main section#job-descriptions .accordion-area .title::before, main section#job-descriptions .accordion-area .title::after { content:''; position: absolute; width: 20px; height: 2px; background-color: #654D37; transition: 0.5s 0s; } main section#job-descriptions .accordion-area .title::before { top: 50%; right: 5%; } main section#job-descriptions .accordion-area .title::after { top: 50%; right: 5%; transform: rotate(90deg); } /*　closeというクラスがついたら形状変化　*/ main section#job-descriptions .accordion-area .title.close::before { background-color: #FFF; } main section#job-descriptions .accordion-area .title.close::after { background-color: #FFF; transform: rotate(0); } /*アコーディオンで現れるエリア*/ main section#job-descriptions .accordion-area .box { display: none;/*はじめは非表示*/ } main section#job-descriptions .accordion-area .box table { width: 100%; } main section#job-descriptions .accordion-area .box table th { width: 90%; background: #FFF8EA; border-bottom: none; font-weight: 500; text-align: left; vertical-align: middle; padding: 15px 5%; } main section#job-descriptions .accordion-area .box table tr.last th { border-bottom-left-radius: 0; border-bottom: none; } main section#job-descriptions .accordion-area .box table td { width: 90%; border-bottom: #C3AB8F solid 1px; padding: 15px 5%; } main section#job-descriptions .accordion-area .box table tr.last td { border-bottom-right-radius: 0; border-bottom: none; } main section#job-descriptions .accordion-area .box table tr th, main section#job-descriptions .accordion-area .box table tr td { display: block; } } /*----- entry -----*/ section#entry { position: relative; width: 100%; background: #FFF8EA; padding: 100px 0 calc(200px + 5vw); } section#entry::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_beige.png") no-repeat center bottom; background-size: cover; } @media screen and (min-width: 1921px) { section#entry::before { background: url("../images/recruit/bg_round_beige.png") no-repeat center top; background-size: cover; } } section#entry p.txt { text-align: center; padding: 0 0 75px; } div.form { width: 90%; max-width: 1050px; margin: 0 auto; } div.form p.note { width: 70%; margin: 0 0 0 auto; } div.form table { width: 100%; margin: 10px 0; } div.form table th { position: relative; width: calc(30% - 80px); font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; vertical-align: top; padding: 40px 0 40px 80px; } div.form table td { width: 70%; padding: 15px 0; } div.form table th, div.form table td { } div.form table td.none { padding: 0 0 15px; } div.form table td.select { font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 35px 0; } div.form table th span.required { position: absolute; top: 40px; left: 0; width: 70px; height: 30px; background: #FFDF26; border-radius: 15px; font-size: calc( 16 / var(--root-font-size) * 1rem ); line-height: 30px; text-align: center; } div.form table td.txt input, div.form table td textarea { display: inline-block; width: calc(100% - 30px); background: #FFF; border-radius: 5px; padding: 15px; margin: 10px 0; } div.form table td.short input, div.form table td.short textarea { width: calc(30% - 30px); margin: 10px 0.5em 10px 0; } div.wpcf7 ::placeholder { color: #999; } div.wpcf7 .wpcf7-spinner { display: none!important; } span.wpcf7-not-valid-tip { color: #FF0000; line-height: 1.5; margin: 0 15px; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { width: calc(90% - 30px); max-width: 1020px; background: #FFDF26; border: none!important; line-height: 1.5; text-align: center; text-indent: 0.1em; padding: 10px 15px; margin: 50px auto 0; } div.form div.privacy_policy { width: calc(100% - 30px); background: #FFF; border-radius: 5px; padding: 15px; margin: 30px auto; } div.form div.privacy_policy div.wrap { overflow-y: scroll; overflow-x: hidden; width: calc(100% - 25px); height: 250px; padding: 0 25px 0 0; margin: 0 auto; } div.form div.privacy_policy div.wrap::-webkit-scrollbar { width: 10px; } div.form div.privacy_policy div.wrap::-webkit-scrollbar-track { background: #FFF8EA; border: none; } div.form div.privacy_policy div.wrap::-webkit-scrollbar-thumb { background: #654D37; } div.form div.privacy_policy div.wrap p { font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 0 0 15px; } div.form div.privacy_policy div.wrap p.ttl { font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 500; text-align: center; padding: 15px 0; } div.form div.privacy_policy div.wrap p.ttl_small { font-size: calc( 18 / var(--root-font-size) * 1rem ); font-weight: 500; padding: 15px 0; } div.form div.consent { width: 70%; margin: 0 0 0 auto; } div.form div.gBtn { cursor: pointer!important; margin: 100px auto 0; } div.form div.gBtn p { width: 100%!important; height: 100%!important; padding: 0!important; } div.form div.gBtn p { position: relative; display: inline-block; width: 100%!important; height: 100%!important; font-family: "Zen Maru Gothic", serif!important; font-size: calc( 20 / var(--root-font-size) * 1rem )!important; font-weight: 500!important; line-height: 60px!important; padding: 0!important; transition: 0.5s 0s; } div.form div.gBtn p::before { content: none; } div.form div.gBtn p input { position: relative; width: 100%!important; height: 100%!important; padding: 0!important; } .wpcf7-list-item { display: block; line-height: 1.5; margin: 0; } div.form table td.select .wpcf7-list-item { display: inline-block; width: 50%; margin: 10px 0; } input[type="checkbox"] { display: none; } .wpcf7-list-item-label { position: relative; height: 20px; line-height: 20px; padding-left: 25px; display: inline-block; } .wpcf7-list-item-label::before { content: ""; display: block; width: 20px; height: 20px; border: none; background: #FFF; border-radius: 5px; position: absolute; left: 0; top: 0; box-sizing: border-box; } input[type="checkbox"]:checked + .wpcf7-list-item-label::after { content: ""; display: block; width: 8px; height: 6px; border-top: 3px solid #654D37; border-right: 3px solid #654D37; transform: rotate(135deg); position: absolute; left: 5px; top: 4px; } @media screen and (max-width: 960px) { section#entry { position: relative; width: 100%; background: #FFF8EA; padding: 75px 0 calc(100px + 5vw); } section#entry::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_beige.png") no-repeat center bottom; background-size: cover; } section#entry p.txt { width: 90%; text-align: center; padding: 0 0 50px; margin: 0 auto; } div.form { width: 90%; max-width: 1050px; margin: 0 auto; } div.form p.note { width: 100%; text-align: center; margin: 0; } div.form table { width: 100%; margin: 10px 0; } div.form table th { position: relative; width: calc(100% - 70px); font-size: calc( 18 / var(--root-font-size) * 1rem ); font-weight: 700; vertical-align: top; padding: 25px 0 0 70px; } div.form table th.none { padding: 25px 0 0; } div.form table td { width: 100%; padding: 5px 0; } div.form table th, div.form table td { display: block; } div.form table td.none { padding: 0 0 15px; } div.form table td.select { font-size: calc( 18 / var(--root-font-size) * 1rem ); font-weight: 700; padding: 15px 0; } div.form table th span.required { position: absolute; top: 27.5px; left: 0; width: 60px; height: 25px; background: #FFDF26; border-radius: 15px; font-size: calc( 14 / var(--root-font-size) * 1rem ); line-height: 25px; text-align: center; } div.form table td.txt input, div.form table td textarea { display: inline-block; width: calc(100% - 30px); background: #FFF; border-radius: 5px; padding: 15px; margin: 10px 0; } div.form table td.short input, div.form table td.short textarea { width: calc(50% - 30px); margin: 10px 0.5em 10px 0; } div.wpcf7 ::placeholder { color: #999; } div.wpcf7 .wpcf7-spinner { display: none!important; } span.wpcf7-not-valid-tip { color: #FF0000; line-height: 1.5; margin: 0 15px; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { width: calc(90% - 30px); max-width: 1020px; background: #FFDF26; border: none!important; line-height: 1.5; text-align: center; text-indent: 0.1em; padding: 10px 15px; margin: 50px auto 0; } div.form div.privacy_policy { width: calc(100% - 10vw); background: #FFF; border-radius: 5px; padding: 15px 5vw; margin: 30px auto; } div.form div.privacy_policy div.wrap { overflow-y: scroll; overflow-x: hidden; width: calc(100% - 10px); height: 250px; padding: 0 10px 0 0; margin: 0 auto; } div.form div.privacy_policy div.wrap::-webkit-scrollbar { width: 10px; } div.form div.privacy_policy div.wrap::-webkit-scrollbar-track { background: #FFF8EA; border: none; } div.form div.privacy_policy div.wrap::-webkit-scrollbar-thumb { background: #654D37; } div.form div.privacy_policy div.wrap p { font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 0 0 15px; } div.form div.privacy_policy div.wrap p.ttl { font-size: calc( 20 / var(--root-font-size) * 1rem ); font-weight: 500; text-align: center; padding: 15px 0; } div.form div.privacy_policy div.wrap p.ttl_small { font-size: calc( 18 / var(--root-font-size) * 1rem ); font-weight: 500; padding: 15px 0; } div.form div.consent { width: 100%; margin: 0; } div.form div.gBtn { cursor: pointer!important; margin: 100px auto 0; } div.form div.gBtn p { width: 100%!important; height: 100%!important; padding: 0!important; } div.form div.gBtn p { position: relative; display: inline-block; width: 100%!important; height: 100%!important; font-family: "Zen Maru Gothic", serif!important; font-size: calc( 20 / var(--root-font-size) * 1rem )!important; font-weight: 500!important; line-height: 50px!important; padding: 0!important; transition: 0.5s 0s; } div.form div.gBtn p::before { content: none; } div.form div.gBtn p input { position: relative; width: 100%!important; height: 100%!important; padding: 0!important; } .wpcf7-list-item { display: block; line-height: 1.5; margin: 0; } div.form table td.select .wpcf7-list-item { display: inline-block; width: 100%; margin: 10px 0; } input[type="checkbox"] { display: none; } .wpcf7-list-item-label { position: relative; height: 20px; line-height: 20px; padding-left: 25px; display: inline-block; } .wpcf7-list-item-label::before { content: ""; display: block; width: 20px; height: 20px; border: none; background: #FFF; border-radius: 5px; position: absolute; left: 0; top: 0; box-sizing: border-box; } input[type="checkbox"]:checked + .wpcf7-list-item-label::after { content: ""; display: block; width: 8px; height: 6px; border-top: 3px solid #654D37; border-right: 3px solid #654D37; transform: rotate(135deg); position: absolute; left: 5px; top: 4px; } } /*----- entry-completed -----*/ section#entry-completed { position: relative; width: 90%; max-width: 1125px; background: #FFF url("../images/recruit/entry_bg.png") no-repeat center top; background-size: 1125px 760px; border-radius: 30px; padding: 100px 0 150px; margin: 100px auto calc(200px + 5vw); } section#entry-completed p.ttl { font-size: calc( 30 / var(--root-font-size) * 1rem ); font-weight: 500; text-align: center; padding: 0 0 50px; } section#entry-completed p.txt { width: 80vw; max-width: 750px; margin: 0 auto; } section#entry-completed div.contact { position: relative; width: 80vw; max-width: 750px; padding: 75px 0 0; margin: 0 auto; } section#entry-completed div.contact::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 142px; height: 188px; background: url("../images/recruit/entry_illust.png") no-repeat right bottom; background-size: contain; } section#entry-completed div.contact p { display: inline-block; border: #C3AB8F solid 1px; border-radius: 15px; font-size: calc( 20 / var(--root-font-size) * 1rem ); padding: 15px 30px; } section#entry-completed div.contact p strong { font-size: calc( 30 / var(--root-font-size) * 1rem ); font-weight: 500; background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } @media screen and (max-width: 960px) { section#entry-completed { position: relative; width: 90%; max-width: 1125px; background: #FFF url("../images/recruit/entry_bg.png") no-repeat center top; background-size: 1125px 760px; border-radius: 15px; padding: 75px 0 25px; margin: 50px auto calc(100px + 5vw); } section#entry-completed p.ttl { font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 500; text-align: center; padding: 0 0 25px; } section#entry-completed p.txt { width: 80vw; max-width: 750px; margin: 0 auto; } section#entry-completed div.contact { position: relative; width: 80vw; max-width: 750px; padding: 50px 0 109px; margin: 0 auto; } section#entry-completed div.contact::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 71px; height: 94px; background: url("../images/recruit/entry_illust.png") no-repeat right bottom; background-size: contain; margin: 0 auto; } section#entry-completed div.contact p { display: inline-block; width: calc(100% - 10vw); border: #C3AB8F solid 1px; border-radius: 15px; font-size: calc( 18 / var(--root-font-size) * 1rem ); padding: 15px 5vw; } section#entry-completed div.contact p strong { font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 500; background: radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #FFDF26 4px, transparent 4px), radial-gradient(circle at 4px calc(100% - 4px), #FFDF26 4px, transparent 4px), linear-gradient(to bottom, #FFF calc(100% - 8px), transparent calc(100% - 8px)), linear-gradient(to right, transparent 4px, #FFDF26 4px, #FFDF26 calc(100% - 4px), transparent calc(100% - 4px)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } } /*----- footer -----*/ footer { position: relative; width: 100%; background: #C3AB8F; color: #FFF; padding: 25px 0 0; } footer::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_brown.png") no-repeat center bottom; background-size: cover; } @media screen and (min-width: 1921px) { footer::before { background: url("../images/recruit/bg_round_brown.png") no-repeat center top; background-size: cover; } } footer .copyright { width: 100%; font-family: "Zen Maru Gothic", serif; font-size: calc( 12 / var(--root-font-size) * 1rem ); line-height: 100px; text-align: center; } @media screen and (max-width: 960px) { footer { position: relative; width: 100%; background: #C3AB8F; color: #FFF; padding: 25px 0 0; } footer::before { content: ""; position: absolute; top: -5vw; left: 0; width: 100%; height: 5vw; background: url("../images/recruit/bg_round_brown.png") no-repeat center bottom; background-size: cover; } footer .copyright { width: 100%; font-family: "Zen Maru Gothic", serif; font-size: calc( 12 / var(--root-font-size) * 1rem ); line-height: 75px; text-align: center; } } #page-top { cursor: pointer; position: fixed; right: 2.5%; bottom: 5%; z-index: 99; width: 250px; height: 342px; } #page-top { -webkit-animation-name:pagetop; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; /*-webkit-animation-direction:alternate;*/ -webkit-animation-timing-function:ease-in-out; -moz-animation-name:pagetop; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; /*-moz-animation-direction:alternate;*/ -moz-animation-timing-function:ease-in-out; } @-webkit-keyframes pagetop { 0% {-webkit-transform:translate(0, 0);} 50% {-webkit-transform:translate(0, -15px);} 100% {-webkit-transform:translate(0, 0);} } @-moz-keyframes pagetop { 0% {-moz-transform:translate(0, 0);} 50% {-moz-transform:translate(0, -15px);} 100% {-moz-transform:translate(0, 0);} } #page-top img { -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear; -o-transition: -o-transform 0.3s linear; -ms-transition: -ms-transform 0.3s linear; transition: transform 0.3s linear; } #page-top a:hover img { filter:alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } .grecaptcha-badge {visibility: hidden;} @media screen and (max-width: 960px) { /*----- sp nav -----*/ /*アクティブになったエリア*/ #g-nav { /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/ position: fixed; opacity: 0;/*はじめは透過0*/ z-index: -1; /*ナビのスタート位置と形状*/ top: 0; left: 0; width: 100%; height: 100vh;/*ナビの高さ*/ background: #FFF8EA; transition: 0.25s 0s; } /*アクティブクラスがついたら透過なしにして最前面へ*/ #g-nav.panelactive { opacity: 1; z-index: 9999; } /*ナビゲーションの縦スクロール*/ #g-nav-list { display: none;/*はじめは表示なし*/ /*ナビの数が増えた場合縦スクロール*/ position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; } #g-nav.panelactive #g-nav-list { display: block;/*クラスが付与されたら出現*/ } /*ナビゲーション*/ #g-nav div.inner { width: 100%; padding: 0 0 50px; opacity: 0;/*はじめは透過0*/ } /*背景が出現後にナビゲーションを表示*/ #g-nav.panelactive div.inner { opacity: 1; } #g-nav div.inner .logo { display: flex; align-items: center; flex-wrap: wrap; width: 90%; max-width: 1125px; height: 50px; padding: 15px 0; margin: 0 auto 25px; } #g-nav div.inner .logo img { width: 210px; height: 30px; } #g-nav div.inner .logo span { display: block; height: 20px; background: #FFDF26; border-radius: 10px; font-family: "Zen Maru Gothic", serif; font-size: calc( 16 / var(--root-font-size) * 1rem ); font-weight: 500; line-height: 20px; padding: 0 25px; margin: 0 0 0 45px; } #g-nav div.inner div.btnArea { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 90%; max-width: 350px; margin: 0 auto 10px; } #g-nav div.inner div.btnArea div.job-descriptions, #g-nav div.inner div.btnArea div.entry { position: relative; width: 115px; height: 50px; border-radius: 15px; margin: 0 0 0 5px; transition: 0.5s 0s; } #g-nav div.inner div.btnArea div.job-descriptions { background: #FFDF26; } #g-nav div.inner div.btnArea div.entry { background: #654D37; } #g-nav div.inner div.btnArea div.job-descriptions:hover, #g-nav div.inner div.btnArea div.entry:hover { background: #FFF; } #g-nav div.inner div.btnArea div.job-descriptions a, #g-nav div.inner div.btnArea div.entry a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #g-nav div.inner div.btnArea div.job-descriptions p, #g-nav div.inner div.btnArea div.entry p { font-family: "Zen Maru Gothic", serif; line-height: 50px; text-align: center; transition: 0.5s 0s; } #g-nav div.inner div.btnArea div.entry p { color: #FFF; } #g-nav div.inner div.btnArea div.entry:hover p { color: #654D37; } #g-nav ul.gnav { position: relative; width: 90%; max-width: 350px; background: #FFF; border-radius: 20px; padding: 20px 0 50px; margin: 0 auto; } #g-nav ul.gnav::before { content: ""; position: absolute; top: -77px; left: 0; z-index: 1000; width: 90px; height: 82px; background: url("../images/recruit/nav_illust1.png") no-repeat center center; background-size: cover; } /*リストのレイアウト設定*/ #g-nav li.gnav { width: 100%; max-width: 300px; border-bottom: #C3AB8F solid 1px; line-height: 50px; margin: 0 auto; } #g-nav li.gnav:last-child { border-bottom: none; } #g-nav li.gnav p, #g-nav li.gnav a { font-family: "Zen Maru Gothic", serif; font-weight: 500; } #g-nav li.gnav a, #g-nav li.gnav p.gnav { position: relative; padding: 0 0 0 50px; } #g-nav li.gnav a::before, #g-nav li.gnav p.gnav::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; width: 30px; height: 30px; background: url("../images/icon_flower.png") no-repeat center center; background-size: cover; margin: auto 0; } #g-nav li.gnav span a { position: inherit; padding: 0; } #g-nav li.gnav span a::before { content: none; } #g-nav li.btn { position: relative; width: 225px; height: 60px; background: #2DAEDA; border-radius: 15px; margin: 50px auto 0; } #g-nav li.btn::before { content: ""; position: absolute; top: -40px; right: -30px; z-index: 1000; width: 60px; height: 50px; background: url("../images/recruit/nav_illust2.png") no-repeat center center; background-size: cover; } #g-nav li.btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #g-nav li.btn p { color: #FFF; font-family: "Zen Maru Gothic", serif; font-weight: 500; line-height: 60px; text-align: center; } /*ボタンの設定*/ .openbtn { position: fixed; z-index: 10000;/*ボタンを最前面に*/ top: 0; right: 0; display: inline-block; width: 50px; height: 50px; padding: 15px 15px 25px; cursor: pointer; appearance: none; } .openbtn.active { background: none; } .openbtn span { display: inline-block; box-sizing: border-box; position: absolute; left: 0; right: 0; width: 30px; height: 2px; background: #FFF; border-radius: 1px; margin: 0 auto; transition: all 0.5s; } .openbtn.active span { background: #654D37; } .openbtn span:nth-of-type(1) { top: 25px; animation: menu-bar1 0.5s forwards; } .openbtn span:nth-of-type(2) { bottom: 54px; } .openbtn span:nth-of-type(3) { bottom: 45px; animation: menu-bar2 0.5s forwards; } .openbtn.active span:nth-of-type(1) { animation: menu-active-bar1 0.5s forwards; } .openbtn.active span:nth-of-type(2) { display: none; } .openbtn.active span:nth-of-type(3) { animation: menu-active-bar2 0.5s forwards; } .openbtn p { position: absolute; bottom: 30px; left: 0; right: 0; color: #FFF; font-size: calc( 14 / var(--root-font-size) * 1rem ); line-height: 1; text-align: center; margin: 0 auto; transition: all 0.5s; } .openbtn.active p { color: #654D37; } @keyframes scroll-yoko { 100% { background-position: -100% 0; } } @keyframes yurayura1 { 0% { background-position: 50% 0; } 25% { background-position: 60% 0; } 50% { background-position: 50% 0; } 75% { background-position: 40% 0; } 100% { background-position: 50% 0; } } @keyframes yurayura2 { 0% { background-position: 50% 0; } 25% { background-position: 40% 0; } 50% { background-position: 50% 0; } 75% { background-position: 60% 0; } 100% { background-position: 50%; } } @keyframes yurayura3 { 0% { background-position: 50% 0; } 25% { background-position: 48.75% 0; } 50% { background-position: 50% 0; } 75% { background-position: 51.25% 0; } 100% { background-position: 50%; } } /* fadeUp */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /* スクロールをしたら出現する要素にはじめに透過0を指定　*/ .fadeUpTrigger { opacity: 0; } @keyframes menu-bar1 { 0% { transform: translateY(9px) rotate(45deg); } 50% { transform: translateY(9px) rotate(0); } 100% { transform: translateY(0) rotate(0); } } @keyframes menu-bar2 { 0% { transform: translateY(-9px) rotate(-45deg); } 50% { transform: translateY(-9px) rotate(0); } 100% { transform: translateY(0) rotate(0); } } @keyframes menu-active-bar1 { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(9px) rotate(0); } 100% { transform: translateY(9px) rotate(45deg); } } @keyframes menu-active-bar2 { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(0); } 100% { transform: translateY(-9px) rotate(-45deg); } } @keyframes arrow { 0% {width: 0;} 100% {width: 100%;} } @keyframes arrow_short { 0% {width: 0;} 100% {width: 30px;} } @keyframes arrow_short_sp { 0% {width: 0;} 100% {width: 20px;} } @keyframes scroll_bar { 0% {top: 30px;} 100% {top: 130px;} } @keyframes scroll_barhide { 0% {opacity: 0;} 10% {opacity: 1;} 50% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }