@charset "UTF-8";
  .MainBgVideoWrap {
position: relative;
height: 56.25vw;
max-height: 80vh;
}
.MainBgVideoWrap:before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVQYV2NkgABfKL2ZEYkDFsMqgKIFAFHnAp/iEsZHAAAAAElFTkSuQmCC) repeat; position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: 2;
width: 100%;
height: 100%;
}
.MainBgVideoWrap .bg-video-content {
width: 100vw;
height: 56.25vw;
max-height: 80vh;
}
.MainBgVideoWrap video#bg-video {
width: 100vw;
height: 56.25vw;
max-height: 80vh;
vertical-align: bottom;
-o-object-fit: cover;
object-fit: cover;
}
.MainBgVideoWrap .TopJumbotron {
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
min-width: 33.2vw;
min-height: 44.23%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #fff;
text-align: center;
z-index: 9;
}
.MainBgVideoWrap .TopJumbotron h1 {
margin-top: 0;
}
.MainBgVideoWrap .TopJumbotron h1 img.fv-logo-img {
display: block;
width: 100%;
max-width: 320px;
max-height: 60%;
-o-object-fit: cover;
object-fit: cover;
margin: auto;
}
.MainBgVideoWrap .TopJumbotron p.top-jumbotron-txt {
margin: 0;
text-align: center;
}
.MainBgVideoWrap .TopJumbotron p.top-jumbotron-txt span.main-text {
font-size: clamp(1.5rem, 1.438rem + 0.31vw, 1.625rem);
display: block;
}
.MainBgVideoWrap .TopJumbotron p.top-jumbotron-txt span.sub-text {
font-size: clamp(1.125rem, 1.031rem + 0.47vw, 1.313rem);
display: block;
margin-top: 0.5em;
}
@media only screen and (min-width: 641px) {
.MainBgVideoWrap .TopJumbotron p.top-jumbotron-txt br {
display: none;
}
}
@media only screen and (max-width: 640px) {
.MainBgVideoWrap {
height: 120vw;
}
.MainBgVideoWrap video#bg-video {
height: 120vw;
}
}
.top-icon-menu {
padding: 30px 0;
}
.top-icon-menu .top-icon-links {
margin: 0 auto;
display: flex;
gap: 30px;
}
.top-icon-menu .top-icon-links .icon-menu {
text-align: center;
}
.top-icon-menu .top-icon-links .icon-menu img {
display: block;
width: 128px;
height: 128px;
}
.top-icon-menu .top-icon-links .icon-menu span {
display: block;
line-height: 1;
}
.top-icon-menu .top-icon-links .icon-menu:hover img {
transition: all 0.5s ease;
transform: translateX(0) translateY(0) scaleX(1) scaleY(1) rotate(350deg) skewX(0deg) skewY(0deg);
} .SecTitle {
font-size: clamp(1.625rem, 1.563rem + 0.31vw, 1.75rem);
width: -moz-fit-content;
width: fit-content;
margin: 30px auto;
padding: 0 0.2rem;
border-bottom: 3px solid #076baf;
line-height: 1.4em;
font-weight: 500;
}
.SecTitle span {
display: block;
font-size: clamp(1rem, 0.938rem + 0.31vw, 1.125rem);
text-align: center;
position: absolute;
left: -50%;
right: -50%;
width: -moz-max-content;
width: max-content;
margin: auto;
}
.SecSubTitle {
width: 100%;
text-align: center;
font-size: clamp(1rem, 0.938rem + 0.31vw, 1.125rem);
font-weight: 500;
}
.HBox {
border-left: 5px solid #076baf;
margin-bottom: 15px;
font-weight: 500;
}
.HBox .HBoxTitle {
margin: 0;
padding: 15px;
font-size: clamp(1.188rem, 1.094rem + 0.47vw, 1.375rem);
}
.HBox .HBoxSubTitle {
margin: 0;
font-size: clamp(1.5rem, 1.438rem + 0.31vw, 1.625rem);
padding: 0 10px;
}
.TopSecPhilosophy {
color: #fff;
background-image: url(//noith.co.jp/wp-content/themes/noith2026/img/philosophy.jpg);
background-size: cover;
background-position: center 60%;
border-radius: 0;
position: relative;
padding: 50px 0;
}
.TopSecPhilosophy:before {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.TopSecPhilosophy .ContentTxtBox {
text-align: center;
}
.TopSecPhilosophy .ContentTxtBox p.mission {
font-size: clamp(1.125rem, 1.031rem + 0.47vw, 1.313rem);
font-weight: 500;
color: #FCEE21;
}
.TopSecPhilosophy .link-btn-wrap {
display: flex;
gap: 15px;
}
.TopSecPhilosophy .link-btn-wrap a.top-link-btn {
flex: 1;
color: #1e1e1e;
background: #fff;
border: 1px solid #fff;
border-radius: 4px;
padding: 5px;
display: block;
margin-bottom: 30px;
}
.TopSecThought {
color: #fff;
background-color: #534741;
margin: 0 auto 30px;
padding-top: 30px;
padding-bottom: 30px;
}
.TopSecThought .ThoughtBlock {
display: grid;
}
.TopSecThought .ThoughtBlock .HBox {
grid-row: 1;
grid-column: 1;
}
.TopSecThought .ThoughtBlock .message01 {
grid-row: 2;
grid-column: 1;
}
.TopSecThought .ThoughtBlock .secImg {
grid-row: span 2;
grid-column: 2;
}
.TopSecThought .ThoughtBlock .message02 {
grid-row: 3;
grid-column: span 2;
}
@media only screen and (max-width: 800px) {
.TopSecThought .ThoughtBlock {
display: grid;
}
.TopSecThought .ThoughtBlock .HBox {
grid-row: 1;
grid-column: span 2;
}
.TopSecThought .ThoughtBlock .message01 {
grid-row: 2;
grid-column: 1;
}
.TopSecThought .ThoughtBlock .secImg {
grid-row: 2;
grid-column: 2;
}
.TopSecThought .ThoughtBlock .message02 {
grid-row: 3;
grid-column: span 2;
}
}
@media only screen and (max-width: 600px) {
.TopSecThought .ThoughtBlock {
display: grid;
}
.TopSecThought .ThoughtBlock .HBox {
grid-row: 1;
grid-column: 1;
}
.TopSecThought .ThoughtBlock .message01 {
grid-row: 3;
grid-column: 1;
}
.TopSecThought .ThoughtBlock .secImg {
grid-row: 2;
grid-column: 1;
}
.TopSecThought .ThoughtBlock .message02 {
grid-row: 4;
grid-column: 1;
}
}
.ServiceBlock {
display: flex;
gap: 30px;
margin: 30px auto;
}
.ServiceBlock .service {
background-color: #076baf;
color: #fff;
overflow: hidden;
text-align: center;
padding: 15px;
margin-bottom: 15px;
flex: 1;
}
.ServiceBlock .service:not(.started):nth-child(1) {
transform: translate(0, 20%);
}
.ServiceBlock .service:not(.started):nth-child(2) {
transform: translate(0, 40%);
}
.ServiceBlock .service:not(.started):nth-child(3) {
transform: translate(0, 60%);
}
.ServiceBlock .service a {
color: #fff;
}
.ServiceBlock .service p.num-icon {
font-size: 24px;
font-weight: bold;
position: relative;
line-height: 1;
padding-top: 35px;
}
.ServiceBlock .service p.num-icon:before {
content: "";
display: block;
width: 60px;
height: 35px;
margin: auto;
background: url(//noith.co.jp/wp-content/themes/noith2026/img/num-icon.svg);
position: absolute;
top: 0;
left: 0;
right: 0;
}
.ServiceBlock .service ul.ServiceList {
list-style: none;
text-align: left;
padding: 0;
display: inline-block;
}
.ServiceBlock .service ul.ServiceList li {
margin: 1rem auto;
padding-left: 20px;
position: relative;
}
.ServiceBlock .service ul.ServiceList li:before {
content: "";
display: block;
width: 14px;
height: 14px;
border: 1px solid;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
.ServiceBlock .service ul.ServiceList li:hover:after {
content: "";
display: block;
width: 10px;
height: 18px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
position: absolute;
top: -10px;
bottom: 0;
left: 4px;
margin: auto;
}
@media only screen and (max-width: 768px) {
.ServiceBlock {
gap: 15px;
}
}
@media only screen and (max-width: 640px) {
.ServiceBlock {
flex-wrap: wrap;
}
.ServiceBlock .service {
flex: unset;
width: 100%;
}
}
.TopSecFeature {
color: #fff;
background-image: url(//noith.co.jp/wp-content/themes/noith2026/img/feature.jpg);
background-size: cover;
background-position: center 60%;
border-radius: 0;
padding: 50px 0;
}
.TopSecFeature::before {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.TopSecOperation {
padding: 50px 0;
}
.TopSecOperation .operationBlock {
display: grid;
grid-template-columns: 4fr 5fr;
}
.TopSecOperation .operationBlock .HBox {
grid-row: 1;
grid-column: 1;
}
.TopSecOperation .operationBlock .message01 {
grid-row: 2;
grid-column: 1;
}
.TopSecOperation .operationBlock .secImg {
grid-row: span 2;
grid-column: 2;
}
.TopSecOperation .operationBlock .message02 {
grid-row: 3;
grid-column: span 2;
}
@media only screen and (max-width: 860px) {
.TopSecOperation .operationBlock {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 760px) {
.TopSecOperation .operationBlock .HBox {
grid-row: 1;
grid-column: span 2;
}
.TopSecOperation .operationBlock .message01 {
grid-row: 2;
grid-column: 1;
}
.TopSecOperation .operationBlock .secImg {
grid-row: 2;
grid-column: 2;
}
.TopSecOperation .operationBlock .message02 {
grid-row: 3;
grid-column: span 2;
}
}
@media only screen and (max-width: 640px) {
.TopSecOperation .operationBlock {
grid-template-columns: 1fr;
}
.TopSecOperation .operationBlock .HBox {
grid-row: 1;
grid-column: 1;
}
.TopSecOperation .operationBlock .message01 {
grid-row: 3;
grid-column: 1;
}
.TopSecOperation .operationBlock .secImg {
grid-row: 2;
grid-column: 1;
}
.TopSecOperation .operationBlock .message02 {
grid-row: 4;
grid-column: 1;
}
}
.archive-category-links {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: flex-start;
margin: 50px auto;
}
.archive-category-links .archive-category-link {
display: block;
width: calc(33.3% - 10px);
text-align: center;
color: #fff;
padding: 10px;
}
.archive-category-links .archive-category-link:hover {
color: #fff;
}
.archive-category-links .archive-category-link.seo-taisaku {
background: #076BAF;
}
.archive-category-links .archive-category-link.homepage {
background: #00ad18;
}
.archive-category-links .archive-category-link.wordpress-customize {
background: #ef807d;
}
.archive-category-links .archive-category-link.net-shop {
background: #b30000;
}
.archive-category-links .archive-category-link.maintenance {
background: #F15A24;
}
.archive-category-links .archive-category-link .site-move {
background: #212529;
}
.columnBlock {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.columnBlock .columnItem {
width: calc(33.3% - 20px);
box-shadow: 0 0 5px #ababab;
padding: 5px;
box-sizing: border-box;
border-radius: 6px;
}
.columnBlock .columnItem .column_img img {
aspect-ratio: 16/9;
}
.columnBlock .columnItem .column_img span.column_term {
position: absolute;
top: 0;
left: 0;
padding: 2px 5px;
color: #fff;
}
.columnBlock .columnItem .column_img span.column_term.seo-taisaku {
background: #076BAF;
}
.columnBlock .columnItem .column_img span.column_term.homepage {
background: #00ad18;
}
.columnBlock .columnItem .column_img span.column_term.wordpress-customize {
background: #ef807d;
}
.columnBlock .columnItem .column_img span.column_term.net-shop {
background: #b30000;
}
.columnBlock .columnItem .column_img span.column_term.maintenance {
background: #F15A24;
}
.columnBlock .columnItem .column_img span.column_term .site-move {
background: #212529;
}
@media only screen and (max-width: 768px) {
.columnBlock .columnItem {
width: calc(50% - 15px);
}
}
a.archive-btn {
display: block;
width: 80%;
max-width: 210px;
border: 2px solid;
color: #fff;
background: #076baf;
padding: 15px;
text-align: center;
margin: 30px auto;
}