html {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ededeb;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 400;
    position: relative;
    left: 0;
    -webkit-text-size-adjust: 100%;
    /* iphone横向き 文字拡大防止 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.is-loading {
	overflow: hidden;
	height: 100vh;
}
img {
    display: block;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
a {
    text-decoration: none;
    color: #000;
    transition: all .3s;
}
a:hover {
    filter: brightness(1.1);
}
p {
    font-size: min(1.2vw, 16px);
    line-height: 2;
}
/*最新のsafari用*/
::-webkit-full-page-media,
:future,
:root .AAA {}
/*古いsafari用*/
@media screen and (-webkit-min-device-pixel-ratio:0) {

    ::i-block-chrome,
    .AAA {}
}
:root {
    --blue: #07569e;
	--light_blue: #0658bc;
    --navy: #001d3f;
    --gray: #d6d6d6;
    --grad_navy: linear-gradient(135deg, #07569e 0%, #001d3f 100%);
    --red: #DF1000;
}

/*==================================================================================
ローディング
==================================================================================*/
.loading {
	display: none;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background: var(--blue);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 1;
	visibility: visible;
	z-index: 99999;
}
.loading.show {
	display: flex;
}
.loading.hidden {
	background: #ededeb;
	opacity: 0;
	visibility: hidden;
	transition: all .6s;
	z-index: -99999;
}
.loading img {
	width: 30%;
	margin: 0 auto 20px;
}
.loading .loader {
	width: 80%;
	max-width: 460px;
	margin: auto;
}
.loading .loader span.bar {
	display: inline-block;
	width: calc(100% - 3.5em);
	height: 6px;
	border-radius: 20px;
	background: rgba(0,0,0,0.1);
	position: relative;
}
.loading .loader span.bar::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background: rgba(255,255,255,0.5);
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: left center;
	animation: loader 1.2s linear;
}
@keyframes loader {
	0% {transform: scaleX(0);}
	100% {transform: scaleX(1);}
}

/*==================================================================================
最背面ノイズ
==================================================================================*/
.noise-overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.25;
    /* ノイズの強さを調整 */
}
#particle-canvas {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

/*==================================================================================
header
==================================================================================*/
header {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 0 !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
	transition: all .6s;
}
header.on {
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px); /* Safari用 */
	mask-image: linear-gradient(to bottom, rgba(255,255,255,1.0) 0%, rgba(255,255,255,1.0) 80%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,1.0) 0%, rgba(255,255,255,1.0) 80%, transparent 100%);
}
header .container {
    padding: 0 40px;
}
header .logo {
    display: block;
    width: 40px;
}
/* メニュー -----------------------*/
nav.gnav ul li {
    margin-left: 2.5em;
}
nav.gnav ul li a {
    display: block;
}
nav.gnav ul li a:hover {
    color: var(--blue);
}

/*==================================================================================
共通
==================================================================================*/
/* レイアウト */
main {
    position: relative;
    z-index: 3;
}
section {
    padding: 10vh 0 !important;
    position: relative;
}
.container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 max(5vw, 40px);
    margin: auto;
	position: relative;
}
.max1600 {
    max-width: 1600px;
}
.max1400 {
    max-width: 1400px;
}
.max1200 {
    max-width: 1200px;
}
.bg_mosaic {
	margin: -10vh 0;
	padding: 10vh 0;
	position: relative;
}
.bg_mosaic::before {
	content: "";
	width: 100%;
	height: 100%;
	/*background: rgba(255,255,255,0.05);*/
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px); /* Safari用 */
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,1.0) 10%, rgba(255,255,255,1.0) 90%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,1.0) 10%, rgba(255,255,255,1.0) 90%, transparent 100%);
	position: absolute;
	top: 0;
	left: 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.row.align_center {
    align-items: center;
}
.row.align_end {
    align-items: flex-end;
}
.row.align_start {
    align-items: flex-start
}
.row.just_center {
    justify-content: center;
}
.row.just_start {
    justify-content: flex-start;
}
.row.just_end {
    justify-content: flex-end;
}
.col3 {
	width: 32%;
}
.col3_2 {
	width: 64%;
}
.col2 {
    width: 48%;
}
.col4 {
    width: 24%;
}
.mb_10 {
    margin-bottom: 10px;
}
.mb_20 {
    margin-bottom: 20px;
}
.mb_30 {
    margin-bottom: 30px;
}
.mb_60 {
    margin-bottom: 60px;
}
.mb_120 {
    margin-bottom: 120px;
}
.mb_30vh {
    margin-bottom: 30vh;
}

hr {
	border: none;
	border-bottom: 1px #cfcfcf solid;
}
.wrap {
    display: inline-block;
}
.anker {
    margin-top: -20vh;
    padding-top: 20vh;
}
.z2 {
    position: relative;
    z-index: 2;
}

