@charset "UTF-8";
/*
Version: 1.0.0
Creation Date: 2026.3.18
Last Updated: 2026.3.25
*/


/* import
------------------------------------------------------------ */
@import "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
@import "https://cdn.jsdelivr.net/npm/lity@2.4.1/dist/lity.min.css";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap";


/* set
------------------------------------------------------------ */
:root {
--design-width: 1920;
--font-size-base: clamp(8.75px, calc(10 * 100vw / var(--design-width)), 11.25px);
--font-base: 'Noto Sans JP', sans-serif;
--font-min: 'Noto Serif JP', serif;
--font-en: 'Oswald', sans-serif;
--font-num: 'Bebas Neue', sans-serif;
--color-primary: #0055A1;
--color-secondary: #E50012;
--color-text: #1A1A1A;
--color-bg: #E5E5E5;
--color-nvy: #1B1464;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: var(--font-size-base);
scroll-behavior: smooth;
}
body {
-webkit-text-size-adjust: 100%;
font-family: var(--font-base);
color: var(--color-text);
font-size: 1.6rem;
font-weight: 400;
min-height: 100vh;
display: flex;
flex-direction: column;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
:hover {
transition: .3s;
}
.smd,.smp {
display: none;
}
.pc {
display: block;
}


/* common
------------------------------------------------------------ */
/* font */
.NOTO {  /* Noto Sans JP */
font-family: var(--font-base);
}
.MIN {  /* Noto Serif JP */
font-family: var(--font-min);
}
.EN {  /* Oswald */
font-family: var(--font-en);
letter-spacing: .05em;
}
time { /* Bebas Neue */
font-family: var(--font-num);
}

/* layout */
main {
width: 100%;
display: block;
position: relative;
overflow: hidden;
flex: 1 0 auto;
}
article {
width: 100%;
position: relative;
}
section {
width: 80%;
margin: 0 auto;
position: relative;
}

/* style */
.none {
display: none;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
p.center.fadeIn {
font-size: 2.3rem;
line-height: 2;
text-align: center;
}

/* color */
.sky {
color: var(--color-primary);
}
.red {
color: var(--color-secondary);
}
.gray {
color: var(--color-bg);
}

/* background */
.bg_sky {
background: var(--color-primary);
}
.bg_red {
background: var(--color-secondary);
}
.bg_gray {
background: var(--color-bg);
}

/* title */
.ttl {
font-size: 4rem;
font-weight: 600;
padding-bottom: 2rem;
position: relative;
}
.ttl::before {
content: "";
background: #CCC;
width: 300%;
height: .3rem;
position: absolute;
bottom: 0;
left: -150%;
z-index: -1;
}
.ttl::after {
content: "";
background: linear-gradient(90deg, var(--color-primary), var(--color-nvy));
width: 16rem;
height: .5rem;
position: absolute;
bottom: -.1rem;
left: 0;
z-index: -1;
}
.ttl::first-letter {
color: var(--color-primary);
}
.ttl small {
font-family: var(--font-en);
color: var(--color-secondary);
font-size: 2.5rem;
display: block;
}

h2.ttl:not(:has(small)) {
color: var(--color-primary);
}
.ttl.MIN {
font-size: 5rem;
font-weight: 700;
}

h1.ttl {
background: url("img/ttl_about.jpg") no-repeat center/cover;
color: #FFF;
text-align: center;
margin-bottom: 6rem;
padding: 2em 5%;
}
h1.ttl::before,
h1.ttl::after {
display: none
}
h1.ttl::first-letter {
color: #FFF;
}
.company h1.ttl {
background: url("img/ttl_company.jpg") no-repeat center/cover;
}
.business h1.ttl {
background: url("img/ttl_business.jpg") no-repeat center/cover;
}
.member h1.ttl {
background: url("img/ttl_member.jpg") no-repeat center/cover;
}
.recruit h1.ttl {
background: url("img/ttl_recruit.jpg") no-repeat center/cover;
}

.ttl.center {
text-align: center;
}
.ttl.center::after {
left: 50%;
transform: translateX(-50%);
}

h3.ttl {
font-size: 2.8rem;
font-weight: 700;
}

/* .more */
.more {
list-style: none;
}
.more a {
background: var(--color-primary) url("img/arw_wht.svg") no-repeat center right .5em;
color: var(--color-primary);
font-size: 2.2rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
padding: .5em 2.5em .5em 2em;
display: inline-block;
border: 2px solid var(--color-primary);
position: relative;
overflow: hidden;
}
.more a::before {
content: "";
background: #FFF url("img/arw_sky.svg") no-repeat center right .5em;
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
transition: transform .3s ease;
z-index: 0;
}
.more a:hover::before {
transform: translateY(-100%);
}
.more a span {
position: relative;
z-index: 1;
}
.more a:hover span {
color: #FFF;
}

/* .cta */
.cta a {
background:
linear-gradient(#FFF, #FFF) padding-box,
linear-gradient(90deg, var(--color-primary), var(--color-nvy)) border-box;
color: #FFF;
font-size: 2.5rem;
text-decoration: none;
white-space: nowrap;
padding: .3em 2em;
display: inline-block;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.cta a::before {
content: "";
background: linear-gradient(90deg, var(--color-primary), var(--color-nvy));
position: absolute;
inset: 0;
transition: transform .3s ease;
z-index: 0;
}
.cta a:hover::before {
transform: translateY(-100%);
}
.cta a span {
position: relative;
z-index: 1;
}
.cta a:hover span {
color: var(--color-primary);
}

/* .flex */
.flex {
display: flex;
margin: 6rem 0;
}
.flex > div {
flex-basis: 40%;
}
.flex figcaption {
flex-basis: 60%;
padding: 0 5%;
}
.flex figcaption .ttl {
margin-bottom: 3rem;
}
.flex figcaption p {
font-size: 2.1rem;
line-height: 2;
margin-bottom: 3rem;
}


/* header
------------------------------------------------------------ */
header {
background: #FFF;
width: 100%;
transform: translateY(0);
transition: .3s;
}
header section {
width: 92%;
max-width: 1400px;
height: 10rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
header h1 {
padding-bottom: 1rem;
}
header nav {
margin-left: auto;
padding-bottom: 1rem;
gap: 4rem;
}
header nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 1.5rem;
}
header nav ul li a {
background:
linear-gradient(#FFF, #FFF) padding-box,
linear-gradient(90deg, var(--color-primary), var(--color-nvy)) border-box;
color: var(--color-text);
___font-size: 1.4rem;
text-decoration: none;
display: block;
padding: .2em 1.5em;
border: 2px solid transparent;
border-radius: 100vh;
}
header nav ul li a:hover {
background:
linear-gradient(90deg, var(--color-primary), var(--color-nvy)) padding-box,
linear-gradient(90deg, var(--color-primary), var(--color-nvy)) border-box;
color: #FFF;
}
header .cta a {
font-size: 1.5rem;
padding: .7em 1.5em;
position: absolute;
top: 0;
right: 0;
}
header .cta a span::before {
content: "";
background: url("img/mail_wht.svg") no-repeat center/contain;
width: 1.5rem;
height: 1.2rem;
margin-right: .5em;
display: inline-block;
}
header .cta a:hover span::before {
background: url("img/mail_sky.svg") no-repeat center/contain;
}

header.fixed {
box-shadow: 0 .4rem 1rem rgba(0,0,0,.05);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
transform: translateY(0);
animation: slideDown .3s ease;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
header.fixed section,
header.fixed .cta {
height: 6rem;
}
header.fixed h1 img {
max-height: 4rem;
}
header.fixed .cta a {
height: 100%;
margin-left: 2rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
header.fixed .cta a span {
color: transparent;
font-size: 0;
}
header.fixed .cta a span::before {
width: 2rem;
height: 1.6rem;
}
@media screen and (min-width: 1024px) {
#menu {
display: none;
}
}


/* #contact
------------------------------------------------------------ */
#contact {
background: url("img/contact.jpg") no-repeat center/cover;
color: #FFF;
position: relative;
}
#contact section {
padding: 6rem 0 8rem;
text-align: center;
}
#contact .ttl::first-letter {
color: #FFF;
}
#contact ul {
list-style: none;
max-width: 800px;
margin: 3rem auto;
display: flex;
justify-content: space-around;
align-items: center;
gap: 4rem;
position: relative;
}
#contact ul::before {
content: "";
background: #FFF;
width: .1rem;
height: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#contact ul li {
flex: 1;
}
#contact ul li:not(.cta) a {
font-family: var(--font-en);
color: #FFF;
font-size: 3.5rem;
text-decoration: none;
}
#contact ul li:not(.cta) a:hover {
color: var(--color-nvy);
}
#contact ul li small {
font-family: var(--font-en);
font-size: 2rem;
display: block;
}


