/* =========================================================
YSN 2026
ゆっくり しっかり のこす
========================================================= */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


:root {

--main-color: rgb(182, 216, 220);
--text-color: rgb(72, 72, 72);

--content-width: 1000px;
--text-width: 900px;

--side-padding: 5vw;

--section-space: 150px;

}


html,
body {

width: 100%;
min-height: 100%;

margin: 0;
padding: 0;

font-family:
Hershey-Futural-30,
Hershey-Futural--15,
"ヒラギノ角ゴ ProN W3",
"Hiragino Kaku Gothic ProN",
"メイリオ",
Meiryo,
sans-serif;

font-weight: 300;

color: var(--text-color);

-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;

}


html {
scroll-behavior: smooth;
}


body {

background-color: var(--main-color);

background-repeat: repeat;

background-blend-mode: multiply;

overflow-x: hidden;

}


/* =========================================================
FONT
========================================================= */

@font-face {

font-family: Hershey-Futural-30;

src:
url("bau/font/Hershey-Futural-30.woff") format("woff"),
url("bau/font/Hershey-Futural-30.ttf") format("truetype");

font-display: swap;

}


@font-face {

font-family: Hershey-Futural--15;

src:
url("bau/font/Hershey-Futural--15.woff") format("woff"),
url("bau/font/Hershey-Futural--15.ttf") format("truetype");

font-display: swap;

}


@font-face {

font-family: "YakuHanJPs";

src:
url("fonts/yakuhanjps-latin-100-normal.woff2") format("woff2"),
url("fonts/yakuhanjps-latin-100-normal.woff") format("woff");

font-weight: 100;
font-style: normal;

font-display: swap;

}


/* =========================================================
LINKS
========================================================= */

a {

color: var(--text-color);

text-decoration: none;

-webkit-tap-highlight-color: transparent;

}


a:hover {
opacity: 0.55;
}


/* =========================================================
MAIN
========================================================= */

.contents {

width:
min(
calc(100% - (var(--side-padding) * 2)),
var(--content-width)
);

margin-left: auto;
margin-right: auto;

padding-top: 8vh;
padding-bottom: 12vh;

font-size: 14px;

}


/* =========================================================
HEADER
========================================================= */

.page-header {
width: 100%;
}


h1 {

width: 100%;

margin: 0 auto;

text-align: center;

font-size: 17px;

font-weight: normal;

line-height: 1.65;

letter-spacing: 0.03em;

}


.engtitle {
    font-size: 20px;
    
}

.title-space {

display: block;

height:1em;

}


/* =========================================================
DATE
========================================================= */

.date {

width: 100%;

margin: 30px auto 0;

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

font-size: 16px;

line-height: 1.7;

letter-spacing: 0.03em;

}


.date-close {
display: inline-block;
}


.date a {

display: inline-block;

margin-top: 3px;

padding: 2px 4px;

transition:
opacity 0.3s ease;

}


/* =========================================================
INTRO
========================================================= */

.intro {

width: 100%;

margin: 80px auto 170px;

display: flex;

justify-content: center;

align-items: center;

}


.intro-text {

writing-mode: vertical-rl;

text-orientation: mixed;

height: 360px;

font-size: 16px;

letter-spacing: 0.08em;

line-height: 1.9;

column-width: 16em;

column-gap: 30px;

width: max-content;

margin: 0 auto;

text-align: justify;

text-justify: inter-ideograph;

}


/* =========================================================
縦中横
========================================================= */

.tcy {

display: inline-block;

width: 1em;

height: 1em;

text-combine-upright: all;

-webkit-text-combine: horizontal;

text-align: center;

line-height: 1;

position: relative;

top: 0.06em;

right: -0.1em;

}


/* =========================================================
VIDEO
========================================================= */

.video-wrap {


width: 100%;

margin: 0 auto var(--section-space);

display: flex;

justify-content: center;

align-items: center;

}


.video-wrap video {
margin-top: 120px;
display: block;

width: 220px;

max-width: 70vw;

height: auto;

border-radius: 6px;

filter:
/* grayscale(60%)
brightness(1.08) */
contrast(90%)
/* sepia(3%); */

}


/* =========================================================
RESEARCH
========================================================= */

.shirabemono {

width: 100%;

margin: 0 auto var(--section-space);

text-align: left;

}


.shirabemono > h2 {

margin-bottom: 55px;

font-size: 18px;

font-weight: normal;

line-height: 1.6;

text-align: center;

}


.research-list {

display: grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

gap: 50px;

width: 900px;

max-width: 100%;

margin: 0 auto;

}


.research-item {

width: 100%;

text-align: left;

line-height: 1.9;

}


.research-number {

margin-bottom: 25px;

font-size: 48px;

font-weight: normal;

line-height: 0.9;

letter-spacing: 0;

text-align: left;

}


.research-item h3 {

margin-bottom: 18px;

font-size: 15px;

font-weight: normal;

line-height: 1.6;

}


.research-item p {

font-size: 12px;

line-height: 2;

letter-spacing: 0.02em;

text-align: justify;

text-justify: inter-ideograph;

}