/* フォント */
h2 span.font_12,
.bf_dist span {
    display: block;
    padding-left: 2em;
    line-height: 1;
    position: relative;
}
h2 span.font_12::before,
.bf_dist span::before {
    content: "";
    display: block;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: var(--blue);
    position: absolute;
    top: .2em;
    left: 0;
}
h2.plain span.font_12 {
    padding-left: 0;
}
h2.plain span.font_12::before {
    display: none;
}
.font_12 {
    font-size: min(1vw, 12px);
}
.font_14 {
    font-size: min(1.2vw, 14px);
}
.font_16 {
    font-size: min(1.3vw, 16px);
}
.font_20 {
    font-size: min(1.6vw, 20px);
}
.font_24 {
	font-size: min(1.8vw,24px);
}
.font_30 {
	font-size: min(2.4vw,30px);
}
.font_40 {
    font-size: min(3vw, 40px);
}
.font_60 {
	font-size: min(4vw,60px);
}
.font_70 {
    font-size: min(5vw, 70px);
}
.font_100 {
    font-size: min(7vw, 100px);
}
.font_120 {
    font-size: min(8vw, 120px);
}
.medium {
    font-weight: 500;
}
.bold {
    font-weight: 700;
}
.eng {
    font-family: avenir-lt-pro, sans-serif;
    font-weight: 300;
    font-style: italic;
}
.eng.medium {
    font-weight: 500;
}
.eng.bold {
    font-weight: 700;
}
.eng.black {
    font-weight: 900;
}
.txt_center {
    text-align: center;
}
.txt_right {
	text-align: right;
}
.line1 {
    line-height: 1;
}
.line1_2 {
    line-height: 1.2;
}
.line1_4 {
    line-height: 1.4;
}
.line1_6 {
    line-height: 1.6;
}
.line1_8 {
    line-height: 1.8;
}
.line2_2 {
    line-height: 2.2;
}
.grad_txt {
    display: inline-block;
	padding-right: .2em;
    background: var(--grad_navy);
    background-clip: text;
    -webkit-background-clip: text;
}
.grad_txt.grad_green {
	background: linear-gradient(135deg, rgb(0,155,144,0.3) 0%, rgb(0,94,180,0.6) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}
.grad_txt h2,
.grad_txt h3,
.grad_txt p,
.grad_txt span {
    color: transparent;
}
.grad_txt span.sub {
    color: var(--navy);
    opacity: .5;
}
.blue {
	color: var(--blue);
}
.navy {
	color: var(--navy);
}
.gray {
	color: #999;
}
.white {
	color: #fff;
}
.red {
    color: var(--red);
}
.indent {
    text-indent: -1em;
    padding-left: 1em;
}

/* ボタン ------------------*/
.btn {
	display: inline-block;
	padding: 1.2em 5em;
	border-radius: 50px;
	background: var(--grad_navy);
	color: #fff;
	letter-spacing: 0.02em;
	box-shadow: inset 0 0 10px rgba(255,255,255,0.5), 5px 5px 10px rgba(0,29,63,0.20);
	position: relative;
}
.btn.min {
    padding: .8em 3.5em;
}
.btn.second {
    background: linear-gradient(120deg, rgba(0,29,63,0.05) 0%, rgba(240,241,242,0.70) 100%);
    color: #000;
}
.btn::after {
	content: "";
	display: block;
	width: .8em;
	height: .8em;
	background: url("../img/icon_arrow_wh.png") center center / contain no-repeat;
	position: absolute;
	top: 50%;
	right: 1.6em;
	opacity: 0;
	transform: translate(-1em,-50%);
}
.btn.min::after {
	right: 1em;
}
.btn.second::after {
    background-image: url("../img/icon_arrow_bl.png");
}
.btn.outside::after {
    background-image: url("../img/icon_arrow_outside.png");
	transform: translate(-1em,-40%);
}
.btn:hover {
	animation: btn .4s;
	filter: brightness(1.3);
}
@keyframes btn {
	0% {transform: scale(1,1);}
	33.33% {transform: scale(1.1,1);}
	66.66% {transform: scale(1,1.2);}
	100% {transform: scale(1,1);}
}
.btn:hover::after {
	transition: all .3s .2s;
	opacity: 1;
	transform: translate(0,-50%);
}
.btn.outside:hover::after {
	transform: translate(-0.5em,-60%);
}

.link {
	text-decoration: underline;
	color: var(--blue);
}

/* アニメーション -----------*/
.yay {
    opacity: 0;
    transform: translate(0,2px);
    transition: all 1s;
}
.yay.fadeinup {
    transform: translate(0,20px);
}
.yay.fadeinup.second.on {
    animation: yay_up_2nd 1s;
}
@keyframes yay_up_2nd {
    0% {opacity: 0;transform: translate(0,20px);}
    20% {opacity: 0;transform: translate(0,20px);}
    100% {opacity: 1;transform: translate(0,0);}
}
.yay.fadeinup.third.on {
    animation: yay_up_3rd 1s;
}
@keyframes yay_up_3rd {
    0% {opacity: 0;transform: translate(0,20px);}
    40% {opacity: 0;transform: translate(0,20px);}
    100% {opacity: 1;transform: translate(0,0);}
}
.yay.fadeinup.forth.on {
    animation: yay_up_4th 1.2s;
}
@keyframes yay_up_4th {
    0% {opacity: 0;transform: translate(0,20px);}
    42.85% {opacity: 0;transform: translate(0,20px);}
    100% {opacity: 1;transform: translate(0,0);}
}
.yay.fadeinleft {
    transform: translate(-20px,0);
}
.yay.fadeinleft.forth.on {
    animation: yay_left_4th 1.2s;
}
@keyframes yay_left_4th {
    0% {opacity: 0;transform: translate(-20px,0);}
    42.85% {opacity: 0;transform: translate(-20px,0);}
    100% {opacity: 1;transform: translate(0,0);}
}

.yay.on {
    transform: translate(0,0);
    opacity: 1;
}

/*==================================================================================
INDEX
==================================================================================*/
section#main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 0 10vh !important;
}
section#main .container {
    transition: opacity 0.1s linear, transform 0.1s linear;
    will-change: opacity, transform;
}
h1 {
    width: 100%;
    font-size: min(6.4vw, 100px);
    white-space: nowrap;
}
h1 #prefix-text {
    user-select: none;
    position: relative;
    top: -.4em;
}
h1 #suffix-text {
    user-select: none;
    position: relative;
    top: -.4em;
}
.fade-transition {
    opacity: 1;
	transform: translateX(0);
    transition: opacity .3s, transform .5s;
}
.fade-out{
    opacity: 0;
}
h1 #prefix-text.fade-transition.fade-out {
	transform: translateX(-.3em);
}
h1 #suffix-text.fade-transition.fade-out{
	transform: translateX(.3em);
}
h1 .particle-word-container {
    display: inline-block;
    margin: 0 .05em 0 .2em;
    position: relative;
}
h1 #particle-text-placeholder {
    display: inline-block;
    font-size: min(14vw, 200px);
    color: transparent;
    user-select: none;
    pointer-events: none;
    transition: width 0.5s;
}
h1 .h1_sub {
    display: block;
    width: 100%;
    user-select: none;
    margin-top: .5em;
}
/* スクロールインジケーター */
.scroll-indicator {
    display: flex;
	justify-content: center;
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
}
.scroll-indicator span {
    display: inline-block;
	padding-bottom: 1.4em;
	position: relative;
}
.scroll-indicator span::after {
    content: "";
	display: block;
	width: 1em;
	height: 1em;
	background: url("../img/icon_arrow_down.png") center center / contain no-repeat;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
    animation: mainArrow 1s infinite;
}
@keyframes mainArrow {
    0% {transform: translateX(-50%) translateY(-.2em); opacity: 0;}
    100% {transform: translateX(-50%) translateY(.4em); opacity: 1;}
}
/* NEWS --------------------------*/
section#main .news {
    padding: 20px 30px;
	border-radius: 10px;
	border: 1px #fff solid;
    box-shadow: inset 0 0 10px #fff, inset 0 0 10px #fff, 0 0 10px rgba(0,0,0,0.05);
    position: absolute;
    bottom: 6rem;
    left: max(5vw, 40px);
}
section#main .news.hidden {
    display: none;
}
section#main .news .ttl {
    display: inline-block;
    margin-right: 1.2em;
    padding-right: 1.2em;
    border-right: 1px #ccc solid;
}
section#main .news a .eng {
    display: inline-block;
    margin-right: 1em;
}
section#main .news a .cont {
    text-decoration: underline;
}
section#main .news .btn_close {
    display: block;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px #ccc solid;
    background: #999 url("../img/icon_close.png") center center / 40% no-repeat;
    position: absolute;
    top: -10px;
    left: -10px;
    cursor: pointer;
}

/* 事業内容 -----------------------------------------------------------------*/
section#top_service {
    padding-top: 30vh !important;
}
section#top_service ul {
    border-top: 1px var(--gray) solid;
}
section#top_service ul li a {
    padding: 60px min(7vw, 100px) 60px 0;
	position: relative;
}
section#top_service ul li a:hover {
	filter: brightness(1.5);
}
section#top_service ul li a::before {
    content: "";
	display: block;
	width: 4em;
	height: 4em;
	border-radius: 50%;
	border: 1px #fff solid;
    box-shadow: inset 0 0 10px #fff, inset 0 0 10px #fff, 0 0 10px rgba(0,0,0,0.05);
	position: absolute;
	top: 50%;
	right: 0;
    transform: translateY(-50%);
	transition: all .3s;
	opacity: 0;
}
section#top_service ul li a:hover::before {
	opacity: 1;
	filter: brightness(1.3);
	animation: btn_circle 1s;
}
@keyframes btn_circle {
	0% {opacity: 0; transform: translateY(-50%) scale(0);}
	30%,100% {opacity: 1; transform: translateY(-50%) scale(1);}
}
section#top_service ul li a::after {
    content: "";
	display: block;
	width: 4em;
	height: 4em;
	background: url("../img/icon_arrow.png") center center / 1em no-repeat;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
	transform-origin: left center;
	transition: all .3s;
}
section#top_service ul li a:hover::after {
	background-image: url("../img/icon_arrow_bl.png");
	filter: brightness(.8);
    animation: btn_arrow 1s;
}
@keyframes btn_arrow {
	0%,20% {transform: translate(-1em,-50%); opacity: 0;}
	50%,100% {transform: translate(0,-50%); opacity: 1;}
}
section#top_service ul li a h3 {
	padding-left: min(5vw, 60px);
    position: relative;
}
section#top_service ul li a h3::before {
    content: "";
	display: block;
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--blue);
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}
section#top_service ul li a h3 span.eng {
    letter-spacing: -.04em;
}
section#top_service ul li a h3 + p {
    width: min(29vw,38%);
}
section#top_service ul li a .border {
	width: 100%;
	height: 1px;
    background: var(--gray);
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all .3s;
	transform-origin: left bottom;
}
section#top_service ul li a:hover .border {
	background-color: var(--blue);
    animation: btn_line 1s;
}
@keyframes btn_line {
	0% {transform: scaleX(0);}
	30%,100% {transform: scaleX(1);}
}

/* 制作フロー ---------------------------------------------------------------*/
section#top_flow {
	background: linear-gradient(to bottom, transparent 0%, rgba(190,200,206,0.50) 50%);
}
section#top_flow .sticky {
	position: sticky;
	bottom: 14vh;
	left: 0;
}
section#top_flow .slides {
	width: 55%;
}
section#top_flow .slides .slide_boad {
	padding: min(5vw,80px) 5vw min(4vw,60px);
	border-radius: 10px;
	background: rgba(255,255,255,0.3);
	backdrop-filter: blur(7px);
	position: relative;
}
section#top_flow .slides .slide_boad .grad_txt {
	position: absolute;
	top: -1.6vw;
	left: 5vw;
}
section#top_flow .slides .slide_boad h3 {
	letter-spacing: 0.05em;
}
section#top_flow .slides .slide_boad .icon {
	width: min(20%,80px);
	position: absolute;
	top: 50%;
	right: 20%;
	transform: translateY(-50%);
}
section#top_flow .slides .slide_boad .font_70 {
	opacity: .1;
	position: absolute;
	bottom: min(-2vw, -.6em);
	right: min(4vw,40px);
}