/* footer
------------------------------------------------------------ */
footer {
margin-top: auto;
}

footer section {
padding-top: 3rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 4rem;
}
footer address {
font-size: 2rem;
font-style: normal;
line-height: 1.6;
}
footer address h1 {
color: var(--color-nvy);
font-size: 2rem;
margin-bottom: 1rem;
}
footer address h1 a {
display: block;
margin-bottom: 1rem;
}
footer address h1 img {
width: 33rem;
}
footer address .address-meta {
display: block;
}
footer address .address-meta span {
display: block;
}
footer ul {
font-size: 2rem;
list-style: none;
display: flex;
gap: 2rem;
}
footer ul li + li:before {
content: "/";
margin-right: 2rem;
}
footer ul li a {
color: var(--color-text);
text-decoration-thickness: .1rem;
text-underline-offset: .6rem;
}
footer ul li a:hover {
color: var(--color-primary);
text-decoration: none;
}
footer p.EN {
background: var(--color-primary);
color: #FFF;
font-size: 2rem;
font-weight: 300;
text-align: center;
padding: 2rem 0;
}

/* footer redesign for lower pages */
body:not(.home) footer {
background: #f7f9fc;
border-top: 1px solid #dbe4ef;
}
body:not(.home) footer section {
width: 92%;
max-width: 1200px;
padding: 4.8rem 0 3.2rem;
align-items: flex-start;
}
body:not(.home) footer address {
flex: 1 1 auto;
font-size: 1.7rem;
line-height: 1.8;
}
body:not(.home) footer address h1 {
font-size: 2rem;
font-weight: 600;
line-height: 1.5;
margin-bottom: 1.6rem;
}
body:not(.home) footer address h1 a {
margin-bottom: 1.2rem;
}
body:not(.home) footer address h1 img {
width: min(320px, 60vw);
}
body:not(.home) footer address .address-meta {
display: flex;
flex-wrap: wrap;
column-gap: 2.4rem;
row-gap: .4rem;
}
body:not(.home) footer address .address-meta span {
display: inline;
color: #4b5563;
font-size: 1.5rem;
white-space: nowrap;
}
body:not(.home) footer ul {
font-size: 1.5rem;
justify-content: flex-end;
align-items: center;
margin-top: .6rem;
}
body:not(.home) footer ul li + li:before {
color: #9ca3af;
}
body:not(.home) footer p.EN {
border-top: none;
background: var(--color-primary);
color: #FFF;
font-size: 1.4rem;
letter-spacing: .04em;
padding: 1.8rem 0 2.2rem;
}

