@charset "UTF-8";
:root {
--blue:#005794;
--deep-blue:#24568e;
--aqua:#65aab4;
--cream:#f6f3ea;
--ink:#202320;
--rose:#ce5c61;
--body-font:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif
}
* {
    box-sizing: border-box
}
html {
    scroll-behavior: smooth
}
body {
    margin: 0;
    color: var(--ink);
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.85;
    overflow-wrap: anywhere
}
h1, h2, h3, h4, h5, p, ul, ol {
    margin: 0
}
h1, h2, h3, h4, h5 {
    line-height: 1.6
}

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

img {
    display: block;
    max-width: 100%;
    height: auto
}
button {
    font: inherit;
	
	background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
button:enabled, summary {
    cursor: pointer
}
button:disabled {
    cursor: default;
    opacity: 1
}
button:focus-visible, summary:focus-visible, a:focus-visible {
outline:3px solid #dc9b28;
outline-offset:5px
}
button {
    touch-action: manipulation
}
.skip-link {
    position: fixed;
    z-index: 100;
    top: 10px;
    left: 10px;
    padding: 10px;
    background: #fff;
    transform: translateY(-200%)
}
.skip-link:focus {
    transform: translateY(0)
}
/* ===== スマホ（〜599px）：基本スタイル ===== */
/* paddingを含むコンテナの外幅を最大1080pxに設定しています。 */
.container {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding: 0 16px
}
.hero .container {
    width: 85%;
}
.hero {
    background: #fbf9e9 url("../hero-texture.webp") center/auto 100%;
    padding: 95px 0 85px;
}
.hero-layout {
    display: flex;
    flex-direction: column;
    gap: 76px
}
.anniversary {
    width: 80%;
    max-width: 310px;
    margin-inline: auto;
    mix-blend-mode: multiply
}
.hero-years {
    font: 700 21px/1.4 Georgia, serif;
    letter-spacing: .025em;
    color: #314d6e;
    margin-bottom: 14px
}
.hero h1 {
    font-size: 20px;
    line-height: 1.85;
    margin-bottom: 22px;
	font-weight: bold;
}
.hero-copy>p:last-child {
    font-size: 14px;
    line-height: 1.9
}
.numbers {
    padding: 82px 0 95px
}
.numbers-ribbon {
    margin-bottom: 40px;
    position: relative
}
.numbers-ribbon .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}
.numbers-ribbon span {
    background: var(--deep-blue);
    color: white;
    font-family: Arial, sans-serif;
    letter-spacing: .06em;
    font-size: 15px;
    line-height: 1.6;
    padding: 0 12px 0 16px;
    margin-left: -16px;
	
	  font-family: "Montserrat", sans-serif;

}
.numbers-ribbon h2 {
    align-self: flex-end;
    background: #fff;
    padding: 12px 10px 0;
    font-size: 22px;
    position: relative;
    margin-right: 16px
}
.numbers-ribbon h2::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 19px;
    width: 32px;
    height: 22px;
    background: var(--deep-blue)
}
.numbers-lead {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px
}
.numbers-lead::before, .numbers-lead::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 19px;
    background: #5baacb;
    vertical-align: middle;
    transform: rotate(-24deg);
    margin: 0 10px
}
.numbers-lead::after {
    transform: rotate(24deg)
}
.numbers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px
}
.numbers-grid img {
    width: 100%
}
.request-link {
    font-size: 11px;
    color: var(--deep-blue);
    margin: 20px auto 0;
	    padding-left: 1em;
}
.request-link span {
    border-bottom: 1px solid #a6bdcc;
    padding: 0 0 3px;
}
.request-link span a{
	text-decoration: none;
    color: var(--deep-blue);
	padding: 0 5px;
}

.request-link span a:hover{
    background: var(--deep-blue);
	color: #fff;
}
.history {
    background: var(--cream);
    padding: 75px 0 85px
}
.section-title {
    font-weight: 700
}
.section-title .english {
    font-family: Arial, sans-serif;
    font-weight: 400;
    font-size: 31px;
    color: #76b5bd;
    text-shadow: .5px .5px #357e86;
    line-height: 1.1
}
.history-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 20px;
    max-width: 100%;
    margin-bottom: 50px
}
.japanese {
    font-size: 25px
}
.twenty {
    font-family: Arial, sans-serif;
    font-weight: 300;
    letter-spacing: -.1em;
    font-size: 75px;
    line-height: 1;
    display: inline-block;
    margin-right: 6px;
    vertical-align: -.06em
}
.history-heading .japanese {
    font-size: 23px;
    white-space: nowrap
}
.history-heading .english {
    margin-left: auto;
    font-size: 27px
}
.timeline {
    list-style: none;
    padding: 0 0 0 12px
}
.timeline-item {
    position: relative;
    border-left: 1px solid #cdd2cc;
    padding: 0 0 44px 17px
}
.timeline-item::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aqua);
    position: absolute;
    top: 9px;
    left: -4.5px
}
.timeline-item:last-child {
    padding-bottom: 14px
}
.timeline-year {
    font-family: Georgia, serif;
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 20px;
    color: var(--deep-blue);
    line-height: 1.5;
    margin-bottom: 9px
}
.phase {
    background: var(--deep-blue);
    color: white;
    display: inline-block;
    padding: 0 6px;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 700
}
.timeline-content h3 {
    font-size: 18px;
    margin: 8px 0 13px;
    color: #203934;
	font-weight: bold;
}
.timeline-content details {
    border-top: 1px solid #d7d7cf;
    font-size: 11px;
    color: #203934
}
.timeline-content summary {
    padding: 9px 0;
    min-height: 34px;
    font-weight: 700
}
.timeline-detail {
    padding: 8px 0 3px;
    line-height: 1.9
}
.timeline-detail ul {
    padding-left: 1.3em;
    list-style: disc;
    margin-left: 2em;
}
.timeline-detail li+li {
    margin-top: 5px;
}
.greeting {
    padding: 85px 0 85px;
    overflow: hidden;
}
.greeting-layout {
    position: relative;
	background: url(../bg-message.webp) no-repeat center;
    background-size: 140% auto;
    background-size: auto 50%;
}
.greeting-copy {
    position: relative;
    isolation: isolate;
	

}


