@charset "utf-8";

/* Reset
-------------------------------------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	word-break: break-all;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

nav, ul {
	width: 100%;
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input, select {
	vertical-align: middle;
}

select {
	vertical-align: middle;
}

img {
	border: 0;
	vertical-align: bottom;
}



/* Font
-------------------------------------------------------------------------------*/

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: normal;
    src: local("Noto Sans CJK JP Regular"),
    url('/wp-includes/fonts/WebSubsetFont_notojpregular.woff2') format('woff2');
	font-display: swap;
}
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: bold;
    src: local("Noto Sans CJK JP Bold"),
    url('/wp-includes/fonts/WebSubsetFont_notojpbold.woff2') format('woff2');
	font-display: swap;
}
.font-Noto Sans JP {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400,700;
}
@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: normal;
    src: url("/wp-includes/fonts/YakuHanJP-Regular.woff2") format("woff2");
	font-display: swap;
}
@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: bold;
    src: url("/wp-includes/fonts/YakuHanJP-Bold.woff2") format("woff2");
	font-display: swap;
}
.font-YakuHanJP {
  font-family: "YakuHanJP", sans-serif;
  font-weight: 400,700;
}



/* Basic
-------------------------------------------------------------------------------*/

html {
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
	position: relative;
	background: transparent;
	font-family: "YakuHanJP","Avenir Next","游ゴシック","Yu Gothic","游ゴシック体","YuGothic","Hiragino Sans","ヒラギノ角ゴシック",sans-serif!important;
	font-weight: normal;
	font-size: 0.85rem;
	color: white;
	letter-spacing: 1px;
	line-height : 2;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
}

body::before {
	width: 100vw;
	height: 100vh;
	position: fixed;
	background: -o-linear-gradient(65deg,rgba(60,175,255,1) 20%,rgba(0,0,255,1)30%,rgba(60,175,250,1) 60%,rgba(0,0,255,1) 100%);
	background: linear-gradient(65deg,rgba(60,175,255,1) 20%,rgba(0,0,255,1)30%,rgba(60,175,250,1) 60%,rgba(0,0,255,1) 100%);
	background-size: 200% 500%!important;
	-webkit-animation: bganime 60s ease infinite;
	animation: bganime 60s ease infinite;
	z-index: -2;
}

@-webkit-keyframes bganime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes bganime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.ua-safari body {
/*    font-family: "Avenir Next","Yu Gothic","游ゴシック","YuGothic","游ゴシック体","yu-gothic-pr6n","Hiragino Sans","ヒラギノ角ゴシック",sans-serif!important;*/
    font-family: "YakuHanJP", "Avenir Next", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "yu-gothic-pr6n", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif !important;
}

.ua-windows_nt body,
.ua-windows_nt td {
    font-family: "YakuHanJP","Segoe UI","游ゴシック","Yu Gothic Medium","游ゴシック体","YuGothic",sans-serif!important;
	font-weight: normal!important;
    letter-spacing: 1px;
}

.ua-windows_nt b,
.ua-windows_nt strong {
  font-family: "YakuHanJP","Segoe UI","游ゴシック","Yu Gothic Medium","游ゴシック体","YuGothic",sans-serif!important;
}

.ua-android body,
.ua-android.ua-chrome body {
	font-family: "YakuHanJP","Avenir Next","Roboto","yu-gothic-pr6n","Yu Gothic","游ゴシック","YuGothic","游ゴシック体","Hiragino Sans","ヒラギノ角ゴシック",sans-serif!important;
	font-weight: normal!important;
}


#wrapper {
	width: 100vw;
	height: auto;
	min-height: 100vh;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

#container, #content {
	width: 100%;
	height: auto;
	position: relative;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.error404 #container, .error404 #content {
	min-height: 100vh;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

a, a:link, a:active, a:visited {
    color: rgb(0,0,255);
	-webkit-tap-highlight-color: rgba(0,0,255,0);
	text-decoration: none;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	opacity: 1;
}

a:hover {
	color: rgb(60,60,60);
	outline: none;
	text-decoration: none;
	opacity: 0.6;
}

a img, a img:active {
	outline: none;
	border-bottom: none;
	opacity: 1;
}

a img:hover {
	opacity: 1;
}

.hover:hover {
	opacity: 0.45;
}

.invert:hover {
	-webkit-filter: invert(1);
	filter: invert(1);
}

::-moz-selection {
    color: rgb(255,255,255);
    background: rgba(0,0,0,0.8);
	line-height: 1rem;
}

::selection {
    color: rgb(255,255,255);
    background: rgba(0,0,0,0.8);
	line-height: 1rem;
}

ins {
    color: rgb(255,255,255);
    background: rgba(0,0,0,0.8);
	text-decoration: none;
}

mark {
    color: rgb(60,60,60);
    background: rgba(0,0,0,0.8);
	font-style: italic;
	font-weight: bold;
}

article, aside, figure, footer, hgroup, nav, section {
	display: block;
}

object, embed {
	max-width: 100%;
}

ul,
ol {
    display: inline-block;
    width: 100%;
    list-style: disc;
    text-align: left;
}

ul {
    padding: 0 0 0 15px;
    list-style: circle;
}

ol {
    padding: 0 0 0 20px;
    list-style: decimal;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted #000;
	cursor: help;
}

dl {
	display: inline-block;
	width: 100%;
	height: auto;
}

table {
	width: 100%!important;
	font-size: inherit;
	font: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	width: auto!important;
	min-width: 100px;
	max-width: calc(86vw * 0.75 * 0.25)!important;
	text-align: left;
    font-weight: normal;
	vertical-align: middle;
}

td {
    min-width: 100px;
    vertical-align: top;
    padding: 5px 0;
    line-height: 2;
}

td:nth-child(odd) {
    width: 90px!important;
    min-width: initial;
}

td:nth-child(even) {
    width: calc(100% - 90px)!important;
}

td img {
	vertical-align: middole;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 5em 0 3em;
	padding: 0;
}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

textarea {
	font: 99% sans-serif;
}

p.small {
	font-size: 0.75rem;
}

span.small {
    font-size: 1.5rem;
}

strong, th {
	font-size: 1.1rem;
    font-weight: 600;
    line-height: 2.5;
}

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	width: 100%;
	height: auto;
}

img.aligncenter {
	display: block;
	margin: 15px auto!important;
}

input[type="radio"] {
	vertical-align: text-bottom;
}

 .clickable, label, input[type=button], input[type=submit], input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
 cursor: pointer;
 display: inline-block;
 width: auto;
 height: auto;
 -webkit-box-align: start;
         align-items: flex-start;
 margin: 0 10px 0 0;
 padding: 5px;
 color: rgb(60,60,60);
 text-align: center;
 letter-spacing: 5px;
 -webkit-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease;
 vertical-align: middle;
}

div#archive select {
	border: 1px solid black!important;
	color: black!important;
}

html.ua-safari .archive::before, html.ua-ie .archive::before, html.ua-edge .archive::before {
	content: none;
}

select, input[type="color"][list] {
	background: none;
}

select, input, textarea {
	width: 100%;
	min-height: 35px;
	margin: 10px 0;
	padding: 10px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	color: rgb(60,60,60);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
}

.check {
	margin-bottom: 3%;
	font-size: 0.85rem;
	line-height: 1.6em;
}

button {
	width: auto;
	outline: none;
	overflow: visible;
}

.clearfix:before, .clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

.clearfix:after, .clear {
	clear: both;
}

.clearfix {
	zoom: 1;
}

.brightness {
	-webkit-filter: brightness(3);
	filter: brightness(3);
}



/* All
-------------------------------------------------------------------------------*/