#pagetop {
position: fixed;
right: 0;
bottom: 0;
z-index: 1000;
}
#pagetop a {
background: linear-gradient(90deg, var(--color-primary), var(--color-nvy));
font-family: var(--font-en);
color: #FFF;
font-size: 1.4rem;
text-decoration: none;
width: 6rem;
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
}
#pagetop a:hover {
opacity: .8;
}


/* .home
------------------------------------------------------------ */
/* #main */
#main {
aspect-ratio: 3 / 1;
min-height: clamp(300px, 60vh, 640px);
position: relative;
overflow: hidden;
}
#main section {
padding: 6rem 0;
position: absolute;
inset: 0;
z-index: 10;
}
#main p {
padding-left: 1rem;
}
#main .more {
margin: 5rem 0 0 3rem;
}
#main .EN {
position: absolute;
bottom: 4rem;
right: 0;
}
#main .EN a {
background: rgba(0,83,158,.75);
color: #FFF;
font-size: 2.2rem;
text-decoration: none;
padding: 2em 1.5em 1em;
display: block;
aspect-ratio: 1 / 1;	
border-radius: 100vh;
position: relative;
}
#main .EN a::before {
content: "";
background: url("img/play.svg") no-repeat center/contain;
width: 2rem;
height: 2.4rem;
position: absolute;
top: calc(50% + 1em);
left: 50%;
transform: translate(-50%,-50%)
}
#main .EN a::after {
content: "";
box-shadow: inset 0 0 0 2px rgba(255,255,255,.8);
border-radius: 50%;
position: absolute;
inset: 1rem;
z-index: 1;
}
#main .EN a:hover::after {
animation: ripple .6s linear infinite;
}
@keyframes ripple {
0% {
transform: scale(1);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.8),
0 0 0 0 rgba(255,255,255,.8);
}
100% {
transform: scale(1.18);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.8),
0 0 0 1px rgba(255,255,255,0);
}
}
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  70% {
    opacity: 0.3;
  }
  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}