.greeting-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px
}
.greeting-heading .japanese {
    font-size: 29px
}
.greeting-heading .english {
    align-self: flex-end;
    margin-right: 9px;
    font-size: 34px
}
.greeting-body {
	margin: 0 auto;
	width: 90%;
    font-size: 13px;
    line-height: 1.9
}
.greeting-body p+p {
    margin-top: 20px
}
.representative {
    width: 76%;
    max-width: 300px;
    margin: 35px auto 0
}



.gift {
    text-align: center;
    /*padding-bottom: 105px*/
}
.special-label {
    position: relative;
    margin: 80px auto 26px;
    background: #e9dcad url("../label-texture.webp") center/cover;
    width: max-content;
    padding: 14px;
    border-radius: 0 0 5px 5px;
    color: var(--blue);
    font-family: Arial, sans-serif;
	  font-family: "Montserrat", sans-serif;
    font-size: 19px;
    line-height: 1.5;
}

#heartful-story .special-label {
	margin-top: 0;
}
.special-label::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 80px;
    background: #baa474;
}

.gift .special-label::before {
	z-index: -5;
}
.gift-title {
    width: 95%;
    max-width: 650px;
    margin: auto
}
.special-intro1,
.special-intro2{
    font-size: 13px;
    font-size: 15px;
    line-height: 1.85;
    text-align: center;
    margin: 24px 0 40px;
    font-weight: 500;
	
	padding-bottom: 0px;
}


.interview-number {
    position: absolute;
    right: 0;
    top: 20px;
    background: var(--rose);
    color: white;
    padding: 1px 7px;
    font-family: Arial, sans-serif;
    font-size: 12px
}
.interview-copy h4 {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px
}
.interview-copy h5 {
    font-size: 23px;
    margin-bottom: 8px;
    letter-spacing: .06em
}
.interview-copy p {
    font-size: 12px;
    line-height: 1.8
}
.profile-button {
    border: 0;
    background: var(--rose);
    border-radius: 30px;
    padding: 3px 16px;
    color: white;
    font-size: 12px;
    line-height: 1.7;
    margin-top: 14px;
    min-height: 32px
}
.profile-button:hover {
    background: #af4149
}
.interview-photo {
    width: 100%;
    max-width: 420px;
    margin: 30px auto 0;
    border-radius: 50%
}



.story-title {
    width: 100%;
    max-width: 580px;
    margin: auto
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
    align-items: stretch
}
.story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(2px 2px 2px #666e6422);
	background: #faf7ee;
    border-radius: 10px;
    margin: 0 0 20px;
}
@media screen and (min-width:1025px) {
.story-card {
    margin: 0 0 50px;
	}
}

.story-card>img {
    width: 100%;
    aspect-ratio: 2/1;
    object-fit: cover;
	margin-top: -40px;
}

.story-card-body {
    background: #faf7ee;
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 5px 10px;
    flex: 1;
    text-align: center
}
.story-card .story-card-title {
	font-weight: bold;
    /*font-size: 11px;*/
    line-height: 1.65;
    flex: 1;
    display: grid;
    place-content: center;
    margin-bottom: 9px;
}

.story-card .story-card-title span {
	display: block;
}


.video-button a{
    font-size: 10px;
    line-height: 1.5;
    background: white;
    color: var(--deep-blue);
    border: 1px solid var(--blue);
    border-radius: 30px;
    padding: 4px 12px;
    letter-spacing: .05em;
    white-space: nowrap
}

.video-button a{
	color: var(--deep-blue);
	text-decoration: none;
}

a i {
  display: inline-block;
  margin-left: 4px;
}
.video-button a:hover {
    background: var(--deep-blue);
	color: #fff;
}
/*.video-button span {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--deep-blue);
    color: white;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    font-size: 9px
}*/


.more-button {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
    color: white;
    font-size: 12px;
    line-height: 1.3;
    margin: 40px auto 0;
    box-shadow: 0 5px 12px #6f7e8438;
	
	padding-top: .8em;
}
.more-button span {
    font-size: 29px;
    line-height: 1;
}
.more-button span img{
	width: 80%;
	margin: 0 auto;
}
.resources {
    padding-top: 90px;
    padding-bottom: 100px
}
.bar-heading {
    font-size: 18px;
    line-height: 1.5;
    border-left: 6px solid var(--blue);
    padding: 1px 0 1px 10px;
    margin-bottom: 38px
}
.book-grid ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 0 14px;
}
.book-grid ul li {
    width: calc((100% - 20px)/3);
    overflow: hidden;
    align-self: flex-start
}

