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


/* import
------------------------------------------------------------ */
@import "https://cdn.jsdelivr.net/gh/amcosand/shared/2025.1.css";
@import "https://cdn.jsdelivr.net/gh/amcosand/shared/fonts/KintoSans/KintoSans.css";
@import "https://cdn.jsdelivr.net/gh/amcosand/shared/fonts/STIXGeneral/STIXGeneral.css";
@import "https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap";


/* set
------------------------------------------------------------ */
:root {
--font-base: 'Kinto Sans', sans-serif;
--font-min: 'Shippori Mincho B1', serif;
--font-en: 'STIXGeneral', serif;
--color-primary: #b81c22;
--color-text: #FFF;
}
body {
background: #000;
letter-spacing: .04em;
line-height: 1.7;
}


/* common
------------------------------------------------------------ */
/* font */
.EN { /* STIXGeneral */
font-family: var(--font-en);
font-weight: normal;
font-style: italic;
}
.EN.b {
font-weight: bold;
}
.MIN {
font-weight: 600;
}
.f31 {
font-size: clamp(2.6rem, 2.26vw, 3.1rem);
}
.f34 {
font-size: clamp(2.9rem, 2.48vw, 3.4rem);
}
.f67 {
font-size: clamp(5rem, 4.9vw, 6.7rem);
}
.f110 {
font-size: clamp(6rem, 8.05vw, 11rem);
}

/* layout */
section {
width: 80%;
padding: 5rem 0;
}
.narrow {
width: 76%;
}

/* style */
.ttl {
margin-left: -1.5em;
}
.lined {
color: var(--color-primary);
font-size: clamp(2.5rem, 2.6vw, 3.5rem);
font-weight: 700;
line-height: 1.3;
margin-bottom: .5em;
padding-left: .5em;
border-left: 4px solid var(--color-primary);
}
.more {
text-align: center;
}
.more a {
background: #000;
font-size: 1.7rem;
text-decoration: none;
min-width: 270px;
min-height: 43px;
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid #000;
position: relative;
}
.more a:hover {
background: #FFF;
color: #000;
}
.more a::after {
content: "\f105";
font-family: "Line Awesome Free";
font-size: 2rem;
font-weight: 900;
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
}

/* color */
.red {
color: var(--color-primary);
}

/* background */
.bg_red {
background: var(--color-primary);
}
.bg_grad {
background: linear-gradient(90deg, rgba(147,14,20,1) 0%, rgba(193,25,32,1) 50%, rgba(132,6,13,1) 100%);
}
.top-lft::before,
.btm-rgt::before {
content: "";
background: #000;
clip-path: polygon(0 0, 0 100%, 100% 0);
width: 18vw;
height: 18vw;
position: absolute;
top: 0;
left: 0;
}
.btm-rgt::before {
clip-path: polygon(100% 0, 0 100%, 100% 100%);
top: auto;
left: auto;
bottom: -1px;
right: 0;
}

/* #post s_link */
#post_link {
justify-content: center;
}
#post_link li a,
#post_link li.active a:hover,
#posts_link li a,
#posts_link li.active {
text-decoration: none;
color: #000;
border: none;
border-radius: 0;
}
#post_link li a,
#posts_link li a:hover,
#posts_link li.active {
background: #000;
color: #FFF;
}
#post_link li.active a:hover {
background: #FFF;
}
#post_link li:not(.active) a,
#posts_link li.prev a,
#posts_link li.next a {
color: #FFF;
}
#post_link li a:hover,
#posts_link li.prev a:hover,
#posts_link li.next a:hover {
color: #000;
}
#post_link li.active {
margin: 0 2rem;
}


