/*
Theme Name: kyoei1st-theme
Author: C3
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.0
Version: 1.0
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
@media(min-width: 782px){
	.blocks-alternate > .wp-block-columns:nth-child(even){
		flex-direction: row-reverse;
	}
}
.footer-nav a{
	text-decoration: none;
}
@media(min-width: 782px){
	.link-contents-area > .wp-block-column:not(:last-of-type) {
	    border-right: 1px solid #4C72D1;
	}
}
span.icon-next {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 9999px;
    border: 1px solid;
    position: relative;
}
span.icon-next::before {
    content: "";
    width: 24px;
    height: 8px;
    display: block;
    border-bottom: 1px solid;
    border-right: 1px solid;
    /* transform: skew(60deg, 0deg); */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: skew(50deg, 0deg) translate(-50%, -50%);
    transform-origin: center center;
}
.top-topics .category-information {
    display: none;
}
.top-links{
    position: relative;
}
.top-links__fixed{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0!important;
}
.top-links__menu{
    padding: 20px;
}
.top-links__submenu{
    margin: 0;
    padding: 0;
  display: grid;
  grid-template-rows: 0fr!important;
  transition: grid-template-rows 0.5s ease-out;
}
.top-links__submenu > div{
    overflow: hidden;
}
.top-links:hover .top-links__submenu{
  grid-template-rows: 1fr!important;
}
.top-links__button{
    position: relative;
}
.top-links__button::after {
    content: "";
    width: 40px;
    height: 12px;
    border: 1px solid;
    border-left: none;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%) skew(50deg, 0);
    border-top: none;
}
.top-links__button > div:hover{
    background: rgba(255, 255, 255, .2);
}
.box-link {
    overflow: hidden;
    position: relative;
    transition: background .3s, color .3s;
}
.box-link .box-link__target a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /* color: transparent !important; */
}
.box-link:hover{
	background: #005bb6;
	color: #fff;
}
.top-links .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, .2) !important;
}
.top-topics a{
    text-decoration: none;
}
.top-topics a:hover{
    text-decoration: underline;
}
.footer-nav ul li{
    list-style: none;
    padding: 0.25em;
}
.footer-nav .wp-block-list{
    padding: 0;
}
.footer-nav a {
    text-decoration: none;
}
.footer-nav > ul > li > a{
    display: inline-block;
    margin: 0.5em 0;
}
.heading-icon {
    padding-left: 2em;
    position: relative;
}
.heading-icon::before {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    aspect-ratio: 1 / 1;
    background: url(assets/images/icon-heading.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%);
}

/* デフォルトのブレークポイント無効化. */
@media (min-width: 600px) {
  /* メニューを非表示. */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  /* Openボタン（ハンバーガーボタン）を表示. */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* 新しいブレークポイント設定. */
@media (min-width: 1024px) { /* ※ここの数値を設定したい値に変更する. */
  /* メニューを表示. */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    background-color: inherit;
    display: block;
    position: relative;
    width: 100%;
    z-index: auto;
  }
  /* Openボタン（ハンバーガーボタン）を非表示. */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
}

.n2-ss-slide-background img{
    transform: scale(1.1);
}
.n2-ss-slide-background.test img{
  animation: 6s linear 0s forwards sun-rise;
}
.n2-ss-slider .n2-ss-layer[data-sstype=slide] {
    height: calc(92vh - 42px)!important;
    min-height: calc(92vh - 42px)!important;
}
div#n2-ss-2 .n2-ss-slider-3::after{
    content: "";
    display: block!important;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  /*
    background-image: radial-gradient(rgba(0, 82, 156, 0.9), transparent 60%), radial-gradient(rgba(0, 82, 156, 0.9), transparent 60%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
*/
        background-image: radial-gradient(rgba(0, 82, 156, 0.2), transparent 60%), radial-gradient(rgba(0, 82, 156, 0.2), transparent 60%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    z-index: 12;
}
.slider::before{
    content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  /*background: rgb(53,118,194);*/
}
.n2-ss-slider .n2-ss-layer[data-sstype=content] {
    /*min-height: 72%!important;*/
}
@media(min-width: 700px){
    .n2-ss-slider .n2-ss-layer[data-sstype=content] {
        /*min-height: 68%!important;*/
    }
}
#n2-ss-2 .slider-text>div{
    display: flex;
    flex-direction: column;
    justify-content: center!important;
    position: absolute;
    width: 94%;
    height: 66%;
    top: 46%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