.book-grid .book-image img {
    display: block;
    width: 100%;
    object-fit: contain
}
.publications {
    margin-bottom: 84px
}
.program-layout {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-inline: 12px
}
.program-layout ul {
    padding-left: 1em;
    font-size: 13px;
    line-height: 1.9;
    list-style-type: disc
}
.program-layout li::marker {
font-size:1.2em
}
.program-layout span {
    display: block
}
.program-layout img {
    width: 60%;
    max-width: 450px;
    align-self: center
}
.programs-photo img.p1{
	float: right;
}



.closing {
    background: var(--cream);
    border-radius: 50% 50% 0 0/3% 3% 0 0;
    overflow: hidden
}
.closing img {
    width: 100%;
    height: auto
}


.ul_sns{
	margin: 0 auto;
	width: 80%;
	max-width: 180px;
	
	display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.ul_sns li{
	width: 20%;
}

.ul_sns img{
	opacity: .7;	
}
.ul_sns img:hover{
	opacity: .4;	
}

@media screen and (min-width:1025px) {
.ul_sns{
	max-width: 220px;
	}
}


footer {
    text-align: center;
    background: #222430;
    color: white;
    padding: 19px 16px;
    line-height: 1.5
}
footer small {
    font-size: 10px
}
dialog {
    width: calc(100% - 32px);
    max-width: 550px;
    border: 0;
    border-radius: 14px;
    padding: 50px 30px 32px;
    color: var(--ink);
    box-shadow: 0 15px 70px #0004
}
dialog::backdrop {
background:#18304488
}
dialog h2 {
    font-size: 25px;
    margin-bottom: 15px
}
dialog p {
    font-size: 14px;
    margin-top: 10px
}
.dialog-close {
    position: absolute;
    right: 10px;
    top: 6px;
    border: 0;
    background: none;
    font-size: 30px;
    width: 44px;
    height: 44px
}

/* ===== タブレット（600px〜） ===== */
@media screen and (min-width:600px) {
.container {
    padding: 0 32px
}
.hero {
    padding: 110px 0;
}
.hero-layout {
    gap: 65px
}
.hero-copy {
    max-width: 640px;
    margin: auto
}
.anniversary {
    max-width: 370px
}
.hero h1 {
    font-size: 27px
}
.hero-copy>p:last-child {
    font-size: 16px
}
.hero-years {
    font-size: 26px
}
.numbers {
    padding: 100px 0 115px
}
.numbers-ribbon {
    background: var(--deep-blue);
    margin-bottom: 60px
}
.numbers-ribbon .container {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px
}
.numbers-ribbon span {
    font-size: 16px;
    padding: 0;
    margin: 0
}
.numbers-ribbon h2 {
    font-size: 24px;
    padding: 0 16px;
    line-height: 1.6;
    margin: 0;
    align-self: stretch
}
.numbers-ribbon h2::after {
    display: none
}
.numbers-inner {
    max-width: 1000px
}
.numbers-lead {
    font-size: 20px;
    /*text-align: left*/
}
.numbers-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px
}
.request-link {
    font-size: 12px
}
.history {
    padding: 105px 0
}
.history-heading {
    max-width: none;
    gap: 24px;
    margin-bottom: 60px;
}
.history-heading .japanese {
    font-size: 33px
}
.history-heading .english {
    margin-left: 0;
    font-size: 46px
}
.twenty {
    font-size: 105px
}
.timeline {
    padding-left: 0
}
.timeline-item {
    display: grid;
    grid-template-columns: 32% 1fr;
    border: 0;
    padding: 0
}
.timeline-item::before {
    left: calc(32% - 4.5px);
    top: 16px
}
.timeline-year {
    text-align: right;
    padding: 0 34px 0 0;
    font-size: 25px;
    margin: 0;
    line-height: 1.5
}
.timeline-content {
    border-left: 1px solid #cdd2cc;
    padding: 0 0 50px 40px
}
.timeline-item:last-child {
    padding: 0
}
.timeline-item:last-child .timeline-content {
    padding-bottom: 15px
}
.phase {
    font-size: 12px
}
.timeline-content h3 {
    font-size: 23px;
    margin: 10px 0 18px
}
.timeline-content details {
    font-size: 12px
}
.timeline-detail {
    font-size: 13px
}
.greeting {
    padding: 120px 0
}
	.greeting-layout {
		    background-size: auto 100%;
	}
	
.greeting-body {
	width: 100%;
    font-size: 16px
}
.greeting-copy {
    max-width: 750px;
    margin: auto;
	
	padding-left: 50px;
	padding-right: 25px;
}
.greeting-heading {
    max-width: 550px
}
.greeting-heading .japanese {
    font-size: 42px
}
.greeting-heading .english {
    font-size: 53px
}
.representative {
    max-width: 350px;
    margin-top: 40px
}
.greeting-copy::before {
    left: -120px;
    width: 400px;
    height: 340px;
    bottom: -50px
}
.greeting-copy::after {
    display: block;
    width: 430px;
    height: 350px;
    right: 5px;
    top: 15px;
    transform: rotate(-30deg)
}

	
.special-label {
    font-size: 24px;
    margin-top: 110px
}
.special-label::before {
    height: 110px;
    height: 182px;
}
.gift-title {
    width: 75%
}
.special-intro1,
.special-intro2	{
    font-size: 18px;
    margin: 35px 0 0;
}
	.special-intro2	{
    margin: 35px 0 65px;
	}
.interview-card {
    padding: 60px 40px 35px
}
.interview-copy h4 {
    font-size: 20px
}
.interview-copy h5 {
    font-size: 28px
}
.interview-copy p {
    font-size: 14px
}
.profile-button {
    font-size: 16px
}
.interview-number {
    font-size: 17px
}
.interview-photo {
    width: 70%
}
.gift {
    /*padding-bottom: 130px*/
}
	
.story-grid {
    gap: 30px
}
.story-card .story-card-title {
    font-size: 16px;
    min-height: 3.3em;
}
.story-card .story-card-title span {
	display: inline;
}

.story-card-body {
    padding: 14px 10px 16px
}
.video-button a {
    font-size: 14px;
    padding: 5px 20px
}
.more-button {
    width: 105px;
    height: 105px;
    font-size: 16px;
    margin-top: 50px
}

.resources {
    padding-top: 120px;
    padding-bottom: 140px
}
.bar-heading {
    font-size: 25px;
    margin-bottom: 45px;
    border-left-width: 8px;
    padding-left: 16px
}
.book-grid ul {
    flex-wrap: nowrap;
    gap: 17px;
    padding: 0 25px
}
.book-grid ul li {
    width: calc((100% - 68px)/5)
}
.publications {
    margin-bottom: 110px
}
.program-layout {
    gap: 50px;
    padding: 0 25px
}
.program-layout ul {
    font-size: 16px
}
.program-layout img {
    max-width: 380px
}
.closing img {
    aspect-ratio: 2560/1380;
    object-fit: cover
}
footer small {
    font-size: 12px
}
}

