/** ************************

added 20250826

************************ **/

/* index */
/* index keywords */
.index_keywords{
--s: clamp(0.808, calc(100vw / 950), 1);
position: relative;
width: 100%;
/*max-width: 750px;
height: 75px;
margin: 4.133vw auto 0;*/
max-width: clamp(606px, calc(79.121vw - 1.654px), 750px);;
height: clamp(60.6px, calc(7.8846vw + 0.100px), 75px);;
margin: 4.133vw auto 0;
margin-bottom: 2em;
}
.key1,
.key2,
.key3{
/*font-size: 32px;*/
font-size: clamp(25.856px, calc(3.3758vw - 0.064px), 32px);
font-weight: 500;
border-width: 1px;
border-style: solid;
border-radius: 9999px;
display: flex;
justify-content: center;
align-items: center;
/*width: 290px;
height: 60px;*/
width:  clamp(234.32px, calc(30.593vw - 0.63px), 290px);
height: clamp(48.48px,  calc(6.3297vw - 0.12px), 60px);
position: absolute;
}
.key1{
color: #327DBE;
border-color: #327DBE;
top: 0;
left: 0;
}
.key2{
color: #DC6E28;
border-color: #DC6E28;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.key3{
color: #55A541;
border-color: #55A541;
top: 0;
right: 0;
}

@media screen and (max-width: 767px) {
.index_keywords{
width: 100%;
max-width: 322px;
height: 37.5px;
}
.key1,
.key2,
.key3{
font-size: 16px;
width: 120px;
height: 30px;
}
}

#Contents .function-index_title{
font-size: 38px;
font-weight: 700;
}
@media screen and (max-width: 767px) {
#Contents .function-index_title{
font-size: 24px;
line-height: 1.3em;
}
}

#Contents section.overview > .videoclip {
margin-top: 0;
}

/* index functions*/
.function-index{
margin-top: 5.5vw;
}
.function-new{
display: flex;
}
.function-new::before{
display: inline-block;
content: "NEW";
background-color: #FA000F;
font-size: 14px;
line-height: 1em;
font-weight: 600;
color: #FFFFFF;
padding: 6px 10px;
margin-right: 2px;
border-radius: 9999px;
display: flex;
align-items: center;
height: fit-content;
}
.function-list{
flex-direction: row;
gap: 26px;
}
.function-column{
background-color: #F4F4F4;
padding: 14px 14px 0;
width: calc((100% - 52px) / 3);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.function-wrapper{
padding: 12px 12px 0;
border-left-width: 4px;
border-left-style: solid;
margin-bottom: 1em;
}
.function-list .lead{
font-size: 20px;
line-height: 1.3em;
font-weight: 700;
margin-bottom: 0;
}
.function-list .title{
font-size: 28.5px;
line-height: 1.3em;
font-weight: 700;
margin-bottom: 18px;
}
.function-list .txt{
color: #4D4D4D;
font-size: 18px;
font-weight: 300;
margin-bottom: 20px;
}
.function-list .img img {
width: 75%;
height: auto;
}
.function-list .img {
padding-bottom: 4%;
}
.cusBlue .function-wrapper{
border-color: #327DBE;
}
.cusGreen .function-wrapper{
border-color: #55A541;
}
.cusOrange .function-wrapper{
border-color: #DC6E28;
}


@media screen and (max-width: 767px) {
#Contents .function-index_title{
text-align: left;
}
.function-column{
padding: 15px 15px 0;
width: 100%;
}
.function-list{
gap: 20px;
flex-direction: column;
}
.function-wrapper{
padding: 6px 12.5px 0;
}
.function-list .lead{
font-size: 16.5px;
}
.function-list .title{
font-size: 24px;
margin-bottom: 5px;
}
.function-list .txt{
font-size: 14.5px;
}
.function-list .img img{
width: 75%;
}
}

.indexImage01{
position: relative;
width: 100%;
}
#indexfunction0201svg{
display:block;
width:100%;
height:auto;
overflow:visible;
}
.index_text1 {
font-size: 9px;
font-weight: 700;
fill: #7b7a7b;
}
.index_text2 {
font-size: 12.4px;
font-weight: 700;
fill: #7b7a7b;
}
.index_text3 {
fill: #e50027;
font-size: 14px;
font-weight: 800;
}
.indexSpeechBubble01 {
stroke: #7b7a7b;
fill: #fff;
stroke-miterlimit: 10;
stroke-width: 1.3px;
}
.indexSpeechBubble02 {
stroke: #e50027;
fill: #fff;
stroke-miterlimit: 10;
stroke-width: 1.3px;
}