#main .swiper-wrapper {
position: relative;
z-index: 0;
}
#main .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* #topics */
#topics .ttl {
margin-top: 8rem;
text-align: center;
}
#topics .ttl::before {
width: 100%;
left: 0;
}
#topics .ttl::after {
left: 50%;
transform: translateX(-50%);
}
#topics ul {
padding: 5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 5rem;
list-style: none;
}
#topics ul li {
flex: 0 0 calc((100% - 10rem) / 3);
}
#topics ul li a {
color: var(--color-text);
font-size: 2rem;
text-decoration: none;
background: #FFF;
padding: 2.4rem;
display: flex;
align-items: center;
gap: 1.6rem;
border: 1px solid #E5E5E5;
height: 100%;
}
#topics ul li time {
color: #666;
font-size: 2.2rem;
margin-left: 0;
white-space: nowrap;
}
[class*="cat_"] {
font-family: var(--font-en);
background: var(--color-text);
color: #FFF;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: .05em;
margin-right: 1rem;
padding: .4em 1em;
display: inline-block;
align-items: center;
}
.cat_01 {
background: var(--color-secondary);
}
.cat_02 {
background: var(--color-primary);
}
.cat_03 {
background: #F29600;
}
#topics ul li p {
margin-top: .8rem;
}
#topics ul li a:hover p {
color: var(--color-primary);
}
#topics ul li .topic-title {
font-size: 2.1rem;
line-height: 1.4;
margin-top: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
}
#topics ul li .topic-excerpt {
color: #555;
font-size: 1.6rem;
line-height: 1.4;
margin-top: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
}
#topics ul li [class*="cat_"] {
margin-right: 0;
white-space: nowrap;
}
#topics ul li a:hover .topic-title,
#topics ul li a:hover .topic-excerpt {
color: var(--color-primary);
}

/* #company */
#company {
margin: 6rem 0;
}
#company figure {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
#company figure div {
text-align: right;
margin-top: -16rem;
padding: 0 5rem;
}
#company figure p {
font-size: 2.1rem;
line-height: 2;
margin-bottom: 3rem;
}
#company figure .more li {
margin-top: 2rem;
}

/* .flex */
.home .flex figcaption {
padding: 0 10%;
}

/* #business */
#business .flex figcaption {
padding-left: 5%;
}

/* #recruit */
#recruit .flex figcaption {
order: -1;
padding-right: 5%;
}


/* .about
------------------------------------------------------------ */
/* #tohoku-unity */
#tohoku-unity figure {
margin: 8rem 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
#tohoku-unity figure div {
text-align: right;
padding: 0 5rem;
}
#tohoku-unity figure p {
font-size: 2.1rem;
line-height: 2;
margin: 3rem 0;
}


/* .business
------------------------------------------------------------ */
.business h2 {
margin-bottom: 3rem;
}

/* .flex */
.business .flex {
justify-content: space-between;
margin: 10rem 0;
}
.business .flex > div {
flex-basis: 45%;
}
.flex figcaption {
flex-basis: 55%;
padding: 0;
}
.business .flex:nth-child(odd) > div {
margin-left: -2%;
}
.business .flex:nth-child(even) > div {
margin-right: -2%;
}
.business .flex:nth-child(odd) .ttl::before {
left: auto;
right: -150%;
}
.business .flex:nth-child(even) figcaption {
order: -1;
}
.business .flex:nth-child(even) .ttl::after {
left: auto;
right: 0;
}


/* .member
------------------------------------------------------------ */
#member {
margin-bottom: 6rem;
list-style: none;
}
#member > li {
padding: 3rem 0;
display: grid;
grid-template-columns: 260px 1fr 150px;
gap: 3rem;
align-items: center;
}
#member figure {
text-align: center;
}
#member p {
font-size: 1.8rem;
line-height: 1.6;
}
#member em {
color: var(--color-primary);
font-style: normal;
font-weight: 500;
display: block;
}
#member > li ul {
display: grid;
gap: 1rem;
}
#member .more a {
background: var(--color-primary);
color: var(--color-text);
font-size: 1.5rem;
font-weight: 400;
text-align: center;
padding: .3em 2em .3em 2.5em;
display: block;
border: 1px solid var(--color-primary);
}
#member .more a::before {
background: #FFF;
}
#member .more.map a {
background: var(--color-primary) url("img/map_wht.svg") no-repeat center left 2rem;
}
#member .more.map a::before {
background: #FFF url("img/map_sky.svg") no-repeat center left 2rem;
}