/* ===== PC（1025px〜） ===== */
@media screen and (min-width:1025px) {
.container {
	
    max-width: 1080px;
}
.hero {
    min-height: 780px;
    display: flex;
    align-items: center;
    padding: 150px 0;
}
.hero-layout {
    flex-direction: row;
    align-items: center;
    gap: 60px;

}
.anniversary {
    width: 38%;
    max-width: none;
    flex-shrink: 0;
    margin: 0
}
.hero-copy {
    flex: 1;
    max-width: none
}
.hero h1 {
    font-size: 32px;
    line-height: 1.9
}
.hero-copy>p:last-child {
    font-size: 18px;
}
.hero-years {
    font-size: 27px
}
.numbers {
    padding-top: 145px;
    padding-bottom: 155px
}
.numbers-ribbon span {
    font-size: 19px
}
.numbers-ribbon h2 {
    font-size: 28px
}
.numbers-lead {
    margin-bottom: 20px;
	text-align: left;
}
.numbers-grid {
    gap: 16px
}
.numbers-inner {
    max-width: 1000px
}
.history {
    padding: 145px 0 160px
}
.history-heading .japanese {
    font-size: 38px
}
.history-heading .english {
    font-size: 55px
}
.history-heading .twenty {
    font-size: 120px
}
.timeline-year {
    font-size: 36px;
    padding-right: 60px
}
.timeline-content {
    padding-left: 65px;
    padding-bottom: 62px
}
.timeline-content h3 {
    font-size: 26px
}
.timeline-content details {
    font-size: 13px
}
.timeline-detail {
    font-size: 14px;
    line-height: 1.9
}
.greeting {
    padding: 165px 0 190px
}
.greeting-layout {
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: end;
    gap: 0;
	
	/*background: url(assets/bg-message.webp) no-repeat left;*/
    background-size: contain;
}
.greeting-copy {
    margin: 0;
	padding-bottom: 120px;
}
.greeting-heading {
    margin-bottom: 40px;
    max-width: 570px
}
.greeting-heading .japanese {
    font-size: 49px
}
.greeting-heading .english {
    font-size: 61px
}
.greeting-body {
    font-size: 16px;
    line-height: 1.95
}
.representative {
    width: 100%;
    max-width: none;
    margin: 0 0 120px;
}
.greeting-copy::before {
    width: 440px;
    height: 340px;
    left: -130px;
    bottom: -55px;
    border-width: 26px
}
.greeting-copy::after {
    width: 430px;
    height: 390px;
    right: -12px;
    top: 40px;
    border-width: 26px
}

	
.gift {
    /*padding-bottom: 175px*/
}
.gift .special-label {
    margin-bottom: 30px
}
.special-intro1,
.special-intro2{
    font-size: 20px
}

	

	

	
	
.interview-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
    padding: 65px 60px 50px;
    border-radius: 23px;
    min-height: 485px
}
.interview-photo {
    width: 100%;
    margin: 0
}
.interview-copy h4 {
    font-size: 20px
}
.interview-copy h5 {
    font-size: 26px
}
.interview-copy p {
    font-size: 13px
}
.interview-number {
    top: 35px
}

	
.story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px 30px
}
.story-card-body {
    padding: 16px 10px
}
/*.story-card h4 {
    font-size: 18px
}*/
.more-button {
    width: 115px;
    height: 115px;
    margin-top: 55px
}
.resources {
    padding-top: 130px;
    padding-bottom: 165px
}
.publications {
    margin-bottom: 115px
}
.book-grid ul{
    padding: 0 25px;
    gap: 20px
}
.book-grid ul li {
    width: calc((100% - 80px)/5)
}
.program-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 25px
}
.program-layout ul {
    font-size: 14px
}
/*.program-layout img {
    width: 80%
}*/
.closing img {
    max-height: 850px;
    object-fit: contain
}
footer {
    padding: 20px
}
}