-moz-text-shadow: 0px 0px 1.2em rgba(24, 66, 115, 1);
-webkit-text-shadow: 0px 0px 1.2em rgba(24, 66, 115, 1);
-ms-text-shadow: 0px 0px 1.2em rgba(24, 66, 115, 1);
text-shadow: 0px 0px 1.2em rgba(24, 66, 115, 1),0px 0px 1.2em rgba(24, 66, 115, 1),0px 0px 1.2em rgba(24, 66, 115, 1),0px 0px 1.2em rgba(24, 66, 115, 1)!important;

z-index: 3;
}
@media(min-width: 700px){
    #n2-ss-2 .slider-text>div{
        width: 80%;
        max-width:1180px;
    }
}
#n2-ss-3 p {
    font-family: 'Noto Sans JP';
    font-size: clamp(1.25rem, 0.599rem + 3.26vw, 3rem);
    letter-spacing: 0.05em;
    font-weight: 700;
    line-height: 1.5;
  /*text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4), 0.065em 0.065em 0px rgba(0, 0, 0, 0.4)!important;*/
}
.hero-text-en p{
    font-size: clamp(3.75rem, 1.369rem + 11.9vw, 10rem)!important;
    font-weight: 900;
}
.n2-ss-section-main-content{
    align-items: flex-start!important;
}
@keyframes sun-rise {
  from {
    /* ビューポートを通過して太陽を下に押し下げる */
    transform: scale(1.1);
  }
  to {
    /* 太陽を既定の位置に戻す */
    transform: scale(1);
  }
}
.button-rotate a{
	transition: background 0.3s;
}
.button-rotate a strong{
	display: block;
	overflow: hidden; /* 1つ目の影を隠す */
	color: transparent; /* テキスト本体は透明にする */
  /*
   影の設定
   1つ目：Y方向の位置にマイナスに設定してテキスト本体の上に配置、ぼかしなし
   2つ目：位置はテキスト本体と同じ、ぼかしなし
  */
	text-shadow: 0 -1.5em 0 #fff, 0 0 0 #000;
	transition: text-shadow 0.3s;
}
.button-rotate a:hover{
	background: #005bb6!important;
}
.button-rotate a:hover strong{
	text-shadow: 0 0 0 #fff, 0 1.5em 0 #000; /* 2つの影の位置を上方向に1.5emずつずらす */
}
#modal-3{
	width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    position: fixed;
    left: 0;
	margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.a-fadein-upper{
	background-color:transparent!important;
	transition: background-color .5s;
}
.a-fadein-upper.active{
	background-color:#00365e!important;
}
.text-move-l {
    animation: text-move-l linear both;
    animation-timeline: view(block 85% 0%);
    text-align: center;
    margin: 0 auto;
}
@keyframes text-move-l {
	0% {
	    transform: translateX(-10%);
	}
	100% {
	    transform: translateX(0);
	}
}
.text-move-r {
    animation: text-move-r linear both;
    animation-timeline: view(block 70% 0%);
    text-align: center;
    margin: 0 auto;
}
@keyframes text-move-r {
	0% {
	    transform: translateX(10%);
	}
	100% {
	    transform: translateX(0);
	}
}
.show-scroll {
    animation: show-scroll linear both;
    animation-timeline: view(block 180% 2%);
  /*animation-range: block 50% block 10%;  開始: 要素がビューポートに完全に入った時、終了: ビューポートの真ん中 */
}
@keyframes show-scroll {
	0% {
		opacity:0;
	    transform: scaleX(0.8);
	}
	100% {
		opacity:1;
	    transform: scaleX(1);
	}
}
.scale-logo {
    animation: scale-logo linear both;
    animation-timeline: view(block -50% 90%);
    text-align: center;
    margin: 0 auto;
	transform-origin:left;
}
@keyframes scale-logo {
	0% {
	    transform: scale(1);
	    opacity:1;
	}
	15%{
		opacity:1;
	}
	30% {
	    transform: scale(0);
		opacity:0;
	}
}
.header-logo{
	animation: opacity-logo2 .2s forwards,opacity-logo linear both;
}
@keyframes opacity-logo2 {
	0% {
	    opacity:0;
	}
	100%{
		opacity:1;
	}
}
.home .header-logo.show{
    animation: opacity-logo linear both;
    animation-timeline: view(block -50% 130%);
}
@keyframes opacity-logo {
	0% {
	    opacity:0;
	}
	30% {
	    opacity:1;
	}
	100%{
		opacity:1;
	}
}
header{
	position:fixed;
	top:12px;
	left:0px;
	width:100%;
	z-index:9999;
}