/* .recruit
------------------------------------------------------------ */
.recruit > figure {
margin: 8rem 0;
display: grid;
grid-template-columns: 40% 60%;
}
.recruit figcaption {
padding: 0 10% 0 5%;
}
.recruit figure div {
background: #FFF;
padding-left: 5%;
}
.recruit figure p {
font-size: 2.1rem;
line-height: 2;
margin: 3rem 0;
}


/* .contact
------------------------------------------------------------ */
.cf7__list {
  width: 900px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

.cf7__list dt:nth-of-type(n + 2),
.cf7__list dd:nth-of-type(n + 2) {
  margin-top: 30px;
}

.cf7__list dt {
  width: 35%;
  padding-top: 15px;
}

.cf7__list dd {
  width: 65%;
}

.wpcf7-spinner {
    visibility: hidden;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    position: relative;
}

/* 必須・任意 */
.cf7__required,
.cf7__optional {
  margin-right: 15px;
  padding: 6px 14px;
  color: #fff;
  font-size: 12px;
  vertical-align: 1px;
}

.cf7__required {
  color: red;
}

.cf7__optional {
  color: #878D8E;
}

/* input・textarea */
.cf7__list dd input[type="text"],
.cf7__list dd input[type="tel"],
.cf7__list dd input[type="email"],
.cf7__list dd textarea {
  width: 100%;
  padding: 15px 20px;
}


/* プレースホルダー */
/* Google Chrome / Safari / Mozilla Firefox / Opera */
.cf7__list dd input[type="text"]::placeholder,
.cf7__list dd input[type="tel"]::placeholder,
.cf7__list dd input[type="email"]::placeholder,
.cf7__list dd textarea::placeholder {
  color: #a5a5a5;
}

/* Microsoft Edge */
.cf7__list dd input[type="text"]::-ms-input-placeholder,
.cf7__list dd input[type="tel"]::-ms-input-placeholder,
.cf7__list dd input[type="email"]::-ms-input-placeholder,
.cf7__list dd textarea::-ms-input-placeholder {
  color: #a5a5a5;
}

/* Internet Explorer */
.cf7__list dd input[type="text"]:-ms-input-placeholder,
.cf7__list dd input[type="tel"]:-ms-input-placeholder,
.cf7__list dd input[type="email"]:-ms-input-placeholder,
.cf7__list dd textarea:-ms-input-placeholder {
  color: #a5a5a5;
}

/* 送信ボタン */
.cf7__button {
  text-align: center;
}

input[type="submit"] {
  width: 200px;
  height: 50px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-nvy));
  border: aliceblue;
  color: #fff;
  font-weight: bold;
  transition: opacity .6s;
  margin: 50px 0;
}

input[type="button"] {
  width: 200px;
  height: 50px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-nvy));
  border: aliceblue;
  color: #fff;
  font-weight: bold;
  transition: opacity .6s;
  margin: 50px 70px 0 0;
}

input[type="submit"]:hover {
  opacity: .6;
}

/* ajax-loader */
.wpcf7-spinner {
  vertical-align: middle;
}


@media screen and (max-width: 767px) {

  .cf7__list dt {
    width: 100%;
    margin-bottom: 15px;
    padding-top: 0;
  }

  .cf7__list dd {
    width: 100%;
  }

  .cf7__list dd:nth-of-type(n + 2) {
    margin-top: 0;
  }

  .cf7__list dd .wpcf7-checkbox,
  .cf7__list dd .wpcf7-radio {
    padding: 15px 0 0;
  }

  /* 送信ボタン */
  input[type="submit"] {
    width: 180px;
    height: 56px;
  }

}

.check-box {
	text-align: center;
	margin-top: 20px;
}

/* common
------------------------------------------------------------ */
/* layout */
section {
width: 90%;
}