/* =========================================================
EVENT
========================================================= */

.event-area {

width: var(--text-width);

max-width: 100%;

margin: -70px auto 180px;

display: grid;

grid-template-columns:
minmax(0, 1fr)
400px;

column-gap: 60px;

row-gap: 50px;

align-items: center;

}


.event-message {

grid-column: 1 / -1;

margin-bottom: 100px;

text-align: center;

line-height: 1.8;
font-size: 15px;

}


.event-info {

grid-column: 1;

width: 100%;

margin: 0;

text-align: left;

line-height: 1.9;

}


.event-info dl > div {

display: grid;

grid-template-columns:
60px 1fr;

column-gap: 0;

margin-bottom: 8px;

}


.event-info dt {
font-weight: normal;
}


.event-info dd {
margin: 0;
}


.map {

grid-column: 2;

width: 400px;

height: 280px;

margin: 0;

position: relative;

overflow: hidden;

border-radius: 16px;

}


.map iframe {

display: block;

width: 100%;

height: 100%;

border: 0;

filter: grayscale(100%);

}


.map::after {

content: "";

position: absolute;

inset: 0;

background: var(--main-color);

opacity: 0.25;

pointer-events: none;

}


/* =========================================================
ABOUT
========================================================= */

.about {

width: var(--text-width);

max-width: 100%;

margin: 0 auto 120px;

display: grid;

grid-template-columns:
repeat(2, minmax(0, 1fr));

gap: 60px;

text-align: left;

line-height: 1.9;

}


.about-item {

text-align: center;

}