header > div{
	background:rgb(255 255 255 /.5);
	backdrop-filter: blur(20px);
	box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.2);
    animation: header linear both;
    animation-timeline: view(block -50% 130%);
}
ul.wp-block-page-list {
    list-style: none;
    padding: 0;
}
ul.wp-block-page-list li{
	margin:0.5em;
}
ul.wp-block-page-list li a{
	padding:0.5em 0;
}
ul.wp-block-page-list li a {
    padding: 0.5em;
    text-decoration: none;
    display: block;
}
ul.wp-block-page-list .current-menu-item a {
    background-color: var(--wp--preset--color--accent-2, #f2f2f2);
    color: var(--wp--preset--color--custom-color-1,#333);
}
.category-nav,
.category-nav .wp-block-categories-list{
	display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    width: fit-content;
    justify-content: center;
    margin: 0 auto;
    gap: 8px;
}
.category-nav li{
	margin:0;
}
.category-nav a{
    width: 200px;
	border-radius:5px;
	color:var(--wp--preset--color--accent-4);
    display: block;
	font-weight:700;
	line-height:1.4;
    text-align: center;
	text-decoration:none;
    padding: 1em;
	border: 2px solid var(--wp--preset--color--accent-4);
}
.category-nav .current-cat a{
	background:var(--wp--preset--color--accent-4) !important;
	color:#fff
}
.sidenav-sticky{
	position:sticky;
	top:120px;
}
.heading-icon span{
	display:block;
	font-size: calc(1em / 2);
	margin-bottom:0.25em;
}
:where(.wp-site-blocks *:focus){
	outline-width:2px;
	outline-style:solid
}
footer.wp-block-template-part{
	margin-top:0;
}
nav.wp-block-query-pagination{
	padding: 20px;
	margin-top: 40px;
}
@keyframes header {
	0% {
		background:transparent;
		box-shadow:none;
	}
	30% {
		background:rgb(255 255 255 /.5);
		box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.2);
	}
	100%{
		background:rgb(255 255 255 /.5);
		box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.2);
	}
}
.header-inner.bg{
	box-shadow: none;
	animation: header-inner2 0.2s linear forwards;
}
@keyframes header-inner2 {
	0% {
		background:transparent;
	}
	100% {
		background:rgb(255 255 255 /1);
	}
}
.main-bg{
	height: fit-content;
}
.main-bg > video {
	position: fixed!important;
}
a:focus-visible {
	outline: none;
}
a:focus, button:focus {
	outline: none;
}
.company-nav a{
	transition: background .3s;
}
.company-nav a:hover{
	background: var(--wp--preset--color--accent-4) !important;
	color: #fff!important;
}
/* ギャラリーのループスライド */
.stk-slide-gallery {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 !important;
max-width:100vw!important;
}

.stk-slide-gallery .wp-block-gallery {
  flex-wrap: nowrap;
  animation: loop-slide 60s infinite linear 1s both;
}