@media screen and (max-width: 1023px) {

/* set
------------------------------------------------------------ */
.pc {
display: none;
}
.smd {
display: block;
}

/* common
------------------------------------------------------------ */
/* layout */
main {
margin-top: 6rem;
}

/* style */
p.center.fadeIn {
font-size: 2rem;
text-align: left;
}

/* .flex */
.home .flex figcaption {
padding: 0 5%;
}

/* header
------------------------------------------------------------ */
header {
box-shadow: 0 .4rem 1rem rgba(0,0,0,.05);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
header section {
height: 6rem;
}
header h1 img {
max-height: 4rem;
}
header nav {
display: none;
}
header .cta {
height: 6rem;
}
header h1 img {
max-height: 4rem;
}
header .cta a {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
right: 6rem;
}
header .cta a span {
color: transparent;
font-size: 0;
}
header .cta a span::before {
width: 2rem;
height: 1.6rem;
}
button#menu,
#menu {
background: var(--color-bg);
width: 6rem;
height: 6rem;
padding: 0;
border: 0;
appearance: none;
-webkit-appearance: none;
outline: none;
font-size: 0;
line-height: 0;
color: transparent;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: fixed;
top: 0;
right: 0;
}
#menu > *:not(span) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
display: block !important;
}
#menu em {
display: none !important;
}
#menu span {
background: var(--color-primary);
width: 2.5rem;
height: .2rem;
margin: 0;
display: block;
transition: .3s;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#menu span:nth-of-type(1) {
top: 2rem;
}
#menu span:nth-of-type(2) {
top: 2.9rem;
}
#menu span:nth-of-type(3) {
top: 3.8rem;
}
#menu.active span:nth-of-type(1) {
top: 2.9rem;
transform: translateX(-50%) rotate(45deg);
}
#menu.active span:nth-of-type(2) {
opacity: 0;
}
#menu.active span:nth-of-type(3) {
top: 2.9rem;
transform: translateX(-50%) rotate(-45deg);
}
header nav.active {
display: block;
background: var(--color-bg);
width: 100%;
height: calc(100vh - 6rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: 2rem;
position: fixed;
top: 6rem;
left: 0;
}
header nav.active ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
header nav.active ul li {
width: 100%;
border-bottom: 1px solid #FFF;
}
header nav.active ul li a {
background: none;
color: var(--color-primary);
font-size: 2.3rem;
font-weight: 700;
text-align: center;
width: 100%;
padding: 2rem;
border: none;
border-radius: 0;
}

/* .home
------------------------------------------------------------ */
/* #topics */
#topics ul {
padding: 5rem 0;
}
#topics ul li a {
display: grid;
grid-template-columns: auto 1fr;
gap: .8rem 1.2rem;
align-items: center;
padding: 1.8rem 1.4rem;
}
#topics ul li [class*="cat_"] {
grid-column: 1 / 2;
}
#topics ul li time {
grid-column: 2 / 3;
font-size: 1.8rem;
}
#topics ul li .topic-title {
grid-column: 1 / -1;
font-size: 2rem;
}

/* #company */
#company figure div {
margin-top: -6rem;
}

/* .about
------------------------------------------------------------ */
/* #tohoku-unity */
#tohoku-unity figure {
grid-template-columns: 40% 60%;
}
#tohoku-unity figure div {
padding-top: 3rem;
}
	
/* .member
------------------------------------------------------------ */
#member > li {
grid-template-columns: 1fr;
gap: 2rem;
}
#member > li ul {
grid-template-columns: repeat(2, 1fr);
}

/* .recruit
------------------------------------------------------------ */
.recruit figcaption {
padding: 0 5%;
}
.recruit figure div {
margin-bottom: 3rem;
}
.recruit .ttl.MIN {
text-align: center;
}
.recruit .ttl.MIN::after {
left: 50%;
transform: translateX(-50%);
}

}


@media screen and (max-width: 540px) {

/* set
------------------------------------------------------------ */
.smd,.smp-none {
display: none;
}
.smp {
display: block;
}
br.smp {
font-size: 0;
}

/* footer
------------------------------------------------------------ */
footer section {
display: block;
}
footer address h1 {
text-align: center;
}
footer ul {
margin: 2rem 0;
justify-content: center;
}
footer p.EN {
font-size: 1.5rem;
}
body:not(.home) footer section {
padding: 3.2rem 0 2.4rem;
}
body:not(.home) footer address {
font-size: 1.5rem;
}
body:not(.home) footer address h1 {
font-size: 1.8rem;
}
body:not(.home) footer address .address-meta {
display: block;
}
body:not(.home) footer address .address-meta span {
display: block;
}
body:not(.home) footer ul {
justify-content: flex-start;
}

/* common
------------------------------------------------------------ */
/* title */
.ttl.MIN {
font-size: 3.5rem;
}

/* .more */
.more {
text-align: center;
}

/* .flex */
.flex {
display: block;
}

/* #contact
------------------------------------------------------------ */
#contact ul {
margin: 0;
display: block;
}
#contact ul::before {
display: none;
}
#contact ul li {
margin-bottom: 2rem;
}