/* 制作実績 ------------------------------------------------------------------*/
section#top_works {
	background: linear-gradient(to bottom, rgba(190,200,206,0.50) 0%, transparent 50%);
}
section#top_works.second {
	background: none;
}
section#top_works .font_120 {
	opacity: .1;
}
section#top_works .switch_works {
	padding-top: 80px;
	position: relative;
}
section#top_works .switch_works input {
	display: none;
}
section#top_works .switch_works .cont {
	width: 100%;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 1vh;
	left: 0;
}
section#top_works .switch_works input:checked + .cont {
	transition: all .3s;
	opacity: 1;
	visibility: visible;
	position: relative;
	top: 0;
}
section#top_works .switch_works .boad {
	box-sizing: border-box;
	padding: 20px;
	border-radius: 10px;
	background: rgba(255,255,255,0.5);
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
	position: relative;
}
section#top_works .switch_works .boad h3.eng {
	position: absolute;
	top: 10px;
	right: 20px;
	opacity: .1;
}
section#top_works .switch_works .company h3.eng {
	color: var(--navy);
}
section#top_works .switch_works .education h3.eng {
	color: #423d00;
}
section#top_works .switch_works .public h3.eng {
	color: #00350b;
}
section#top_works .switch_works .work {
	display: inline-flex;
    justify-content: flex-start;
    align-items: center;
	margin: 0 .3em .6em 0;
	padding: .6em 1em;
}
section#top_works .switch_works .company .work {
	background: rgba(7,86,158,0.10);
}
section#top_works .switch_works .education .work {
	background: rgba(127,118,0,0.10);
}
section#top_works .switch_works .public .work {
	background: rgba(0,114,27,0.10);
}
section#top_works .switch_works .work span {
	display: inline-flex;
    justify-content: center;
    align-items: center;
	margin-right: .6em;
}
section#top_works span[class^="icon_"] {
	display: inline-flex;
    justify-content: center;
    align-items: center;
	padding: .2em .4em;
	border-radius: 5px;
	background: rgba(255,255,255,.7);
	margin-right: .3em!important;
}
section#top_works span.icon_else {
	background: #d8d9dc;
}
/* 切り替えタブ ---------------------------------*/
section#top_works .switch_works ul.tabs {
	position: absolute;
	top: 0;
	left: 0;
}
section#top_works .switch_works ul.tabs::before {
	content: "";
	display: block;
	width: 300px;
	height: 100%;
	box-sizing: border-box;
	border: 1px #fff solid;
	border-radius: 50px;
	background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.3) 100%);
	box-shadow: inset 0 0 10px rgba(255,255,255,1.0), 5px 5px 10px rgba(0,0,0,0.05);
	position: absolute;
	top: 0;
	left: 0;
}
section#top_works .switch_works ul.tabs::after {
	content: "";
	display: block;
	width: 92px;
	height: calc(100% - 8px);
	box-sizing: border-box;
	border: 1px rgba(255,255,255,0.8) solid;
	border-radius: 50px;
	background: linear-gradient(135deg, rgb(0,155,144,0.3) 0%, rgb(0,94,180,0.6) 100%);
	box-shadow: inset 0 0 8px rgba(255,255,255,1.0), inset 0 0 8px rgba(255,255,255,1.0), 0 0 8px rgba(0,0,0,0.1);
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translate(0,-50%);
	transition: all .3s;
	animation: tabs_select .6s;
}
section#top_works .switch_works ul.tabs.tb02::after {
	left: 104px;
	animation: tabs_select02 .6s;
}
section#top_works .switch_works ul.tabs.tb03::after {
	left: 204px;
	animation: tabs_select03 .6s;
}
@keyframes tabs_select {
	0% {transform: translate(0,-50%) scale(1,1);}
	33.33% {transform: translate(0,-50%) scale(1.2,1);}
	66.66% {transform: translate(0,-50%) scale(1,1.2);}
	100% {transform: translate(0,-50%) scale(1,1);}
}
@keyframes tabs_select02 {
	0% {transform: translate(0,-50%) scale(1,1);}
	33.33% {transform: translate(0,-50%) scale(1.2,1);}
	66.66% {transform: translate(0,-50%) scale(1,1.2);}
	100% {transform: translate(0,-50%) scale(1,1);}
}
@keyframes tabs_select03 {
	0% {transform: translate(0,-50%) scale(1,1);}
	33.33% {transform: translate(0,-50%) scale(1.2,1);}
	66.66% {transform: translate(0,-50%) scale(1,1.2);}
	100% {transform: translate(0,-50%) scale(1,1);}
}
section#top_works .switch_works ul.tabs li {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
}
section#top_works .switch_works ul.tabs li:nth-child(-n+3) {
	width: 100px;
}
section#top_works .switch_works ul.tabs li:nth-child(3) {
	margin-right: 20px;
}
section#top_works .switch_works ul.tabs li label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: all .6s;
}
section#top_works .switch_works ul.tabs li label.active {
	color: #fff;
}

/* 自社プロジェクト ------------------------------------------------------------------*/
section#top_projects .switch_projects {
	padding-top: 120px;
	position: relative;
}
section#top_projects .switch_projects input {
	display: none;
}
section#top_projects .switch_projects .cont {
	width: 100%;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 3vh;
	left: 0;
    z-index: 2;
}
section#top_projects .switch_projects input:checked + .cont {
	transition: all .6s;
	opacity: 1;
	visibility: visible;
	position: relative;
	top: 0;
}
section#top_projects .switch_projects ul.btns {
	padding: 12px 20px;
	border-bottom: 1px #cfcfcf solid;
}
section#top_projects .switch_projects .dragging　ul.btns {
	cursor: grabbing;
}
section#top_projects .switch_projects ul.btns li {
	margin-right: 6px;
}
section#top_projects .switch_projects ul.btns li span {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #d63a3a;
}
section#top_projects .switch_projects ul.btns li span.minimize {
	background-color: #ddaa1b;
}
section#top_projects .switch_projects ul.btns li span.maximize {
	background-color: #30b743;
}
section#top_projects .switch_projects ul.btns:hover li span {
	background: #d63a3a url("../img/icon_win_close.png") center center / 50% no-repeat;
}
section#top_projects .switch_projects ul.btns:hover li span.minimize {
	background: #ddaa1b url("../img/icon_win_mini.png") center center / 50% no-repeat;
}
section#top_projects .switch_projects ul.btns:hover li span.maximize {
	background: #30b743 url("../img/icon_win_max.png") center center / 50% no-repeat;
}
/* 説明ウィンドウ */
section#top_projects .switch_projects .sub_window {
	width: 25%;
	box-sizing: border-box;
	border-radius: 10px;
	background: linear-gradient(135deg, transparent 0%, rgba(235,240,242,0.5) 100%);
	box-shadow: inset 0 0 20px rgba(255,255,255,0.5), inset 0 0 20px rgba(255,255,255,0.5), 10px 30px 20px rgba(0,0,0,0.05);
	transition: all .3s;
}
section#top_projects .switch_projects .sub_window.off {
	opacity: 0;
}
section#top_projects .switch_projects .sub_window.min {
	opacity: 0;
	transform-origin: left top;
	animation: win_min 1s;
}
@keyframes win_min {
	0% {opacity: 1; transform: scale(1);}
	30% {opacity: 0; transform: scale(0);}
}
section#top_projects .switch_projects .sub_window.on {
	animation: yay_up_2nd .6s;
}
section#top_projects .switch_projects .sub_window .inner {
	padding: 20px 20px 40%;
}
/* サイトウィンドウ */
section#top_projects .switch_projects .main_window {
	width: 70%;
	box-sizing: border-box;
	border-radius: 10px;
	background: linear-gradient(135deg, transparent 0%, rgba(235,240,242,0.5) 100%);
	box-shadow: inset 0 0 20px rgba(255,255,255,0.5), inset 0 0 20px rgba(255,255,255,0.5), 10px 30px 20px rgba(0,0,0,0.05);
	overflow: hidden;
	position: relative;
}
section#top_projects .switch_projects .main_window.off {
	opacity: 0;
}
section#top_projects .switch_projects .main_window.min {
	opacity: 0;
	transform-origin: left top;
	animation: win_min 1s;
}
section#top_projects .switch_projects .main_window.on {
	animation: yay_up_2nd .6s;
}
section#top_projects .switch_projects .main_window a {
	position: relative;
}
section#top_projects .switch_projects input#projects_cont03 + .cont .main_window a:hover {
	filter: brightness(1.02);
}
section#top_projects .switch_projects .main_window a .more {
	display: block;
	padding: 1.2em 4em;
	border-radius: 50px;
	border: 1px #fff solid;
	background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.6));
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
    box-shadow: inset 0 0 10px #fff, inset 0 0 10px #fff, 0 0 10px rgba(0,0,0,0.05);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: all .3s;
    filter: saturate(.5);
    mix-blend-mode: screen;
	z-index: 10;
}
section#top_projects .switch_projects .main_window a:hover .more {
	opacity: 1;
}
section#top_projects .switch_projects .main_window a .more::after {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background: url("../img/icon_arrow_wh.png") center center / contain no-repeat;
	position: absolute;
	top: 50%;
	right: 1.6em;
	opacity: 0;
	transform: translate(-1em,-50%);
}
section#top_projects .switch_projects .main_window a:hover .more::after {
	transition: all .3s .2s;
	opacity: 1;
	transform: translate(0,-50%);
}