@media(prefers-reduced-motion:reduce) {
html {
    scroll-behavior: auto
}
}


/* Story grid: 「もっと見る」開閉 */
#story-grid2 {
  display: none;
	padding-top: 30px;
}
#story-grid2.story-grid.is-open {
  display: block;
	display: grid;
}
.more-button[aria-expanded="true"] span {
  transform: rotate(180deg);
}
.more-button span {
  transition: transform .25s ease;
}

/* Story cards: editable name + separate portrait image */
.story-card-profile {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  min-height: 150px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  margin-top: -50px;
}
.story-card-photo,
.story-card-name { min-width: 0; }
.story-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
}
.story-card-name {

	    text-align: center;
	
	display: flex;
    justify-content: center;

	align-items: self-end;
    padding-bottom: 2em;

    /*align-items: center;
	padding-top: 2em;*/

}
.story-card-name span {
  font-size: 14px;
  line-height: 1.5;
  /*font-weight: 600;*/
  letter-spacing: .05em;
	
}

.story-card-name span.san {
	font-size: .8em;
}

/* PC: second row (cards 4–6) = name left / photo right */
@media (min-width: 768px) {
  .story-grid > .story-card:nth-child(n+4):nth-child(-n+6) .story-card-photo { order: 2; }
  .story-grid > .story-card:nth-child(n+4):nth-child(-n+6) .story-card-name { order: 1; }
}
/* SP: every card = photo left / name right */
@media (max-width: 767px) {
  .story-card-profile { margin-top: -24px; min-height: 110px; }
  .story-card-photo { order: 1 !important; }
  .story-card-name { order: 2 !important; padding: 10px 2px; }
  .story-card-photo img { min-height: 110px; }
  .story-card-name span { 
	  font-size: 10px;
	  padding-bottom: 1em; }
}




/*Setting-#heartful-story*/


#heartful-story {
  --wave-height: 15.625vw;
}

@media (max-width: 47.999rem) {
  #heartful-story {
    --wave-height: 25vw;
    --wave-height: 32.5vw;
  }
}

#heartful-story .waveImg-top {
  height: var(--wave-height);
}

#heartful-story .container {
  padding-top: calc(var(--wave-height) / 2);
}


#heartful-story .special-label::before {
  height: calc(var(--wave-height) + 0px);
}
@media (min-width: 768px) {
#heartful-story .special-label::before {
  height: calc(var(--wave-height) + 28px);
}
}


#heartful-story .waveImg-top,
#heartful-story .waveImg-end {
  width: 100%;
  aspect-ratio: 1600 / 520;
  background: url("../ttl-history-sp.webp") center / 100% 100% no-repeat;
}

#heartful-story .story-bg {
  background-image: url("../ttl-historymid-sp.webp");
	background-size: contain;	
}
#heartful-story .waveImg-end { 
transform: scale(1, -1);
}

@media screen and (min-width:768px) {
#heartful-story .waveImg-top,
#heartful-story .waveImg-end {
  width: 100%;
  aspect-ratio: 2560 / 400;
  background: #fff url("../ttl-history-pc.webp") center / 100% 100% no-repeat;
}
#heartful-story .story-bg {
  background-image: url("../ttl-historymid-pc.webp");
	background-size: contain;	
}	
	
}






/* =========================================================
   Scroll reveal animations
   - numbers / books: left-to-right stagger, scale 85% -> 100%
   - timeline: fade in on scroll
========================================================= */

/* story-wave line color */
.story-wave__line {
  stroke: #deecf5;
}

/* Numbers */
.numbers-grid img {
  opacity: 0;
  transform: scale(.85);
  transform-origin: center center;
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.numbers-grid.is-revealed img {
  opacity: 1;
  transform: scale(1);
}

/* Publications: fade in from left to right */
.book-grid img {
  opacity: 0;
  transition: opacity .7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.book-grid.is-revealed img {
  opacity: 1;
}

.book-b {
	border: 1px solid #eee;
}

/* Timeline */
.timeline-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22, 1, .36, 1);
}

.timeline-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* JSが無効な環境ではコンテンツを隠さない */
html:not(.js) .numbers-grid img,
html:not(.js) .book-grid img,
html:not(.js) .timeline-item {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .numbers-grid img,
  .book-grid img,
  .timeline-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Story cards: staggered fade-in
========================================================= */
.story-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--story-reveal-delay, 0ms);
}

.story-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

html:not(.js) .story-card {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .story-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}




/* =========================================================
   ENDING
========================================================= */

.ending-section {
  --curve-height: 200px;
  --ending-bg: #f7f4ec;

  position: relative;
  width: 100%;
  overflow: hidden;
}


/* =========================================================
   上カーブ
   story-wave と同じ曲率
========================================================= */

.ending-section__curve {
  position: relative;
  left: 50%;

  display: block;

  width: max(120%, 1800px);
  height: var(--curve-height);

  transform: translateX(-50%);
}

.ending-section__curve path {
  fill: var(--ending-bg);
}


/* =========================================================
   本体
========================================================= */

.ending-section__body {
  position: relative;

  margin-top: -1px;

  padding: 0 0 60px;

  background: var(--ending-bg);
}


/* =========================================================
   コンテンツ
========================================================= */