/* .home
------------------------------------------------------------ */
/* #main */
#main {
aspect-ratio: 4 / 5;
}

/* #topics */
#topics ul {
flex-direction: column;
}
#topics ul li a {
padding: 1.4rem 1rem;
}
#topics ul li .topic-title {
font-size: 1.8rem;
}

/* #company */
#company figure {
grid-template-columns: 1fr;
}
#company figure div {
width: 70%;
margin: -10rem 0 3rem auto;
}

/* .about
------------------------------------------------------------ */
/* #tohoku-unity */
#tohoku-unity figure {
display: block;
}
#tohoku-unity figure div {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
opacity: .5;
}

/* .business
------------------------------------------------------------ */
/* .flex */
.business .flex figcaption {
margin-top: 3rem;
}

/* .recruit
------------------------------------------------------------ */
.recruit > figure {
display: block;
}

}

/* .single
------------------------------------------------------------ */
body.single-post .single-post-content {
width: min(1040px, 92%);
margin: 8rem auto 10rem;
}
body.single-post .single-post-content .post-header {
background: transparent;
border-left: 4px solid var(--color-primary);
padding-left: 1.8rem;
margin-bottom: 3.2rem;
}
body.single-post .single-post-content .post-meta {
display: flex;
align-items: center;
gap: 1.2rem;
margin-bottom: 1.4rem;
}
body.single-post .single-post-content .post-meta time {
color: #6b7280;
font-size: 2rem;
}
body.single-post .single-post-content .post-category {
font-family: var(--font-en);
font-size: 1.4rem;
font-weight: 600;
letter-spacing: .06em;
padding: .4em 1em;
display: inline-block;
}
body.single-post .single-post-content .post-title {
color: var(--color-primary);
font-size: clamp(3rem, 3.4vw, 4.6rem);
font-weight: 700;
line-height: 1.4;
letter-spacing: .02em;
margin: 0;
}
body.single-post .single-post-content .entry-content-wrap {
text-align: left;
font-size: clamp(1.7rem, 1.6vw, 2rem);
line-height: 2;
margin: 0;
padding: 3.6rem 4rem 4.2rem;
background: #FFF;
border: 1px solid #e5e7eb;
box-shadow: 0 10px 30px rgba(17,24,39,.05);
}
body.single-post .single-post-content .entry-content-wrap > * + * {
margin-top: 1.3em;
}
body.single-post .single-post-content .entry-content-wrap p {
margin: 0;
}
body.single-post .single-post-content .post-back {
margin-top: 2.8rem;
text-align: right;
}
body.single-post .single-post-content .post-back a {
color: var(--color-primary);
font-size: 1.6rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .6rem;
}
body.single-post .single-post-content .post-back a::before {
content: "";
width: .7rem;
height: .7rem;
border-top: 2px solid currentColor;
border-left: 2px solid currentColor;
transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
body.single-post .single-post-content {
margin: 4rem auto 7rem;
}
body.single-post .single-post-content .post-header {
margin-bottom: 2rem;
}
body.single-post .single-post-content .entry-content-wrap {
line-height: 1.9;
padding: 2.2rem 1.8rem 2.8rem;
}
}

/* Fallback for environments not using custom wrappers */
body.single-post main,
body.single-post .wp-site-blocks main,
body.single-post .wp-block-post-content,
body.single-post article {
width: min(920px, 90%);
margin-left: auto;
margin-right: auto;
}
body.single-post .wp-block-post-content,
body.single-post article,
body.single-post main {
text-align: left;
line-height: 2;
}

/* プライバシーポリシー
------------------------------------------------------------ */
.pp_box {
	margin: 50px;
}
.pp_box h3 {
	padding: 20px 0 10px 0;
}
.p-title{
	padding-bottom: 10px;
}
.p-title02{
	padding: 10px 0;
}