section#top_projects .switch_projects .main_window a img {
	position: relative;
	pointer-events: none;
	transition: all .3s;
}
section#top_projects .switch_projects .main_window a:hover img {
	filter: brightness(.2);
}
/* 切り替えタブ ---------------------------------*/
section#top_projects .switch_projects ul.tabs {
    width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
section#top_projects .switch_projects ul.tabs li {
    width: 15%;
	margin-right: 20px;
}
section#top_projects .switch_projects ul.tabs li label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60px;
	border-radius: 50px;
	background: linear-gradient(120deg, rgba(0,29,63,0.05) 0%, rgba(240,241,242,0.70) 100%);
	box-shadow: inset 0 0 10px rgba(255,255,255,1.0), 5px 5px 5px rgba(0,29,63,0.1), -4px -4px 2px rgba(255,255,255,0.7);
	cursor: pointer;
	transition: all .6s;
}
section#top_projects .switch_projects ul.tabs li label.active {
	background: linear-gradient(120deg, rgba(240,241,242,0.70) 0%, rgba(0,29,63,0.07) 100%);
	box-shadow: -4px -4px 5px rgba(0,29,63,0.3), 5px 5px 2px rgba(255,255,255,0.15);
	cursor: default;
}
section#top_projects .switch_projects ul.tabs li label img {
	width: 45%;
}
section#top_projects .switch_projects ul.tabs li label.sorashima img {
	width: 60%;
}
/* ベトナム事業部 ------------------------------*/
section#top_projects .vietnam {
    padding: 40px 0 80px;
    background: rgba(0,29,63,0.05);
}
section#top_projects .vietnam .grad_txt {
    margin-bottom: -1em;
    opacity: .5;
    letter-spacing: -0.05em;
}

/*==================================================================================
下層ページ共通
==================================================================================*/
section#main_2nd {
	padding: 15vh 0 0!important;
}
section#main_2nd h2.font_100 {
	margin-left: .3em;
}
section#main_2nd .pagenavi {
	width: 50%;
    max-width: max-content;
}
section#main_2nd .pagenavi ul li {
	margin: 0 .5em .8em 0;
	padding-right: .8em;
	position: relative;
}
section#main_2nd .pagenavi ul li::after {
	content: "/";
	display: inline-block;
	font-size: .8em;
	position: absolute;
	top: .2em;
	right: 0;
}
section#main_2nd .pagenavi ul li:last-child::after {
	display: none;
}
section#main_2nd .pagenavi ul li a {
	text-decoration: underline;
}
h3.solid span {
	display: inline-block;
	padding: .4em;
	background: var(--grad_navy);
}
h3.solid span.sub {
	background: #fff;
	color: var(--light_blue);
}

/*==================================================================================
事業内容
==================================================================================*/
section#service .frame {
	border: 1px #cfcfcf solid;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.5) 100%);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px); /* Safari用 */
    filter: grayscale(0);
	position: sticky;
    top: 100px;
    left: 0;
}
section#service .frame::before {
	content: "";
	display: block;
	width: calc(100% + 8px);
	height: calc(100% + 8px);
	background: url("../img/frame_square.gif") left top / 8px no-repeat, url("../img/frame_square.gif") right top / 8px no-repeat, url("../img/frame_square.gif") left bottom / 8px no-repeat, url("../img/frame_square.gif") right bottom / 8px no-repeat;
	position: absolute;
	top: -4px;
	left: -4px;
}
section#service .frame .cont {
	width: 50%;
	box-sizing: border-box;
	padding: 5vh min(3vw,60px);
}
section#service .frame .cont.ttl {
	border-right: 1px #cfcfcf solid;
}
section#service .frame ul li span {
	display: inline-block;
	padding: .4em .6em .4em 1.6em;
	background: #fff;
	color: var(--light_blue);
	position: relative;
}
section#service .frame ul li span::before {
	content: ">";
	display: inline-block;
	font-size: 1em;
	position: absolute;
	top: .4em;
	left: .4em;
}
/* 制作実績 ----------------------
section#top_works.second {
	background: none;
}
section#top_works.second .switch_works {
    padding-top: 0;
}*/
/* 制作フロー -------------------------*/
section#flow {
	background: linear-gradient(to bottom, transparent 0%, rgba(190,200,206,0.50) 10%, rgba(190,200,206,0.50) 80%, transparent 100%);
}
section#flow .ttl {
}
section#flow .boad {
    width: 46%;
    box-sizing: border-box;
	padding: min(4vw,60px) 3.5em min(5vw,80px);
	border-radius: 10px;
	background: rgba(255,255,255,0.3);
	backdrop-filter: blur(7px);
	position: relative;
}
section#flow .boad:nth-child(odd) {
    margin-top: -20vh;
}
section#flow .boad:nth-child(even) {
    margin-top: 20vh;
}
section#flow .ttl + .boad {
    margin-top: 30vh;
}
section#flow .boad:nth-child(3) {
    margin-top: 0;
}
section#flow .boad:nth-child(8) {
    margin-top: 10vh;
}
section#flow .boad:nth-child(10) {
    width: 80%;
    margin: 5vh 0 5vh auto;
}
section#flow .boad .grad_txt {
	position: absolute;
	top: -1.2vw;
	left: 3.5em;
}
section#flow .boad h4 {
    padding-right: min(5vw,80px);
	letter-spacing: 0.05em;
}
section#flow .boad .icon {
	width: min(5vw,80px);
	position: absolute;
	top: min(4vw,60px);
	right: 3.5em;
}
section#flow .boad .font_60 {
	opacity: .1;
	position: absolute;
	bottom: min(-2vw, -.6em);
	right: min(3.5em,60px);
}

/*==================================================================================
会社案内
==================================================================================*/
section#about .grad_txt span {
    transition: color .6s;
}
section#about .boad.is-dark .grad_txt span {
    color: #fff;
}
section#about .boad {
    padding: max(10vh,60px) max(6vw,60px);
    position: relative;
    transition: color .6s;
}
section#about .boad::before,
section#about .boad::after {
    content: "";
    display: block;
    width: var(--before-width, 100%);
    height: 100%;
    border-radius: 50px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
section#about .boad::before {
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(255,255,255,0.5) 100%
    );
    opacity: 1;
    transition: opacity .6s;
    z-index: -2;
}
section#about .boad::after {
    background: var(--grad_navy);
    opacity: 0;
    transition: opacity .6s;
    z-index: -1;
}
section#about .boad.is-dark {
    color: #fff;
}
section#about .boad.is-dark::before {
    opacity: 0;
}
section#about .boad.is-dark::after {
    opacity: 1;
}
section#about table {
    width: 100%;
}
section#about table tr {
    border-bottom: 1px rgba(255,255,255,0.2) solid;
}
section#about table th {
    width: 15%;
    padding: 1.5em 0;
    text-align: left;
    white-space: nowrap;
    font-weight: 400;
    opacity: .5;
}
section#about table td {
    padding: 1.5em 0;
}
/* アクセスマップ -------------------------------------------------------------------*/
section#access #map_pc {
    width: 60%;
    height: 98%;
    position: absolute;
    top: 50%;
    right: max(5vw, 40px);
	mask-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,1.0) 30%, rgba(255,255,255,0.7) 45%, transparent 60%);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,1.0) 30%, rgba(255,255,255,0.7) 45%, transparent 60%);
    transform: translateY(-50%);
}
section#access .col2 {
    z-index: 4;
}

