/* general parts style sheet 
add date : 0903 */
:root{
    
    --black: #252729;

    --blue: #0974E8;
    --blue-10: #075BB7;
    --blue-45: #D9EAFE;
    --blue-50: #F1F8FE;
    
    --blue-15: #3C92EF;
    --blue-20: #005FC6;

    --orange: #F35B04;
    --orange-10: #D65003;

    --yellow-30: #FFF3D3;

    --red: #FF595E;
    --red-30: #FFF2F2;

    --gray: #8C9197;
    --gray-10: #72777E;
    --gray-25: #4E5156;
    --gray-30: #DCDEE0;
    --gray-35: #EAEBEC;
    --gray-40: #F7F7F8;

    --white: #fff;
}

html, 
body {
    font-family: "Noto Sans JP";
    /* font-style: normal;
    font-weight: 700; */
}
.card-description .cases div h6{
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
}


#blu_title span,
#blu_title h2{
    color: var(--blue, #0974E8);
}

.wh_space{
    height: 80px;
}

/* line button normal  */
.blu_button_line{
    border-radius: 24px;
    border: 1px solid var(--blue, #0974E8);
    display: flex;
    width: 100%;
    max-width: 278px;
    padding-top: 13px;
    padding-bottom: 13px;
    color: var(--blue, #0974E8);
    text-align: center;
    font-size: 14px;
    line-height: normal;
    font-weight: 700;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}
.blu_button_line:hover{
    transition: all .3s;
    border: 1px solid var(--blue-10, #075BB7);
    color: var(--blue-10, #075BB7);
}


.orange_button{
    display: flex;
    width: 100%;
    max-width: 280px;
    padding-top: 14px;
    padding-bottom: 14px;
    justify-content: center;
    border-radius: 24px;
    background: var(--orange,#F35B04);

    color: var(--white,  #FFF);
    text-align: center;

    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
}
.orange_button:hover{
    transition: all .3s;
    background: var(--orange-10, #D65003);
}

/* sp button width custom class */
@media screen and (max-width: 767px) {
    .btn_width_custom{
        width: 87.47%;
        max-width: 326px;
    }
}

/* contact box widget  */
/* template : contact-box1-type1 css */

.contact_itms{
    display: flex;
    gap: 32px;
    width: 95%;
    max-width: 992px;
    justify-content: center;
}
.contact_itms .itm{
    padding-top: 32px;
    border-radius: 6px;
    background: var(--white, #FFF);
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
.contact_itms .itm .imgbox{
    display: flex;
}
.contact_itms .itm .imgbox img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 240px;
}
.contact_itms .itm .txtbox{
    display: flex;
    flex-direction: column;
}
.contact_itms .itm .txtbox p{
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    margin-bottom: 24px;
}
.contact_itms .itm .txtbox p span{
    font-size: 16px;
    font-weight: 400;
    line-height: 200%; /* 32px */
    color: var(--black,#252729);
}
.contact_itms .itm .txtbox .btn_div{
    
}
.contact_itms .itm .txtbox .btn_div a{
    max-width: 240px;
}

@media screen and (max-width: 880px) {
    .contact_itms {
        flex-direction: column;
        width: 87.201%;
    }
    .contact_itms .itm .txtbox {
        width: 85.5%;
    }
    .contact_itms .itm .txtbox p span {
        font-size: 14px;
        display: contents;
    }
    .wh_space{
        height: 64px;
    }
}
@media screen and (max-width: 650px) {
    .contact_itms .itm .imgbox img {
        max-width: 160px;
    }
}

/* contact box widget  */
/* template : contact-box-type2 css */
#contact-box-section{
    display: flex;
    width: 100%;
    justify-content: center;
    padding-top: 80px;
}
.contact-box-2{
    display: flex;
    justify-content: center;
    max-width: 1280px;
    width: 95%;
    background: var(--blue, #0974E8);
    padding-top: 40px;
    padding-bottom: 40px;
}
.contact-box-2 .contact-box-2-wh{
    display: flex;
    width: 94%;
    justify-content: center;
    background: var(--white,#fff);
    max-width: 1200px;
    padding-top: 56px;
    padding-bottom: 56px;
}
.contact-box-2 .contact-box-2-main{
    display: flex;
    gap: 80px;
    justify-content: center;
    width: 95%;
}

.contact-box-2 .contact-box-2-main .txtbox_mini{
    display: none;
}
.contact-box-2 .contact-box-2-main .txtbox_mini span{
    color: var(--blue, #0974E8);
    font-size: 24px;
    line-height: normal;
}

.contact-box-2 .contact-box-2-main .imgbox{
    display: flex;
    width: 100%;
    max-width: 340px;
    align-items: center;
}
.contact-box-2 .contact-box-2-main .imgbox img{
    display: block;
    width: 100%;
    height: auto;
}
.world-img{
	animation:20s linear infinite rotation;
}
@keyframes rotation{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(-360deg); }
}
.contact-box-2 .contact-box-2-main .txtbox{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 504px;
    justify-content: center;
}
.contact-box-2 .contact-box-2-main .txtbox h2{
    display: flex;
    flex-direction: column;
}
.contact-box-2 .contact-box-2-main .txtbox h2 span{
    color: var(--blue, #0974E8);
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
}
.contact-box-2 .contact-box-2-main .txtbox p {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    margin-bottom: 32px;
}
.contact-box-2 .contact-box-2-main .txtbox p span{
    font-size: 16px;
    font-weight: 400;
    line-height: 200%; /* 32px */
}
.contact-box-2 .contact-box-2-main .txtbox .btn_div{
    display: flex;
    width: 100%;
    gap: 32px;
}
@media screen and (max-width: 880px) {
    .contact-box-2 .contact-box-2-main {
        flex-direction: column;
        gap: 24px;
        align-items: center;
        width: 85.63%;
    }
    .contact-box-2 .contact-box-2-main .txtbox h2 {
        display: none;
    }
    .contact-box-2 {
        width: 100%;
        padding: 24px;
    }
    .contact-box-2 .contact-box-2-main .txtbox p {
        margin-top: 0px;
        margin-bottom: 16px;
        line-height: normal;
    }
    .contact-box-2 .contact-box-2-main .txtbox .btn_div {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
    .contact-box-2 .contact-box-2-main .txtbox_mini{
        display: flex;
    }
    .contact-box-2 .contact-box-2-wh {
        width: 100%;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .contact-box-2 .contact-box-2-main .txtbox {
        align-items: center;
    }
    #contact-box-section {
        padding-top: 64px;
    }
}
@media screen and (max-width: 650px) {
    .contact-box-2 .contact-box-2-main .imgbox {
        max-width: 240px;
    }
}
@media screen and (max-width: 500px) {
    .contact-box-2 .contact-box-2-main .txtbox p {
        display: block;
    }
    .contact-box-2 .contact-box-2-main .txtbox p span {
        font-size: 14px;
    }
}

@media screen and (max-width: 374px) {
    .contact-box-2 .contact-box-2-main .imgbox {
        max-width: 200px;
    }
}

/* card-lists-widget  */
.lists_cols{
    width: 95%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1288px;
    gap: 32px;
}
.lists_cols .itm{
    display: flex;
    border-radius: 6px;
    background: var(--white, #FFF);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.10);
}
.lists_cols .itm a{
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 0.8rem 1.6rem 0.8rem 0.8rem;
    box-sizing: border-box;
}

.lists_cols .itm a img{
    max-width: 240px;
    display: block;
    width: 50%;
    height: auto;
}
.lists_cols .itm a .txtbox{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 348px;
}
.lists_cols .itm a .txtbox .lbl_date{
    color: var(--gray-10, #72777E);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}
.lists_cols .itm a .txtbox .lbl_date span,
.lbl_date span,
.lbl_date{
    color: var(--gray-10, #72777E);
    font-size: 12px;
    font-weight: 400;
}
.lists_cols .itm a .txtbox .lbl_news_info{

}
.lists_cols .itm a .txtbox .lbl_news_info span{
    color: var(--blue, #0974E8);
    font-size: 14px;
    line-height: normal;
}
@media screen and (max-width: 880px) {
    .lists_cols {
        width: 87.203%;
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
    .lists_cols .itm a {
        flex-direction: column;
    }
    .lists_cols .itm a img {
        max-width: unset;
        width: 100%;
    }
}

/* cta support box */
.support_cta_box{
    display: flex;
    width: 95%;
    max-width: 1184px;
}
.support_cta_box .support_cta_left{
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--blue-50, #F1F8FE);
    padding-top: 40px;
    padding-bottom: 40px;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.support_cta_box .support_cta_left .imgbox{
    display: flex;
    justify-content: center;
    max-width: 512px;
}
.support_cta_box .support_cta_left .imgbox img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 300px;
}
.support_cta_box .support_cta_left .subtxtbox {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 512px;
}
.support_cta_box .support_cta_left .subtxtbox span{
    color: var(--black, #252729);
    font-size: 16px;
    font-weight: 400;
    line-height: 200%; /* 32px */
}
.support_cta_box .support_cta_left .subtxtbox a{
    color: var(--blue, #0974E8);
    font-size: 16px;
    font-weight: 400;
    line-height: 200%;
    text-decoration: none;
    cursor: pointer;
}
.support_cta_box .support_cta_right{
    background: var(--blue, #0974E8);
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 40px;
}
.support_cta_box .support_cta_right .maintxitm{
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 512px;
    align-self: center;
    gap: 8px;
}
.support_cta_box .support_cta_right .maintxitm span{
    color: var(--white,  #FFF);
    font-size: 24px;
    line-height: normal;
}
.support_cta_box .support_cta_right .maintxitm ul{
    list-style: disc;
    padding: revert;
    padding-left: 27px;
}
.support_cta_box .support_cta_right .maintxitm ul li{ 
    color: var(--white, #FFF);
    font-size: 16px;
    font-weight: 400;
    line-height: 200%; /* 32px */
}
@media screen and (max-width: 880px) {
    .support_cta_box {
        flex-direction: column;
        width: 87.203%;
    }
    .support_cta_box .support_cta_left .subtxtbox {
        width: 85.322%;
    }
    .support_cta_box .support_cta_right .maintxitm {
        width: 85.322%;
    }
    .support_cta_box .support_cta_left .imgbox img {
        max-width: 240px;
    }
}
@media screen and (max-width: 550px) {
    .support_cta_box .support_cta_left {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .support_cta_box .support_cta_left .subtxtbox span{
        font-size: 14px;
    }
    .support_cta_box .support_cta_left .subtxtbox a{
        font-size: 14px;
    }
    .support_cta_box .support_cta_right {
        padding-top: 24px;
        padding-bottom: 24px;
        gap: 16px;
    }
    .support_cta_box .support_cta_right .maintxitm span{
        font-size: 18px;
    }
    .support_cta_box .support_cta_right .maintxitm ul{
        padding-left: 27px;
    }
    .support_cta_box .support_cta_right .maintxitm ul li{ 
        font-size: 14px;
    }
}

.body2{
    font-weight: 400;
}

/* logo slider slick  */
.logo-slider img {
    width: 128px;
    object-fit: contain;
    background-color: #fff;
    pointer-events: none;
}
.logo-slider .slick-list .slick-track{
    gap: 16px;
}
.logo-slider .slick-list .slick-track div {
    width: 128px;   
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;  
}
@media screen and (max-width: 880px) {
    .logo-slider img {
        width: 100px;
    }
    .logo-slider .slick-list .slick-track div {
        width: 100px;  
    }
    .logo-slider .slick-list .slick-track{
        gap: 8px;
    }
}

/* cases card custom  */
.card_title_catchprize{
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
/* 文字が大きすぎたり、ラインの間隔が大きい場合、全体のカードレイアウトが壊れるため、font size、line-heightだけ固定する。 */
.card_title_catchprize h1,
.card_title_catchprize h2,
.card_title_catchprize h3,
.card_title_catchprize h4,
.card_title_catchprize h5,
.card_title_catchprize h6 {
    color: var(--black, #252729);
    font-size: 16px;
    line-height: normal;
}
.card_title_catchprize p{
    /* display: flex; */
    line-height: normal;
    font-weight: 700;
}
.card_title_catchprize span,
.card_title_catchprize > h2 > span{
    font-size: 16px;
    line-height: normal;
}

/* customer name card type (right bottom) */
.card_list_main .card-list .card-container .card_customer_name_box,
.card_customer_name_box{
    display: flex;
    width: 100%;
    justify-content: right;
    margin-top: 16px;
    color: var(--black-0, #252729);
    font-size: 14px;
    font-weight: 400;
    line-height: 200%; /* 28px */
}