::before,
::after {
	content: '';
	position: absolute;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

.object-fit {
  -o-object-fit: cover;
     object-fit: cover;
  font-family: 'object-fit: contain;'
}

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: auto;
    position: relative;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.start {
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

.end {
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

.center {
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.vertical {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.notxt {
	position: relative;
	text-indent: -999999%!important;
	white-space: nowrap;
	overflow: hidden;
}

.none {
	display: none!important;
}

.t_cntr {
	text-align: center;
}

.t_left {
	text-align: left;
}

.t_right {
	text-align: right;
}

.h_full {
	height: 100vh;
}

.hv_cntr {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.v_cntr {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.h_cntr {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.f_left {
	float: left;
}

.f_roight {
	float: right;
}

.tategaki {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.rotate {
	-webkit-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
}



/* Animation ----- */

.motion {
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.motion1 {
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.motion3 {
	-webkit-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}

.delay {
	-webkit-transition-delay: .3s!important;
	-o-transition-delay: .3s!important;
	   transition-delay: .3s!important;
}

.delay6 {
	-webkit-transition-delay: .6s!important;
	-o-transition-delay: .6s!important;
	   transition-delay: .6s!important;
}

.delay9 {
	-webkit-transition-delay: .9s!important;
	-o-transition-delay: .9s!important;
	   transition-delay: .9s!important;
}

.delay12 {
	-webkit-transition-delay: 1.2s!important;
	-o-transition-delay: 1.2s!important;
	   transition-delay: 1.2s!important;
}

.delay15 {
	-webkit-transition-delay: 1.5s!important;
	-o-transition-delay: 1.5s!important;
	   transition-delay: 1.5s!important;
}

.delay20 {
	-webkit-transition-delay: 2s!important;
	-o-transition-delay: 2s!important;
	   transition-delay: 2s!important;
}

.delay25 {
	-webkit-transition-delay: 2.5s!important;
	-o-transition-delay: 2.5s!important;
	   transition-delay: 2.5s!important;
}

.hide {
	position: relative;
	overflow: hidden;
}

.tachiage {
	-webkit-transform: translateY(100%) rotateX(-90deg);
	        transform: translateY(100%) rotateX(-90deg);
	-webkit-transform-origin: center top;
	    -ms-transform-origin: center top;
	        transform-origin: center top;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 0.5s ease-in-out;
	transition: -webkit-transform 0.5s ease-in-out;
	-o-transition: transform 0.5s ease-in-out;
	transition: transform 0.5s ease-in-out;
	transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
	-webkit-transition-delay: 0.1s;
	     -o-transition-delay: 0.1s;
	        transition-delay: 0.1s;
}

.ua-safari .tachiage {
    -webkit-transform: translateY(100%) rotateX(90deg);
            transform: translateY(100%) rotateX(90deg);
}

.tachiage:nth-child(2) {
	-webkit-transition-delay: 0.2s;
	     -o-transition-delay: 0.2s;
	        transition-delay: 0.2s;
}
.tachiage:nth-child(3) {
	-webkit-transition-delay: 0.3s;
	     -o-transition-delay: 0.3s;
	        transition-delay: 0.3s;
}
.tachiage:nth-child(4) {
	-webkit-transition-delay: 0.4s;
	     -o-transition-delay: 0.4s;
	        transition-delay: 0.4s;
}
.tachiage:nth-child(5) {
	-webkit-transition-delay: 0.5s;
	     -o-transition-delay: 0.5s;
	        transition-delay: 0.5s;
}
.tachiage:nth-child(6) {
	-webkit-transition-delay: 0.6s;
	     -o-transition-delay: 0.6s;
	        transition-delay: 0.6s;
}
.tachiage:nth-child(7) {
	-webkit-transition-delay: 0.7s;
	     -o-transition-delay: 0.7s;
	        transition-delay: 0.7s;
}

.is_ready #introduction .tachiage,
.tachiage.bottomUp,
.tachiage.onpage {
	position: relative;
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
}

.tachiage span {
	display: block;
}

.fixin.onpage {
    opacity: 1!important;
}
.up.onpage,
.down.onpage {
    opacity: 1!important;
    -webkit-transform: translateY(0%)!important;
        -ms-transform: translateY(0%)!important;
            transform: translateY(0%)!important;
}
.lefty.onpage,
.righty.onpage {
    opacity: 1!important;
    -webkit-transform: translateX(0%)!important;
        -ms-transform: translateX(0%)!important;
            transform: translateX(0%)!important;
}



/* Gallery */

.gallery {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: auto;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: start;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 3vh 0!important;
}

.gallery::after {
	position: relative;
}

.gallery br {
	display: none;
}

.gallery.gallery-columns-2 dl.gallery-item,
.gallery.gallery-columns-2::after {
	width: 49%!important;
	margin: 0 2% 2% 0!important;
}

.gallery.gallery-columns-2 dl.gallery-item:nth-child(3n-1) {
	margin: 0 0 2%!important;
}

.gallery.gallery-columns-3 dl.gallery-item,
.gallery.gallery-columns-3::after {
	width: 32.33%!important;
	margin: 0 1.5% 1.5% 0!important;
}

.gallery.gallery-columns-3 dl.gallery-item:nth-child(4n-1) {
	margin: 0 0 1.5%!important;
}

.gallery.gallery-columns-4 dl.gallery-item,
.gallery.gallery-columns-4::after {
	width: 24%!important;
	margin: 0 1.33% 1.33% 0!important;
}

.gallery.gallery-columns-4 dl.gallery-item:nth-child(5n-1) {
	margin: 0 0 1.33%!important;
}

.gallery.gallery-columns-5 dl.gallery-item,
.gallery.gallery-columns-5::after {
	width: 19%!important;
	margin: 0 1.25% 1.25% 0!important;
}

.gallery.gallery-columns-5 dl.gallery-item:nth-child(6n-1) {
	margin: 0 0 1.25%!important;
}

.gallery.gallery-columns-6 dl.gallery-item,
.gallery.gallery-columns-6::after {
	width: 15.5%!important;
	margin: 0 1.4% 1.4% 0!important;
}

.gallery.gallery-columns-6 dl.gallery-item:nth-child(7n) {
	margin: 0 0 1.4%!important;
}

.gallery img {
	width: 100%;
	height: auto;
	border: none!important;
	margin: 0!important;
}



/* Font / Text
-------------------------------------------------------------------------------*/

h1 {
    font-size: 10vh;
}

h2 {
	font-size: 8vh;
}

h3 {
	font-size: 4vh;
}

h4 {
	font-size: 3vh;
}

h5 {
	font-size: 2vh;
}

h6 {
	font-size: 1vh;
}

h1,h2,h3,h4,h5,h6 {
	position: relative;
	font-weight: normal;
	line-height: 160%;
    letter-spacing: 1px;
    word-break: break-word;
}



/* Scroll
-------------------------------------------------------------------------------*/

::-webkit-scrollbar {
 width: 1px;
 background: rgb(0,0,0255);
}
::-webkit-scrollbar-track {
 -webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb {
 width: 1px;
 background: white;
 -webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb:window-inactive {
 background: white;
}



/* Overlay
-------------------------------------------------------------------------------*/

figure {
	position: relative;
	width: 100%;
	height: auto;
	left: 0;
	overflow: hidden;
}

figure a, figure a:link, figure a:visited, figure a:active {
	padding: 0;
	opacity: 1;
}

figcaption {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: rgba(0,0,0,0.5);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: rgb(255,255,255);
	text-align: left;
	font-size: 1rem;
	letter-spacing: 1px;
	overflow: hidden;
	opacity: 0;
	z-index: -1;
}

a:hover figcaption {
	opacity: 1;
	z-index: 1;
}



/* Modal Window
-------------------------------------------------------------------------------*/

.nonscroll {
	overflow-y: hidden!important;
}

.modal-open {
	display: inline-block;
	width: 50px;
	height: 50px;
	position: absolute;
	right: 5vw;
}

.modal-open::before,
#header.blueback.action .modal-open::before {
	width: 50px;
	height: 15px;
	top: calc(50% - 7.5px);
	left: 0;
	border-top: solid 1px rgb(0,0,255);
	border-bottom: solid 1px rgb(0,0,255);
}

.modal-open::after,
#header.blueback.action .modal-open::after {
	width: 50px;
	height: 1px;
	top: calc(50% - 0.5px);
	left: -100%;
	background: rgb(0,0,255);
}


#header.blueback .modal-open::before {
	border-top: solid 1px white;
	border-bottom: solid 1px white;
}
#header.blueback .modal-open::after {
	background: white;
}


.modal-open:hover::before {
	-webkit-transform: scaleY(150%);
	-ms-transform: scaleY(150%);
	transform: scaleY(150%);
}

.modal-open:hover::after {
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	padding: 0;
    background: rgba(255,255,255,0.4);
    -webkit-backdrop-filter: contrast(1) blur(15px);
    backdrop-filter: contrast(1) blur(15px);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
	text-align: center;
	-webkit-transition: .8s;
	-o-transition: .8s;
	transition: .8s;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}

/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	z-index: 9999;
	visibility: visible;
}

/*モーダル枠の指定*/
.modal-body{
	display: inline-block;
	width: 100%;
	max-width: 100vw;
    width: 100%;
    height: 100vh;
	position: relative;
	vertical-align: middle;
    overflow-y: auto;
}

/*モーダル内のコンテンツの指定*/
.modal-content{
	overflow: hidden;
	background: none;
	text-align: left;
	padding: 0 5vw 15vh;
}

/*モーダルを閉じるボタンの指定*/
.modal-close {
	cursor: pointer;
	display: block;
    width: 50px;
    height: 50px;
	position: fixed;
    top: 50px;
    right: 5vw;
	-webkit-transform: initial;
	-ms-transform: initial;
	transform: initial;
	z-index: 1000;
}

.modal-close::before, .modal-close::after {
	cursor: pointer;
	content: '';
	position: absolute;
	right: 0;
	background: rgb(0,0,255);
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-ms-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 1000;
}

.modal-close::before {
	width: 50px;
	height: 1px;
	top: 50%;
	left: 50%;
}

.modal-close::after {
	width: 1px;
	height: 50px;
	top: 50%;
	left: 50%;
}

.modal-close:hover::before, .modal-close:hover::after {
	-webkit-transform: translate(-50%, -50%) rotate(405deg);
	    -ms-transform: translate(-50%, -50%) rotate(405deg);
	        transform: translate(-50%, -50%) rotate(405deg);
}




/* Archive
-------------------------------------------------------------------------------*/

.navi_box {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0 7vw 15vh;
    text-align: right;
}

.select-archive {
    display: inline-block;
    width: 150px;
    height: 30px;
    min-height: 30px;
    line-height: 30px;
    position: relative;
    margin: 0;
    padding: 0 10px;
    outline: none;
    background: url(/img/icon_select.png) no-repeat center right;
    background-size: auto 80%;
}



/* Single Navigation
-------------------------------------------------------------------------------*/

ul.single-menu {
	width: 100%;
	max-width: 1080px;
	margin: 0.5% auto 15vh;
	padding: 0;
}

ul.single-menu li {
    display: inline-block;
    width: 33%;
    height: 100px;
    position: relative;
    margin: 0;
    padding: 0;
    background: white;
}

ul:has(> :nth-child(-n+2):last-child) li {
    width: 49.5%;	
}

ul.single-menu li a {
	display: inline-block;
	width: 100%;
	height: 100px;
	position: relative;
	line-height: 100px;
	color: rgb(60,60,60);
	text-align:  center;
	overflow: hidden;
}

ul.single-menu li::before {
	width: 100%;
	height: 100px;
    background: -o-linear-gradient(110deg, rgba(68,97,213,1)10%, rgba(81,142,245,0) 100%), url(/img/bg_sand.jpg) no-repeat center center;
    background: linear-gradient(-20deg, rgba(68,97,213,1)10%, rgba(81,142,245,0) 100%), url(/img/bg_sand.jpg) no-repeat center center;
    background-size: cover!important;
	opacity: 0;
}

ul.single-menu li:hover::before {
    background: -o-linear-gradient(110deg, rgba(68,97,213,1)10%, rgba(81,142,245,0) 100%), url(/img/bg_sand.jpg) no-repeat center center;
    background: linear-gradient(-20deg, rgba(68,97,213,1)10%, rgba(81,142,245,0) 100%), url(/img/bg_sand.jpg) no-repeat center center;
    background-size: cover!important;
	opacity: 0.5;
	-webkit-filter: contrast(1.2);
	        filter: contrast(1.2);
}

ul.single-menu li:hover a {
	color: black;
}




/* Pagetop
-------------------------------------------------------------------------------*/

#pagetop {
	cursor: pointer;
	width: 30px;
	height: 30px;
	position: fixed;
	bottom: 1vw;
	right: 1vw;
	text-indent: 10000%;
	white-space: nowrap;
	overflow: hidden;
	opacity: 0;
	z-index: -100;
}

#pagetop:hover {
	opacity: 0.5!important;
}

#pagetop::before {
	width: 15px;
	height: 1px;
	top: 15px;
	left: 7px;
	background: rgb(87,89,89);
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	z-index: 5;
}

#pagetop::after {
	width: 20px;
	height: 1px;
	top: 15px;
	right: 12px;
	background: rgb(87,89,89);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	z-index: 5;
}



/* WP default setting Customise
-------------------------------------------------------------------------------*/

.wp-block-image figure {
    width: auto;
}

.wp-block-image img {
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    max-width: 100%;
    margin: 2vh 0;
    -webkit-transform: inherit;	
    -ms-transform: inherit;	
    transform: inherit;	
}

.wp-block-gallery,
.wp-block-video {
    margin: 1vw 0!important;
}

.post ul.blocks-gallery-grid,
.post .wp-block-gallery {
    padding: 0;	
}

.blocks-gallery-grid img,
.wp-block-gallery img {
	min-width: auto;
	margin: 0 auto;
    -webkit-transform: inherit;	
    -ms-transform: inherit;	
    transform: inherit;	
}

.blocks-gallery-grid.columns-2 .blocks-gallery-image:nth-of-type(2n),
.blocks-gallery-grid.columns-2 .blocks-gallery-item:nth-of-type(2n),
.wp-block-gallery.columns-2 .blocks-gallery-image:nth-of-type(2n),
.wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n) {
    margin: 0 0 1em 0;	
}

.blocks-gallery-grid.columns-4 .blocks-gallery-image:nth-of-type(4n),
.blocks-gallery-grid.columns-4 .blocks-gallery-item:nth-of-type(4n),
.wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n),
.wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n) {
    margin: 0 0 1em 0;
}

.wp-block-gallery.columns-3 .blocks-gallery-image:last-child,
.wp-block-gallery.columns-3 .blocks-gallery-item:last-child {
    margin: 0 0 1em 0!important;
}
@charset "utf-8";
/*
Theme Name: morph
Description: morph Theme
Author: MONARCH
Version: 2024
*/


 
/* Common　★
-------------------------------------------------------------------------------*/

.filter {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 2;	
}

section {
    display: inline-block;
    width: 100%;
    height: auto;
    position: relative;
    vertical-align: middle;
	padding: 120px 5vw 5vw;
}

.in_content {
    min-height: 100vh;
    position: relative;
    padding: 20vh 0 0;
}

.half_box {
	width: 48%;
	position: relative;
}

.c_box {
	position: relative;
}

.text_box,
.text_box td {
    position: relative;
    margin: 3vh 0;
    font-size: 2.5vmin;
    line-height: 2;
    letter-spacing: 0px;
    word-break: break-word;
}

.nakami {
	position: relative;
}

.kaisetsu {
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: justify;
    word-break: break-word;
    overflow: hidden;
}

.bgwhite .kaisetsu {
    font-size: 1rem;
}

.kaisetsu h3 {
	margin: 0 0 3vh;
}

.sticky {
  position: sticky!important;
  top: 0;
}

.bgwhite {
    background: white;
    color: rgb(0,0,255);
}

.page_title {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0;
}

.page_title h2 {
	width: 100%;
	font-size: 10vw;
	line-height: 1;
}



/* Action + Animation */

.readytext,
.readytext span,
.onetext,
.onetext span {
	opacity: 0;
}
.readytext span span,
.onetext span span {
	opacity: 1;
}

.ichigyo {
	position: relative;
	overflow: hidden;
}

.ichigyo p,
.ichigyo a,
nav li a.ichigyo {
	opacity: 0;
}

.ichigyo p:after,
.ichigyo a:after {
	content:" ";
	margin-left:-1px;
}

/* Lang Switch */


.bogo-language-switcher {
    display: flex;
    justify-content: space-between;
    width: 70px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: calc(5vw + 50px + 2vw);
    padding: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    z-index: 1
}

ul.bogo-language-switcher li {
    width: 50%!important;
    height: 30px;
    line-height: 30px;
}

.bogoflags,.bogoflags-before:before {
    display: none!important;
    content: none!important
}

.bogo-language-switcher .bogo-language-name a {
    display: -ms-grid;
    display: grid;
    position: relative;
	font-size: 0;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
    opacity: .4
}

.blueback .bogo-language-switcher .bogo-language-name a {
    color: white;
}
.blueback.action .bogo-language-switcher .bogo-language-name a {
    color: rgb(0,0,255);
}

.bogo-language-switcher li .bogo-language-name a:hover,.bogo-language-switcher li.current .bogo-language-name a {
    opacity: 1
}

.bogo-language-switcher .bogo-language-name a:before {
    width: 100%;
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-indent: initial
}

.bogo-language-switcher .en .bogo-language-name a:before {
    content: 'EN'
}

.bogo-language-switcher .ja .bogo-language-name a:before {
    content: 'JP'
}



/* Loading
-------------------------------------------------------------------------------*/

#wrapper::after {
	content: '';
    width: 400vw;
    height: 100vh;
    position: fixed;
    top: 50%;
    left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: -o-linear-gradient(165deg, rgba(60,175,255,1) 10%, rgba(0,0,255,1), rgba(60,175,250,1), rgba(0,0,255,1) 90%, rgba(0,0,255,1) 100%);
	background: linear-gradient(-75deg, rgba(60,175,255,1) 10%, rgba(0,0,255,1), rgba(60,175,250,1), rgba(0,0,255,1) 90%, rgba(0,0,255,1) 100%);
	pointer-events: none;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
	opacity: 0;
	z-index: -999;
}