/*==================================================================================
制作実績
==================================================================================*/
section#works ul li {
    margin-right: 10px;
}
section#works .boad {
	box-sizing: border-box;
	padding: 20px;
	border-radius: 10px;
	background: rgba(255,255,255,0.5);
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
	position: relative;
}
section#works .boad h3.eng {
	position: absolute;
	top: 10px;
	right: 20px;
	opacity: .1;
}
section#works .company h3.eng {
	color: var(--navy);
}
section#works .education h3.eng {
	color: #423d00;
}
section#works .public h3.eng {
	color: #00350b;
}
section#works .work {
	display: inline-flex;
    justify-content: flex-start;
    align-items: center;
	margin: 0 .3em .6em 0;
	padding: .6em 1em;
}
section#works .company .work {
	background: rgba(7,86,158,0.10);
}
section#works .education .work {
	background: rgba(127,118,0,0.10);
}
section#works .public .work {
	background: rgba(0,114,27,0.10);
}
section#works .work span {
	display: inline-flex;
    justify-content: center;
    align-items: center;
	margin-right: .6em;
}
section#works span[class^="icon_"] {
	display: inline-flex;
    justify-content: center;
    align-items: center;
	padding: .2em .4em;
	border-radius: 5px;
	background: rgba(255,255,255,.7);
	margin-right: .3em!important;
}
section#works span.icon_else {
	background: #d8d9dc;
}

/*==================================================================================
自社プロジェクト
==================================================================================*/
section#projects .boad {
	padding: min(20vh,140px) min(10vw,120px);
	border-radius: 10px;
	background: url("../img/bg_grid.png") left top / 70px repeat;
	position: relative;
}
section#projects .boad.other {
	background: rgba(0,29,63,0.05);
}
section#projects .boad .number {
	width: 100%;
	box-sizing: border-box;
	padding: 0  max(2vw,40px);
	position: absolute;
	top: max(3vh,30px);
	left: 0;
}
section#projects .boad .logo {
	width: min(25vw,300px);
}
section#projects .boad .chara {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 34vw;
	max-height: 460px;
	border-radius: 10px;
	background: rgba(0,0,0,0.05);
}
section#projects .boad .chara img {
	width: 70%;
}
section#projects .boad .concept {
	padding: min(3vw,60px) min(4vw,80px);
	background: url("../img/bg_round_lt.png") left top / 3% no-repeat, url("../img/bg_round_rt.png") right top / 3% no-repeat, url("../img/bg_round_lb.png") left bottom / 3% no-repeat, url("../img/bg_round_rb.png") right bottom / 3% no-repeat;
}
section#projects .boad .concept::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--grad_navy);
	opacity: 0.05;
	position: absolute;
	top: 0;
	left: 0;
}
section#projects .boad .concept * {
	position: relative;
}

/*==================================================================================
News
==================================================================================*/
section#news_list ul li a {
	padding: min(2.5vw,30px) 5em min(2.5vw,30px) min(2.5vw,30px);
	border-radius: 10px;
	background: rgba(255,255,255,0.5);
	position: relative;
}
section#news_list ul li a::before {
    content: "";
	display: block;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	border: 1px #fff solid;
    box-shadow: inset 0 0 10px #fff, inset 0 0 10px #fff, 0 0 10px rgba(0,0,0,0.05);
	position: absolute;
	top: 50%;
	right: min(2.5vw,30px);
    transform: translateY(-50%);
	transition: all .3s;
	opacity: 0;
}
section#news_list ul li a:hover::before {
	opacity: 1;
	filter: brightness(1.3);
	animation: btn_circle 1s;
}
section#news_list ul li a::after {
    content: "";
	display: block;
	width: 3em;
	height: 3em;
	background: url("../img/icon_arrow.png") center center / .8em no-repeat;
	position: absolute;
	top: 50%;
	right: min(2.5vw,30px);
	transform: translate(0,-50%);
	transform-origin: left center;
	transition: all .3s;
}
section#news_list ul li a:hover::after {
	background-image: url("../img/icon_arrow_bl.png");
	filter: brightness(.8);
    animation: btn_arrow 1s;
}
section#news_list ul li span {
	display: inline-block;
}
section#news_list ul li p {
	width: 90%;
}
section#news_list ul li a .border {
	width: 100%;
	height: 1px;
    background: var(--gray);
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all .3s;
	transform-origin: left bottom;
}
section#news_list ul li a:hover .border {
	background-color: var(--blue);
    animation: btn_line 1s;
}
/* WP-pagenavi */
section#news_list .wp-pagenavi {
	display: flex;
	justify-content: center;
	align-items: center;
}
section#news_list .wp-pagenavi a,
section#news_list .wp-pagenavi span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	margin: 0 10px;
	color: var(--navy);
    font-family: avenir-lt-pro, sans-serif;
    font-size: min(1.2vw, 14px);
	font-weight: 500;
	text-decoration: none!important;
}
section#news_list .wp-pagenavi span.current {
	background: var(--grad_navy);
	color: #fff;
}
section#news_list .wp-pagenavi span.extend {
	width: auto;
	border: none;
}
section#news_list .wp-pagenavi a:hover {
    box-shadow: inset 0 0 10px #fff, inset 0 0 10px #fff, 0 0 10px rgba(0,0,0,0.05);
}

/* 詳細  --------------------------------------------------------------------------*/
section#news article {
    padding: max(6vh,60px) max(6vw,60px);
	background: rgba(255,255,255,0.5);
	border-radius: 10px;
}
section#news article p {
    font-size: min(1.2vw, 14px);
}
/* 次ページ前ページ */
section#news ul.post_nav li a {
    display: block;
    padding-right: 3em;
    position: relative;
}
section#news ul.post_nav li.prev a {
    padding-right: 0;
    padding-left: 3em;
}
section#news ul.post_nav li a::after {
    content: "";
    display: block;
    width: 2em;
    height: 2em;
	background: url("../img/icon_arrow.png") center center / .8em no-repeat;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
	transform-origin: left center;
	transition: all .3s;
}
section#news ul.post_nav li.prev a::after {
	right: auto;
    left: 0;
	transform: translate(0,-50%) rotate(180deg);
	transform-origin: center;
}
section#news ul.post_nav li a:hover::after {
	background-image: url("../img/icon_arrow_blue.png");
	filter: brightness(.8);
    animation: btn_arrow 1s;
}
section#news ul.post_nav li.prev a:hover::after {
    animation: btn_arrow_prev 1s;
}
@keyframes btn_arrow_prev {
	0%,20% {transform: translate(1em,-50%) rotate(180deg); opacity: 0;}
	50%,100% {transform: translate(0,-50%) rotate(180deg); opacity: 1;}
}

/*==================================================================================
footer
==================================================================================*/
footer {
    padding: 5vw 0!important;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px); /* Safari用 */
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,1.0) 5%, rgba(255,255,255,1.0) 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,1.0) 5%, rgba(255,255,255,1.0) 100%);
    position: relative;
    z-index: 3;
}
footer .btn_contact {
    padding: max(8vh,60px) 0;
    border-top: 1px #cfcfcf solid;
    position: relative;
}
footer .btn_contact:hover {
    filter: none;
}
footer .btn_contact::before {
    content: "";
    display: block;
    width: max(4vw, 80px);
    height: max(4vw, 80px);
    border-radius: 50%;
    border: 1px #fff solid;
    box-shadow: inset 0 0 10px #fff, inset 0 0 10px #fff, 0 0 10px rgba(0,0,0,0.05);
    position: absolute;
    top: 50%;
    right: 0;
	opacity: 0;
    transform: translateY(-50%);
	transition: all .3s;
}
footer .btn_contact:hover::before {
	opacity: 1;
	filter: brightness(1.3);
	animation: btn_circle 1s;
}
footer .btn_contact::after {
    content: "";
    display: block;
    width: max(4vw, 80px);
    height: max(4vw, 80px);
    border-radius: 50%;
    background: url("../img/icon_arrow.png") center center / 20% no-repeat;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
	transition: all .3s;
	z-index: 2;
}
footer .btn_contact:hover::after {
	background-image: url("../img/icon_arrow_bl.png");
    animation: btn_arrow 1s;
}
footer .btn_contact h2 {
    margin-right: max(6vw, 60px);
    background: var(--grad_navy);
    background-clip: text;
    -webkit-background-clip: text;
	transition: all .3s;
}
footer .btn_contact:hover h2 {
    filter: brightness(1.5);
}
footer .btn_contact h2 span {
	display: block;
	color: transparent;
}
footer .btn_contact .border {
	width: 100%;
	height: 1px;
    background: var(--gray);
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all .3s;
	transform-origin: left bottom;
}
footer .btn_contact:hover .border {
	background-color: var(--blue);
    animation: btn_line 1s;
}