.ending-section__content {
  position: relative;

  width: min(1500px, 94%);
  margin: 0 auto;
}


/* =========================================================
   上部タイトル
========================================================= */

.ending-section__heading {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;

  /*margin-bottom: -10px;*/
	
	/*margin-top: -150px;*/
	
	    padding-top: 10px;
}


/* 縦線 */

.ending-section__line {
  display: block;

  width: 3px;
  height: 100px;

  margin-top: calc(var(--curve-height) * -0.95);
  margin-top: calc(var(--curve-height) * -1.05);
  margin-bottom: 10px;

  background: #1d2028;
	
	
}


/* 英字 */

.ending-section__en {
  margin: 0;

  color: #1d2028;

  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .04em;
}


/* =========================================================
   ビジュアル
========================================================= */

.ending-section__visual {
  position: relative;

  width: min(1400px, 92%);
  margin: -60px auto 0;
	
	margin: 0 auto;
}


/* 写真 */

.ending-section__image {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
   テキスト
========================================================= */

.ending-section__message {
  position: absolute;

  z-index: 2;

  top: 50%;
  left: 50%;

  width: 90%;

  transform: translate(-50%, -44%);

  color: #111;
  text-align: center;
}


/* メインコピー */

.ending-section__message h5 {
  margin: 60px 0;

  font-size: clamp(30px, 3.2vw, 52px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .05em;
}


/* 本文 */

.ending-section__text {
  margin: 0 0 55px;

  font-size: clamp(16px, 1.45vw, 23px);
  font-weight: 500;
  line-height: 1.9;
}


/* 最後のコピー */

.ending-section__lead {
  margin: 0;

  font-size: clamp(18px, 1.7vw, 27px);
  font-weight: 700;
  line-height: 1.6;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1024px) {

  .ending-section__visual {
    width: 100%;
  }

  .ending-section__message h5 {
    margin: 35px 0;
  }

  .ending-section__text {
    margin-bottom: 35px;
  }

}


/* =========================================================
   SP
========================================================= */

@media (max-width: 767px) {

  .ending-section {
    --curve-height: 120px;
  }


  /* story-wave同様、
     巨大なカーブの中央だけを表示 */

  .ending-section__curve {
    width: 1000px;
  }


  /*.ending-section__body {
    padding-bottom: 60px;
  }*/


  .ending-section__content {
    width: 100%;
  }


  /* ------------------------------
     Heading
  ------------------------------ */

  .ending-section__line {
    width: 2px;
    height: 70px;

    margin-top: calc(var(--curve-height) * -0.9);
    margin-bottom: 20px;
  }


  .ending-section__en {
    font-size: 13px;
  }


  /* ------------------------------
     Visual
  ------------------------------ */

  .ending-section__visual {
    width: 100%;
    margin-top: -10px;
  }


  /*
   * SPでは横長画像のままだと
   * 写真が小さくなりすぎるため
   * 高さを確保して中央をトリミング
   */

  .ending-section__image {
    width: 100%;
    height: 620px;

    object-fit: cover;
    object-position: center;
  }


  /* ------------------------------
     Message
  ------------------------------ */

  .ending-section__message {
    top: 50%;

    width: 100%;

    transform: translate(-50%, -45%);
  }


  .ending-section__message h5 {
    margin: 40px 0;

    font-size: 24px;
    line-height: 1.5;
  }


  .ending-section__text {
    margin-bottom: 40px;

    font-size: 14px;
    line-height: 2;
  }


  .ending-section__lead {
    font-size: 17px;
  }

}




/*wave-shadow*/

/* =========================================================
   STORY WAVE
========================================================= */

.story-wave {
  --curve-height: 260px;

  --band-color: #deecf5;
  --outside-color: #fff;

  position: relative;

  width: 100%;

  overflow: hidden;
}


/* =========================================================
   上下カーブ
========================================================= */

.story-wave__curve {
  position: relative;

  width: 100%;
  height: var(--curve-height);

  overflow: hidden;

  line-height: 0;
}


.story-wave__curve svg {
  position: absolute;

  top: 0;
  left: 50%;

  display: block;

  /*
   * 左右を画面外まで伸ばす
   */
  width: max(120%, 1800px);
  height: 100%;

  transform: translateX(-50%);

  overflow: visible;
}


/* =========================================================
   外側
========================================================= */

.story-wave__outside {
  /*
   * カーブの外側を白で隠す
   */
  fill: var(--outside-color);
}


/* =========================================================
   水色帯
========================================================= */

.story-wave__band {
  fill: var(--band-color);
}


/* =========================================================
   内側カーブの影
========================================================= */

.story-wave__shadow {
  fill: none;

  stroke: rgba(65, 85, 100, .25);

  /*
   * ある程度太い線をぼかすことで
   * 柔らかい影にする
   */
  stroke-width: 20px;

  vector-effect: non-scaling-stroke;
}





/* =========================================================
   コンテンツ
========================================================= */

.story-wave__inner {
  position: relative;
  z-index: 1;

  width: min(1100px, 86%);

  margin: 0 auto;
  padding: 80px 0;
	padding: 0;

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

  text-align: center;
}


.story-wave__title {
  margin: 0 0 40px;

  font-size: 48px;
  line-height: 1.3;
}


.story-wave__inner p {
  margin: 0 auto 30px;
}


.story-wave__inner > *:last-child {
  margin-bottom: 0;
}


/* =========================================================
   SP
========================================================= */

@media (max-width: 767px) {

  .story-wave {
    --curve-height: 160px;
  }


  /*
   * SVG全体を潰さず、
   * 大きなカーブの中央を表示
   */
  .story-wave__curve svg {
    width: 1000px;
  }


  .story-wave__inner {
    width: 86%;

    padding: 60px 0;
	padding: 0;  

    font-size: 16px;
  }


  .story-wave__title {
    margin-bottom: 30px;

    font-size: 32px;
  }

}





/* =========================================================
   Numbers
========================================================= */

.numbers-grid {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	
  display: grid;
  grid-template-columns: 1fr;
    grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  container-type: inline-size;
}

/* label */

.number-label {
  margin: 0 0 8px;

  font-size: 11px;
	letter-spacing: .1em;
	background: #1f5496;
	color: #fff;
}



/* =========================================================
   Item
========================================================= */

.number-item {
  position: relative;

  min-width: 0;

  text-align: center;
	
	border: 1px solid #ddd;
	padding: 10px;
	border-radius: 3px;
	
	
	
	position: relative;
    min-width: 0;
    text-align: center;
    border: 3px solid #309cab;
    padding: 10px;
    border-radius: 10px;
}

.number-item--pink {
    border: 3px solid #ef9794;
}
.number-item--pink .number-label {
	background: #e27975;
}


/* 上端ライン */

/*.number-line {
  width: 100%;
  height: 2px;

  margin-bottom: 15px;

  background: #249fb5;

  transform: scaleX(1);
  transform-origin: left center;
}


.number-item--pink .number-line {
  background: #e98282;
}*/





/* =========================================================
   Value
========================================================= */

.number-value {
  display: flex;

  align-items: flex-end;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
}


/* prefix / unit */

.number-prefix,
.number-unit {
  padding: .12em;

  font-size: .9em;

  opacity: 1;
}


/* =========================================================
   Odometer
========================================================= */

.number-odometer {
  position: relative;

  display: inline-flex;

  /*
   * 数字サイズをコンテナ幅に追従
   */
	font-size: 60px;
  font-size: clamp(28px, 4cqi, 50px);

  font-weight: 700;
  line-height: 1;

  font-variant-numeric: tabular-nums;

  color: #249fb5;
}


.number-item--pink .number-odometer {
  color: #e98282;
}


/*
 * 1桁分
 */

.number-digit {
  position: relative;

  display: inline-block;

  width: .62em;
  height: 1em;

  overflow: hidden;
}


/*
 * 最終値を裏側に置いて
 * 最初から幅を確保
 */

.number-digit__space {
  display: block;

  width: .62em;

  visibility: hidden;
}


/*
 * 数字ストリップ
 */

.number-digit__strip {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  will-change: transform;
}


/*
 * 各数字
 */

.number-digit__number {
  display: flex;

  width: 100%;
  height: 1em;

  align-items: center;
  justify-content: center;

  line-height: 1;
	
	
	    display: flex;
    width: 85%;
    height: 1em;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: "Montserrat", sans-serif;
    letter-spacing: -.08em;
	font-weight: 500;
}


/* カンマ */

.number-separator {
  display: inline-block;

  width: .32em;

  line-height: 1;
}


/* =========================================================
   Accessibility
========================================================= */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


.numbers-svg-filter {
  position: absolute;

  width: 0;
  height: 0;

  overflow: hidden;
}


/* =========================================================
   JS起動時だけ初期状態を変更
========================================================= */

/*.js .number-line {
  transform: scaleX(0);
}*/

.js .number-prefix,
.js .number-unit,
.js .number-label {
  opacity: 0;
}




/* tablet */

@media (min-width: 600px) {

.numbers-grid,
.request-link {
	width: 80%;
    grid-template-columns: repeat(2, 1fr);
  }
.number-label {
  font-size: 14px;
}
}


/* PC */

@media (min-width: 1025px) {

  .numbers-grid,
	.request-link {
	width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }
.number-value {
  align-items: flex-end;
	}

}


/* =========================================================
   Reduced motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  /*.number-line {
    transform: none !important;
  }*/

  .number-prefix,
  .number-unit,
  .number-label {
    opacity: 1 !important;
  }

}
/* =========================================================
   Ending image reveal: fade + scale 40% -> 100%
========================================================= */
.ending-section__image {
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .ending-section__image {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Hero entrance animation: initial state only when JavaScript is enabled. */
.js .hero-layout .anniversary {
  opacity: 0;
  transform: scale(.4);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.js .hero-layout .hero-copy {
  opacity: 0;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-layout .anniversary {
    opacity: 1;
    transform: none;
  }

  .js .hero-layout .hero-copy {
    opacity: 1;
  }
}





/* v5: story-wave top shadow alignment
   上側clipPathを1.2倍化したbandの内側境界へ完全同期。 */

/* =========================================================
   Curve vertex lines
   縦線の上端を各カーブの中央頂点に合わせる
========================================================= */

/* Special.01:
   title-wave下側カーブ中央の頂点 → special-label */
.gift .special-label::before {
  /* label上端から、直前のtitle-wave下側カーブ中央頂点まで届かせる */
  height: calc(110px + clamp(0px, 7.5vw, 90px));
}

/* Ending:
   ending-section上側カーブ中央の頂点 → TO THE NEXT 20 YEARS */
.ending-section__line {
  position: relative;
  z-index: 4;
  /* 既存の二重margin-top指定を打ち消し、中央頂点から自然に伸ばす */
  margin-top: calc(var(--curve-height) * -0.58);
  height: calc(var(--curve-height) * 0.58 + 18px);
  margin-bottom: 10px;
	
	
	margin-top: calc(var(--curve-height) * -0.7);
    height: calc(var(--curve-height) * 0.58);
    margin-bottom: 10px;
}

@media (max-width: 767px) {
  /* SP版title-waveは浅いカーブなので、頂点位置に合わせて短くする */
  .gift .special-label::before {
    height: 120px;
  }

  /* SP版endingカーブの頂点（y=120付近）に合わせる */
  .ending-section__line {
    margin-top: calc(var(--curve-height) * -0.40);
    height: calc(var(--curve-height) * 0.40 + 18px);
  }
}




/* =========================================================
   PC / SP カーブ切替
   SVG本体を display:none にせず、PC/SPの path だけ切り替える。
   story-wave はSVGを2枚用意しているため、positionを維持して切替。
========================================================= */




.ending-section__curve--pc {
  visibility: visible;
}
.ending-section__curve--sp {
  visibility: hidden;
  pointer-events: none;

  /* PC用SVGと同じ場所に重ねる */
  position: absolute;
  top: 0;
}

/* SPのみ切替 */
@media (max-width: 767px) {

  .ending-section__curve--pc {
    visibility: hidden;
  }
  .ending-section__curve--sp {
    visibility: visible;
  }
}








/* Book image hover zoom (SOICHI BLOG style) */
@media (hover: hover) and (pointer: fine) {
  .book-grid.is-revealed .book-image img {
    transition:
      opacity .7s ease var(--reveal-delay, 0ms),
      transform .3s ease;
  }

  .book-grid.is-revealed .book-image:hover img {
    transform: scale(1.1);
  }
}

/* =========================================================
   HERO OVERLAP SCROLL
   後続セクションが hero の上に覆いかぶさるスクロール表現
========================================================= */
#main {
  position: relative;
}

#main .hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100svh;
	
	
	 /* Safari用 */
	
	/*position: -webkit-sticky;
	-webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
	
	
	 -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden;*/
	
	
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

#main .hero ~ section {
  position: relative;
  z-index: 1;
}

/* 最初の後続セクションは不透明にして、hero を確実に覆う */
#main .numbers {
    margin-top: 100vh !important;	
  background: #fff;
}

/* sticky の高さを画面に合わせつつ、既存PCレイアウトを維持 */
@media screen and (min-width: 1025px) {
  #main .hero {
    min-height: 100vh;
  }
}



	
section {
		background: #fff;
}