#wrapper.fadeout::after {
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 1;
	z-index: 9999;
}

.loading {
	width: 100vw;
	height: 100vh;
	position: fixed;
	opacity: 0;
	z-index: -9999!important;
}

.loading.fadeout {
	opacity: 1;
	z-index: 88888!important;
}

.rotating {
	width: 80px;
	height: 80px;
	position: absolute;
	background: url(/img/loading.png) no-repeat center center;
	background-size: 70% auto;
	-webkit-animation: rotating 0.6s linear both infinite;
	animation: rotating 0.6s linear both infinite;
	z-index: 1;
}

 @-webkit-keyframes rotating {
	  0% {
		  -webkit-transform: translate(-50%, -50%) rotate(0);
		          transform: translate(-50%, -50%) rotate(0);
	  }
	  100%{
		  -webkit-transform: translate(-50%, -50%) rotate(359deg);
		          transform: translate(-50%, -50%) rotate(359deg);
	  }
}

  @keyframes rotating {
	  0% {
		  -webkit-transform: translate(-50%, -50%) rotate(0);
		          transform: translate(-50%, -50%) rotate(0);
	  }
	  100%{
		  -webkit-transform: translate(-50%, -50%) rotate(359deg);
		          transform: translate(-50%, -50%) rotate(359deg);
	  }
}



/* Slider　★
-------------------------------------------------------------------------------*/

/* Swiper */

/* Swiper Navi */

.swiper-button-prev,
.swiper-button-next {
	cursor: pointer!important;
	width: 50px!important;
	height: 50px!important;
	position: absolute!important;
    top: 0!important;
	right: 0;
    margin: 0!important;
	background: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
	-webkit-transform: initial!important;
	-ms-transform: initial!important;
	transform: initial!important;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	text-indent: -99999%;
	white-space: nowrap;
	overflow: hidden;
	z-index: 5!important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	background: rgba(0,0,255,1);
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
	right: 0!important;
	left: initial!important;
	margin: 0;
}

.swiper-button-next,
.swiper-rtl .swiper-button-next {
	top: 52px!important;
	right: 0!important;
	left: initial!important;
	margin: 0;
}

.swiper-button-next::before,
.swiper-button-prev::before {
    width: 7px;
    height: 7px;
    top: calc(50% - 3.5px);
    right: 22px;
    background: none;
    border-top: solid 1px #00f;
    border-left: solid 1px #00f;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    content: none;
}

