@charset "utf-8";

.sec-intro {
display: grid;
grid-template-columns: 1fr max-content;
grid-template-rows: 830px;
align-items: center;
position: relative;
margin-bottom: 105px;
}

.sec-intro .sec-img {
max-width: calc(812/1920*100vw);
width: 100%;
height: 100%;
}

.sec-intro .sec-img img {
width: 100%;
height: 100%;
object-fit: cover;
}

.sec-intro .sec-text {
margin-left: 15%;
display: flex;
flex-direction: column;
gap: 60px;
}

.sec-intro .tit-ja .char {
display: inline-block;

opacity: var(--opacity, 0);

transition:
opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);

transition-delay:
calc(0.05s * var(--char-index));
font-family: var(--font-notoserif);
font-weight: 600;
font-size: clamp(2.5rem, 2.167rem + 0.69vw, 3rem);
line-height: clamp(3.75rem, 2.918rem + 1.73vw, 5rem);
color: #1f67aa;
}

.sec-intro .sec-text .desc p {
font-family: var(--font-notosans);
font-weight: 400;
font-size: 18px;
line-height: calc(40/18);
color: #232426;
}

.sec-intro .tit-ja.is-active {
--opacity: 1;
}

.sec-intro::before {
content: "";
background: url(/system_panel/uploads/images/20260518040550945920.png) no-repeat top/100% auto;
position: absolute;
height: 779px;
top: 49px;
width: 100%;
z-index: -1;
}

.sec-main>.inner {
display: grid;
grid-template-columns: 8% minmax(84%, 1256px);
gap: 5%;
}



.sidemenu {
position: relative;
width: 100%;
}

.sidemenu .list.is-fixed {
position: fixed;
top: calc(var(--header-height) + 105px);

}

.sidemenu .list.is-stop {
position: absolute;
bottom: 300px;
top: auto;
}


.sidemenu .list {
display: flex;
flex-direction: column;
gap: 40px;
}

.sidemenu .list a {
font-family: var(--font-notosans);
font-weight: 600;
font-size: 18px;
color: #919191;
position: relative;
}

.sidemenu .list a.active {
color: #085eab;
padding-left: 11px;
}

.sidemenu .list a.active::before {
content: "";
width: 6px;
height: 6px;
background-color: #085EAB;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
}



.main-contents .inner {

padding: 46px 0 120px;
}

.main-contents .sec-title {
display: flex;
flex-direction: column;
gap: 22px;
margin-bottom: 67px;
}

.main-contents .sec-title .tit-ja {
font-family: var(--font-notoserif);
font-weight: 400;
font-size: 16px;
color: #085eab;
}

.main-contents .sec-title .tit-en {
font-family: var(--font-shippori);
font-weight: 600;
font-size: clamp(3rem, 1.67rem + 2.78vw, 5rem);
color: #085eab;
}

.strength {
overflow: hidden;
margin-bottom: 110px;
}

.strength .list {
display: flex;
flex-direction: column;
gap: 60px;
}

.strength .item {
display: grid;
grid-template-columns: 21% 1fr;
gap: 74px;
align-items: center;
}

.strength .item:nth-child(1) {
margin-left: 3%;
}

.strength .item:nth-child(2) {
margin-left: 10%;
}

.strength .item:nth-child(3) {
margin-left: 21%;
}

.strength .item .text {
display: flex;
flex-direction: column;
gap: 20px;
}

.strength .item-tit .tit-ja {
font-family: var(--font-notoserif);
font-weight: 500;
font-size: clamp(1.5rem, 1.334rem + 0.35vw, 1.75rem);
line-height: calc(40/28);
color: #085eab;
}

.strength .item-tit .tit-en {
font-family: var(--font-notoserif);
font-weight: 400;
font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
line-height: calc(20/14);
color: #085eab;
}

.strength .desc p {
line-height: calc(28/16);
color: #485057;
font-weight: 400;
}

.greeting {
margin-bottom: 80px;
}

.greeting .sec-body {
display: grid;
grid-template-columns: 36% 1fr;
gap: 75px;
}

.greeting .sec-text .main {
font-family: var(--font-notoserif);
font-weight: 500;
font-size: clamp(1.25rem, 1.084rem + 0.35vw, 1.5rem);
color: #151515;
margin-bottom: 40px;
}

.greeting .sec-text .main br {
    display: none;
}

.greeting .sec-text .desc {
margin-bottom: 37px;
}

.greeting .sec-text .desc p {
line-height: calc(28/16);
color: #485057;
font-weight: 400;
}

.greeting .sec-text .name {
display: flex;
align-items: center;
gap: 20px;
font-family: var(--font-notoserif);
font-weight: 400;
color: #151515;
justify-content: flex-end;
}