/* =========================================================
   KENJYA LIST IMAGE SCROLL REVEAL
   表示領域に入ってから少し待ち、リスト順に表示
========================================================= */
.js .kenjyaList .section-image img {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .6s ease var(--kenjya-reveal-delay, 0ms),
    transform .6s cubic-bezier(.22, 1, .36, 1) var(--kenjya-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .kenjyaList.is-revealed .section-image img {
  opacity: 1;
  transform: translateY(0);
}
.js .kenjyaList.is-revealed .section-image img:hover {
	opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .js .kenjyaList .section-image img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* Prevent mobile browsers from enlarging text automatically on orientation change. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Smartphone landscape: restore the PC-style hero layout. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 60rem) {
  .hero {
    min-height: 0;
    padding: 70px 0;
	 padding: 10vh 0;
  }

  .hero .container {
    width: 90%;
  }

  .hero-layout {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
	#hero-title {
		font-size: 20px;
	}
	/*#hero-title br{
		display: none;
		visibility: hidden;
	}*/

  .hero-layout .anniversary {
    width: 38%;
    max-width: none;
    flex-shrink: 0;
    margin: 0;
  }

  .hero-layout .hero-copy {
    flex: 1;
    max-width: none;
    margin: 0;
    min-width: 0;
  }
}



.interviewer {
	font-weight: bold;
}

.next {
	display: inline-block;
	margin: 10px auto 20px;
	background: #4fa3cd;
	background: var(--blue);
	background: url("../hero-texture.webp") center no-repeat;
	background-size: cover;
	
	background: rgba(255,255,255,0.8);
	color: #fff;
	color: var(--blue);
	padding: 5px 10px;
/*	border-radius: 20px;*/
	font-size: .9em;
	
	border-top: solid 3px #4fa3cd;/*上線*/
  border-bottom: solid 3px #4fa3cd;/*下線*/
}


.media-modal__text .gif-ttl {
	    font-weight: bold;
    font-size: 1.2em;
    background: #ce5758;
    color: #fff;
    padding: 10px;
	margin: 0 0 2em;
}
.media-modal__text .interviewer{
	margin: 2em 0 1em;
}
@media screen and (max-width:599px) {
.textStart div:first-child {
	max-width: 200px;
	margin: 0 auto;
}
}
@media screen and (min-width:600px) {
.textStart {
	    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
}
.textStart div:first-child {
	width: 20%;
}
.textStart div:last-child {
	width: 80%;
}
.media-modal__text .gif-ttl {
	margin: 0;
}
}


.recording {
	text-align: right;
}

@media screen and (max-width:376px) {
	.hero h1 br {
		display: none;
		visibility: hidden;
	}
}