.swiper-button-next:before,
.swiper-button-prev:before {
    right: initial;
    left: 22px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.swiper-button-next:before {
    left: 19px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.swiper-button-next:hover:before,
.swiper-button-prev:hover:before {
    border-top: solid 1px #fff;
    border-left: solid 1px #fff;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: none!important;
}



/* Header
-------------------------------------------------------------------------------*/

header {
	width: 100%;
	height: 150px!important;
	position: fixed!important;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
	-webkit-transform: translateY(-100%);
	    -ms-transform: translateY(-100%);
	        transform: translateY(-100%);
    z-index: 10;
}

.is_ready header {
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
}

.logo {
	display: inline-block;
    width: 30vw;
    height: 20vh;
    max-width: 400px;
    max-height: 100px;
    position: absolute;
    left: 5vw;
    background: url(/svg/logo_bl.svg) no-repeat center center;
    background-size: contain!important;
    overflow: hidden;
    -webkit-transition: all .25s ease-in-out!important;
    -o-transition: all .25s ease-in-out!important;
    transition: all .25s ease-in-out!important;
    opacity: 1;
    z-index: 1;
}

#header.action {
	height: 80px!important;
    background: white;
}

#header.action .logo,
#header.blueback.action .logo {
    width: 12vw;
    height: 10vh;
    background: url(/svg/logo_bl.svg) no-repeat center center;
    background-size: contain!important;
}

#navimenu .logo {
    height: 150px;
    max-height: 150px;
    position: relative;
    top: 0;
    left: 0;
}

nav li a,
nav li a:link,
nav li a:active,
nav li a:visited,
nav li.sns a {
	width: auto;
	height: auto;
	position: relative;
	margin: 0;
	padding: 0;
	color: rgb(0,0,255);
	font-size: 15vh;
	line-height: 1.2;
	letter-spacing: 0px;
	overflow: hidden;
}

nav li a:hover {
	color: black;
}

header nav li::before {
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
	background: rgb(0,0,255);
    opacity: 0;
    -webkit-transform: translatex(-100%);
    -ms-transform: translatex(-100%);
    transform: translatex(-100%);
}

header nav li.active::before,
header nav li.active:hover::before,
header nav li:hover::before{
    opacity: 1;
    -webkit-transform: translatex(0%);
    -ms-transform: translatex(0%);
    transform: translatex(0%);
}



/* Index */

nav.index_nav li {
	width: 100%;
	height: 12vh;
	line-height: 12vh;
}

nav.index_nav li a {
	display: inline-block;
	font-size: 10vh;
	overflow: initial;
}

nav.index_nav li a:hover {
	color: rgb(0,0,255)!important;
}

nav.index_nav li a::after {
	width: 12vh;
	height: 1px;
	background: rgb(0,0,255);
	bottom: 4vh;
	right: -5vh;
	-webkit-transform: scale(0) rotate(-45deg);
	-ms-transform: scale(0) rotate(-45deg);
	transform: scale(0) rotate(-45deg);
	opacity: 0;
}

nav.index_nav li a:hover::after {
	-webkit-transform: scale(1) rotate(-45deg);
	-ms-transform: scale(1) rotate(-45deg);
	transform: scale(1) rotate(-45deg);
	opacity: 1;
}



/* Home
-------------------------------------------------------------------------------*/

body.home,
.home #wrapper,
.home #all,
.home #container,
.home #content {
	width: 100%;
}

/* Intro */

#introduction {
    padding: 20vh 5vw 5vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.intro_box {
    max-width: 90vw;
    font-size: 7vw;
    line-height: 8vw;
    letter-spacing: 0px;
}

.intro_box p {
    margin: 7vh 0 0;
    font-size: 4vw;
    line-height: 5vw;
    word-break: break-word;
}

#introduction .arrow_box {
	position: absolute;
	bottom: 5vw;
	right: 5vw;
}

#introduction .bigArrow {
	-webkit-transform: translate(0%, -10vh);
	-ms-transform: translate(0%, -10vh);
	transform: translate(0%, -10vh);
	-webkit-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	   transition-delay: 0.5s;
	opacity: 0;
}

#introduction .bigArrow.fadein {
	-webkit-transform: translate(0%, 0%);
	-ms-transform: translate(0%, 0%);
	transform: translate(0%, 0%);
	opacity: 1;
}

#intro {
    padding: 20vh 5vw;
}

#intro .nakami {
    display: inline-block;
    width: auto;
    font-size: 3.5vmin;
    line-height: 7vmin;
}

#intro h3 {
    margin: 0 0 50px;
    font-size: 4.5vw;
    line-height: 1.4
}

#intro p {
    font-size: 1.8vw;
    line-height: 1.8;
}



/* Inde */

#index {
    padding: 20vh 5vw;
}


nav.about_nav,
nav.works_nav,
ul.sub_nav {
    position: relative;
    margin: 5vh 0 0;
    padding: 0;
    list-style: none;
}

ul.sub_nav {
    margin: 2vh 0;
    padding: 0 0 0 5px;
}

nav.about_nav li:last-child ul.sub_nav {
	margin: 2vh 0 0;
}

ul.sub_nav li {
    padding: 0 0 0 38px;
}

nav.about_nav h3,
nav.about_nav li h3 a {
    margin: 2vh 0 0;
    font-size: 3vw;
    line-height: 1;
}

nav.about_nav li,
nav.about_nav li a,
nav.works_nav li,
nav.works_nav li a,
ul.sub_nav li a {
	position: relative;
	color: white;
	font-size: 2vw;
	line-height: 6vh;
	list-style: none;
}

ul.sub_nav li,
ul.sub_nav li a {
	font-size: 1.6rem;
	line-height: 7vh;
}

nav.about_nav a:hover,
nav.works_nav a:hover,
ul.sub_nav a:hover {
	opacity: 0.5!important;
}

ul.sub_nav li::before {
    content: '─';
    left: 0;
    color: white;
    font-size: 1rem;
    font-weight: lighter;
    line-height: 7vh;
}



/* About */

#about {
    padding: 20vh 5vw;
}

#about .nakami {
    display: inline-block;
    width: 100%;
    margin: 10vh 0 0;
    font-size: 1.2vw;
    line-height: 2;
}

#about h3 {
    margin: 0 0 2vh;
    font-size: 2.8vw;
    font-weight: 600;
    line-height: 2;
}

#about h4 {
    margin: 0 0 2vh;
    font-size: 2vw;
    font-weight: 600;
    line-height: 2;
}

#about .nakami .detail {
    margin: 8vh 0 0;
}

#about .nakami p {
    word-break: break-word;	
}



/* Core */

#core {
	padding: 25vh 5vw;
}

#core .coretitle {
    width: 100%;
    position: relative;
    margin: 0 0 15vh;
    padding: 5vh 5vw;
    font-size: 1.4rem;
}

.coretitle::after,
.coretitle::before,
.coretitle .competence::after, 
.coretitle .competence::before {
  background-color: white;
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  transition: all 1s ease 0.6s;
  -webkit-transition: all 1s ease 0.6s;
}

/* 左上へ配置 */
.coretitle::after {
    width: 0px;
    height: 2px;
    top: -1px;
    left: -1px;
}
/* 右下へ配置 */
.coretitle::before {
    width: 0px;
    height: 2px;
    right: -1px;
    bottom: -1px;
}
/* 左下へ配置 */
.coretitle .competence::after {
    width: 2px;
    height: 0px;
    left: -1px;
    bottom: -1px;
}
/* 右上へ配置 */
.coretitle .competence::before {
    width: 2px;
    height: 0px;
    top: -1px;
    right: -1px;
}

/* hover */
.coretitle.is-inview::after,
.coretitle.is-inview::before {
  width: 100%;
  width: calc(100% + 1px);
}

.coretitle.is-inview .competence::after,
.coretitle.is-inview .competence::before {
  height: 100%;
  height: calc(100% + 1px);
}

#core .coretitle h4 {
    font-size: 4vmin;
}

/*
#core .coretitle h4 span:last-of-type span {
    font-size: 3vmin;
    line-height: 1;
}
*/

#core h3 {
	font-size: 3vw;
}

#core h3,
#core h4 {
    width: 100%;
    font-weight: 600;
}

#core h3::before {
    width: 25vmin;
    height: 25vmin;
    top: 50%;
    left: 50%;
    background: url(/svg/bigArrow_bl.svg) no-repeat center center;
    background-size: contain;
    transform: translate(-50%,-50%);
    -webkit-filter: brightness(1.2) contrast(1.5);
    filter: brightness(1.2) contrast(1.5);
    z-index: -1;
}

#core .nakami .detail {
    margin: 15vh 0 0;
}

#core .nakami .detail .detail_box {
    width: 48%;
    position: relative;
    padding: 50px;
    background: white;
    box-shadow: 1vw 1vw 0 rgba(0,0,0,0.1);
    color: #00f !important;
    font-size: 1.2vw;
}

#core .nakami .detail .detail_box::after {
	content: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(/img/bg_sand.jpg) no-repeat center center;
    background-size: cover !important;
    opacity: .8;
    -webkit-filter: contrast(1.1);
    filter: contrast(1.1);
    z-index: -1;
}

#core .nakami .detail .detail_box h4 {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: solid 1px rgb(0,0,255);
	font-size: 2vw;
}

#core .nakami .detail .detail_box p {
    word-break: break-word;
}

#core .nakami .detail .detail_box ul {
    list-style: disc;
}

#core .nakami .detail .detail_box li {
    margin: 10px 0;
    line-height: 1.3;
    word-break: break-word    
}



/* Concept */

#concept {
	padding: 25vh 5vw;
}

#concept .nakami.flex {
    position: relative;
}

#concept h3 {
	display: inline-block;
    font-size: 7vw;
    margin: 0 0 8vh 0;
    line-height: 1;
}

#concept h3 span:last-of-type span {
    position: absolute;
    top: 0vw;
    right: -3vw;
    font-size: 3vw;
}

#concept .nakami .detail .detail_box {
    width: 48%;
    position: relative;
    font-size: 1.2vw;
}