footer .map {
    height: 35vh;
}
footer .map #map_pc {
    width: 100%;
    height: 100%;
}
.map_info_name {
	position: absolute;
    top: 10%;
}
.map_info_address {
	padding-right: 20px;
}
.map_info_link {
	color: #1a73e8;
	text-decoration: none;
	font-size: 14px;
	transition: all .3s;
}
.map_info_link:hover {
	text-decoration: underline;
}
footer span[class^="icon_"] {
    display: inline-block;
    margin-right: .2em;
    width: 1.6em;
    height: 1.6em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: .3em;
}
.icon_walk {
    background-image: url("../img/icon_walk.png");
}

footer .logo {
    width: 240px;
}
footer .foot_nav ul {
    width: 42%;
}
footer .foot_nav ul li a {
    display: inline-block;
}
footer .foot_nav ul li ul {
    width: 100%;
}
footer .foot_nav ul li ul li {
    margin: 0 1em .5em 0;
    position: relative;
}
footer .foot_nav ul li ul li::after {
    content: "/";
    display: inline-block;
    color: #999;
    font-size: .9em;
    position: relative;
    top: 0;
    right: -.5em;
}


.tb {display: none;}
.pc {display: inline;}
.sp {display: none;}

@media screen and (max-width : 960px) {
    .pc {display: none;}
    .tb {display: inline;}

    p {font-size: min(1.8vw, 14px);}
    /*==================================================================================
    header
    ==================================================================================*/
    header {
        padding: 20px 0 !important;
    }
    header.active {
    	height: 100vh;
    	background: rgba(255,255,255,0.7);
    	backdrop-filter: blur(7px);
    	-webkit-backdrop-filter: blur(7px);
    	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 1.0) 95%, transparent 100%);
    	-webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 1.0) 95%, transparent 100%);
    }
    header .container {
        max-width: 100%;
        padding: 0 20px;
    }
   /* スマホ版 メニュー -----------------------*/
    nav.gnav {
        z-index: 2;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
        position: fixed;
        top: 0;
        left: 0;
    }
    nav.gnav.active {
        opacity: 1;
        visibility: visible;
    }
    nav.gnav ul {
		display: block;
        width: 100%;
		padding-top: 80px;
        text-align: center;
    }
    nav.gnav ul li {
        margin-left: 0;
    }
    nav.gnav ul li a {
        display: block;
		padding: min(5vh, 30px);
		font-size: 20px;
    }
    .gnavToggle {
        z-index: 9999;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        box-shadow: inset 0 0 10px #fff, inset 0 0 10px #fff, 0 0 10px rgba(0,0,0,0.1);
        cursor: pointer;
        position: fixed;
        right: 15px;
        top: 15px;
    }
    .gnavToggle span {
        display: block;
        width: 24px;
        margin-bottom: 3px;
        border-bottom: 2px #000 solid;
        transition: .35s ease-in-out;
    }
    .gnavToggle span:last-child {
        margin-bottom: 0;
    }
    .gnavToggle.active span:nth-child(1) {
        transform: translateY(5px) rotate(-45deg);
    }
    .gnavToggle.active span:nth-child(2) {
        opacity: 0;
    }
    .gnavToggle.active span:nth-child(3) {
        transform: translateY(-5px) rotate(45deg);
    }
    /*==================================================================================
    共通
    ==================================================================================*/
    /* レイアウト */
    section {
        padding: 5vh 0 !important;
    }
    .container {
        max-width: 840px;
        padding: 0 max(8vw, 40px);
    }
    .tb100 {
        width: 100%;
    }
    .mb_10 {
        margin-bottom: 8px;
    }
    .mb_20 {
        margin-bottom: 15px;
    }
    .mb_30 {
        margin-bottom: 20px;
    }
    .mb_60 {
        margin-bottom: 40px;
    }
    .mb_120 {
        margin-bottom: 80px;
    }
    .tb100 {
        width: 100%;
    }
    /* フォント */
    h2 span.font_12 {
        padding-left: 1.5em;
    }
    .font_12 {
        font-size: min(1.6vw, 12px);
    }
    .font_14 {
        font-size: min(1.8vw, 14px);
    }
    .font_16 {
        font-size: min(1.8vw, 14px);
    }
    .font_20 {
        font-size: min(2vw, 16px);
    }
    .font_24 {
    	font-size: min(2vw, 16px);
    }
    .font_30 {
    	font-size: min(3vw, 24px);
    }
    .font_40 {
        font-size: min(3vw, 24px);
    }
    .font_60 {
    	font-size: min(4vw, 30px);
    }
    .font_70 {
        font-size: min(4.6vw, 34px);
    }
    .font_100 {
        font-size: min(6vw, 46px);
    }
    .font_120 {
        font-size: min(6vw, 46px);
    }
    /* ボタン */
    .btn.min {
        padding: .7em 2.5em;
    }
    /*==================================================================================
    INDEX
    ==================================================================================*/
    section#main .container {
        max-width: 100%;
        padding: 0 20px;
    }
    h1 {
        font-size: min(6vw, 60px);
    }
    h1 #particle-text-placeholder {
        font-size: min(14vw, 120px);
    }
    /* スクロールインジケーター */
    .scroll-indicator {
        bottom: 2rem;
    }
    /* 事業内容 -----------------------------------------------------------------*/
    section#top_service {
        padding-top: 20vh!important;
    }
    section#top_service ul li a {
        padding: 30px 0;
    }
	section#top_service ul li a::after {
		background-image: url("../img/icon_arrow_bl.png");
	}
    section#top_service ul li a h3 {
        margin-bottom: 20px;
		padding-left: 40px;
    }
    section#top_service ul li a h3::before {
    	width: .3em;
    	height: .3em;
		top: 1.2em;
    	left: 10px;
		transform: none;
    }
    section#top_service ul li a h3 + p {
        width: 100%;
		box-sizing: border-box;
		padding-left: 40px;
    }
    /* 制作フロー ---------------------------------------------------------------*/
    section#top_flow .sticky {
        margin-bottom: 60px;
    	position: relative;
    	bottom: 0;
    }
    section#top_flow .slides {
    	width: 100%;
    }
    section#top_flow .slides .slide_boad {
    	padding: min(5vw,50px) 8vw min(4vw,40px);
    }
    section#top_flow .slides .slide_boad .grad_txt {
    	left: 8vw;
    }
    section#top_flow .slides .slide_boad .icon {
    	width: min(15%,60px);
    	right: 10%;
    }
    /* 制作実績 ------------------------------------------------------------------*/
    section#top_works .switch_works {
    	padding-top: min(8vw, 60px);
    }
    section#top_works .switch_works .boad {
    	padding: 15px;
        margin-bottom: 15px;
    }
    section#top_works .switch_works .work {
    	padding: .3em .6em;
        font-size: min(1.8vw, 12px);
    }
    section#top_works span[class^="icon_"]:last-child {
    	margin-right: 0!important;
    }
    /* 切り替えタブ ---------------------------------*/
    section#top_works .switch_works ul.tabs::before {
    	width: 210px;
    }
    section#top_works .switch_works ul.tabs::after {
    	width: 62px;
    }
    section#top_works .switch_works ul.tabs.tb02::after {
    	left: 74px;
    }
    section#top_works .switch_works ul.tabs.tb03::after {
    	left: 144px;
    }
    section#top_works .switch_works ul.tabs li:nth-child(-n+3) {
    	width: 70px;
    }
    section#top_works .switch_works ul.tabs li:nth-child(3) {
    	margin-right: 10px;
    }
    section#top_works .expo {
        font-size: min(1.8vw, 12px);
        text-align: left;
    }
    /* 自社プロジェクト ------------------------------------------------------------------*/
    section#top_projects .switch_projects {
    	padding-top: calc(min(6vw, 50px) + 40px);
    }
    section#top_projects .switch_projects ul.btns {
    	padding: 12px 15px;
    }
    section#top_projects .switch_projects ul.btns li span {
    	width: 14px;
    	height: 14px;
    }
    /* 説明ウィンドウ */
    section#top_projects .switch_projects .sub_window {
    	width: 100%;
        background: none;
        margin-bottom: 40px;
        box-shadow: none;
    }
    section#top_projects .switch_projects .sub_window ul.btns {
    	display: none;
    }
    section#top_projects .switch_projects .sub_window .inner {
    	padding: 0;
    }
    section#top_projects .switch_projects .sub_window .font_20 {
        margin-bottom: 0;
        color: var(--blue);
    	font-size: min(2vw, 18px);
        font-weight: 700;
    }
    section#top_projects .switch_projects .sub_window .font_14 {
        margin-bottom: 5px;
    }
    /* サイトウィンドウ */
    section#top_projects .switch_projects .main_window {
    	width: 100%;
    }
	section#top_projects .switch_projects .main_window a .cursor {
		display: none!important;
	}
    /* 切り替えタブ ---------------------------------*/
    section#top_projects .switch_projects ul.tabs li {
        width: 25%;
    	margin-right: 10px;
    }
    section#top_projects .switch_projects ul.tabs li label {
    	height: min(6vw, 50px);
    }
    /* ベトナム事業部 ------------------------------*/
    section#top_projects .vietnam {
        padding: 20px 40px 30px;
    }
    section#top_projects .vietnam .container {
        padding: 0;
    }
    /*==================================================================================
    下層ページ共通
    ==================================================================================*/
    section#main_2nd h2.font_100 {
    	margin-bottom: 1.2em;
        font-size: min(8vw, 60px);
    }
    section#main_2nd .pagenavi {
    	width: 100%;
        max-width: 100%;
    }
    /*==================================================================================
    事業内容
    ==================================================================================*/
    section#service .frame::before {
    	width: calc(100% + 6px);
    	height: calc(100% + 6px);
    	background-size: 6px;
    	top: -3px;
    	left: -3px;
    }
    section#service .frame .cont {
    	width: 100%;
    	padding: max(3vh,20px) max(3vw,30px);
    }
    section#service .frame .cont.ttl {
        padding-bottom: 0;
    	border-right: none;
    }
    section#service .frame ul li span {
    	padding: .3em .6em .3em 1.4em;
    }
    section#service .frame ul li span::before {
    	top: .3em;
    	left: .4em;
    }
    /* 制作フロー -------------------------*/
    section#flow .boad {
        width: 100%;
    	padding: min(6vh,60px) min(5vh,40px);
    }
    section#flow .boad:nth-child(odd) {
        margin-top: 0;
    }
    section#flow .boad:nth-child(even) {
        margin-top: 0;
    }
    section#flow .ttl + .boad {
        margin-top: 0;
    }
    section#flow .boad:nth-child(8) {
        margin-top: 0;
    }
    section#flow .boad:nth-child(10) {
        width: 100%;
        margin: 0 0 60px;
    }
    section#flow .boad .grad_txt {
    	top: -1vw;
    	left: min(5vh,40px);
    }
    section#flow .boad h4 {
        padding-right: min(8vw,80px);
    }
    section#flow .boad .icon {
    	width: min(8vw,80px);
    	top: min(6vh,40px);
    	right: min(5vh,40px);
    }
    section#flow .boad .font_60 {
    	right: min(5vh,40px);
    }

    /*==================================================================================
    会社案内
    ==================================================================================*/
    section#about .boad {
    	padding: max(5vh,40px) max(5vw,30px);
    }
    section#about .boad::before,
    section#about .boad::after {
        border-radius: 30px;
    }
    /* アクセスマップ -------------------------------------------------------------------*/
    section#access #map_pc {
        display: none;
    }
    section#access #map_sp {
        height: 40vh;
        position: relative;
        mask-image: none;
        -webkit-mask-image: none;
        margin-bottom: 20px;
    }
    /*==================================================================================
    制作実績
    ==================================================================================*/
    section#works ul li {
        margin-right: 8px;
    }
    section#works .boad {
    	padding: 15px;
    }
    section#works .work {
    	padding: .3em .6em;
        font-size: min(1.8vw, 12px);
    }
    section#works span[class^="icon_"]:last-child {
    	margin-right: 0!important;
    }
    section#works .expo {
        font-size: min(1.8vw, 12px);
        text-align: left;
    }
    /*==================================================================================
    自社プロジェクト
    ==================================================================================*/
    section#projects .boad {
    	padding: min(3vh,60px) min(5vw,40px);
    	background-size: 40px;
    }
    section#projects .boad .number {
    	padding: 0;
        position: relative;
    	top: 0;
    	left: 0;
    }
    section#projects .boad .logo {
    	width: min(25vw,200px);
    }
    section#projects .boad .concept {
    	padding: min(4vw,40px);
    }
	/*==================================================================================
	News
	==================================================================================*/
	section#news_list ul li a {
		padding: 30px 5em 30px 20px;
	}
	section#news_list ul li a::after {
		background-image: url("../img/icon_arrow_bl.png");
	}
	section#news_list ul li span {
		display: block;
		margin-right: 0;
		margin-bottom: .2em;
	}
	section#news_list ul li p {
		width: 100%;
	}
	/* WP-pagenavi */
	section#news_list .wp-pagenavi a,
	section#news_list .wp-pagenavi span {
		margin: 0 5px;
        font-size: min(1.8vw, 14px);
	}
	/* 詳細  --------------------------------------------------------------------------*/
	section#news article {
        padding: max(5vh,40px) max(5vw,30px);
	}
	section#news article p {
        font-size: min(1.8vw, 14px);
	}
	/*==================================================================================
	footer
	==================================================================================*/
	footer .btn_contact {
	    padding: max(5vh,60px) max(4vw, 80px) max(5vh,60px) 0;
	}
	footer .btn_contact::after {
	    background-image: url("../img/icon_arrow_bl.png");
		background-size: 25%;
	}
	footer .btn_contact h2 {
	    margin-right: 0;
		margin-bottom: 30px;	
	    font-size: 40px;
	}
	footer .btn_contact p {
	    width: 100%;
	}
	footer span[class^="icon_"] {
	    width: 1.4em;
	    height: 1.4em;
	    top: .2em;
	}
	footer .logo {
	    width: 200px;
	}
    footer .foot_nav ul {
        width: 100%;
    }
    footer .foot_nav ul li ul li {
        margin: 0 1em .2em 0;
    }
    footer .foot_nav ul li ul li::after {
        font-size: .7em;
    }
	footer .copy {
	    text-align: right;
	}
}


