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


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


/* set
------------------------------------------------------------ */
:root {
--design-width: 1366;
--font-size-base: clamp(8.75px, calc(10 * 100vw / var(--design-width)), 11.25px);
--font-base: 'Noto Sans JP', sans-serif;
--font-en: 'Oswald', sans-serif;
--color-primary: #1a92d2;
--color-text: #000;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-style: normal;
}
html {
font-size: var(--font-size-base);
}
body {
-webkit-text-size-adjust: 100%;
font-family: var(--font-base);
color: var(--color-text);
font-size: 1.8rem;
font-weight: 500;
line-height: 1.8;
letter-spacing: .04em;
text-align: center;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
word-break: break-all;
}
:hover {
transition: .3s;
}
a img {
display: inline-block;
transition: .5s;
}
a:hover img {
transform: scale(1.05);
transition: .5s;
}
.smd,.smp {
display: none;
}
.pc {
display: block;
}


/* common
------------------------------------------------------------ */
/* font */
.NOTO {  /* Noto Sans JP */
font-family: var(--font-base);
}
.EN { /* Oswald Regular */
font-family: var(--font-en);
font-weight: 400;
}
.EN.stroke { /* Oswald Medium */
font-weight: 500;
}
.stroke {
color: var(--color-primary);
line-height: 1.2;
text-shadow:
-1px -1px 0 #FFF,
 0px -1px 0 #FFF,
 1px -1px 0 #FFF,
-1px  0px 0 #FFF,
 1px  0px 0 #FFF,
-1px  1px 0 #FFF,
 0px  1px 0 #FFF,
 1px  1px 0 #FFF;
}

/* layout */
main {
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
article {
width: 100%;
position: relative;
}
section {
width: 74%;
margin: 0 auto;
padding: 5rem 0;
position: relative;
z-index: 1;
}

/* color */
.sky {
color: var(--color-primary);
}
.wht {
color: #FFF;
}

/* background */
.bg.sky {
background: var(--color-primary);
color: #FFF;
}
.bg::before,
.bg::after {
content: "";
background-repeat: no-repeat;
background-size: contain;
mix-blend-mode: multiply;
position: absolute;
top: 0;
}
.bg.right::before,
.bg.right.left::after {
background-image: url("img/bg_right.png");
background-position: right;
width: 46.85vw;
aspect-ratio: 640 / 830;
right: 0;
}
.bg.left::before {
background-image: url("img/bg_left.png");
background-position: left;
width: 30.74vw;
aspect-ratio: 420 / 750;
left: 0;
}

/* title */
h2 {
margin-bottom: 4rem;
}
h2 span {
background: url("img/line.svg") no-repeat bottom/100% auto;
font-size: 5.5rem;
line-height: 1.5;
margin-bottom: 2rem;
display: inline-block;
}
h2 strong {
font-size: 2.5rem;
display: block;
}
h2 em {
font-size: 3rem;
line-height: 1.4;
display: block;
}

/* Swiper */
.swiper[class*="loop"] .swiper-wrapper {
transition-timing-function: linear !important;
flex-wrap: nowrap !important;
}
.swiper[class*="loop"] .swiper-slide {
margin: 0 0 -1px -1px;
}


/* main
------------------------------------------------------------ */
/* #kv */
#kv h1 img {
width: 100vw;
}

/* #about */
#about.bg::before {
top: -11rem;
}
#about div {
margin-top: -11rem;
}
#about h2 strong {
margin: 2rem 0 1rem;
}
#about p {
line-height: 1.9;
}

/* #action */
#action::after {
content: "";
background: var(--color-primary);
width: 100%;
height: 80%;
position: absolute;
top: -1px;
left: 0;
z-index: -1;
}
#action section {
padding-bottom: 0;
}
#action ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2%;
}
#action ul li {
background: #FFF;
aspect-ratio: 1 / 1;
padding: 4rem 1rem;
border-radius: 50%;
}
#action ul li h3 {
font-size: 3.1rem;
line-height: 1.3;
height: 9rem;
margin-bottom: .5em;
display: flex;
align-items: center;
justify-content: center;
}

/* #awards */
#awards.bg::before {
top: -10%;
}
#awards section {
padding-top: 0;
}
#awards figure {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 6rem auto 2rem;
}
#awards figure figcaption {
text-align: left;
padding-left: 3rem;
}
#awards p {
font-weight: 400;
text-align: left;
}

/* #lecture */
#lecture.bg::before {
top: 10%;
}
#lecture::after {
content: "";
background: url("img/lecture_bg.jpg") no-repeat top/100% auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#lecture ul {
margin: 5rem 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6rem;
}
#lecture ul li {
background: #F4F4F4;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), calc(100% - 5rem) 100%, 0 100%);
text-align: left;
display: flex;
flex-direction: column;
padding: 3rem;
}
#lecture ul li h3 {
font-size: 2.2rem;
line-height: 1.6;
padding: 1em 0;
}
#lecture ul li p {
font-size: 2rem;
margin-top: auto;
padding-top: 1em;
border-top: solid 1px #C9CACA;
}
#lecture ul li p em {
font-weight: 700;
display: block;
}