#concept .nakami .detail .detail_box h4 {
    margin: 0 0 20px;
	font-weight: 600;
}

#concept .nakami .detail .detail_box p {
    word-break: break-word;
}


/* Quotation */

#quotation div {
    width: 115vmin;
    max-width: 90vw;
}

#quotation p {
    width: auto;
    position: relative;
    font-size: 2.2vmin;
    white-space: wrap;
    word-break: break-word;
}

@media screen and (max-width: 1080px) {
	#quotation p.quotation_text br {
		display:none;
	}
}

@media screen and (max-width: 1400px) {
	.en-US #quotation p.quotation_text br {
		display:none;
	}
}

#quotation p.t_right {
    display: inline-block;
    margin: 40px 0 0;
    padding: 0 0 0 130px;
}

#quotation p.t_right:before {
    width: 100px;
    height: 1px;
    background: #fff;
    top: calc(50% - .5px);
    left: 0;
}



/* Animation --------------------------------------------- */


/* About - Bunkashihon */

.bunkashihon {
    width: 90%;
    margin: 50px auto 0;
    align-items: center;
}

.bunkashihon:before,.bunkashihon:after {
    width: calc(100% - 6.5vw - 10vw);
    height: 1px;
    background: #00f;
    left: 6.5vw;
    transform: rotate(-3.1deg);
    opacity: 0;
}

.bunkashihon:after {
    top: initial;
    transform: rotate(3.1deg);
}

.bunkashihon.is-inview:before {
    top: 3.5vw;
    -webkit-animation: nobirubefore 3s ease-in-out .9s forwards;
    -o-animation: nobirubefore 3s ease-in-out .9s forwards;
    animation: nobirubefore 3s ease-in-out .9s forwards;
}

.bunkashihon.is-inview:after {
    bottom: 3.5vw;
    -webkit-animation: nobiruafter 3s ease-in-out .9s forwards;
    -o-animation: nobiruafter 3s ease-in-out .9s forwards;
    animation: nobiruafter 3s ease-in-out .9s forwards;
}

@-webkit-keyframes nobirubefore {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        top: 1.75vw;
        width: calc(100% - 6.5vw - 10vw);
        opacity: 1;
    }
}

@keyframes nobirubefore {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        top: 1.75vw;
        width: calc(100% - 6.5vw - 10vw);
        opacity: 1;
    }
}

@-webkit-keyframes nobiruafter {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        bottom: 1.75vw;
        width: calc(100% - 6.5vw - 10vw);
        opacity: 1;
    }
}

@keyframes nobiruafter {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        bottom: 1.75vw;
        width: calc(100% - 6.5vw - 10vw);
        opacity: 1;
    }
}

.circle_box {
    display: -ms-grid;
    display: grid;
    width: 20vw;
    height: 20vw;
    position: relative;
    margin: 0;
    border-radius: 50%;
    font-size: 1vw;
    line-height: 1.5;
    letter-spacing: .5px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.circle_text {
    position: relative;
    z-index: 1;
}

.circle_box h5 {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0 0 10px;
    font-size: 1.2vw;
    font-weight: 600;
}

.circle_box.first {
    width: 13vw;
    height: 13vw;
}

.circle_box.second {
    width: 16.5vw;
    height: 16.5vw;
}

.circle_box svg {
    position: absolute;
    top: 0;
    z-index: 0;
}

.circle_box svg circle {
    stroke-dasharray: 0 1563.72;
    stroke: #00f;
    stroke-width: 2px;
}

.circle_box.first.is-inview svg circle {
    stroke-dasharray: 8 8;
    -webkit-transition: all 1.7s cubic-bezier(.43,.05,.17,1) .3s;
    -o-transition: all 1.7s cubic-bezier(.43,.05,.17,1) .3s;
    transition: all 1.7s cubic-bezier(.43,.05,.17,1) .3s;
}

.circle_box.second.is-inview svg circle {
    stroke-width: 6px;
    stroke-dasharray: 20 10;
    -webkit-transition: all 1.7s cubic-bezier(.43,.05,.17,1) 1.5s;
    -o-transition: all 1.7s cubic-bezier(.43,.05,.17,1) 1.5s;
    transition: all 1.7s cubic-bezier(.43,.05,.17,1) 1.5s;
}

.circle_box.third.is-inview svg circle {
    stroke-width: 12px;
    stroke-dasharray: 1600 1563.72;
    -webkit-transition: all 1.7s cubic-bezier(.43,.05,.17,1) 2.5s;
    -o-transition: all 1.7s cubic-bezier(.43,.05,.17,1) 2.5s;
    transition: all 1.7s cubic-bezier(.43,.05,.17,1) 2.5s;
}

.creation_box {
    width: 13vw;
}

.creation_box h5 {
    font-size: 1.1vw;
    font-weight: 600;
    line-height: 1.3;
}

.creation_step {
    margin: 15px 0 0;
    align-items: center;
}

.creation_step p {
    writing-mode: vertical-rl;
    margin-left: auto;
    margin-right: auto;
    padding: 2vw 7px;
    background: #00f;
    color: #fff;
    font-size: 0.9vw;
    line-height: 1;
    letter-spacing: 5px;
}



/* About - our transcreation */

.our_transcreation {
    width: 80%;
    height: 90%;
    position: relative;
    margin: 0 auto;
    border-bottom: solid 1px #00f;
    text-align: center;
}

.our_transcreation .trans {
    width: 100%;
    margin: 0 0 100px;
    font-size: 1.2vw;
    font-weight: 600;
    line-height: 1.6;
}

.our_transcreation svg.graph {
    width: 100%;
    height: 85%;
    position: absolute;
    bottom: 0;
    z-index: 0;
}

.our_transcreation .tategaki {
    width: 3vw;
    height: auto;
    bottom: 0;
    padding: 2vw 0;
    color: #fff;
    font-size: 1.1vw;
    letter-spacing: 5px;
    line-height: 3vw;
    z-index: 2;
    background: linear-gradient(-90deg,rgba(0,0,255,1) 0%,rgba(0,0,255,0.15) 95%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    -webkit-filter: contrast(300%) brightness(100%);
    filter: contrast(300%) brightness(100%);
}

.our_transcreation .creation {
    display: inline-block;
    width: 15vw;
    height: auto;
    position: absolute;
    bottom: 2vw;
    right: 0;
    font-size: 1.2vw;
    font-weight: 600;
    line-height: 1.6;
}

.our_transcreation .trans:first-line,
.our_transcreation .creation:first-line {
    font-size: 2vw;
    text-align: center
}



/* Arrow */

svg.double_arrow {
	width: 5vw;
    padding: 0;
	z-index: 5;
}

svg polyline {
	stroke: rgb(0,0,255);
	stroke-width: 1px;
}

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 127.8650131225586px;
    stroke-dasharray: 127.8650131225586px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 127.8650131225586px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 127.8650131225586px;
    stroke-dasharray: 127.8650131225586px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 127.8650131225586px;
  }
}

.double_arrow.is-inview .svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1s ease-in-out 0.3s both;
          animation: animate-svg-stroke-1 1s ease-in-out 0.3s both;
	opacity: 1!important;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 126.42822265625px;
    stroke-dasharray: 126.42822265625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 126.42822265625px;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 126.42822265625px;
    stroke-dasharray: 126.42822265625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 126.42822265625px;
  }
}

.double_arrow.is-inview .svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1s ease-in-out 0.6s both;
          animation: animate-svg-stroke-2 1s ease-in-out 0.6s both;
	opacity: 1!important;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 126.42822265625px;
    stroke-dasharray: 126.42822265625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 126.42822265625px;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 126.42822265625px;
    stroke-dasharray: 126.42822265625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 126.42822265625px;
  }
}

.double_arrow.is-inview .svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 1s ease-in-out 0.9s both;
          animation: animate-svg-stroke-3 1s ease-in-out 0.9s both;
	opacity: 1!important;
}


.bg_sand {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(/img/bg_sand.jpg) no-repeat center center;
	background-size: cover!important;
}



.rotate {
  width: 100%;
  height: 100%;
  -webkit-animation: rotate-anime 30s linear infinite;
          animation: rotate-anime 30s linear infinite;
}
@-webkit-keyframes rotate-anime {
    0%  {-webkit-transform: rotate(0);transform: rotate(0);}
  100%  {-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}
}
@keyframes rotate-anime {
    0%  {-webkit-transform: rotate(0);transform: rotate(0);}
  100%  {-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}
}









/* Work */

#work {
    padding: 20vh 5vw 15vh;
}

.orverPc .tablet,
.underSm .tablet,
.underTm .default,
.landscape .tablet {
	display: none;
}

.underTm .tablet {
	display: inline-block!important;
}

.works_list {
	margin: 10vh 0 0;
}

.workslist .togglebox .works_list {
	margin: 0;
}

.workslist .morelist {
	cursor: pointer;
    display: inline-block;
    width: calc(90vw * 0.33);
    height: 50px;
    position: relative;
    left: calc(50% - (calc(90vw * 0.33 * 0.5)));
    margin: 10vh auto 0;
    padding: 0 5vw;
    line-height: 50px;
    font-size: 1rem;
    text-align: center;
    color: white;
    letter-spacing: 4px;
}

.workslist .morelist::before,
.workslist .morelist::after {
	width: 100%;
	height: 1px;
	background: white;
	top: 0;
	left: 0;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
}

.workslist .morelist::after {
	top: initial;
	bottom: 0;
}

.workslist .morelist:hover::before,
.workslist .morelist:hover::after {
	-webkit-transform: scale(0.6);
	    -ms-transform: scale(0.6);
	        transform: scale(0.6);
}

