@charset "UTF-8"; /* * Prefixed by https://autoprefixer.github.io * PostCSS: v8.4.14, * Autoprefixer: v10.4.7 * Browsers: last 4 version,not dead,iOS >= 12,Safari >= 14 */ /* CSS Document */ @-webkit-keyframes size0to100 { 0% { transform:scale(0); } 100% { transform:scale(1); } } @keyframes size0to100 { 0% { transform:scale(0); } 100% { transform:scale(1); } } @-webkit-keyframes jump { 0% { transform:translateY(0); } 1.5% { transform:translateY(-1em); } 3% { transform:translateY(0); } } @keyframes jump { 0% { transform:translateY(0); } 1.5% { transform:translateY(-1em); } 3% { transform:translateY(0); } } @-webkit-keyframes righttoleft { 0% { transform:translateX(4vw); opacity: 0; } 100% { transform:translateX(0); opacity: 1; } } @keyframes righttoleft { 0% { transform:translateX(4vw); opacity: 0; } 100% { transform:translateX(0); opacity: 1; } } .scroll-effect-container .circle,.scroll-effect-container .square{ display: none; } .scroll-effect-container-active .circle,.scroll-effect-container-active .square{ display: block; -webkit-animation: size0to100 1.2s 0.3s both; animation: size0to100 1.2s 0.3s both; } .size0to100-onload{ -webkit-animation: size0to100 1.2s 1.2s both; animation: size0to100 1.2s 1.2s both; } .scroll-effect-container-active.snsicons a:first-child img{ -webkit-animation: jump 6s 0.3s both ease-in-out infinite; animation: jump 6s 0.3s both ease-in-out infinite; } .scroll-effect-container-active.snsicons a:nth-child(2) img{ -webkit-animation: jump 6s 0.37s both ease-in-out infinite; animation: jump 6s 0.37s both ease-in-out infinite; } .scroll-effect-container-active.snsicons a:nth-child(3) img{ -webkit-animation: jump 6s 0.44s both ease-in-out infinite; animation: jump 6s 0.44s both ease-in-out infinite; } .scroll-effect-container-active.no8{ -webkit-animation: righttoleft 1s 0.4s both ease-in-out; animation: righttoleft 1s 0.4s both ease-in-out; } .box{ border:solid 2px #FFFFFF; position:relative; border-radius: 4px; } .circle{ background-color: #FFFFFF; border-radius: 50%; position:absolute; z-index: -1; opacity: 0.8; } .square{ border:solid 2px #FFFFFF; border-radius: 4px; position: absolute; } .no1{ grid-column: 4 / 21; grid-row: 1 / 2; border:none; } .no1 .circle{ width:55vh; height: 55vh; top: 3em; left: -5em; } .no1 .box-content{ padding:3em 2em 30px 2em; display: grid; grid-template-columns:repeat(7, 1fr); } .no1 .title{ grid-column: 1 / 8; grid-row: 1 / 2; margin: auto 0; } .no1 .title h2{ font-size:2.6em; line-height: 1.1em; margin-bottom: 1em; } .no1 .title h2 span{ display: inline-block; } .no1 .text{ grid-column: 1 / 8; grid-row: 2 / 3; } .no2{ grid-column: 12 / 25; grid-row: 3 / 9; } .no2 .circle{ width:25vh; height: 25vh; top: -3%; left: 3%; } .no2 .box-content{ padding:7% 4% 8% 3%; } .no3{ grid-column: 4 / 15; grid-row: 8 / 15; } .no3 .circle{ width:45vh; height: 45vh; top: 2em; left: -3em; } .no3 .box-content{ padding:5em 1em 8em 1em; } .no4{ grid-column: 6 / 24; grid-row: 17 / 18; border: none; } .no4 .box-content img{ width:100%; height: 100%; -o-object-fit: contain; object-fit: contain; filter: brightness(1.07); } .no4 .square{ width: 56%; top: 15.5%; left: 21%; z-index: 1; line-height: 0; } .no4 .square img{ visibility: hidden; width: 100%; height: auto; filter: contrast(0.97) brightness(1.12); } .no4 .square:hover img{ visibility: visible; } .no5{ grid-column: 5 / 23; grid-row: 16 / 21; } .no5 .box-content{ padding:1em 5em 2em 2em; } .no6{ grid-column: 6 / 22; grid-row: 19 / 20; border: none; } .snsicons{ margin:2.5em 0 1.5em; } .snsicons a{ border-bottom: none; margin-right:1.3em; } .snsicons img{ display: inline-block; width:2em; height: auto; vertical-align:middle; } #noteicon{ border: solid 1px #040404; border-radius: 20%; } #xicon{ width: 1.75em; } .no7{ grid-column: 2 / 21; grid-row: 22 / 27; } .no7 .box-content{ padding:3em 2em 270px 2em; display: grid; grid-template-columns:repeat(7, 1fr); } .no7 .box-content div{ grid-column: 1 / 8; grid-row: 1 /2; } .no8{ grid-column: 3 / 23; grid-row: 26 / 30; border: none; opacity: 0; } #googlemap { width:100%; min-width: 270px; height:920px; opacity: 0.9; } .no9{ grid-column: 2 / 21; grid-row: 31 / 35; } .no9 .box-content{ padding:3em 2em; display: grid; grid-template-columns:repeat(7, 1fr); } .no9 .box-content div{ grid-column: 1 / 8; grid-row: 1 /2; } @media screen and (min-width:667px) { .jobtype h2{font-size:1.1em; margin-bottom: 1em; } .no1 .box-content{ padding:3em 2em 50px 2em; } .no2 .box-content{ padding:7% 4% 8% 24%; } .no2 .circle{ top:3%; left: 26%; } .no4{ grid-column: 12 / 24; } .no4 .square:hover img{ visibility: visible; } .no7{ grid-column: 3 / 21; grid-row: 22 / 31; } .no7 .box-content{ padding:3em 18vw 2em 2em; } .no8{ grid-column: 16 / 24; grid-row: 25 / 33; } #googlemap { height:970px; } .no9{ grid-column: 3 / 21; grid-row: 32 / 45; } .no9 .box-content{ padding:4em 2em 3em; } }