@charset "UTF-8"; /* ------------------------------- オープニング -------------------------------- */ #opening { position: fixed; width: 100%; height: 100%; display: flex; background-color: #b0e7fb; opacity: 0; z-index: 99999; /* padding: 10%; */ font-size: 20px; } #opening.active { opacity: 1; } #opening.complete { opacity: 0; visibility: hidden; transition: opacity 1s ease-out, visibility 1s ease-out; } #opening.load_already { opacity: 0; visibility: visible; } #opening .split-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #opening .image { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; max-width: 160px; } #opening .image .character { opacity: 0; transform: translateY(50%); } #opening.active .image .character { opacity: 1; transform: translateY(0px); transition: all 0.7s ease 0.2s; } #opening.active.complete .image .character { opacity: 0; transform: translateY(-50%); transition: all 0.7s ease; } .animation { /*background-color: #111;*/ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; } /* ripples */ .ripples { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; animation: ripples 3.7s infinite; } .ripples:before, .ripples:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; animation: ripples 3.7s infinite; } .ripples:before, .ripples:after { content: ""; } .ripples:before { animation-delay: 0.25s; } .ripples:after { animation-delay: 0.5s; } @keyframes ripples { 0% { width: 0; height: 0; border: 4px solid rgba(108, 192, 229, 0.8); } 100% { width: 1000px; height: 1000px; border: 4px solid rgba(120, 189, 120, 0); } } /* ripples2 */ .ripples2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; animation: ripples2 2s infinite; } @keyframes ripples2 { 0% { width: 0; height: 0; border: 8px solid #03aceb; } 100% { width: 1000px; height: 1000px; border: 8px solid rgba(108, 192, 229, 0); } } #opening .animation > span { opacity: 0; animation: key_opening_txt .3s ease alternate forwards; } @keyframes key_opening_txt { from { opacity: 0; } 100% { opacity: 1; } } /*# sourceMappingURL=opening.css.map */ .opening_tate { writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; font-size: 90%; margin-bottom: 0; display: inline-block !important; position: absolute; z-index: 1; left: 60px; top: 0; color: #fff; font-family: 'Zen Old Mincho', serif; font-weight: 500; line-height: 1.6em; } @media print, screen and (min-width: 768px) { #opening { font-size: 30px; } } @media print, screen and (min-width: 1200px) { #opening { font-size: 40px; } } @keyframes opening_anime { 0% { opacity: 1; } /* 50%{ opacity:1; } 70%{ opacity:1; } 100%{ opacity:0; } */ } .opening_anime { animation-name: opening_anime; animation-duration: 3s; /*8秒かけてアニメーション*/ animation-fill-mode: forwards; /*終了時の状態を維持する*/ animation-delay: 0.5s; /*アニメーションの開始を1秒遅らせる*/ } /*一瞬オープニングが表示される件を修正*/ #home-body { opacity: 0; } #home-body.start { opacity: 1; } /*※下層ページには tbody > tr { border-bottom: 1px solid #ccc; } .table-design-1 > tbody > tr > th, .table-design-1 > tbody > tr > td { padding: 1.5em 0; } .table-design-1 > tbody > tr > th { padding-left: 1em; } .table-design-1 > tbody > tr > td { padding-left: 2em; } .table-design-2 { width: 100%; border-collapse: separate; border-spacing: 0; border-top: 1px solid #ccc; border-left: 1px solid #ccc; } .table-design-2 > tbody > tr > th, .table-design-2 > tbody > tr > td { padding: 1em; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .table-design-2 > tbody > tr > th { background: #eee; } .table-design-2 > tbody > tr > td { background-color: #fff; } @media only screen and (max-width: 767px) { .table-inline colgroup { display: none !important; } .table-inline > tbody > tr { width: 100%; display: block; } .table-inline > tbody > tr > th, .table-inline > tbody > tr > td { width: 100% !important; display: block; } .table-design-1.table-inline tbody > tr { padding: 1em 0.5em; } .table-design-1.table-inline tbody > tr > th, .table-design-1.table-inline tbody > tr > td { padding: 0; } .table-design-1.table-inline tbody > tr > th + td, .table-design-1.table-inline tbody > tr > td + td { margin-top: .5em; } } /* --- scroll-hint.js --- */ @keyframes scroll-hint-appear { 0% { transform: translateX(40px); opacity: 0; } 10% { opacity: 1; } 50%, 100% { transform: translateX(-40px); opacity: 0; } } .scroll-hint.is-right-scrollable { background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)); } .scroll-hint.is-right-scrollable.is-left-scrollable { background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)); } .scroll-hint.is-left-scrollable { background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)); } .scroll-hint-icon { position: absolute; top: calc(50% - 25px); left: calc(50% - 60px); box-sizing: border-box; width: 120px; height: 80px; border-radius: 5px; transition: opacity .3s; opacity: 0; background: rgba(0, 0, 0, 0.7); text-align: center; padding: 20px 10px 10px 10px; } .scroll-hint-icon-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 100%; pointer-events: none; } .scroll-hint-text { font-size: 10px; color: #FFF; margin-top: 5px; } .scroll-hint-icon-wrap.is-active .scroll-hint-icon { opacity: .8; } .scroll-hint-icon:before { display: inline-block; width: 40px; height: 40px; color: #FFF; vertical-align: middle; text-align: center; content: ""; background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=); } .scroll-hint-icon:after { content: ""; width: 34px; height: 14px; display: block; position: absolute; top: 10px; left: 50%; margin-left: -20px; background-repeat: no-repeat; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==); opacity: 0; transition-delay: 2.4s; } .scroll-hint-icon-wrap.is-active .scroll-hint-icon:after { opacity: 1; } .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before { animation: scroll-hint-appear 1.2s linear; animation-iteration-count: 2; } .scroll-hint-icon-white { background-color: #FFF; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4); } .scroll-hint-icon-white:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=); } .scroll-hint-icon-white:after { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==); } .scroll-hint-icon-white .scroll-hint-text { color: #000; } /* ------------------------------- list -------------------------------- */ .list-num-1 { line-height: 1.5; padding-left: 0; list-style: none; counter-reset: number; } .list-num-1 > li { padding-left: 2em; padding-bottom: 0.5em; margin-bottom: 0.5em; border-bottom: dashed 1px #ccc; position: relative; } .list-num-1 > li:before { position: absolute; top: 0; left: 0; counter-increment: number; content: counter(number); } .list-num-1 > li:last-child { margin-bottom: 0; } .list-num-2 { line-height: 1.5; padding-left: 0; list-style: none; counter-reset: number; } .list-num-2 > li { padding-left: 2em; padding-bottom: 0.5em; margin-bottom: 0.5em; border-bottom: dotted 1px #ccc; position: relative; } .list-num-2 > li:before { position: absolute; top: 0; left: 0; counter-increment: number; content: counter(number) " )"; } .list-num-2 > li:last-child { margin-bottom: 0; } .list-icon-1 { line-height: 1.5; list-style: none; padding-left: 0; } .list-icon-1 > li { padding-left: 1.5em; margin-bottom: 0.5em; position: relative; } .list-icon-1 > li > i { font-size: 0.88888em; position: absolute; left: 0; top: 0.15em; } .list-icon-1 > li:last-child { margin-bottom: 0; } /* ------------------------------- dl -------------------------------- */ .dl_table_1 { display: grid; grid-template-columns: auto 1fr; gap: 0.2em 0; } /* ------------------------------- hr -------------------------------- */ /* ------------------------------- figure -------------------------------- */ .link_figure, a:has(figure) { color: inherit; text-decoration: none; } .link_figure:hover, a:has(figure):hover { text-decoration: none; } figure { margin-bottom: 0; height: 100%; position: relative; z-index: 0; } .figure_link_1 { overflow: hidden; position: relative; z-index: 0; } .figure_link_1 > .photo { border-radius: 10px; background-color: #000; overflow: hidden; } .figure_link_1 figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; } .figure_link_1 figcaption .ttl { color: #fff; font-size: 32px; line-height: normal; text-align: center; margin: auto; } .figure_link_1 figcaption .ttl > .fs-en { font-size: 0.5em; display: block; } .figure_link_1 figcaption .ttl > .txt { display: block; } .figure_link_1 figcaption .arrow { font-size: 15px; text-align: center; position: absolute; right: 20px; bottom: 20px; width: 3.13334em; height: 3.13334em; border-radius: 50%; display: grid; place-items: center; background-color: #03adeb; display: none; } .figure_link_1 figcaption .arrow > i { color: #fff; line-height: 1; letter-spacing: normal; } a > .figure_link_1 > .photo img { opacity: 1; transition: opacity 0.3s ease; } a > .figure_link_1 figcaption .arrow { display: grid; transition: transform 0.3s ease; } a > .figure_link_1:hover > .photo img { opacity: 0.65; } a > .figure_link_1:hover figcaption .arrow { transform: scale(1.2); } /* ------------------------------- 画像関連 -------------------------------- */ /* フォントの縦幅に合わせる(svg) */ .img-font { width: auto; height: 1em; } /* 画像回り込み */ img.aligncenter, img.alignright, img.alignleft { display: block; margin: 0 auto; } @media print, screen and (min-width: 768px) { img.alignright { max-width: 38%; margin-left: 30px; display: inline; } img.alignleft { max-width: 38%; margin-right: 30px; display: inline; } .alignright { float: right; } .alignleft { float: left; } } @media print, screen and (min-width: 1200px) { /* 画像回り込み */ img.alignright { max-width: 100%; } img.alignleft { max-width: 100%; } } /* 画像を枠に収める */ .photo-ofi { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; overflow: hidden; position: relative; } .photo-ofi img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .photo-ofi a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } .photo-ofi.cover img { max-width: inherit; max-height: inherit; width: 100%; height: 100%; object-fit: cover; } /* objectの位置 */ .object-lt { object-position: left top; } .object-lb { object-position: left bottom; } .object-rt { object-position: right top; } .object-rb { object-position: right bottom; } .object-cc { object-position: center center; } @media print, screen and (min-width: 576px) { .object-sm-lt { object-position: left top; } .object-sm-lb { object-position: left bottom; } .object-sm-rt { object-position: right top; } .object-sm-rb { object-position: right bottom; } .object-sm-cc { object-position: center center; } } @media print, screen and (min-width: 768px) { .object-md-lt { object-position: left top; } .object-md-lb { object-position: left bottom; } .object-md-rt { object-position: right top; } .object-md-rb { object-position: right bottom; } .object-md-cc { object-position: center center; } } @media print, screen and (min-width: 992px) { .object-lg-lt { object-position: left top; } .object-lg-lb { object-position: left bottom; } .object-lg-rt { object-position: right top; } .object-lg-rb { object-position: right bottom; } .object-lg-cc { object-position: center center; } } @media print, screen and (min-width: 1200px) { .object-xl-lt { object-position: left top; } .object-xl-lb { object-position: left bottom; } .object-xl-rt { object-position: right top; } .object-xl-rb { object-position: right bottom; } .object-xl-cc { object-position: center center; } } @media print, screen and (min-width: 1500px) { .object-xxl-lt { object-position: left top; } .object-xxl-lb { object-position: left bottom; } .object-xxl-rt { object-position: right top; } .object-xxl-rb { object-position: right bottom; } .object-xxl-cc { object-position: center center; } } /**/ .photo img, .bg img { max-width: inherit; width: 100%; height: 100%; object-fit: cover; } @media print, screen and (min-width: 992px) { .photo-full-lg-l { margin-left: calc(-15px - 83 * (100vw - 320px) / 1180); } .photo-full-lg-l.m--side { margin-right: min(calc(30px + 20 * (100vw - 992px) / 508), 50px); } } @media print, screen and (min-width: 1500px) { .photo-full-lg-l { margin-left: calc((1304px - 100vw) / 2); } } @media print, screen and (min-width: 992px) { .photo-full-lg-r { margin-right: calc(-15px - 83 * (100vw - 320px) / 1180); } .photo-full-lg-r.m--side { margin-left: min(calc(30px + 20 * (100vw - 992px) / 508), 50px); } } @media print, screen and (min-width: 1500px) { .photo-full-lg-r { margin-right: calc((1304px - 100vw) / 2.1); } } /* ------------------------------- 画像拡大 -------------------------------- */ a[data-lightbox]:after { content: "\f00e"; position: absolute; left: 50%; top: 50%; z-index: 20; color: #222; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1rem; line-height: 2; text-align: center; width: 2em; border-radius: 50%; margin-top: -1em; margin-left: -1em; background-color: rgba(255, 255, 255, 0.8); opacity: 0; transition: opacity .3s ease; } a[data-lightbox]:hover:after { opacity: 1; } /* ------------------------------- btn -------------------------------- */ .btn-icon-l, .btn-icon-r { position: relative; } .btn-icon-l i, .btn-icon-r i { font-size: 0.83334em; line-height: 1; letter-spacing: normal; position: absolute; top: 50%; margin-top: -.5em; } .btn-icon-l { padding-left: 3em; } .btn-icon-l i { left: 1.7em; } .btn-icon-r { padding-right: 3em; } .btn-icon-r i { right: 1.7em; } .btn-w207 { min-width: 207px; } /* file icon */ .link-icon { text-align: left; position: relative; } .link-icon:before { content: ""; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1em; line-height: 1; position: absolute; top: 50%; margin-top: -.5em; } .link-icon[target="_blank"] { padding-left: 1.5em; padding-right: 2.5em; } .link-icon[target="_blank"]:before { content: "\f35d"; font-size: 0.65em; right: 1.5em; } .link-icon[href$=".pdf"], .link-icon[href$=".xls"], .link-icon[href$=".xlsx"], .link-icon[href$=".doc"], .link-icon[href$=".docx"] { padding-left: 3em; padding-right: 2em; } .link-icon[href$=".pdf"]:before, .link-icon[href$=".xls"]:before, .link-icon[href$=".xlsx"]:before, .link-icon[href$=".doc"]:before, .link-icon[href$=".docx"]:before { font-size: 1em; left: 1.25em; right: auto; } .link-icon[href$=".pdf"]:before { content: "\f1c1"; } .link-icon[href$=".xls"]:before, .link-icon[href$=".xlsx"]:before { content: "\f1c3"; } .link-icon[href$=".doc"]:before, .link-icon[href$=".docx"]:before { content: "\f1c2"; } /* ------------------------------- box -------------------------------- */ .box-flex-column { display: flex; flex-direction: column; height: 100%; } .box-flex-column__inner { width: 100%; margin-top: auto; margin-bottom: auto; } /* ------------------------------- googlemap -------------------------------- */ .googlemap { position: relative; padding-top: 66.666%; /*これが縦横比*/ height: 0; background-color: #f8f8f8; overflow: hidden; z-index: 0; } .googlemap:before { color: #ccc; font-size: 20px; content: "google map"; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } .googlemap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } @media print, screen and (min-width: 768px) { .googlemap { padding-top: 560px; } } /* ------------------------------- youtube -------------------------------- */ .youtube { position: relative; padding-bottom: 56.3%; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; vertical-align: middle; } video { width: 100%; height: auto; aspect-ratio: 16 / 9; background-color: #fff; } /* ------------------------------- 電話番号 -------------------------------- */ .telphone { line-height: 1.2; } .telphone small { font-size: 0.8333em; } .telphone i { font-size: 0.8333em; } .telphone a { text-decoration: underline; } .telphone a:hover { text-decoration: none; } a.tel_link { color: inherit; } /* ------------------------------- 背景固定 iPhon, iPadは不具合がある為、jQueryで解除する -------------------------------- */ .fixed-bg { background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; } /* ------------------------------- アンカーリンク -------------------------------- */ .anker_navi > ul { font-size: 0.88888em; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 10px; } .anker_navi > ul > li > a { color: #03adeb; text-decoration: none; display: block; padding: 0.25em 1.5em; border-radius: 10em; border: solid 1px #03adeb; transition: background 0.3s ease; } .anker_navi > ul > li > a:hover { color: #fff; background-color: #03adeb; } /* ------------------------------- common -------------------------------- */ /* --▼color-- */ .bg-cr-1 { background-color: #dbf3fc; } .bg-cr-2 { background-color: #f7f7f7; } /* --▼text-- */ /* --▼font -- */ .fs-xxs { font-size: 0.75em !important; } .fs-sm { font-size: 0.875em !important; } .fs-md { font-size: 1.125em !important; } .fs-lg { font-size: 1.250em !important; } .f-feature { font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; } .fw4 { font-weight: 400 !important; } .fw5 { font-weight: 500 !important; } .fw7 { font-weight: 700 !important; } .fwn { font-weight: 400 !important; } .fwb { font-weight: 700 !important; } /* --▼margin-- */ /* space */ .mt-50 { margin-top: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .mb-50 { margin-bottom: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .mtb-50 { margin-top: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); margin-bottom: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .mt-60 { margin-top: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .mb-60 { margin-bottom: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .mtb-60 { margin-top: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); margin-bottom: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .mt-70 { margin-top: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .mb-70 { margin-bottom: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .mtb-70 { margin-top: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); margin-bottom: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .mt-80 { margin-top: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .mb-80 { margin-bottom: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .mtb-80 { margin-top: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); margin-bottom: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .mt-90 { margin-top: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .mb-90 { margin-bottom: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .mtb-90 { margin-top: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); margin-bottom: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .mt-100 { margin-top: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .mb-100 { margin-bottom: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .mtb-100 { margin-top: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); margin-bottom: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .mt-130 { margin-top: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } .mb-130 { margin-bottom: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } .mtb-130 { margin-top: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); margin-bottom: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } .pt-50 { padding-top: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .pb-50 { padding-bottom: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .ptb-50 { padding-top: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); padding-bottom: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .pt-60 { padding-top: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .pb-60 { padding-bottom: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .ptb-60 { padding-top: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); padding-bottom: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .pt-70 { padding-top: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .pb-70 { padding-bottom: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .ptb-70 { padding-top: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); padding-bottom: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .pt-80 { padding-top: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .pb-80 { padding-bottom: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .ptb-80 { padding-top: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); padding-bottom: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .pt-90 { padding-top: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .pb-90 { padding-bottom: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .ptb-90 { padding-top: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); padding-bottom: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .pt-100 { padding-top: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .pb-100 { padding-bottom: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .ptb-100 { padding-top: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); padding-bottom: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .pt-130 { padding-top: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } .pb-130 { padding-bottom: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } .ptb-130 { padding-top: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); padding-bottom: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } @media print, screen and (min-width: 992px) { .mt-lg-50 { margin-top: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .mb-lg-50 { margin-bottom: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .mtb-lg-50 { margin-top: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); margin-bottom: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .mt-lg-60 { margin-top: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .mb-lg-60 { margin-bottom: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .mtb-lg-60 { margin-top: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); margin-bottom: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .mt-lg-70 { margin-top: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .mb-lg-70 { margin-bottom: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .mtb-lg-70 { margin-top: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); margin-bottom: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .mt-lg-80 { margin-top: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .mb-lg-80 { margin-bottom: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .mtb-lg-80 { margin-top: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); margin-bottom: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .mt-lg-90 { margin-top: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .mb-lg-90 { margin-bottom: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .mtb-lg-90 { margin-top: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); margin-bottom: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .mt-lg-100 { margin-top: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .mb-lg-100 { margin-bottom: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .mtb-lg-100 { margin-top: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); margin-bottom: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .mt-lg-130 { margin-top: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } .mb-lg-130 { margin-bottom: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } .mtb-lg-130 { margin-top: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); margin-bottom: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } } @media print, screen and (min-width: 992px) { .pt-lg-50 { padding-top: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .pb-lg-50 { padding-bottom: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .ptb-lg-50 { padding-top: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); padding-bottom: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); } .pt-lg-60 { padding-top: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .pb-lg-60 { padding-bottom: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .ptb-lg-60 { padding-top: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); padding-bottom: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .pt-lg-70 { padding-top: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .pb-lg-70 { padding-bottom: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .ptb-lg-70 { padding-top: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); padding-bottom: min(calc(30px + 40 * (100vw - 320px) / 1180), 70px); } .pt-lg-80 { padding-top: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .pb-lg-80 { padding-bottom: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .ptb-lg-80 { padding-top: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); padding-bottom: min(calc(30px + 50 * (100vw - 320px) / 1180), 80px); } .pt-lg-90 { padding-top: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .pb-lg-90 { padding-bottom: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .ptb-lg-90 { padding-top: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); padding-bottom: min(calc(30px + 60 * (100vw - 320px) / 1180), 90px); } .pt-lg-100 { padding-top: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .pb-lg-100 { padding-bottom: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .ptb-lg-100 { padding-top: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); padding-bottom: min(calc(32px + 68 * (100vw - 320px) / 1180), 100px); } .pt-lg-130 { padding-top: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } .pb-lg-130 { padding-bottom: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } .ptb-lg-130 { padding-top: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); padding-bottom: min(calc(42px + 88 * (100vw - 320px) / 1180), 130px); } } /**/ .ml-full { margin-left: -15px; } .mr-full { margin-right: -15px; } @media print, screen and (min-width: 576px) { .ml-full, .ml-sm-full { margin-left: calc((510px - 100vw) / 2); } .mr-full, .mr-sm-full { margin-right: calc((510px - 100vw) / 2); } } @media print, screen and (min-width: 768px) { .ml-full, .ml-sm-full, .ml-md-full { margin-left: calc((690px - 100vw) / 2); } .mr-full, .mr-sm-full, .mr-md-full { margin-right: calc((690px - 100vw) / 2); } } @media print, screen and (min-width: 992px) { .ml-full, .ml-sm-full, .ml-md-full, .ml-lg-full { margin-left: calc((930px - 100vw) / 2); } .mr-full, .mr-sm-full, .mr-md-full, .mr-lg-full { margin-right: calc((930px - 100vw) / 2); } } @media print, screen and (min-width: 1200px) { .ml-full, .ml-sm-full, .ml-md-full, .ml-lg-full, .ml-xl-full { margin-left: calc((1110px - 100vw) / 2); } .mr-full, .mr-sm-full, .mr-md-full, .mr-lg-full, .mr-xl-full { margin-right: calc((1110px - 100vw) / 2); } } /**/ @media print, screen and (min-width: 992px) { .ml-lg-half { margin-left: calc((930px - 100vw) / 4); } .mr-lg-half { margin-right: calc((930px - 100vw) / 4); } } @media print, screen and (min-width: 1200px) { .ml-lg-half, .ml-xl-half { margin-left: calc((1110px - 100vw) / 4); } .mr-lg-half, .mr-xl-half { margin-right: calc((1110px - 100vw) / 4); } } /* 横幅いっぱいに広げるスタイル */ .ml-full { margin-left: -15px; } .mr-full { margin-right: -15px; } @media print, screen and (min-width: 576px) { .ml-sm-full { margin-left: calc((510px - 100vw) / 2); } .mr-sm-full { margin-right: calc((510px - 100vw) / 2); } } @media print, screen and (min-width: 768px) { .ml-sm-full, .ml-md-full { margin-left: calc((690px - 100vw) / 2); } .mr-sm-full, .mr-md-full { margin-right: calc((690px - 100vw) / 2); } } @media print, screen and (min-width: 992px) { .ml-sm-full, .ml-md-full, .ml-lg-full { margin-left: calc((930px - 100vw) / 2); } .mr-sm-full, .mr-md-full, .mr-lg-full { margin-right: calc((930px - 100vw) / 2); } } @media print, screen and (min-width: 1200px) { .ml-sm-full, .ml-md-full, .ml-lg-full, .ml-xl-full { margin-left: calc((1110px - 100vw) / 2); } .mr-sm-full, .mr-md-full, .mr-lg-full, .mr-xl-full { margin-right: calc((1110px - 100vw) / 2); } } @media print, screen and (min-width: 1500px) { .ml-sm-full, .ml-md-full, .ml-lg-full, .ml-xl-full, .ml-xxl-full { margin-left: calc((1304px - 100vw) / 2); } .mr-sm-full, .mr-md-full, .mr-lg-full, .mr-xl-full, .mr-xxl-full { margin-right: calc((1304px - 100vw) / 2); } } /* ------------------------------- ページ内　共通デザイン -------------------------------- */ .htmlarea { word-wrap: break-word; overflow-wrap: break-word; overflow: hidden; } .clearfix:after { content: ""; display: table; clear: both; } .ov_hi { overflow: hidden; } .clear { clear: both; } /* --- --- */ .fs-16-24 { font-size: min(calc(16px + 8 * (100vw - 320px) / 880), 24px); } /* ------------------------------- main title -------------------------------- */ .title-1 { border-left: solid 0.2em #03adeb; padding-left: 0.5em; } .title-2 { padding-bottom: 0.5em; padding-left: 0.15em; border-bottom: solid 1px #ccc; } .title-3 { padding-left: 1.1em; position: relative; } .title-3:before { content: "■"; position: absolute; left: 0; transform: scale(0.75); } .title-hh-1 { font-size: 1rem; } .title-hh-1 > .fs-en { color: #0e56b7; font-size: min(calc(35px + 40 * (100vw - 320px) / 880), 75px); line-height: normal; background-image: -webkit-linear-gradient(0deg, #03adeb 0%, #0275c6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-flex; } .title-hh-1 > .txt { font-weight: 700; font-size: 1rem; display: block; align-items: center; padding-left: 2em; margin-top: .5em; position: relative; } .title-hh-1 > .txt:before { content: ""; position: absolute; left: 0; top: 50%; width: 1.27777em; height: 1px; background-color: #000; } .title-hh-1.text--white { color: #fff; } .title-hh-1.text--white > .fs-en { color: #fff; -webkit-background-clip: border-box; -webkit-text-fill-color: currentColor; background: none; } .title-hh-1.text--white > .txt:before { background-color: currentColor; } .title-hh-1.text--center { text-align: center; } .title-hh-1.text--center > .txt { padding-left: 0; } .title-hh-1.text--center > .txt:before { display: none; } /* タイトル用フォントサイズ */ .ttl-fs-1 { font-size: 1.3888888889rem; } @media print, screen and (min-width: 768px) { .ttl-fs-1 { font-size: 1.9444444444rem; } } @media print, screen and (min-width: 992px) { .ttl-fs-1 { font-size: 2.2222222222rem; } } @media print, screen and (min-width: 1200px) { .ttl-fs-1 { font-size: 2.7777777778rem; } } .ttl-fs-2 { font-size: min(calc(18px + 6 * (100vw - 320px) / 1280), 24px); } /* ------------------------------- bootstrap -------------------------------- */ .container-fluid-xl { max-width: 1500px; width: 100%; padding-left: calc(15px + 83 * (100vw - 320px) / 1180); padding-right: calc(15px + 83 * (100vw - 320px) / 1180); margin-left: auto; margin-right: auto; } @media print, screen and (min-width: 1500px) { .container-fluid-xl { padding-left: 98px; padding-right: 98px; } } /* --- row --- */ .row-gallery { margin-left: calc(-5px - 10 * (100vw - 320px) / 880); margin-right: calc(-5px - 10 * (100vw - 320px) / 880); } .row-gallery > [class^="col"], .row-gallery > [class*=" col"] { padding-left: calc(5px + 10 * (100vw - 320px) / 880); padding-right: calc(5px + 10 * (100vw - 320px) / 880); margin-bottom: calc(10px + 20 * (100vw - 320px) / 880); } @media print, screen and (min-width: 1200px) { .row-gallery { margin-left: -15px; margin-right: -15px; } .row-gallery > [class^="col"], .row-gallery > [class*=" col"] { padding-left: 15px; padding-right: 15px; margin-bottom: 30px; } } .gap-y-10 { gap: 10px 0; } .gap-y-30 { gap: 30px 0; } /* --- form --- */ /* ------------------------------- mainvisual -------------------------------- */ #mainvisual { position: relative; overflow: hidden; /**/ } #mainvisual .slide { display: grid; place-content: center; height: 60vh; } @media (orientation: landscape) and (max-width: 767px) { #mainvisual .slide { height: 100vh; height: 100dvh; } } @media print, screen and (min-width: 768px) { #mainvisual .slide { height: 100vh; height: 100dvh; } } #mainvisual .slide-media { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; } #mainvisual .slide-media img { max-width: inherit; max-height: inherit; width: 100%; height: 100%; object-fit: cover; } #mainvisual .scroll { display: none; } @media print, screen and (min-width: 768px) { #mainvisual .scroll { display: block; } } #mainvisual .scroll { position: absolute; bottom: 106px; right: min(3.91vw, calc(30px + 16px + 10px)); writing-mode: vertical-rl; white-space: nowrap; /* font-family: "Oswald", sans-serif; font-weight: 500; */ font-size: 12px; color: #fff; letter-spacing: 0.1em; z-index: 4; font-family: "Inter", sans-serif; font-weight: 600; } #mainvisual .scroll::before { content: ""; position: absolute; bottom: -106px; left: calc(16px + 10px); width: 1px; height: 160px; /*background: rgba(29, 32, 135, 0.5);*/ background: none; } #mainvisual .scroll::after { content: ""; position: absolute; bottom: -106px; left: calc(16px + 10px); width: 1px; height: 160px; background: #fff; animation: lineAnime 3s cubic-bezier(1, 0, 0, 1) infinite; } /**/ .mainvisual_content { position: absolute; left: min(calc(10px + 80 * (100vw - 320px) / 1600), 90px); bottom: min(calc(20px + 80 * (100vw - 320px) / 1600), 100px); z-index: 10; } .mainvisual_content .img_txt { padding-right: 10%; } .mainvisual_content h2 { color: #fff; font-size: min(calc(20px + 17 * (100vw - 320px) / 1180), 37px); letter-spacing: 0.12em; margin: 0.5em 0 0; } @keyframes lineAnime { 0% { transform: scale(1, 0); transform-origin: 0 0; } 50% { transform: scale(1, 1); transform-origin: 0 0; } 50.1% { transform: scale(1, 1); transform-origin: 0 100%; } 100% { transform: scale(1, 0); transform-origin: 0 100%; } } /* ------------------------------- home -------------------------------- */ .home_ttl_1 { font-size: 1rem; } .home_ttl_1 > .fs-en { color: #0e56b7; font-size: min(calc(35px + 40 * (100vw - 320px) / 880), 75px); line-height: normal; background-image: -webkit-linear-gradient(0deg, #03adeb 0%, #0275c6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-flex; } .home_ttl_1 > .txt { font-weight: 700; font-size: 1rem; display: block; align-items: center; padding-left: 2em; position: relative; } .home_ttl_1 > .txt:before { content: ""; position: absolute; left: 0; top: 50%; width: 1.27777em; height: 1px; background-color: #000; } .home_ttl_1.text--white { color: #fff; } .home_ttl_1.text--white > .fs-en { color: #fff; -webkit-background-clip: border-box; -webkit-text-fill-color: currentColor; background: none; } .home_ttl_1.text--white > .txt:before { background-color: currentColor; } .home_ttl_1.text--center { text-align: center; } .home_ttl_1.text--center > .txt { padding-left: 0; } .home_ttl_1.text--center > .txt:before { display: none; } /* --- --- */ .home_about { overflow: hidden; } .home_about h3 { font-weight: 700; font-size: min(calc(20px + 10 * (100vw - 320px) / 880), 30px); line-height: 1.66666; } .home_about h3 small { font-size: 0.8em; } @media print, screen and (min-width: 992px) { .home_about .photo { height: 656px; margin-left: calc(-15px - 83 * (100vw - 320px) / 1180); margin-left: calc(-15px - 83 * (100dvw - 320px) / 1180); margin-right: min(calc(30px + 20 * (100vw - 992px) / 508), 50px); } } @media print, screen and (min-width: 1500px) { .home_about .photo { margin-left: calc((1304px - 100vw) / 2); margin-left: calc((1304px - 100dvw) / 2); } } .home_about__content { padding-left: min(calc(30px + 20 * (100vw - 992px) / 508), 50px); } @media print, screen and (min-width: 992px) { .home_about__content { line-height: 2.22223; } } /* --- --- */ .home_job { overflow: hidden; position: relative; z-index: 0; } .home_job > .bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: min(7.55vw, 151px) min(7.55vw, 151px) 0 0; background: url("../images/home/home_job.jpg") no-repeat center center/cover; overflow: hidden; } .home_job .figure_link_1 .photo { aspect-ratio: 4/3; } @media print, screen and (min-width: 768px) { .home_job .figure_link_1 .photo { aspect-ratio: 207 / 254; } } .home_job .figure_link_1 figcaption .ttl { font-size: 24px; } @media print, screen and (min-width: 992px) { .home_job .figure_link_1 figcaption .ttl { font-size: min(calc(24px + 8 * (100vw - 992px) / 508), 32px); } } /* --- --- */ .home_interview { overflow: hidden; } .home_interview h3 { font-weight: 700; font-size: min(calc(20px + 10 * (100vw - 320px) / 880), 30px); line-height: 1.66666; } .home_interview h3 small { font-size: 0.8em; } @media print, screen and (min-width: 992px) { .home_interview .photo { height: 656px; margin-right: calc(-15px - 83 * (100vw - 320px) / 1180); margin-right: calc(-15px - 83 * (100dvw - 320px) / 1180); margin-left: min(calc(30px + 20 * (100vw - 992px) / 508), 50px); } } @media print, screen and (min-width: 1500px) { .home_interview .photo { margin-right: calc((1304px - 100vw) / 2); margin-right: calc((1304px - 100dvw) / 2); } } .home_interview__content { padding-right: min(calc(30px + 20 * (100vw - 992px) / 508), 50px); } @media print, screen and (min-width: 992px) { .home_interview__content { line-height: 2.22223; } } /* --- --- */ .home_works { background-color: #dbf3fc; overflow: hidden; } @media print, screen and (min-width: 768px) { .home_works__content { text-align: center; } } @media print, screen and (min-width: 992px) { .home_works__content { line-height: 2.22223; } } .home_works .figure_link_1 .photo { aspect-ratio: 4/3; } @media print, screen and (min-width: 768px) { .home_works .figure_link_1 .photo { aspect-ratio: 207 / 254; } } .home_works .figure_link_1 figcaption .ttl { font-size: 24px; } @media print, screen and (min-width: 768px) { .home_works .figure_link_1 figcaption .ttl { font-size: min(calc(20px + 12 * (100vw - 768px) / 732), 32px); } } /* --- --- */ .home_news__content { overflow: hidden; } @media print, screen and (min-width: 992px) { .home_news__content { max-height: 530px; overflow: auto; } } .home_news__item { padding: 28px 15px; border-bottom: solid 1px #cccccc; } .home_news__item .head { margin-bottom: 10px; } @media print, screen and (min-width: 992px) { .home_news__item { display: flex; align-items: flex-start; } .home_news__item .head { flex: 0 0 16.88888em; margin-bottom: 0; padding-top: 3px; } .home_news__item .content { flex: 1 1 0; } } .home_news__item .head { display: flex; align-items: center; } .home_news__item .head .date { color: #666666; font-size: 0.88888em; flex: 0 0 7.5em; } .home_news__item .head .cat { color: #03adeb; font-size: 0.77777em; letter-spacing: normal; text-align: center; border: solid 1px currentColor; border-radius: 3px; padding: 0.15em 0.25em; flex: 0 0 7.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home_news__item .head .new { color: #a71a30; font-size: 0.77777em; padding-left: 1em; } .home_news__item .content { font-size: 0.94444em; display: flex; align-items: center; } .home_news__item .content .link { flex: 0 0 auto; margin-left: auto; } .home_news__item .content .link > a { font-size: 15px; text-align: center; text-decoration: none; width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; background-color: #03adeb; transition: transform 0.3s ease; } .home_news__item .content .link > a > i { color: #fff; line-height: 1; letter-spacing: normal; } .home_news__item .content .link > a:hover { transform: scale(1.2); } .home_news__item .home_news_gallery { display: flex; gap: 10px; margin-top: 20px; } .home_news__item .home_news_gallery .img { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; overflow: hidden; position: relative; } .home_news__item .home_news_gallery .img img { max-width: 120px; max-height: 100%; width: auto; height: auto; border-radius: 3px; } .home_video { background-color: #dbf3fc; position: relative; } .home_video:after { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 200px; background-color: #dbf3fc; z-index: -1; pointer-events: none; } /* ------------------------------- お知らせ -------------------------------- */ /* --- --- */ .news_content__head { display: flex; align-items: center; gap: 0 1em; } .news_content__head .date { color: #666666; font-size: 0.88888em; flex: 0 0 auto; } .news_content__head .cat { color: #03adeb; font-size: 0.77777em; letter-spacing: normal; text-align: center; border: solid 1px currentColor; border-radius: 3px; padding: 0.15em 1em; flex: 0 0 auto; } .news_content__head .new { color: #a71a30; font-size: 0.77777em; } .news_content__body .link-icon { display: block; min-width: 200px; } @media print, screen and (min-width: 768px) { .news_content__body .image { padding-right: min(calc(12px + 100 * (100vw - 768px) / 732), 112px); } .news_content__body .order-md-last .image { padding-left: min(calc(12px + 100 * (100vw - 768px) / 732), 112px); padding-right: 0; } } /**/ /* ------------------------------- STSについて -------------------------------- */ /* --- --- */ .about_head { overflow: hidden; position: relative; z-index: 0; } .about_head:before { content: ""; position: absolute; left: 0; top: 64%; bottom: 0; width: 75%; z-index: -1; background-color: #03adeb; } .about_head .content { padding-top: 60px; position: relative; z-index: 10; } .about_head .content h3 { font-size: 20px; line-height: 2; letter-spacing: normal; text-shadow: 1px 1px 0 #fff, 2px 2px 0 #fff, 3px 3px 0 #fff; } @media print, screen and (min-width: 992px) { .about_head .content { padding-top: min(calc(20px + 40 * (100vw - 992px) / 608), 60px); } .about_head .content h3 { font-size: min(calc(25px + 15 * (100vw - 992px) / 608), 40px); white-space: nowrap; } } @media print, screen and (min-width: 992px) { .about_head_2 h4 { font-size: min(calc(20px + 18 * (100vw - 992px) / 608), 38px); } } .about_head_content { border: solid 1px #003873; padding: min(calc(20px + 30 * (100vw - 320px) / 1180), 50px); border-radius: min(calc(10px + 20 * (100vw - 320px) / 1180), 30px); position: relative; } .about_head_content h4 { position: absolute; top: 0; left: 50%; color: #fff; text-align: center; width: 10em; padding: 0.25em; border-radius: 10em; background-color: #003873; transform: translate(-50%, -50%); } .about_head_column { padding: 1.5em 15px; border-bottom: dashed 1px #ccc; } .about_head_column.last { border: none; } .about_head_column h5 { color: #fff; text-align: center; padding: 0.15em; margin-bottom: 0.5em; border-radius: 3px; background-color: var(--primary); } .about_head_column .column { font-size: 18px; text-align: center; } @media print, screen and (min-width: 992px) { .about_head_column { border-bottom: none; border-right: dashed 1px #ccc; } .about_head_column h5 { font-size: min(calc(16px + 10 * (100vw - 992px) / 608), 26px); padding: 0.25em 0; } .about_head_column .column { font-size: min(calc(16px + 14 * (100vw - 992px) / 608), 30px); text-align: center; } } .about_head_column2 ul { font-size: 24px; list-style: none; padding: 0; } .about_head_column2 ul > li span { letter-spacing: 0.05em; } .about_head_column2 ul > li strong { color: #03adeb; font-weight: 600; font-size: 1.25em; } @media print, screen and (min-width: 768px) { .about_head_column2 ul { font-size: 20px; display: flex; gap: 0 0.75em; } } @media print, screen and (min-width: 992px) { .about_head_column2 ul { font-size: min(calc(17px + 9 * (100vw - 992px) / 608), 26px); } .about_head_column2 p { font-size: min(calc(16px + 8 * (100vw - 992px) / 608), 24px); } } @media print, screen and (min-width: 992px) { .about_head_column3 p { font-size: min(calc(16px + 8 * (100vw - 992px) / 608), 24px); } } /* --- --- */ .about_services_content { display: flex; flex-wrap: wrap; align-items: center; padding: min(calc(20px + 30 * (100vw - 320px) / 1180), 50px); border-radius: min(calc(10px + 20 * (100vw - 320px) / 1180), 30px); background-color: #fff; } .about_services_content > .num { color: var(--primary); font-size: min(calc(40px + 40 * (100vw - 320px) / 448), 80px); flex: 1 1 0; order: 1; } .about_services_content > .columns { flex: 0 0 100%; order: 3; margin-top: 30px; } .about_services_content > .columns h4 { color: var(--primary); } .about_services_content > .image { flex: 0 0 70%; max-width: 415px; order: 2; border-radius: 10px; overflow: hidden; } .about_services_content > .columns2 { order: 10; } @media print, screen and (min-width: 992px) { .about_services_content > .num { font-size: min(calc(50px + 50 * (100vw - 992px) / 608), 100px); padding-right: 30px; flex: 0 0 auto; } .about_services_content > .columns { flex: 1 1 0; order: 2; padding: 0 30px; } .about_services_content > .image { flex: 0 0 31.825%; order: 3; } .about_services_content > .columns2 { flex: 0 0 100%; padding-left: min(calc(50px + 50 * (100vw - 992px) / 608), 100px); } } /* --- --- */ .job_info_content h4 { font-size: min(calc(30px + 20 * (100vw - 320px) / 1180), 50px); display: flex; align-items: baseline; } .job_info_content h4 > .num { color: var(--primary); font-size: 1.5em; line-height: 1; padding-right: 0.25em; } .job_info__flew { list-style: none; padding: 0; } .job_info__flew > li { display: grid; grid-template-columns: 8em 1fr; padding: 5px; border-bottom: dotted 1px #ccc; } .job_info__flew > li .time { color: #aaa; } /* ------------------------------- 資格取得支援制度 -------------------------------- */ /* --- --- */ .qualification_point { border: solid 1px #ccc; padding: 5px; border-radius: 3px; height: 100%; } .qualification_point .point { color: #fff; font-size: 24px; text-align: center; border-radius: 3px; background-color: var(--primary); } .qualification_point h3 { color: var(--primary); font-size: 25px; text-align: center; margin: 1em 0; } .qualification_point .column { font-size: 0.88888rem; padding: 0 1em 1em; } /* --- --- */ .qualification_curriculum_box .ttl { color: #0060aa; font-size: 20px; border-bottom: 0.25em; border-bottom: solid 1px #0060aa; } /* --- --- */ .qualification_table_1 { line-height: 1.5; width: 100%; border-collapse: separate; border-spacing: 0; border-top: 1px solid #000; border-left: 1px solid #000; } .qualification_table_1 > thead > tr > th, .qualification_table_1 > thead > tr > td { color: #fff; text-align: center; padding: 0.75em; border-right: 1px solid #000; border-bottom: 1px solid #000; background-color: #0070c0; } .qualification_table_1 > tbody > tr > th, .qualification_table_1 > tbody > tr > td { padding: 0.75em; border-right: 1px solid #000; border-bottom: 1px solid #000; } .qualification_table_1 > tbody > tr > th { text-align: left; width: 15em; background: #E4F3FF; } .qualification_table_1 > tbody > tr > td { background-color: #fff; } .qualification_table_1 > tbody > tr > td.last { text-align: center; width: 11em; } @media screen and (max-width: 767px) { .qualification_table_1 { white-space: nowrap; } } /* ------------------------------- 先輩インタビュー -------------------------------- */ /**/ @media print, screen and (min-width: 992px) { .interview_content__head .photo { height: 100%; min-height: 600px; } } .interview_content__head .content { padding-top: 1.5rem; } .interview_content__head .content .interview_num { color: #fff; padding: 0.15em 1.5em; border-radius: 10em; margin-bottom: 0.5rem; display: inline-flex; background-color: var(--primary); } .interview_content__head .content h3 { font-size: min(calc(21px + 22 * (100vw - 320px) / 1180), 43px); } .interview_content__head .content .subtxt1 { font-size: 0.88888em; } .interview_content__head .content .name { font-size: min(calc(24px + 14 * (100vw - 320px) / 1180), 38px); } .interview_content__head .content .subtxt2 { padding: 1.2rem; margin-top: min(calc(20px + 30 * (100vw - 320px) / 1180), 50px); background-color: #f3f3f3; } .interview_content__head .content .subtxt2 .ttl { font-size: 1.11112rem; padding-left: 1.1em; position: relative; } .interview_content__head .content .subtxt2 .ttl:before { content: "■"; transform: scale(0.75); position: absolute; left: 0; } .interview_content__head .content .subtxt2 .column { font-size: 0.944445rem; } @media print, screen and (min-width: 992px) { .interview_content__head .content h3 { font-size: min(calc(28px + 15 * (100vw - 992px) / 508), 43px); } } /* --- --- */ .interview_content { padding: min(calc(50px + 50 * (100vw - 320px) / 1180), 100px) 0; } .interview_content:last-child { margin-bottom: min(calc(50px + 50 * (100vw - 320px) / 1180), 100px); } .interview_content .interview_content__box { margin-bottom: min(calc(35px + 35 * (100vw - 320px) / 1180), 70px); } .interview_content .interview_content__box:last-child { margin-bottom: 0; } @media print, screen and (min-width: 992px) { .interview_content:nth-child(odd) .photo { margin-left: calc(-15px - 83 * (100vw - 320px) / 1180); margin-left: calc(-15px - 83 * (100dvw - 320px) / 1180); } .interview_content:nth-child(odd) .interview_content__head .content { padding-left: min(calc(20px + 40 * (100vw - 992px) / 508), 60px); } } @media print, screen and (min-width: 1500px) { .interview_content:nth-child(odd) .photo { margin-left: calc((1304px - 100vw) / 2); margin-left: calc((1304px - 100dvw) / 2); } } .interview_content:nth-child(even) { background-color: #f7f7f7; } @media print, screen and (min-width: 992px) { .interview_content:nth-child(even) .photo { margin-right: calc(-15px - 83 * (100vw - 320px) / 1180); margin-right: calc(-15px - 83 * (100dvw - 320px) / 1180); } .interview_content:nth-child(even) .interview_content__head .row > div:first-child { order: 13; } .interview_content:nth-child(even) .interview_content__head .content { padding-right: min(calc(20px + 40 * (100vw - 992px) / 508), 60px); } } @media print, screen and (min-width: 1500px) { .interview_content:nth-child(even) .photo { margin-right: calc((1304px - 100vw) / 2); margin-right: calc((1304px - 100dvw) / 2); } } /**/ .interview_content .interview_content__comment .row { margin-bottom: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); } .interview_content .interview_content__comment .row:last-child { margin-bottom: 0; } @media print, screen and (min-width: 768px) { .interview_content .interview_content__comment .row:nth-child(odd) > div:first-child { order: 13; } .interview_content .interview_content__comment .row:nth-child(odd) > div + div .content { margin-right: min(calc(5px + 55 * (100vw - 768px) / 732), 60px); } .interview_content .interview_content__comment .row:nth-child(even) > div + div .content { margin-left: min(calc(5px + 55 * (100vw - 768px) / 732), 60px); } } .interview_content .interview_content__comment .content { line-height: 2; } .interview_content .interview_content__comment .content h4 { font-size: 1.33334rem; line-height: 1.5; padding-top: 0.25em; padding-left: 2.5em; position: relative; } .interview_content .interview_content__comment .content h4:before { content: "Q"; position: absolute; left: 0; top: 0; width: 2em; height: 2em; color: #fff; line-height: 1; display: grid; place-items: center; border-radius: 50%; background-color: var(--primary); } /**/ .interview_content__message { padding: min(4vw, 50px); border: solid 1px var(--primary); } /* ------------------------------- 教育・研修制度 -------------------------------- */ /* --- --- */ .education_curriculum h4 { text-align: center; } .education_curriculum h4 > .fs-en { color: #03adeb; font-size: min(calc(30px + 30 * (100vw - 320px) / 1180), 60px); line-height: normal; display: block; } .education_curriculum h4 > .txt { font-weight: 700; font-size: min(calc(18px + 10 * (100vw - 320px) / 1180), 28px); display: block; margin-top: .5rem; position: relative; } .education_curriculum .education_curriculum__list { font-size: min(calc(16px + 12 * (100vw - 320px) / 1180), 28px); list-style: none; padding-left: 0; display: grid; gap: 5px 0; } .education_curriculum .education_curriculum__list > li { display: grid; grid-template-columns: 3em 1fr; align-items: center; padding: 1em 1.5em; border: solid 1px var(--primary); border-radius: 20em; background-color: #fff; } .education_curriculum .education_curriculum__list > li > .date { color: var(--primary); text-align: right; } .education_curriculum .education_curriculum__list > li > .column { padding-left: 2em; } /* --- --- */ .education_step .txt1 { font-size: min(calc(18px + 18 * (100vw - 320px) / 1180), 36px); text-align: center; } .education_step .txt1 strong { font-weight: 700; font-size: 1.2em; } @media print, screen and (min-width: 992px) { .education_step .txt1 { text-align: left; } } /**/ @media print, screen and (min-width: 992px) { .education_step__flow { display: none; } } .education_step__flow .txt1 { color: #aaa; display: flex; align-items: center; margin-bottom: 1rem; } .education_step__flow .txt1:after { content: ""; display: block; flex: 1 1 0; margin-left: 1em; height: 1px; background-color: #aaa; } .education_step__flow > .item { display: grid; grid-template-columns: 3em 1fr; } .education_step__flow > .item .day { display: flex; flex-direction: column; align-items: center; } .education_step__flow > .item .day:after { content: ""; width: 1px; flex: 1 1 0; background-color: #ccc; } .education_step__flow > .item .columns { padding-left: 20px; padding-bottom: 30px; } .education_step__flow > .item .columns h4 { font-size: 1rem; padding: 1em; border-radius: 10px; background-color: #ccc; } .education_step__flow > .item .columns .column { font-size: 0.9375rem; } .education_step__flow > .item .columns .column h5 { color: #03adeb; font-size: 1rem; margin-bottom: 0; } .education_step__flow > .item.item1 .columns h4 { color: #333; background-color: #cdeffb; } .education_step__flow > .item.item2 .columns h4 { color: #333; background-color: #9adef7; } .education_step__flow > .item.item3 .columns h4 { color: #fff; background-color: #68cef3; } .education_step__flow > .item.item4 .columns h4 { color: #fff; background-color: #35bdef; } .education_step__flow > .item.item5 .columns h4 { color: #fff; background-color: #03adeb; } .education_step__flow > .item.item6 { grid-template-columns: 1fr; } .education_step__flow > .item.item6 .day { display: block; } /* ------------------------------- 働く環境 -------------------------------- */ .environment_row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media print, screen and (min-width: 768px) { .environment_row { grid-template-columns: repeat(2, 1fr); gap: 30px; } } @media print, screen and (min-width: 992px) { .environment_row { grid-template-columns: repeat(3, 1fr); } } /**/ .environment_item { border: solid 1px #333; padding: 20px 10px; height: 100%; display: flex; flex-direction: column; } .environment_item .icon { width: 100%; height: 83px; margin: 0 auto 0.5rem; } .environment_item .icon img { max-width: inherit; width: 100%; height: 100%; object-fit: scale-down; } .environment_item h4 { color: var(--primary); font-size: 14px; line-height: 1.5; letter-spacing: normal; text-align: center; margin: 0 0 0.5rem; } .environment_item .ttl1 { color: var(--success); font-size: 25px; line-height: 1.2; letter-spacing: normal; text-align: center; } .environment_item .ttl1 small { font-size: 0.5em; } .environment_item .txt1 { font-size: 0.8125rem; } .environment_item .sub1 { font-size: 0.88888rem; text-align: center; } .environment_item .hiritu { color: var(--success); font-size: 25px; display: flex; justify-content: center; } .environment_item .hiritu > div { line-height: 1.2; text-align: center; flex: 0 0 auto; } .environment_item .hiritu > div > small { font-size: 1rem; line-height: normal; display: block; } .environment_item .hiritu > div.ten { letter-spacing: normal; text-align: center; flex: 0 0 1em; transform: scale(0.75); } @media print, screen and (min-width: 768px) { .environment_item { padding: 50px 20px; } .environment_item h4 { font-size: 24px; } .environment_item .ttl1 { font-size: 55px; } .environment_item .hiritu { font-size: 55px; } } @media print, screen and (min-width: 992px) { .environment_item { padding: 50px 20px; } .environment_item h4 { font-size: min(calc(20px + 8 * (100vw - 992px) / 608), 28px); } .environment_item .ttl1 { font-size: min(calc(55px + 25 * (100vw - 992px) / 608), 80px); } .environment_item .hiritu { font-size: min(calc(55px + 25 * (100vw - 992px) / 608), 80px); } } .environment_list_1 { font-size: 0.88888em; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: auto; justify-content: center; gap: 0.25em 0; } .environment_list_1 > li { padding-left: 1.1em; position: relative; } .environment_list_1 > li:before { content: "■"; position: absolute; left: 0; transform: scale(0.75); } /* --- --- */ .environment_benefits { border: solid 1px #333; padding: 20px; height: 100%; display: flex; flex-direction: column; } .environment_benefits .icon { width: 90px; height: 90px; padding: 20px; border-radius: 50%; margin: 0 auto; background-color: var(--primary); } .environment_benefits .icon img { max-width: inherit; width: 100%; height: 100%; object-fit: scale-down; } .environment_benefits h4 { color: var(--primary); font-size: 20px; line-height: 1.5; text-align: center; margin: 0.7em 0; } @media print, screen and (min-width: 768px) { .environment_benefits { padding: 50px 20px; } .environment_benefits h4 { font-size: 24px; } } @media print, screen and (min-width: 992px) { .environment_benefits { padding: 50px 20px; } .environment_benefits h4 { font-size: min(calc(20px + 8 * (100vw - 992px) / 608), 28px); } } /* ------------------------------- お問い合わせ -------------------------------- */ .tel_contact .telphone { font-size: calc(20px + 16 * (100vw - 320px) / 880); text-align: center; } .tel_contact .telphone i { margin-right: 10px; } @media print, screen and (min-width: 1200px) { .tel_contact .telphone { font-size: 36px; } } /* contact form 7 */ .wpcf7-spinner { position: fixed !important; left: 50%; top: 50%; z-index: 999; transform: translate(-50%, -50%); } .contactform { /**/ } .contactform .form-control { border-color: #eee; background-color: #f6f6f6; box-shadow: none; } .contactform .form-control:focus { border-color: #ccc; background-color: #fff; box-shadow: none; } .contactform .form-control:not(:placeholder-shown) { border-color: #ccc; background-color: #fff; box-shadow: none; } .contactform .custom-select { box-shadow: none !important; } .contactform input[type="file"] { font-size: 15px; letter-spacing: normal; } .contactform input[type="file"]::-webkit-file-upload-button { font-size: 12px; } @media print, screen and (min-width: 768px) { .contactform .select-inline, .contactform .p-region { width: auto; display: inline; } } /* フォーム用　table */ .table-contact { line-height: 1.75; width: 100%; border-collapse: collapse; text-align: left; border-top: 1px solid #ccc; margin-bottom: 30px; } .table-contact > tbody > tr { border-bottom: 1px solid #ccc; } .table-contact > tbody > tr > th, .table-contact > tbody > tr > td { padding: 1em 0; } .table-contact > tbody > tr > th { width: 15em; padding-left: 1em; } .table-contact > tbody > tr > th.hisu { background-image: url("../images/common/hisu.svg"); background-repeat: no-repeat; background-position: right center; } .table-contact > tbody > tr > td { padding-left: 2em; } .table-contact > tbody > tr > td .sm, .table-contact > tbody > tr > td .p-postal-code { width: auto !important; display: inline; } .table-contact > tbody > tr > td .md { max-width: 360px !important; } .table-contact > tbody > tr > td .rei { color: #555; font-size: 0.8125rem; line-height: normal; display: block; margin: 5px 0 0; } @media only screen and (max-width: 767px) { .table-contact > tbody > tr { width: 100%; display: block; padding: 1em 0.5em; } .table-contact > tbody > tr > th, .table-contact > tbody > tr > td { width: 100%; display: block; padding: 0; } .table-contact > tbody > tr > th + td, .table-contact > tbody > tr > td + td { margin-top: .5em; } } .img-hisu { margin: -.2em .5em 0 0; } /* */ .agree { text-align: center; margin-top: 20px; } .buttons { text-align: center; margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; } .buttons .btn { font-size: 15px; text-align: center; padding: 0.75em 2em; width: 260px; display: block; cursor: pointer; } @media print, screen and (min-width: 1200px) { .buttons .btn { font-size: 16px; } } /* プライバシーポリシー */ #policy { margin-top: 30px; } #policy .contents { padding: 1.5% 3.4448%; border: solid 1px #ccc; max-height: 300px; word-wrap: break-word; overflow-wrap: break-word; overflow: auto; } #policy .contents h5 { font-size: 1rem; font-weight: bold; margin: 2rem 0 0; } #policy .contents p, #policy .contents ol { font-size: 0.9375rem; margin: 1rem 0; } #policy .contents > ol { padding-left: 0; list-style: none; counter-reset: number; } #policy .contents > ol > li { padding-left: 2em; margin-bottom: 5px; position: relative; } #policy .contents > ol > li:before { position: absolute; top: 0; left: 0; counter-increment: number; content: counter(number) " )"; } /* * スクロールエフェクト（CSS変数対応） */ :root { --amn-opacity: 0; --amn-opacity-active: 1; --amn-translateY: 50px; --amn-translateY-active: 0; --amn-translateX: 100px; --amn-translateX-active: 0; --amn-transition-duration: 1s; --amn-transition-ease: ease; --amn-mask-transition: 1s cubic-bezier(.72,.01,.37,1); --amn-marker-bg: rgba(254,239,68,1); --amn-marker-bg-transparent: rgba(254,239,68,0); --amn-marker-transition: 3s ease-out; } /* フェード */ @media screen { /* アニメーション: 上下左右 */ .amn-fade-up, .amn-fade-down, .amn-fade-left, .amn-fade-right { opacity: var(--amn-opacity); transition: opacity var(--amn-transition-duration) var(--amn-transition-ease), transform var(--amn-transition-duration) var(--amn-transition-ease); } .amn-fade-up { transform: translateY(var(--amn-translateY)); } .amn-fade-up.is-active { opacity: var(--amn-opacity-active); transform: translateY(var(--amn-translateY-active)); } .amn-fade-down { transform: translateY(calc(var(--amn-translateY) * -1)); } .amn-fade-down.is-active { opacity: var(--amn-opacity-active); transform: translateY(var(--amn-translateY-active)); } .amn-fade-left { transform: translateX(var(--amn-translateX)); } .amn-fade-left.is-active { opacity: var(--amn-opacity-active); transform: translateX(var(--amn-translateX-active)); } .amn-fade-right { transform: translateX(calc(var(--amn-translateX) * -1)); } .amn-fade-right.is-active { opacity: var(--amn-opacity-active); transform: translateX(var(--amn-translateX-active)); } .amn-span-up { opacity: 0; } .amn-span-up .is-span { display: inline-block; opacity: 0; transform: translateY(20px); transition-property: opacity, transform; /* duration や delay, easing はJS側でインライン指定 */ } .amn-span-up.is-active { opacity: 1; } .amn-span-up.is-active .is-span { opacity: 1; transform: translateY(0); } } @media screen { /* 横並びの要素を遅延して表示させる */ .js-row-1 > * { opacity: var(--amn-opacity); transform: translateY(var(--amn-translateY)); transition: opacity var(--amn-transition-duration) var(--amn-transition-ease), transform var(--amn-transition-duration) var(--amn-transition-ease); } .js-row-1 > *.is-active { opacity: var(--amn-opacity-active); transform: translateY(var(--amn-translateY-active)); } /* マスクエフェクト */ .amn-lr-open { opacity: var(--amn-opacity); mask-image: linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: 100% 50%; -webkit-mask-position: 100% 50%; mask-size: 200% 100%; -webkit-mask-size: 200% 100%; transition: mask-position var(--amn-mask-transition); } .amn-lr-open.is-active { opacity: var(--amn-opacity-active); mask-position: 0% 50%; -webkit-mask-position: 0% 50%; } /* マスクアップ */ .amn-mask-up { display: inline-block; opacity: var(--amn-opacity); overflow: hidden; } .amn-mask-up > .is-span { display: inline-block; transform: translateY(101%); transition: transform var(--amn-transition-duration) var(--amn-transition-ease); } .amn-mask-up.is-active { opacity: var(--amn-opacity-active); } .amn-mask-up.is-active > .is-span { transform: translateY(0%); } /* マーカーエフェクト */ .amn-marker-yellow { background: linear-gradient(to bottom, var(--amn-marker-bg-transparent) 0%, var(--amn-marker-bg-transparent) 0%, var(--amn-marker-bg-transparent) 50%, var(--amn-marker-bg) 50%, var(--amn-marker-bg) 90%, var(--amn-marker-bg-transparent) 90%, var(--amn-marker-bg-transparent) 100%); background-repeat: no-repeat; background-size: 200% 1em; background-position: 200% 0.5em; transition: background var(--amn-marker-transition); display: inline; } .amn-marker-yellow.is-active { background-position: 100% 0.5em; } } /* * シャッターエフェクト * */ @media screen { .amn-shutter { opacity: 0; position: relative; z-index: 0; } .amn-shutter .shutter__element { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #73b400; z-index: 10; transform: scale(0, 1); } .amn-shutter .shutter__contents { opacity: 0; height: 100%; } .amn-shutter.lr.is-active { opacity: 1; } .amn-shutter.lr.is-active .shutter__element { animation: shutter2_lr_1 0.5s cubic-bezier(0.62, 0, 0.46, 1.01) 0s alternate forwards, shutter2_lr_2 0.5s cubic-bezier(0.62, 0, 0.46, 1.01) 0.7s alternate forwards; } .amn-shutter.lr.is-active .shutter__contents { animation: shutter2_contents 0s ease .6s alternate forwards; } .amn-shutter.rl.is-active { opacity: 1; } .amn-shutter.rl.is-active .shutter__element { animation: shutter2_rl_1 0.5s cubic-bezier(0.62, 0, 0.46, 1.01) 0s alternate forwards, shutter2_rl_2 0.5s cubic-bezier(0.62, 0, 0.46, 1.01) 0.7s alternate forwards; } .amn-shutter.rl.is-active .shutter__contents { animation: shutter2_contents 0s ease .6s alternate forwards; } } @keyframes shutter2_lr_1 { from { transform: scale(0, 1); transform-origin: left top; } to { transform: scale(1, 1); transform-origin: left top; } } @keyframes shutter2_lr_2 { from { transform: scale(1, 1); transform-origin: right top; } to { transform: scale(0, 1); transform-origin: right top; } } @keyframes shutter2_rl_1 { from { transform: scale(0, 1); transform-origin: right top; } to { transform: scale(1, 1); transform-origin: right top; } } @keyframes shutter2_rl_2 { from { transform: scale(1, 1); transform-origin: left top; } to { transform: scale(0, 1); transform-origin: left top; } } @keyframes shutter2_contents { from { opacity: 0; } to { opacity: 1; } } /*# sourceMappingURL=module.css.map */