.workslist .morelist.morelist-on {
	display: none;
}

.workslist .togglebox-wrap.open {
    height: auto!important;
    overflow: initial!important;
}

.works_list article {
	display: -ms-grid;
	display: grid;
	width: 33%;
	height: calc(90vw * 0.33 * 0.5625);
	position: relative;
	margin: calc((90vw - (90vw * 0.33 * 3)) / 4) 0;
	background: white;
	font-size: calc(90vw * 0.33 * 0.06);
	line-height: calc(90vw * 0.33 * 0.09);
	color: rgb(60,60,60);
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.works_list article.is-empty {
	width: 33%;
	height: 0;
	margin: 0;
	background: none;
}

.works_list article a {
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: white;
    font-size: 1vw;
    opacity: 0;
    z-index: 1;
}

.works_list article:hover {
	background: rgba(255,255,255,0.4)
	
}

.works_list article:hover a {
	opacity: 1;
    z-index: 1;
}

.works_list article a::before {
	width: 10vw;
	height: 1px;
	background: rgb(255,255,255);
	bottom: 3vw;
	right: -2vw;
	-webkit-transform: scale(0) rotate(-45deg);
	-ms-transform: scale(0) rotate(-45deg);
	transform: scale(0) rotate(-45deg);
	-webkit-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	transition-delay: 0.3s;
	opacity: 0;
}

.works_list article a:hover::before {
	-webkit-transform: scale(1) rotate(-45deg);
	-ms-transform: scale(1) rotate(-45deg);
	transform: scale(1) rotate(-45deg);
	opacity: 1;
}

.works_list article .works_case {
    margin: 0 0 5%;
    padding: 3% 5%;
    font-size: 1.4vw;
    line-height: 1.4;
	word-break: break-word;
    overflow: hidden;
}

.works_list article .works_case p.works_case_sub {
    margin: 10px 0 0;
    font-size: 1vw;
}

.works_list article.heightMinOver .works_case {
    display: inline-block;
    width: auto;
    max-height: calc((90vw * 0.33 * 0.5625) - 35px);
    font-size: 1vw;
    letter-spacing: 0.5px;
    line-height: 1.6;
	/* update Dec 2024 */
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
    padding: 0 5%;
}

.works_list article .works_caption {
	width: 100%;
	position: absolute;
	bottom: 0;
	font-size: calc(90vw * 0.33 * 0.03);
	letter-spacing: 0px;
}

.contact_us {
	margin: 10vh 0 0;
}

.contact_us a {
    color: white;
    font-size: 3vh;
}

#clients {
    padding: 5vw;
}

#clients .works_detail {
    padding: 10vh 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: visible;
}





/* Team */

#team {
    padding: 0;
    overflow: visible;
}

#team .nakami {
	padding: 0 5vw 15vh;
}

#team_cover.nakami {
	padding: 20vh 5vw;
}

.swiper-wrapper {
  will-change: transform;
  -webkit-backface-visibility: hidden;
}

.swiper-container-main {
    width: 100%;
    height: auto;
    -webkit-transition: opacity 0.6s ease, transform 0.3s ease;
    -webkit-transition: opacity 0.6s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.6s ease, -webkit-transform 0.3s ease;
    -o-transition: opacity 0.6s ease, transform 0.3s ease;
    transition: opacity 0.6s ease, transform 0.3s ease;
    transition: opacity 0.6s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
    overflow: hidden;
}

.swiper-slide {
	position: relative;
    margin: 0 0 0 0.1px;
	overflow: hidden;
}

.swiper-slide #articles {
	min-height: calc(100vh - 80px - 4vh);
}

.slider-thumbnail {
	width: 100%;
}

.slider-thumbnail .swiper-wrapper {
    display: inline-block;
	-webkit-transform: initial!important;
	    -ms-transform: initial!important;
	        transform: initial!important;
}

.slider-thumbnail h4 {
    margin: 4vh 0 2vh;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 1px;
    word-break: break-all
}

.slider-thumbnail h4:first-child {
    margin: 0 0 2vh
}

.slider-thumbnail .swiper-slide {
    cursor: pointer;
    margin: 1vh 0 0;
    padding: 0 0 0 15px;
    font-size: 1.5rem;
    line-height: 1.2;
    word-break: break-word
}

.team_list {
    width: 25vw;
    min-width: 300px;
    padding: 0 5vw 0 0
}

.team_detail {
    width: calc(100% - 25vw);
    max-width: calc(100% - 300px);
    position: relative
}

@media screen and (max-width: 1080px) {
    .team_list.pc {
        display: none!important;
		height: 0;
    }
    .team_detail {
        width: 100%;
        max-width: 100%;
    }
}

.team_profimg {
	width: calc(90vw * 0.2);
	height: calc(90vw * 0.2);
	background-size: cover!important;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
	z-index: 1;
}

.prof_data {
    width: calc(100% - (90vw * 0.2));
    height: auto;
    position: relative;
    right: 0;
    margin: calc((90vw * 0.2) - 147px) 0 0;
    padding: 0 60px 0 3vw;
    line-height: 1.6;
    z-index: 2;
}

.prof_data p {
	display: inline-block;
	width: 100%;
	word-break: break-word;
}

.prof_data p a {
	color: white;
	opacity: 0.8;
}
.prof_data p a:hover {
	opacity: 0.4;
}

.team_name {
	margin: 0 0 1vh 0;
	font-size: 3rem;
	line-height: 1;
	letter-spacing: 0;
}

.team_namekana {
    margin: 0 0 1vh;
    font-size: 1.2rem;
    line-height: 2;
}

.team_position {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    line-height: 1;
}

.team_profile {
    max-height: 45vh;
    margin: 2vh 0 0;
    padding: 2vh 5px 2vh 0px;
    border-top: solid 1px white;
    font-size: 1rem;
    text-align: justify;
    word-break: break-word;
    overflow-y: auto;
}



/* Lab. */

#lab {
    padding: 0;
    overflow: visible;
}

#lab .nakami {
	padding: 0vh 5vw;
}

#lab .page_title {
    width: 25vw;
	height: 10vw;
    padding: 0 5vw 0 0;
}

#lab .lab_list {
    width: calc(100% - 25vw);
    position: relative;
}

#lab .lab_list article {
	width: 100%;
	margin: 0 0 6vh;
}

#lab .lab_name {
	margin: 0 0 2vh;
	font-size: 3vw;
	line-height: 1;
}

#lab .lab_list article .bunner {
    width: 28%;
    height: calc((90vw - 25vw) * 0.28 * 0.56);
    background-size: auto 100%!important;
	opacity: 1;
}

@media screen and (max-width: 1080px) {
	#lab .lab_list article .bunner {
		width: 28%;
		height: calc((90vw - 25vw)* 0.28);		
	}
}

#lab .lab_list article .onhover {
	width: 100%;
	height: 100%;
	background-size: cover!important;
	opacity: 0;
}
#lab .lab_list article:hover .onhover {
	opacity: 1;
	z-index: 1;
}

#lab .lab_list article .caption {
    width: 72%;
    padding: 0 0 0 5%;
}

#lab .lab_list article:hover .caption {
	color: rgb(60,60,60);
}

#lab .lab_list article .caption .lab_comment {
    font-size: 0.9rem;
    line-height: 2;
    letter-spacing: 1px;
    word-break: break-word;
}



/* News*/

#news {
    padding: 0;
    overflow: visible;
}

#news .nakami {
	padding: 20vh 5vw 15vh;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

#news .nakami:first-child {
	-webkit-box-align: initial;
	    -ms-flex-align: initial;
	        align-items: initial;
}

#news .nakami .page_title {
    top: 0;
    padding: 0;
}

#news .nakami h3 {
    margin: 10vh 0 0;
    font-size: 3vw;
    line-height: 1.2;
}

#news .more_button {
	cursor: pointer;
	width: 30%;
	height: 40px;
	position: relative;
	bottom: 0;
	padding: 0;
	border-top: solid 1px white;
	border-bottom: solid 1px white;
	line-height: 40px;
	font-size: 0.8rem;
	color: white;
	opacity: 0.8;
}

#news .more_button:hover {
	opacity: 1;
}

#news .more_button::before {
    width: 50px;
    height: 1px;
	top: calc(50% - 0.5px);
	right: 0;
	background: white;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 0;
}

#news .more_button::after {
    width: 7px;
    height: 7px;
    top: 50%;
	right: 10px;
    border-top: solid 1px white;
    border-right: solid 1px white;
    -webkit-transform: translate(-50%,-50%) rotate(45deg) scale(1);
    -ms-transform: translate(-50%,-50%) rotate(45deg) scale(1);
    transform: translate(-50%,-50%) rotate(45deg) scale(1);
}

#news .more_button:hover::before {
	-webkit-transform: translateX(25px);
	-ms-transform: translateX(25px);
	transform: translateX(25px);
	opacity: 1;
}

#news .more_button:hover::after {
    -webkit-transform: translate(35px,-50%) rotate(45deg) scale(1);
    -ms-transform: translate(35px,-50%) rotate(45deg) scale(1);
    transform: translate(35px,-50%) rotate(45deg) scale(1);
}

.thumbnail .slick-track {
  width: 100%!important;
  -webkit-transform: unset !important;
      -ms-transform: unset !important;
          transform: unset !important;
}

.slicklist .slick-track,
.teamlist .slick-track {
	width: 100%!important;
}

.slicklist .slick-slide,
.teamlist .slick-slide {
	cursor: pointer;
	width: 100%!important;
	height: auto;
	font-size: 3vh;
	line-height: 2;
	letter-spacing: 0px;
	word-break: break-word;
}