/* header
------------------------------------------------------------ */
header h1 {
max-width: 30vw;
position: absolute;
top: 2rem;
left: 10%;
}
#menu {
background: url(img/menu.svg) no-repeat center/contain;
width: 70px;
height: 70px;
position: fixed;
top: 0;
right: 0;
z-index: 3;
cursor: pointer;
}
#menu.active {
background: url(img/menu_close.svg) no-repeat center/contain;
}
header nav {
display: none;
background: rgba(0,0,0,.9);
width: 100%;
height: 100svh;
padding: 3rem 0;
position: fixed;
top: 0;
left: 0;
z-index: 2;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
header nav ul {
text-align: right;
width: 90%;
padding: 2rem 0;
display: block;
position: fixed;
top: 70px;
right: 5%;
z-index: 5;
animation: fadeIn 2s;
}
header nav ul li a {
padding: 0 2rem;
display: block;
}
header nav ul li a span {
color: var(--color-primary);
font-size: 4rem;
padding-right: 1rem;
}
header nav ul li a em::before,
header nav ul li a em::after {
content: " - ";
}


/* main（.home）
------------------------------------------------------------ */
main a {
text-decoration: underline;
}
main a:hover {
text-decoration: none;
}

/* #news */
.news-list {
margin-bottom: 4.5rem;
border-top: 1px solid #ef845c;
}
.news-list li {
border-bottom: 1px solid #ef845c;
}
.news-list li a {
text-decoration: none;
padding: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.news-list li a:hover {
background: rgba(0,0,0,.2);
}
.news-list li a time {
flex: 0 0 10em;
}
.news-list li a p {
flex: 1;
padding: .3em 0 .3em 2rem;
border-left: 1px solid #d0121b;
}

/* #who-is */
#who-is h2 {
position: absolute;
top: -12rem;
left: 50%;
transform: translateX(-50%);
}
#who-is ul li {
flex-basis: 31%;
margin-bottom: 3.5rem
}

/* #join-us */
#join-us {
background: url("img/join-us_bg.png") no-repeat left top/cover;
}
#join-us::after {
content: "";
background: url("img/join-us_ogura.png") no-repeat bottom/contain;
width: 34vw;
aspect-ratio: 469 / 571;
position: absolute;
right: 3%;
bottom: 0;
}

/* #mission */
#mission {
background: url("img/mission_bg.png") no-repeat left top/cover;
}
#mission::before {
content: "";
background: url("img/mission_ogura.png") no-repeat bottom/contain;
width: 43vw;
aspect-ratio: 588 / 834;
position: absolute;
right: 0;
bottom: 20%;
}

/* #educator */
#educator {
background: url("img/educator_bg.png") no-repeat center top/cover;
}
#educator figure.flex > div {
flex-basis: 52%;
}
#educator figure.flex figcaption {
flex-basis: 43%;
}

/* #business */
#business::before {
content: "";
background: url("img/bg_shine.svg") no-repeat center/contain;
width: 54vw;
aspect-ratio: 743 / 474;
position: absolute;
top: -10%;
right: 0;
z-index: 1;
}
#business::after {
content: "";
background: url("img/business_bg.png") no-repeat center bottom/cover;
width: 100%;
height: 200%;
position: absolute;
bottom: 0;
left: 0;
}
#business section::before {
content: "";
background: url("img/business_ogura.png") no-repeat bottom/contain;
width: 32vw;
aspect-ratio: 443 / 554;
position: absolute;
top: -10rem;
right: 0;
z-index: -1;
}

/* #culture */
#culture::before {
content: "";
background: url("img/bg_shine.svg") no-repeat center/contain;
width: 54vw;
aspect-ratio: 743 / 474;
position: absolute;
top: 0;
right: -15%;
}
#culture figure:has(h2) figcaption {
flex-basis: 57%;
}
#culture figure:has(h2) > div {
flex-basis: 42%;
margin-top: -3rem;
}
#culture figure + figure figcaption {
flex-basis: 40%;
}
#culture figure + figure > div {
order: -1;
flex-basis: 57%;
}
#culture figure + figure figcaption div.aligin-end {
margin-top: auto;
}
#culture figure + figure figcaption div.aligin-end div {
flex-shrink: 0
}