@media screen and (max-width : 460px) {
    .tb {display: none;}
    .sp {display: inline;}

    p {font-size: 12px;}
	/*==================================================================================
	ローディング
	==================================================================================*/
	.loading img {
		width: 50%;
		margin: 0 auto 10px;
	}
	.loading .loader {
		width: 70%;
	}
	.loading .loader span.bar {
		width: calc(100% - 2.5em);
		height: 4px;
	}
    /*==================================================================================
    header
    ==================================================================================*/
	header .logo {
	    width: 30px;
	}
    nav.gnav ul li a {
		padding: min(4vh, 30px);
		font-size: 16px;
    }
    /* スマホ版 メニュー -----------------------*/
    .gnavToggle {
        width: 46px;
        height: 46px;
        top: 15px;
    }
    .gnavToggle span {
        display: block;
        width: 20px;
        margin-bottom: 2px;
        border-bottom: 2px #000 solid;
        transition: .35s ease-in-out;
    }
    .gnavToggle span:last-child {
        margin-bottom: 0;
    }
    .gnavToggle.active span:nth-child(1) {
        transform: translateY(4px) rotate(-45deg);
    }
    .gnavToggle.active span:nth-child(2) {
        opacity: 0;
    }
    .gnavToggle.active span:nth-child(3) {
        transform: translateY(-4px) rotate(45deg);
    }
    /*==================================================================================
    共通
    ==================================================================================*/
    /* レイアウト */
    section {
        padding: 5vh 0 !important;
    }
    .container {
        padding: 0 20px;
    }
    .col4 {
        width: calc(50% - 5px);
    }
    .sp100 {
        width: 100%;
    }
    .sp_order2 {
        order: 2;
    }
    .anker {
        margin-top: -15vh;
        padding-top: 15vh;
    }
    /* フォント */
    .font_12 {
        font-size: 10px;
    }
    .font_14 {
        font-size: 12px;
    }
    .font_16 {
        font-size: 12px;
    }
    .font_20 {
        font-size: 14px;
    }
    .font_24 {
    	font-size: 14px;
    }
    .font_30 {
    	font-size: 20px;
    }
    .font_40 {
        font-size: 20px;
    }
    .font_60 {
    	font-size: 24px;
    }
    .font_70 {
        font-size: 30px;
    }
    .font_100　{
        font-size: 40px;
    }
    .font_120 {
        font-size: 40px;
    }
    .btn {
        padding: 1.2em 3.4em;
    }
    /*==================================================================================
    INDEX
    ==================================================================================*/
    h1 {
        font-size: 30px;
    }
	h1 #prefix-text {
		top: -.2em;
	}
	h1 .particle-word-container {
		line-height: 1.1;
	}
    h1 #particle-text-placeholder {
        font-size: 64px;
    }
	h1 .h1_sub {
	    margin-top: 1em;
		font-size: 10px;
		letter-spacing: 0.05em;
	}
    /* 事業内容 -----------------------------------------------------------------*/
    section#top_service ul li a {
        padding: 20px 20px 20px 0;
		background-position: center right;
		background-size: .8em;
    }
	section#top_service ul li a::before,
	section#top_service ul li a::after {
		width: 2.5em;
		height: 2.5em;
		top: 25%;
		right: -10px;
	}
	section#top_service ul li a::after{
		background-size: .8em;
	}
	section#top_service ul li a:hover::before {
		opacity: 0;
		animation: none;
	}
    section#top_service ul li a h3 {
        margin-bottom: 20px;
		padding-left: 25px;
    }
    section#top_service ul li a h3::before {
    	width: .2em;
    	height: .2em;
		top: 1em;
    	left: 5px;
        transform: none;
    }
    section#top_service ul li a h3 + p {
		padding-left: 25px;
    }
    /* 制作フロー ---------------------------------------------------------------*/
    section#top_flow .slides .slide_boad {
    	padding: 40px 20px 30px;
    }
    section#top_flow .slides .slide_boad .grad_txt {
    	left: 20px;
    }
    section#top_flow .slides .slide_boad .icon {
        top: 15%;
    	right: 10%;
        transform: none;
    }
    section#top_flow .slides .slide_boad .font_70 {
    	right: 20px;
    }
    /* 制作実績 ------------------------------------------------------------------*/
    section#top_works h2.font_120 {
    	margin-bottom: 20px;
    }
    section#top_works .switch_works {
    	padding-top: min(14vw, 60px);
    }
    section#top_works .switch_works .boad {
        margin-bottom: 10px;
    }
    section#top_works .switch_works .work {
        font-size: 10px;
    }
    /* 切り替えタブ ---------------------------------*/
    section#top_works .switch_works ul.tabs::before {
    	width: 168px;
    }
    section#top_works .switch_works ul.tabs::after {
    	width: 50px;
    }
    section#top_works .switch_works ul.tabs.tb02::after {
    	left: 60px;
    }
    section#top_works .switch_works ul.tabs.tb03::after {
    	left: 115px;
    }
    section#top_works .switch_works ul.tabs li:nth-child(-n+3) {
    	width: 56px;
    }
    section#top_works .switch_works ul.tabs li:nth-child(3) {
    	margin-right: 10px;
    }
    section#top_works .expo {
        font-size: 10px;
    }
    /* 自社プロジェクト ------------------------------------------------------------------*/
    section#top_projects .switch_projects {
    	padding-top: calc(min(10vw, 40px) + 40px);
    }
    section#top_projects .switch_projects ul.btns {
    	display: none;
    }
    /* 説明ウィンドウ */
    section#top_projects .switch_projects .sub_window {
        margin-bottom: 30px;
    }
    section#top_projects .switch_projects .sub_window .font_20 {
    	font-size: 20px;
    }
	/* サイトウィンドウ */
	section#top_projects .switch_projects .main_window a .more {
		display: none;
	}
    /* 切り替えタブ ---------------------------------*/
    section#top_projects .switch_projects ul.tabs {
        justify-content: space-between;
    }
    section#top_projects .switch_projects ul.tabs li {
        width: calc(100% / 3 - 5px);
    	margin-right: 0;
    }
    section#top_projects .switch_projects ul.tabs li label {
    	height: min(10vw, 40px);
    }
    /* ベトナム事業部 ------------------------------*/
    section#top_projects .vietnam {
        padding: 20px;
    }
    section#top_projects .vietnam .row.just_end {
        justify-content: flex-start;
    }
    section#top_projects .vietnam .grad_txt {
        margin-bottom: .5em;
    }
    section#top_projects .vietnam .font_40 {
        font-size: 16px;
    }
    /*==================================================================================
    下層ページ共通
    ==================================================================================*/
    section#main_2nd h2.font_100 {
        font-size: min(12vw, 46px);
    }
    section#main_2nd .pagenavi ul li {
        margin: 0 .5em .3em 0;
    }
    section#main_2nd .pagenavi ul li::after {
        font-size: .6em;
        top: .6em;
    }
    section#main_2nd .pagenavi ul li a.font_14 {
        font-size: 10px;
    }
    /*==================================================================================
    事業内容
    ==================================================================================*/
    section#service .frame .cont {
    	padding: 20px;
    }
    /* 制作フロー -------------------------*/
    section#flow .boad {
        width: 100%;
    	padding: 40px 20px;
    }
    section#flow .boad:nth-child(10) {
        margin: 0;
    }
    section#flow .boad .grad_txt {
    	top: -1em;
    	left: 20px;
    }
    section#flow .boad .grad_txt .font_40 {
    	font-size: 30px;
    }
    section#flow .boad h4 {
        padding-right: 50px;
    }
    section#flow .boad .icon {
    	width: 50px;
    	top: 30px;
    	right: 20px;
    }
    section#flow .boad .font_60 {
    	right: 20px;
        font-size: 30px;
    }
    /*==================================================================================
    会社案内
    ==================================================================================*/
    section#about {
    	margin-bottom: 0;
    }
    section#about .boad {
    	padding: 40px 20px;
        border-radius: 20px;
    }
    section#about table {
        font-size: 12px;
    }
    section#about table th {
        display: block;
        width: 100%;
        padding: 1em 0 0;
        text-align: left;
    }
    section#about table td {
        display: block;
        width: 100%;
        padding: .5em 0 1em;
    }
    /* アクセスマップ -------------------------------------------------------------------*/
    section#access {
        margin-bottom: 0;
    }
    section#access #map_pc {
        display: none;
    }
    section#access #map_sp {
        height: 35vh;
    }
    /*==================================================================================
    制作実績
    ==================================================================================*/
    section#works h2.font_120 {
    	margin-bottom: 20px;
    }
    section#works .work {
        font-size: 10px;
    }
    section#works span[class^="icon_"] {
        border-radius: 2px;
    }
    section#works .expo {
        font-size: 10px;
    }
    /*==================================================================================
    自社プロジェクト
    ==================================================================================*/
    section#projects .boad {
    	padding: 30px 20px;
    	background-size: 30px;
    }
    section#projects .boad .logo {
    	width: min(45vw,200px);
    }
    section#projects .boad .chara {
    	height: 82vw;
        margin-bottom: 40px;
    }
    section#projects .boad .concept {
    	padding: 20px;
    }
    section#projects .boad .mb_120 {
        margin-bottom: 40px;
    }
	/*==================================================================================
	News
	==================================================================================*/
	section#news_list ul li a {
		padding: 20px calc(2em + 40px) 20px 20px;
	}
	section#news_list ul li a::before,
	section#news_list ul li a::after {
		width: 2em;
		height: 2em;
		background-size: .6em;
		right: 20px;
	}
	section#news_list ul li p {
		line-height: 1.6;
	}
	/* WP-pagenavi */
	section#news_list .wp-pagenavi a,
	section#news_list .wp-pagenavi span {
	    margin: 0 3px;
		font-size: 10px;
	}
	/* 詳細  --------------------------------------------------------------------------*/
	section#news article {
        padding: 40px 20px;
	}
	section#news article p {
        font-size: 12px;
	}
    /*==================================================================================
	footer
	==================================================================================*/
	footer .btn_contact {
	    padding: max(5vh,40px) max(4vw, 60px) max(5vh,40px) 0;
	}
	footer .btn_contact::before,
	footer .btn_contact::after {
	    width: max(4vw, 60px);
	    height: max(4vw, 60px);
	    top: 30%;
	}
	footer .btn_contact h2 {
	    font-size: 34px;
	}
	.gm-style .gm-style-iw-c {
		width: 2.3%;
		max-width: 230px!important;
	}
	.map_info_address {
		padding-right: 0;
	}
	footer .copy {
		line-height: 1;
	    position: absolute;
		right: 20px;
		bottom: 0;
	}
}