.about-logo {
    width: 130px;
    height: 70px;
    margin: 0 auto 25px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.about-logo img {
    display: block;
    width: 130px;
    height: auto;
    max-height: 70px;
    object-fit: contain;
}


.about-item h2 {

margin-bottom: 25px;

font-size: 13px;

font-weight: normal;

line-height: 1.5;

}


.about-item p {

font-size: 12px;

line-height: 2;

letter-spacing: 0.02em;

text-align: justify;

text-justify: inter-ideograph;

}


/* =========================================================
CREDIT
========================================================= */

.credit {

width: var(--text-width);

max-width: 100%;

margin: 130px auto 0;

font-size: 10px;

line-height: 1.8;

letter-spacing: 0.03em;

text-align: justify;

text-justify: inter-ideograph;

}


.credit p + p {
margin-top: 1em;
}


/* =========================================================
ARCHIVE
========================================================= */

.credit.archive {

width: var(--text-width);

max-width: 100%;

margin: 120px auto 100px;

text-align: center;

font-size: 16px;

line-height: 1.8;

letter-spacing: 0.03em;

}


.archive-title {

margin: 0 0 30px;

font-size: 16px;

line-height: 1.6;

}


.archive-title-en {

font-size: 15px;

line-height: 1.6;

}


.archive-links {

display: flex;

justify-content: center;

align-items: center;

gap: 35px;

}


.archive-links a {

display: inline-block;

font-size: 24px;

line-height: 1;

letter-spacing: 0.02em;

padding: 8px 5px;

transition:
opacity 0.3s ease,
transform 0.3s ease;

}


.archive-links a:hover {

opacity: 0.5;

transform: translateY(-2px);

}


/* =========================================================
FLOATING LOGOS
========================================================= */

.logoA,
.logoB,
.logoC {

position: fixed;

z-index: 100;

background-repeat: no-repeat;

background-position: center;

background-size: contain;

cursor: pointer;

transition:
opacity 0.35s ease,
transform 0.15s ease-out;

pointer-events: auto;

transform:
rotate(var(--logo-rotation, 0deg));

}


.logoA {

right: 150px;

bottom: 220px;

width: 98px;

height: 80px;

background-image:
url("bau/img/logo/yukkuri_g.svg");

--logo-rotation: 0deg;

}


.logoB {

right: 50px;

bottom: 100px;

width: 104px;

height: 80px;

background-image:
url("bau/img/logo/shikkari_g.svg");

--logo-rotation: 90deg;

}


.logoC {

right: 250px;

bottom: 80px;

width: 70px;

height: 85px;

background-image:
url("bau/img/logo/nokosu_g.svg");

--logo-rotation: 0deg;

}


.logoA.is-hidden,
.logoB.is-hidden,
.logoC.is-hidden {

opacity: 0;

}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {


:root {
--section-space: 130px;
}


.contents {

width: calc(100% - 10vw);

padding-top: 7vh;

padding-bottom: 10vh;

}


.intro {

margin-top: 110px;

margin-bottom: 140px;

}


.intro-text {

height: 480px;

font-size: 15px;

line-height: 1.8;

column-width: 15em;

column-gap: 24px;

}


.event-area {

grid-template-columns:
minmax(0, 1fr)
340px;

gap: 40px;

margin-top: -30px;

}


.map {

width: 340px;

height: 260px;

}

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {


:root {

--side-padding: 0;

--section-space: 90px;

}


.contents {

width: calc(100% - 56px);

max-width: none;

padding-top:
calc(38px + env(safe-area-inset-top));

padding-bottom:
calc(70px + env(safe-area-inset-bottom));

font-size: 13px;

}


/* =========================================================
TITLE
========================================================= */

h1 {

font-size:
clamp(15px, 4.1vw, 17px);

line-height: 1.65;

letter-spacing: 0.015em;

padding: 0 5px;

}


.title-space {
height: 0.5em;
}

.engtitle { font-size: 16px; }

/* =========================================================
DATE
========================================================= */

.date {

margin-top: 24px;

font-size:
clamp(14px, 3.8vw, 15px);

line-height: 1.8;

}


.date-close {

font-size: 0.88em;

}


.date a {

margin-top: 0px;

padding: 0px 8px;

}


.intro-text {



font-size:
clamp(13px, 3.7vw, 14px);

line-height: 1.7;

letter-spacing: 0.1em;

column-width: auto;

column-count: 2;

column-gap: 24px;

overflow: visible;

text-align: justify;

}


/* =========================================================
VIDEO

========================================================= */

.video-wrap {

width: 100%;

display: flex;

justify-content: center;

align-items: center;

margin-top: 0;

margin-bottom: 95px;

padding: 0;

position: relative;

}


.video-wrap video {

display: block;

width: min(280px, 78vw);

max-width: 100%;

height: auto;

flex: 0 1 auto;

border-radius: 5px;

}


/* =========================================================
RESEARCH

========================================================= */

.shirabemono {

width: 100%;

margin-bottom: 100px;

text-align: center;

}


.shirabemono > h2 {

margin-bottom: 38px;

font-size: 18px;

font-weight: normal;

text-align: center;

}


.research-list {

display: grid;

grid-template-columns: 1fr;

gap: 64px;

width: 100%;

}


.research-item {

padding-left: 2px;

text-align: left;

}


.research-number {

margin-bottom: 20px;

font-size: 42px;

line-height: 0.9;

}


.research-item h3 {

margin-bottom: 12px;

font-size: 16px;

line-height: 1.7;

}


.research-item p {

font-size: 14px;

line-height: 1.8;

letter-spacing: 0.05em;


text-align: justify;

}


/* =========================================================
EVENT

========================================================= */

.event-area {

width: 100%;

display: flex;

flex-direction: column;

gap: 0;

margin:
0 auto 105px;

}


.event-message {

order: 1;

width: 100%;

margin:
0 0 38px;

font-size: 13px;

line-height: 1.8;

 text-align: center; 

}


.event-info {

order: 2;

width: 100%;

margin: 0 0 45px;

}


.event-info dl > div {

grid-template-columns:
48px minmax(0, 1fr);

column-gap: 12px;

margin-bottom: 10px;

font-size: 12px;

line-height: 1.8;

}


.event-info dt {

white-space: nowrap;

}


.event-info dd {

overflow-wrap: anywhere;

}


/* ---------------------------------------------------------
MAP
--------------------------------------------------------- */

.map {

order: 3;

width: 100%;

height: auto;

aspect-ratio: 4 / 3;

border-radius: 12px;

}


.map iframe {

width: 100%;

height: 100%;

}


/* =========================================================
ABOUT
========================================================= */

.about {

width: 100%;

display: grid;

grid-template-columns: 1fr;

gap: 72px;

margin-bottom: 80px;

}


.about-item {

text-align: center;

}


.about-logo {

width: 190px;

height: 60px;

margin:
0 auto 20px;

}

.about-item p + .about-logo 
{ margin-top: 20px; }

.about-logo img {

width: 120px;

max-height: 60px;

}


.about-item h2 {

margin-bottom: 20px;

font-size: 13px;

}


.about-item p {

font-size: 14px;

line-height: 1.8;

letter-spacing: 0.05em;

text-align: justify;

}


/* =========================================================
ARCHIVE

========================================================= */

.credit.archive {

width: 100%;

margin:
80px auto 65px;

font-size: 12px;

line-height: 1.8;

text-align: center;

}


.archive-title {

margin-bottom: 25px;

font-size: 12px;

line-height: 1.7;

}


.archive-title-en {

display: inline-block;

font-size: 13px;

line-height: 1.7;

letter-spacing: 0;

white-space: normal;

}


.archive-links {

gap: 30px;

}


.archive-links a {

font-size: 22px;

padding: 8px;

}


/* =========================================================
CREDIT
========================================================= */

.credit {

width: 100%;

margin-top: 70px;

font-size: 9px;

line-height: 1.8;

letter-spacing: 0.015em;

text-align: left;

}


.credit p + p {

margin-top: 1.5em;

}



.logoA {



right: 50px;

bottom:
calc(112px + env(safe-area-inset-bottom));

width: 58px;

height: 48px;

}


.logoB {

right: 12px;

bottom:
calc(42px + env(safe-area-inset-bottom));

width: 62px;

height: 48px;

}


.logoC {


right: 95px;

bottom:
calc(40px + env(safe-area-inset-bottom));

width: 45px;

height: 55px;

}


}