/* #inventor */
#inventor {
background: url("img/inventor_bg.png") no-repeat center/cover;
}
#inventor figure > div {
order: -1;
}
#inventor figure:has(h2) figcaption {
flex-basis: 62%;
}
#inventor figure:has(h2) > div {
flex-basis: 37%;
margin-left: -3rem;
}

/* #investor */
#investor::before {
content: "";
background: url("img/bg_shine.svg") no-repeat center/contain;
width: 54vw;
aspect-ratio: 743 / 474;
position: absolute;
top: -10%;
right: -10%;
z-index: -1;
}
#investor figure:has(h2) figcaption {
flex-basis: 68%;
}
#investor figure:has(h2) > div {
flex-basis: 32%;
}

/* #inbound */
#inbound::before {
content: "";
background: url("img/inbound_bg.png") no-repeat center/cover;
width: 100%;
height: 120%;
position: absolute;
top: -20%;
left: 0;
}
#inbound figure:has(h2) figcaption {
flex-basis: 55%;
}
#inbound figure:has(h2) > div {
flex-basis: 44%;
order: -1;
}


/* main（.single）
------------------------------------------------------------ */
.single_ttl {
margin: 2rem 0;
padding: 0 2rem;
}
.single .post {
border-top: 1px solid #ef845c;
border-bottom: 1px solid #ef845c;
}
.post {
padding: 3rem 2rem;
}


/* footer
------------------------------------------------------------ */
/* #pagetop */
#pagetop a {
width: 70px;
height: 70px;
}
#pagetop a::before {
top: 30px;
right: 25px;
}





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

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

/* header
------------------------------------------------------------ */
header h1 {
left: 5%;
}

}


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

/* common
------------------------------------------------------------ */
/* layout */
.narrow {
width: 86%;
}

/* main（.home）
------------------------------------------------------------ */
/* #who-is */
#who-is h2 {
top: -8rem;
}

/* #mission */
#mission h3 img {
max-width: 70%;
}
#mission::before {
bottom: 32%;
}

/* #educator */
#educator figure.flex > div {
flex-basis: 32%;
}
#educator figure.flex figcaption {
flex-basis: 63%;
}

/* #business */
#business section::before {
top: 0;
}

/* #culture */
#culture figure:has(h2) figcaption {
flex-basis: 72%;
}
#culture figure:has(h2) > div {
flex-basis: 27%;
}
#culture figure + figure figcaption,
#culture figure + figure > div {
flex-basis: 48%;
}

/* #investor */
#investor::after {
content: "";
background: url("img/investor_ogura.png") no-repeat bottom/contain;
width: 31vw;
aspect-ratio: 423 / 683;
position: absolute;
top: -5%;
right: 0;
}
#investor figure.aligin-end {
display: block;
}
#investor figure:has(h2) > div {
display: none;
}

/* #inbound */
#inbound figure:has(h2) figcaption {
flex-basis: 65%;
}
#inbound figure:has(h2) > div {
flex-basis: 34%;
}

}


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

/* common
------------------------------------------------------------ */
/* layout */
.narrow {
width: 92%;
}

/* font */
.f21 {
font-size: 1.7rem;
}

/* margin */
.mb80,
.mb100 {
margin-bottom: 6rem;
}
.pb120 {
padding-bottom: 6rem;
}
.smp-mb30 {
margin-bottom: 3rem;
}

/* header
------------------------------------------------------------ */
header h1 {
max-width: 50vw;
top: 1rem;
}

/* main（.home）
------------------------------------------------------------ */
/* #news */
.news-list li a {
display: block;
}
.news-list li a p {
padding: .3em 0 0;
border-left: none;
}

/* #who-is */
#who-is h2 {
top: -6.5rem;
}
#who-is ul li {
flex-basis: 48%;
margin-bottom: 2rem;
}

/* #mission */
#mission::before {
display: none;
}

/* #educator */
#educator figure.flex > div {
max-width: 50%;
margin: 0 auto -5rem;
}

}