.latest {
    width: 100%;
    height: auto;
	margin: 0 0 5vh;
}

.latest article {
	width: 30%;
	margin: 0 0 3vh;
}

.latest article.is-empty {
	width: 30%;
	height: 1px;
	margin: 0;
}

.latest article:nth-last-of-type(-n+3) {
	margin: 0;
}

.latest article .thumb {
	width: calc(90vw * 0.48 * 0.3);
	height: calc(90vw * 0.48 * 0.3);
	position: relative;
	overflow: hidden;
}

.latest article .thumb img {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	max-width: 100%;
	max-height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.latest article .caption {
    color: white;
    font-size: 0.8rem;
    line-height: 1.4;
}

.latest article ul.cat_list,
.latest article .caption .date {
    width: auto;
    height: auto;
    margin: 10px 0;
    padding: 0;
    font-size: 0.7rem;
    letter-spacing: 1px;
    line-height: 1;
    list-style: none;
}

ul.cat_list li {
	margin: 0 10px 0 0;
}



/* Contact */

#contact {
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#contact h2 {
	font-size: 7vw;
    line-height: 1;
}

#contact h4 {
	margin: 2vh 0 0;
}

#contact .kaisetsu {
    width: 100%;
    margin: 0;
    padding: 5vh 0 0 0;
    border: none;
    text-align: left;
    word-break: break-word;
    line-height: 1.6;
}



/* Page
-------------------------------------------------------------------------------*/

.page header {
    height: 100px!important;
}

.page header .logo {
    width: 15vw;
    height: 10vh;
    background: url(/svg/logo_wh.svg) no-repeat center center;
}



/* 404 */

.notfound section {
    padding: 30vh 5vw 0;
}



/* Policy */

.sitepolicy {
	margin: 5vh 0 0;
}

.sitepolicy .kaisetsu {
	max-width: 50%;
	margin: 10vh 0;
	font-size: 0.9rem;
}

.sitepolicy .kaisetsu h4 {
	margin: 0 0 3vh;
}



/* Single
-------------------------------------------------------------------------------*/

.single header {
    height: 100px!important;
}

.single header .logo {
    width: 15vw;
    height: 10vh;
    background: url(/svg/logo_wh.svg) no-repeat center center;
}

.single .works article {
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: auto;
    max-width: 1080px;
    min-height: calc(1080px * 0.56);
    position: relative;
    margin: 10vh auto 0;
    padding: 15vh 0;
    background: white;
    color: rgb(60,60,60);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.single .works article .works_case {
    margin: 0;
    padding: 0 5vw;
    font-size: 1.8vw;
    line-height: 2;
    overflow: hidden;
    word-break: break-word;
}

.single .works article .works_case p.works_case_sub {
    margin: 10px 0 0;
    font-size: 1vw;
}

.single .works article.heightMinOver .works_case {
    display: inline-block;
    width: auto;
    font-size: 1.1vw;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

/* --- update Dec 2024 ---
.single .works article.heightOver .works_case {
    display: inline-block;
    width: auto;
    font-size: 0.8vw;
    letter-spacing: 0.5px;
    line-height: 1.8;
}
*/

.single .works article .works_caption {
	width: 100%;
	position: absolute;
	bottom: 2vh;
	line-height: 1;
}

.single footer {
    position: relative!important;
    color: white;
}



/* iframe Video */

.single article.post .wp-block-embed-vimeo,
.single article.post .wp-block-embed-youtube {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	margin-top: 30px;
	margin-bottom: 30px
}
.single article.post .wp-block-embed-vimeo iframe,
.single article.post .wp-block-embed-youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.wp-block-embed-vimeo .wp-block-embed__wrapper,
.wp-block-embed-youtube .wp-block-embed__wrapper {
    position: initial;	
}



/* Footer
-------------------------------------------------------------------------------*/

footer {  
    width: 100%;
    position: absolute!important;
    bottom: 0;
    left: 0;
    padding: 15px 5vw;
    color: rgb(0,0,255);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}



/* Default WP Block etc
-------------------------------------------------------------------------------*/

.single article.post .wp-block-quote {
    padding: 20px;
    border: solid 1px grey;
    border-radius: 5px;
    color: rgb(80,80,80);
}

.single article.post .wp-block-quote p {
	padding: 0 0 10px;
}

.single article.post .wp-block-quote cite {
    font-size: 0.8rem;
}

.single article.post .wp-block-image {
	margin: 35px 0;
}

.single article.post .wp-block-table table {
    margin: 30px 0;
    border-left: solid 1px lightgrey;
    border-bottom: solid 1px lightgrey;
}

.single article.post .wp-block-table table tr {
	border-top: solid 1px lightgrey;
}

.single article.post .wp-block-table table td {
    width: auto!important;
    min-width: 150px!important;
    border-right: solid 1px lightgrey;
    padding: 15px;
    line-height: 1.8;
}

.single article figure.wp-block-image {
	margin: 5vh 0 10vh;
    text-align: center;
}

.single article .wp-block-image,
.single article .wp-block-image figure{
	min-width: 300px;
}

.single article .wp-block-columns figure.wp-block-image {
    margin: 0;
}

 .single article .wp-block-columns {
    padding: 0 10vw;
}

.single article .wp-block-column p {
	padding: 0;	
}

.single article .wp-block-image:not(.is-style-rounded) img {
    border-radius: inherit;
    margin: 0;
    background: rgba(255,255,255,0.1);
}

.wp-block-image figcaption {
    width: auto;
    height: auto;
    position: relative;
    margin: 5px 0 0;
    top: initial;
    left: initial;
    -webkit-transform: initial;
        -ms-transform: initial;
            transform: initial;
    padding: 0;
    background: none;
    font-size: 0.75rem;
    text-align: center;
    color: rgb(180,180,180);
    line-height: 1.6;
    opacity: 1;
    z-index: 1;
}

.blocks-gallery-grid figcaption,
.wp-block-gallery figcaption {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: auto;
    height: auto;
    position: relative;
    margin: 5px 0 0;
    top: 100%;
    left: initial;
    -webkit-transform: initial;
        -ms-transform: initial;
            transform: initial;
    padding: 0;
    background: 0 0;
    font-size: .75rem;
    text-align: center;
    color: rgb(180,180,180);
    line-height: 1.6;
    opacity: 1;
    z-index: 1;
}

.bgwhite .blocks-gallery-grid figcaption,
.bgwhite .blocks-gallery-caption,
.bgwhite .wp-block-image figcaption {
    color: rgb(60,60,60);
}

.blocks-gallery-grid .blocks-gallery-image figcaption,
.blocks-gallery-grid .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
    display: inline-block;
    height: auto;
    top: initial;
    padding: 5% 5%!important;
	background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(0,0,255,0.7)), to(rgba(60,175,255,0)));
	background: -o-linear-gradient(bottom, rgba(0,0,255,0.7)10%, rgba(60,175,255,0) 100%);
	background: linear-gradient(0deg, rgba(0,0,255,0.7)10%, rgba(60,175,255,0) 100%);
    opacity: 1;
    z-index: 1;
}



/* Switch */

.pc {
	display: block!important;
}

.sptb {
	display: none!important;
}



/* Responsive */

.ipad.underPc nav li a,
.ipad.underPc nav li a:link,
.ipad.underPc nav li a:active,
.ipad.underPc nav li a:visited,
.ipad.underPc nav li.sns a {
    font-size: 8vh;
    line-height: 1.5;
}

.ipad.underPc #introduction {
    -webkit-display: grid;
    display: grid;
    padding: 0 5vw;
    align-items: center;
}

.ipad.underPc .intro_box {
    font-size: 7vmin;
    line-height: 10vmin;
}

.ipad.underPc #intro {
    height: 50vh;
    padding: 5vw;
}

.ipad.underPc #about .half_box {
    width: 100%;
}

.ipad.underPc nav.about_nav h3,
.ipad.underPc nav.about_nav li h3 a {
    margin: 2vh 0 0;
    font-size: 4vw;
    line-height: 1;
}

.ipad.underPc ul.sub_nav li,
.ipad.underPc ul.sub_nav li a,
.ipad.underPc ul.sub_nav li::before {
    font-size: 3vw;
    line-height: 7vh;
}

.ipad.underPc #concept .kaisetsu div {
    margin: 0 0 4vh 0;
}

.ipad.underPc #concept .zukai {
    position: relative;
    height: auto;
}

.ipad.underPc .about_content .midashi h2 {
    font-size: 7vw;
}

.ipad.underPc .in_content {
	height: auto;
	min-height: initial;
    padding: 20vh 0 0;
}

.ipad.underPc #zuyaku.in_content {
    padding: 20vh 0 10vh;
}

.ipad.underPc #method {
	padding: 0 5vw;
}

.ipad.underPc #method #threeMethods {
    height: 50vh;
    margin: 0;
}

.ipad.underPc #method .in_content {
    height: auto;
    min-height: initial;
    padding: 0 0 20vh;
}

.ipad.underPc #method .kaisetsu h4 {
    margin: 0 0 2vh;
    font-size: 3vw;
}

.ipad.underPc #works_cover h4.ichigyo {
    font-size: 2vw;
}

.ipad.underPc .flow_chart h3 {
    font-size: 4vw;
}

.ipad.underPc .tablet {
	display: none;
}

.ipad.underPc .works_list {
    margin: 7vh 0 0;
}

.ipad.underPc .workslist .togglebox .works_list {
    margin: 0;
}

.ipad.underPc .workslist .morel {
    margin: 5vh auto 0;
}

.ipad.underPc .contact_us h4,
.ipad.underPc .contact_us p a {
    font-size: 3vw;
}