.stk-slide-gallery .wp-block-image {
  width: 30vw !important;
}
.loop_text_wrap{
  overflow: hidden;
}
.wrapper {
  display: flex;
  width: 100%;
margin-left: calc(-50vw + 50%)!important;
margin-right: calc(-50vw + 50%)!important;
}

.loop_text {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 10vw;
    font-weight: bold;
    overflow: hidden;
    padding-left: 20px;
    margin: 0;
    line-height: 1;
    color: rgba(255,255,255,.2);
    text-transform: uppercase;
}

.loop_text:nth-child(odd) {
  animation: loop 140s -70s linear infinite;
}

.loop_text:nth-child(even) {
  animation: loop2 140s linear infinite;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media(max-width: 782px){
	.font-size-sp{
		font-size: 16px!important;
	}
	.font-size-l-sp{
		font-size: 20px!important;
	}
	.sidenav-sticky{
		border: none!important;
	}
}
@media(min-width: 782px){
	.side-r{
	    margin-right: -5vw!important;
	}
}
.technology-link a::before {
    content: "";
    background: #005bb6;
    width: 100%;
    height: 100%;
    /* z-index: -1; */
    display: block;
    mix-blend-mode: overlay;
	opacity:0;
	transition:opacity .3s;
}
.technology-link a:hover::before {
	opacity:.9;
}
/* max-mega-menu */
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 p {
    margin-bottom: 10px;
    margin-top: 10px;
}
#mega-menu-wrap-max_mega_menu_1{
	width:100%;
}
.home #mega-menu-wrap-max_mega_menu_1{
	background: transparent;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 {
    display: flex;
    justify-content: space-around;
	height: 100%;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link{
	display: flex;
	align-items: center;
	height:100%;
	line-height: inherit;
	padding-bottom: 0;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
    display: flex;
    min-height: 140px;
    align-items: center;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{
	width:100%;
}
#mega-menu-max_mega_menu_2{
 	margin-left: calc(50% - 50vw)!important;
    margin-right: calc(50% - 50vw)!important;
	width:100vw!important;
    max-width: 100vw!important;
	top:-12px!important;
}
@media only screen and (max-width: 100vw) {
    #mega-menu-wrap-max_mega_menu_2 .mega-menu-toggle + #mega-menu-max_mega_menu_2 {
        left: -100vw;
		opacity:0;
		transition:opacity 0.3s, left 10ms 200ms, visibility 200ms;
    }
    #mega-menu-wrap-max_mega_menu_2 .mega-menu-toggle.mega-menu-open + #mega-menu-max_mega_menu_2 {
		opacity:1;
		transition:opacity 0.3s, left 10ms, visibility 200ms;
	}
}
#mega-menu-wrap-max_mega_menu_2 .mega-menu-toggle.mega-menu-open:after{
	content:unset;
}
/*
#mega-menu-wrap-max_mega_menu_2 .mega-menu-toggle.mega-menu-open {
	position:relative;
	z-index:calc(infinity);
    padding: 20px !important;
    background: #fff !important;
    border: 1px solid var(--wp--preset--color--accent-4, #333)!important;
	border-radius:8px!important;
}
*/
#mega-menu-wrap-max_mega_menu_2 .mega-menu-toggle .mega-toggle-block-1:before {
    content: "";
    background-image: url(https://making0707.c-3.jp/wp-content/uploads/2025/12/humberger-nav.png);
    width: 1em;
    height: 1em;
    background-size: 50% 75%;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
}
#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 > li.mega-menu-megamenu > ul.mega-sub-menu{
	padding: 0;
}
#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
	display:none;
}
#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > p {
    display: none;
}
#mega-menu-wrap-max_mega_menu_2 .mega-close {
	background-color:#fff!important;
    border: 1px solid var(--wp--preset--color--accent-4, #333)!important;
	border-radius:8px!important;
    padding: 12px !important;
}
#mega-menu-wrap-max_mega_menu_2 .mega-menu-toggle ~ button.mega-close {
    right: unset;
    left: unset;
}
/* max-mega-menu */