.greeting .sec-text .name .f-14 {
font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
}

.greeting .sec-text .name .f-20 {
font-weight: 500;
font-size: clamp(1.125rem, 1.042rem + 0.17vw, 1.25rem);
}

.history {
margin-bottom: 100px;
}

.history .scroll-area {
overflow-x: scroll;
padding-bottom: 42px;
cursor: pointer;
-webkit-overflow-scrolling: touch;

touch-action: pan-x;
cursor: grab;

user-select: none;

}

.history .scroll-area.is-drag {

cursor: grabbing;

}

.history .list {
display: grid;
grid-template-columns: repeat(4, 384px);
gap: 14px;

}

.history .list .item {
background: #f7f7f7;
padding: 51px 22px;
}

.history .list .item .years {
font-family: var(--font-notoserif);
font-weight: 600;
font-size: clamp(2rem, 1.667rem + 0.69vw, 2.5rem);
color: #085eab;
}

.history .list .item {
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
}

.history .list .item .desc p {
font-family: var(--font-notosans);
font-weight: 500;
font-size: clamp(0.875rem, 0.709rem + 0.35vw, 1.125rem);
line-height: calc(28/18);
color: #151515;

}

.history .list .item::before {
content: "";
position: absolute;
top: 35%;
left: 43%;
width: 65%;
height: 6px;
transform: translateY(-50%);
background: radial-gradient(circle, #005BAC 2px, transparent 2.5px) repeat-x;
background-size: 16px 6px;
background-position: left center;
pointer-events: none;
z-index: 10;
}

.history .list .item:last-child::before {
width: 57%;
}

.history .scroll-area::-webkit-scrollbar {
height: 2px;
}

.history .scroll-area::-webkit-scrollbar-track {
background: #BFBCBC;
border-radius: 999px;
}

.history .scroll-area::-webkit-scrollbar-thumb {
background: #085EAA;
border-radius: 999px;
}

.history .scroll-area::-webkit-scrollbar-thumb:hover {
background: #00458A;
}

.outline .list {
display: flex;
flex-direction: column;
gap: 43px;
}

.outline .list .item {
display: grid;
grid-template-columns: 20% 1fr;
gap: 85px;
}

.outline .list .item .tit {
font-family: var(--font-notosans);
font-weight: 600;
font-size: clamp(1rem, 0.917rem + 0.17vw, 1.125rem);
color: #151515;
padding-bottom: 15px;
border-bottom: 1px solid #045faa;
}

.outline .list .item .detail {
font-family: var(--font-notosans);
font-weight: 400;
font-size: clamp(1rem, 0.917rem + 0.17vw, 1.125rem);
line-height: calc(35/18);
color: #151515;
padding-bottom: 15px;
border-bottom: 1px solid #b2b2b2;
}

@media (max-width: 1300px) {

.w1344,
.w1536 {
width: 85%;
}


}

@media (max-width: 1200px) {
.sidemenu {
display: none;
}

.sec-main>.inner {
grid-template-columns: 100%;

}

.sec-intro {
gap: 50px;
}

.sec-intro .sec-text {
margin-left: 8%;
}
}

@media (max-width: 900px) {
.sec-intro {
display: flex;
flex-direction: column-reverse;
gap: 40px;
margin-bottom: 80px;
}

.sec-intro .sec-img {
max-width: none;
width: 100%;
height: calc(324/400*100vw);
}

.sec-intro .sec-text {
width: 86%;
margin: 0 auto;
}

.sec-main {
width: 86%;
}

.main-contents .inner {
padding: 0 0 80px;
}

.main-contents .sec-title {
align-items: center;
margin-bottom: 40px;
}

.strength,
.greeting {
width: 95%;
margin: 0 auto;
}

.strength {
margin-bottom: 104px;
}

.strength .item:nth-child(1),
.strength .item:nth-child(2),
.strength .item:nth-child(3) {
margin: 0 auto;
}

.strength .item {
display: flex;
flex-direction: column;
gap: 20px;
}

.greeting {
margin-bottom: 80px;
}

.greeting .sec-body {
display: flex;
flex-direction: column;
gap: 40px;
}

.history {
margin-bottom: 60px;
}

.outline .list {
gap: 30px;
}

.outline .list .item {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
}

.outline .list .item .tit {
width: 30%;
}

.outline .list .item .detail {
width: 100%;
}

.strength .item .text .item-tit {
display: flex;
flex-direction: column;
align-items: center;
}




}
@media (max-width: 767px) {
.greeting .sec-text .main br {
    display: block;
}
    .sec-intro .sec-text {
        width: 92%;
    }

}