.ipad.underPc #team_cover.nakami {
    padding: 15vh 5vw 5vh;
}

.ipad.underPc .team_list {
	display: none;
}

.ipad.underPc .team_detail {
    width: 100%;
}

.ipad.underPc .swiper-slide #articles {
    display: inline-block;
    min-height: initial;
}

.ipad.underPc .team_profimg {
    width: calc(90vw * 0.32);
    height: calc(90vw * 0.32);
}

.ipad.underPc .prof_data {
    width: 100%;
    height: auto;
    position: relative;
    right: initial;
    margin: 3vh 0 0;
    padding: 0;
}

.ipad.underPc .team_profile {
    max-height: 33vh;
    padding: 2vh 10px 2vh 0px;
    border-bottom: solid 1px rgba(255,255,255,0.4);
}

.ipad.underPc #lab .nakami {
    min-height: auto;
}

.ipad.underPc #contact .half_box:first-of-type h2 {
    font-size: 5vw;
}

.ipad.orverPc ul.sub_nav li,
.ipad.orverPc ul.sub_nav li a,
.ipad.orverPc ul.sub_nav li::before {
    font-size: 2vw;
    line-height: 7vh;
}



/* English */

.en-US {    
    letter-spacing: .5px;
}

.en-US .kaisetsu,
.en-US .kaisetsu p {
    text-align: left;
    line-height: 1.6;
    word-break: break-word;
}

/*
.en-US .intro_box {
    font-size: 7.5vmin;
}
*/

.en-US #concept .kaisetsu div {
    text-align: left;
    line-height: 1.6;
    word-break: break-word;
}

.en-US #concept .kaisetsu h5 {
    font-weight: 600;
    text-align: left;
    line-height: 1.2;
}

.en-US .team_profile {
    text-align: left;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.en-US #sympathy .after_box p {
    font-size: 1.6vw;
    font-weight: 600;
    word-break: break-word;
    text-align: center;
    line-height: 1;
}

.en-US .infoG_TC .upper div {
    font-weight: 600;
    -webkit-writing-mode: initial;
    -ms-writing-mode: initial;
    writing-mode: initial;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.en-US .infoG_TC .lower div {
    font-size: 1.3vw;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.en-US #concept .circle {
    z-index: 1;
}

.en-US #concept .circle div {
    font-size: 1vw;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.en-US #concept .circle div:nth-child(3) {
    right: calc(90vw*0.48*0.95*0.1);
}

.en-US #method h4 {
    font-weight: 600;
}

.en-US #sympathy .before_box .flow_box h4 {
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.en-US #sympathy .after_box .flow_box h4 {
    width: auto;
    max-width: 90%;
    font-size: 1.2vw;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.en-US #sympathy .after_box .flow_box:first-child h4 {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-70%,-50%) rotate(-90deg);
    -ms-transform: translate(-70%,-50%) rotate(-90deg);
    transform: translate(-90%,-50%) rotate(-90deg)
}

.en-US #sympathy .after_box .flow_box:nth-child(2) h4 {
    top: 55%;
    left: 3vw;
    -webkit-transform: translate(0,0) rotate(0deg);
    -ms-transform: translate(0,0) rotate(0deg);
    transform: translate(0,0) rotate(0deg)
}

.en-US #sympathy .after_box .flow_box:nth-child(3) h4 {
    top: 50%;
    left: 2.3vw;
    -webkit-transform: translate(0,0) rotate(90deg);
    -ms-transform: translate(0,0) rotate(90deg);
    transform: translate(0,0) rotate(90deg)
}



/* Update ----------------------------------------------------------------------------------- */

/* 20240325 */
.syouhyou {
    flex-flow: column;
    width: 110px;
    height: 155px;
    position: fixed;
    bottom: 5vh;
    right: 0;
    z-index: 10
}

.syouhyou img {
    width: 110px;
    height: 72.6px;
    box-shadow: -5px 5px 0px rgba(0,0,0,.15)
}


/* 20241112 */

.en-US #intro h3 {
    margin: 0 0 50px;
    font-size: 5vw;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.en-US #intro p {
    word-break: break-word;
}

.en-US #about h3 {
    letter-spacing: 0.5px;
}

.en-US #about .nakami p {
    font-size: 1.3vw;
    word-break: break-word;
}

.en-US #about .nakami .detail p {
    padding: 0 2vw;
    font-size: 1vw;
    line-height: 1.3;
}

.en-US #about .nakami .detail .circle_box h5 {
    letter-spacing: .5px;
    line-height: 1.3;
}

.en-US #about .nakami .creation_box h5 {
    font-size: 1.4vw;
    font-weight: 600;
    line-height: 1;
}

.en-US #about .nakami .detail .creation_step {
	margin: 1vw 0 0;
}

.en-US #about .nakami .detail .creation_step p {
    width: 2vw;
    height: 10vw;
    padding: 0;
    font-size: 1vw;
    letter-spacing: .5px;
    line-height: 2vw;	
}

.en-US #concept .nakami .detail .detail_box p {
    font-size: 1.3vw;
    line-height: 1.8;
}

.en-US #concept .nakami .detail .detail_box .our_transcreation p.tategaki {
    font-size: 1vw;
    line-height: 3vw;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-orientation: initial;
    letter-spacing: .5px;
}

.en-US #concept .nakami .detail .detail_box .our_transcreation p.creation {
	line-height: 1.4;
}

.en-US #core h3 {
	letter-spacing: .5px;
}

.en-US #core .nakami .detail .detail_box h4 {
    line-height: 1.4;	
}

.en-US #lab .lab_list article .caption .lab_comment {
    font-size: .9rem;
    line-height: 1.6;
}



/*
Login CSS
*/

body.login {
	display: inline-block;
	width: 100%;
	height: auto;
	min-height: 100vh;
	position: relative;
	background: url( /img/ogp.jpg) no-repeat center center;
	background-size: cover!important;
	background: linear-gradient(65deg,rgba(60,175,255,1) 0%,rgba(0,0,255,1) 100%);
	color: rgb(255,255,255);
	overflow-y: auto;
	vertical-align: bottom;
}

body.login::before {
    content: '';
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.1);
	z-index: 1;
}

html.ua-mobile body.login {
	width: 100%;
	height: 100%;
}

..language-switcher {
	display: none;
}

#login {
	display: inline-block;
	width: 300px;
	height: auto;
	margin: 5vh auto 0;
	padding: 5% 0!important;
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	box-sizing: border-box;
	background: none;
	font-size: 0.8rem;
	letter-spacing: 1px;
	text-align: center;
    z-index: 10;
}

.login label {
	color: rgb(255,255,255);
	font-size: 0.8rem;
}

.login #backtoblog a, .login #nav a {
	text-decoration: none;
	color: rgb(255,255,255);
}

#login h1 {
    display: block;
    width: auto;
    height: 100px;
    margin: 0 auto 10px;
    background: url(/svg/logo_wh.svg) no-repeat center center;
    background-size: 80% auto;
}

.login h1 a {
	display: none;
}

.login form {
	max-width: 300px;
	margin: 0 auto!important;
	padding: 0;
	font-weight: normal;
	border-style: none;
	box-shadow: none;
	background: none;
}

.login form .input, .login input[type=text], .login form input[type=checkbox] {
	padding: 10px;
	background: #f5f5f5;
	border: none;
	font-size: 16px;
	letter-spacing: 2px;
}

.login #backtoblog, .login #nav {
	font-size: 13px;
	padding: 0;
}

.login #nav a, .login #backtoblog a {
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

.login a {
	color: rgb(255,255,255);
}

.login #nav a:hover, .login #backtoblog a:hover, .login a:active, .login a:hover {
    background: rgba(40,40,40,0.8);
	color: rgb(255,255,255);
	text-decoration: underline;
}

.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large {
	height: 45px;
	line-height: 28px;
	padding: 0 12px 2px;
}

.wp-core-ui .button-primary {
	width: 100%;
	margin-top: 10px;
	padding: 10px 0;
	border: none;
	border-radius: initial;
    background: lightblue;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	align-items: flex-start;
	text-align: center;
	text-shadow: none;
	vertical-align: middle;
	color: white;
	font-size: 0.8rem;
	font-weight: normal;
	letter-spacing: 5px;
	clear: both;
	cursor: pointer;
}

.wp-core-ui .button-primary:hover {
	border: none;
	background: rgb(0,0,0);
}

div.updated, .login .message {
    margin: 15px 0;
    padding: 5% 10%;
    background: rgba(255,255,255,0.9);
    border: none;
    color: rgba(0,0,0,1);
    text-align: left;
}

form dl {
	margin-bottom: 20px;
}

form dt {
	margin-top: 15px;
}

input#login_username, input#login_password {
	background: #e8e8e8;
	border: none;
	box-shadow: none;
	padding: 10px;
	font-size: 16px;
	color: #000;
	letter-spacing: 2px;
}

form input {
    width: 100%;
    background: rgb(255,255,255);
    border: none;
    box-shadow: none;
    padding: 5px 10px;
    color: rgb(68,68,68);
    letter-spacing: 2px;
}

form input:active {
    background: rgb(255,255,255);
    color: rgb(0,0,0);
}

.login #login_error {
    margin-bottom: 20px;
    border: none!important;
    background: rgb(0,0,0)!important;
}

#wp-auth-check-wrap #wp-auth-check {
	background: rgb(0,0,0)!important;
}

#wp-auth-check-wrap #wp-auth-check {
    width: 380px;
    height: auto;
    position: fixed;
    overflow: hidden;
    left: 50%;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 30px 0 0;
    background-color: rgb(0,0,0);
    box-shadow: 0 3px 6px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 1000011;
}

.language-switcher {
	display: none;
}