/* #archive */
#archive.bg::after {
top: 20%;
}
#archive.bg::before {
top: 70%;
}
.archive {
margin: 5rem auto 10rem;
}
.archive figure {
margin: 4rem auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.archive figure > * {
flex-basis: 48%;
}
.archive figcaption {
text-align: left;
}
.archive:nth-child(even) figcaption {
order: -1;
}
.archive figcaption h4 {
font-size: 12.5rem;
margin: -3rem 0 -1rem;
}
.archive figcaption p em {
font-size: 2.4rem;
font-weight: 400;
}
.archive figcaption p strong {
font-size: 3.2rem;
}
.archive figcaption p {
font-size: 1.7rem;
margin-top: 1rem;
}

/* #voice */
#voice::after {
content: "";
background: var(--color-primary);
width: 100%;
height: 90%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.voice {
margin: 5rem 0 10rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4%;
}
.voice > div {
text-align: left;
}
.voice figure div {
width: 85%;
margin: 0 auto 2rem;
}
.voice figcaption {
font-size: 2.3rem;
font-weight: 700;
}
.voice h3 {
font-size: 2.6rem;
line-height: 1.5;
margin: 1em 0;
}
.voice p {
font-size: 1.7rem;
}
.past {
margin: -4rem 0 4rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4%;
align-items: center;
}
.past figcaption {
text-align: left
}
.past h4 {
font-size: 2.5rem;
margin-bottom: 1em;
}
.past h4::before {
content: "";
background: #FFF;
width: 8rem;
height: .4rem;
margin-right: 1rem;
display: inline-block;
vertical-align: middle;
}
.past p {
font-size: 1.9rem;
line-height: 2;
}

/* #column */
#column {
padding-bottom: 5rem;
}
#column.bg::before {
top: -25%;
}
#column ul {
margin-bottom: 8rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6%;
}
#column ul li p {
font-weight: 700;
text-align: left;
margin-top: 1em;
}

/* #media */
#media.bg::after {
top: auto;
bottom: 0;
}
#media.bg::before {
top: -10%;
}
#media ul {
margin: 5rem 0 10rem;
text-align: left;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6rem 4%;
}
#media ul li h3 {
font-size: 2.1rem;
margin: 1rem 0 .5rem;
}
#media ul li h3 small {
font-weight: 400;
}
#media ul li p {
font-size: 1.6rem;
}

/* #partner */
#partner {
padding: 3rem 0 12rem;
}
#partner ul {
margin: 6rem auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6rem;
align-items: center;
}


/* footer
------------------------------------------------------------ */
footer {
background: #1f2a69;
color: #FFF;
}
footer section {
padding: 10rem 0 3rem;
padding: 10rem 0;
}
footer #logo {
background: #1f2a69;
aspect-ratio: 1 / 1;
width: 24rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
position: absolute;
top: -10rem;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
footer h1 em {
font-weight: 700;
}
footer h1 {
font-size: 1.8rem;
font-weight: 500;
margin: 1em 0;
}
footer p {
font-size: 1.6rem;
font-weight: 400;
}

/* #pagetop */
#pagetop {
display: none;
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 4;
}
#pagetop a {
background: var(--color-primary);
color: #FFF;
width: 6rem;
height: 6rem;
border-radius: 50%;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#pagetop a::before {
content: "";
width: 2rem;
height: 2rem;
margin: 0 auto;
display: block;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 2.5rem;
right: 2rem;
}

/* #apply */
#apply {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 3;
}
#apply a {
background: #03787c;
padding: 1rem 3rem;
display: block;
}
#apply img {
height: 5rem;
}
#apply a:hover {
background: #FFBA00;
background: var(--color-primary);
}
#apply a:hover img {
transform: scale(1);
}





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

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

/* main
------------------------------------------------------------ */
/* #action */
#action ul li h3 {
margin-top: 3rem;
}
}


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

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

/* main
------------------------------------------------------------ */
/* #action */
#action ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6%;
}
#action ul li {
flex-basis: 47%;
}

/* #lecture */
#lecture ul {
gap: 3rem;
}
#lecture ul li {
padding: 1rem;
}

/* #archive */
.archive figure {
display: block;
}
.archive figcaption h4 {
margin-top: 0;
}

/* #voice */
.voice {
grid-template-columns: 40% 56%;
}
.voice h3 br {
display: none;
}
.past {
grid-template-columns: 60% 40%;
gap: 0;
}

/* #column */
#column ul {
gap: 6rem 4%;
}

}


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

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

/* common
------------------------------------------------------------ */
/* title */
h2 {
margin-bottom: 2rem;
}
h2 span {
font-size: 4.5rem;
}
h2 strong {
font-size: 2rem;
}
h2 em {
font-size: 2.3rem;
}

/* main
------------------------------------------------------------ */
/* #about */
#about div {
margin-top: -6rem;
}
#about p {
text-align: left;
}
#about p br {
display: none;
}

/* #action */
#action::after {
height: 95%;
}
#action ul {
display: block;
}
#action ul li {
width: 80%;
margin: 2rem auto;
padding: 2rem 1rem;
}

/* #awards */
#awards.bg::before {
display: none;
}
#awards figure {
display: block;
}
#awards figure figcaption {
padding: 2rem 0;
}

/* #lecture */
#lecture::after {
background: url("img/lecture_bg.jpg") no-repeat top center/cover;
width: 100%;
height: 20%;
}
#lecture ul {
grid-template-columns: 1fr;

}

/* #archive */
.archive figcaption h4 {
font-size: 8rem;
}

/* #voice */
.voice {
grid-template-columns: 1fr;
gap: 0;
}
.voice figure div {
width: 75%;
}

.past {
grid-template-columns: 1fr;
gap: 0;
}
.past p br {
display: none;
}

/* #column */
#column ul {
grid-template-columns: 1fr;
}

/* #media */
#media ul {
margin: 5rem 0;
grid-template-columns: 1fr;
}

/* #partner */
#partner {
padding: 3rem 0 12rem;
}
#partner ul {
width: 70%;
grid-template-columns: 1fr;
}

/* footer
------------------------------------------------------------ */
footer section {
padding: 8rem 0;
}
footer #logo {
width: 16rem;
top: -7rem;
}
footer #logo img {
width: 8rem;
}
footer h1 {
font-size: 1.5rem;
}
footer p {
font-size: 1.1rem;
}

}