@charset "UTF-8";

/* Global */
:root{
    --main:#e60032;
    --sub:#005BAC;
    --dark:#302B27;
    --light:#D4D2D5;
    --acc:#BFAFA6;

    --gatex:#004cff;

    --main:230, 0, 50;
    --sub:0, 91, 172;
    --dark:48, 43, 39;
    --light:212, 210, 213;
    --acc:191, 175, 166;

    --gap:1rem;
    --radius:10px;

    --shadow: 0 2px 5px rgba(0,0,0, 0.14);
    --shadowHover: 0 5px 10px rgba(0,0,0, 0.14);

    --delay:0.25s
}

html{
    scroll-behavior:smooth;
    font-family:"Noto Sans Japanese", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body{
    font-size:1rem;
    overflow-x: hidden;
    color:var(--dark-color);
    background-color: var(--light-color);
    line-height: 1.5;
}

img{
    max-width:100%;
    object-fit: contain;
}

a, a:visited, a:active{
    color: inherit;
    text-decoration: none;
}

a:hover, a:focus{
    color: rgb(var(--sub));
    text-decoration: underline;
}


/* 動作確認用ダミー */
.dummy_1x1{
    aspect-ratio: 1/1;
    text-align: center;
    padding: 1rem;
}

.dummy_4x3{
    aspect-ratio: 4/3;
    text-align: center;
    padding: 1rem;
}

.dummy_16x9{
    aspect-ratio: 16/9;
    text-align: center;
    padding: 1rem;
}

.dummy_20x9{
    aspect-ratio: 20/9;
    text-align: center;
    padding: 1rem;
}

.dummy_c1{
    background-color: rgb(var(--main));
    color: #fff;
}

.dummy_c2{
    background-color: rgb(var(--sub));
    color: #fff;
}

.dummy_c3{
    background-color: rgb(var(--light));
}

.dummy_c4{
    background-color: rgb(var(--dark));
    color: rgb(var(--light));
}

.dummy_c5{
    background-color: rgb(var(--acc));
}

.dummy_t1{
    color: rgb(var(--main));
}

.dummy_t2{
    color: rgb(var(--sub));
}

.dummy_t3{
    color: rgb(var(--light));
}

.dummy_t4{
    color: rgb(var(--dark));
}

.dummy_t5{
    color: rgb(var(--acc));
}

.dummy_ol{
    outline: 1px rgb(var(--sub)) solid;
}

/* LaYout */
.ly_container_wide{
    max-width:1600px;
    margin-left:auto;
    margin-right:auto;
    padding:1rem;
}

.ly_container{
    max-width:1080px;
    margin-left:auto;
    margin-right:auto;
    padding:1rem;
    height: auto;
}

.ly_container_noPadding{
    max-width:1080px;
    margin-left:auto;
    margin-right:auto;
}

.ly_rightContainer{
    margin-left:auto;
    margin-right:0;
}

.ly_inlineList > *{
    display: inline-block; 
    margin-left:1rem;
    margin-right:1rem;
}

.ly_flexList{
    display: flex;
    gap:32px;
    align-items: center;
}

.ly_centering{
    display: flex;
    justify-content: center;
    align-items: center;
}

.ly_art{
    padding-top: 24px;
    padding-bottom: 48px;
}

.ly_sec{
    line-height: 175%;
    padding-top: 12px;
    padding-bottom: 12px;
}

.ly_mtb2{
    margin-top:2rem;
    margin-bottom:2rem;
}

.ly_flex{
    display: flex;
    gap:1rem;
}

.ly_grid{
    --min:200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min),1fr));
    gap:1rem;
}

/* ELement */
.el_pageTitle{
    font-size:2rem;
    font-weight: bold;

    margin-top: 1rem;
    margin-bottom: 1rem;
    
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.el_secTitle{
    position: relative;
    font-size:1.5rem;
    font-weight: bold;
    margin-top: calc(0.5rem + 1rem);
    margin-bottom: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    border-left:1rem rgb(var(--sub)) solid;
    background-color: rgba(var(--sub),0.1);
    color: #111;
}

.el_subTitle{
    font-weight: bold;
    margin-top: calc(0.5rem + 0.5rem);
    margin-bottom: 0.5rem;
    padding-top: 0.9rem;
    padding-bottom: 0.8rem;
    line-height: 1rem;
    font-size: 1.25rem;

    border-left:0.4rem rgb(var(--acc)) solid;
    padding-left: 0.5rem;
}

.el_subSubTitle{
    font-weight: bold;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    display:inline-flex;
    align-items:center;
}

.el_subSubSubTitle{
    font-weight: bold;
    font-size:0.95rem;
    color: rgb(var(--acc));
}

em,
.el_em{
    font-style: normal;
    text-decoration:underline;
	text-decoration-color:rgba(var(--main), 0.15);
	text-decoration-thickness:0.5rem;
	text-decoration-skip-ink:none;
	text-underline-offset:-3px;
}

.el_note{
    font-size:0.9rem;
}

.el_remark{
    color: rgb(var(--main));
    font-weight: bold;
}

.el_bg{
    background-color: rgba(var(--light), 0.5);
}

.el_bgBordered{
    background-color: rgba(var(--light), 0.5);
    border: 2px rgba(var(--light), 1) solid;
}

.el_bgFullWidth{
    border-image-source: linear-gradient(#eee, #eee);
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw 0 100vw;
}

.el_bgFullWidthSub{
    border-image-source: linear-gradient(rgb(var(--sub)), rgb(var(--sub)));
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw 0 100vw;
}

.el_bgFullWidthMain{
    border-image-source: linear-gradient(rgb(var(--main)), rgb(var(--main)));
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw 0 100vw;
}


.el_bgFullWidthBK{
    border-image-source: linear-gradient(#302B27, #302B27);
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw 0 100vw;
}

.el_bgCTA{
    color:rgba(var(--dark), 1);
    background-color: rgba(var(--main),0.25);
    border:2px rgba(var(--main), 1) solid;
}

.el_bordered{
    border: 1px rgb(var(--acc)) solid;
}

.el_txtDC{
    clear: both;
}

.el_txtDC::first-letter{
    font-size: 3rem;
    float: left;
    padding-right: 0.15rem;
    margin-top:1rem;
    color: rgba(var(--sub),0.75);
}

.el_marker{
    text-decoration: underline;
    text-underline-offset: -0.25em;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 0.5em;
    text-decoration-color:rgba(255,225,0,0.4);
}

.el_note{
    background-color: #eee;
    border: 1px #aaa solid;
    font-size:0.9rem;
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    padding:0.5rem;
}

.el_gridLastToDetails{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(var(--sub));
    color: #fff;
    transition: all 0.2s;
    border: 1px transparent solid;
}

.el_gridLastToDetails:hover{
    background-color: #fff;
    color: rgb(var(--sub));
    border: 1px solid currentColor;
    box-shadow: var(--shadowHover);
}

.el_gridLastToDetails::after{
    --size:0.5rem;
    content: "";
    display: block;
    width:var(--size);
    height:var(--size);
    position: relative;
    color: #fff;
    border-right: 2px currentColor solid;
    border-bottom: 2px currentColor solid;
    right:0;
    transform: rotate(-45deg);
}

.el_gridLastToDetails:hover::after{
    color: rgb(var(--sub));
    border-right: 2px currentColor solid;
    border-bottom: 2px currentColor solid;
    right:-3px;
    transform: rotate(-45deg);
}

/* el_checkList */
.el_checkList > li{
    text-indent: -1.5rem;
    margin-left: 1.5rem;
}
.el_checkList > li::before{
    content: '\02713';
    margin-right: 0.5rem;
    color: rgb(var(--sub));
}

/* dotlist */
.el_dotList > li{
    text-indent: -1.8rem;
    margin-left: 1.8rem;
}
.el_dotList > li::before{
    content: '\030fb';
    margin-right: 0.5rem;
    color: rgb(var(--sub));
}

/* hyphenList */
.el_hyphenList > li{
    text-indent: -1.8rem;
    margin-left: 1.5rem;
}
.el_hyphenList > li::before{
    content: '－';
    margin-right: 0.5rem;
    color: rgb(var(--sub));
}


/* el_badgeList */
.el_badgeList{
    display: flex;
    column-gap:1rem;
    row-gap:6px;
}

.el_badgeList > li{
    padding: 0px 3px;
    color:rgb(var(--acc));
    background-color: rgba(var(--acc),0.05);
    white-space: nowrap;
    display: inline-block;
    border: 1px currentColor solid;
    font-size: 0.8rem;
    flex-shrink: 1;
}
@media screen and (max-width:768px) {
    .el_badgeList{
        flex-wrap: wrap;
        font-size: 0.75rem;
        column-gap:6px;
    }
}


/* button */
.el_btn{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.125rem;
    background-color: rgb(var(--sub));
    max-width: 100%;
    padding:0.5rem 1rem;
    border: 2px transparent solid;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: var(--delay);
}

.el_btn:is(:visited, :active){
    color: #fff;
    text-decoration: none;
}

.el_btn:is(:hover, :focus){
    background-color: #fff;
    color: rgb(var(--sub));
    border-color: currentColor;
    box-shadow: var(--shadowHover);
}

.el_btn__cta{
    background-color: rgb(var(--main));
}

.el_btn__cta:is(:hover, :focus){
    color: rgb(var(--main));
}

.el_btn__ctaLarge{
    background-color: rgb(var(--main));
    padding-top: 1.0rem;
    padding-bottom: 1.0rem;
    font-size: 2rem;
}

.el_btn__ctaLarge:is(:hover, :focus){
    color: rgb(var(--main));
}

.el_btn.el_btn__arrowRight{
    --size:0.5em;
    position: relative;

    padding-right: calc(var(--size) * 2.75);
    padding-left: calc(var(--size) * 1.5);
}

.el_btn__arrowRight::after{
    content: "";
    display: inline-block;
    position: absolute;
    right: 1rem;
    width: var(--size);
    height: var(--size);
    border-right:2px currentColor solid;
    border-bottom:2px currentColor solid;
    transform: rotate(-45deg);
}

.el_btn__arrowRight:is(:hover, :focus)::after{
    right: calc(1rem - 3px);
    transform: rotate(-45deg);
    /* 動きをなくしてinline-flexにしてspace-betweenのほうが楽なのでは説 */
}

.el_btn.el_btn__arrowRightWithCircle{
    --size:0.5em;

    position: relative;
    padding-right: calc(var(--size) * 5.5);
    padding-left: calc(var(--size) * 1.5);
}
.el_btn.el_btn__arrowRightWithCircle::after{
    position: absolute;
    content: "";
    top:50%;
    right: 1.2rem;
    width: var(--size);
    height: var(--size);
    border-right:2px currentColor solid;
    border-bottom:2px currentColor solid;
    transform: translateY(-50%) rotate(-45deg);
}
.el_btn.el_btn__arrowRightWithCircle::before{
    position: absolute;
    content: "";
    top:50%;
    right: 0.5rem;
    width: calc(var(--size) * 2.75);
    height: calc(var(--size) * 2.75);
    border: 2px currentColor solid;
    border-radius: 10rem;
    transform: translateY(-50%);
}
.el_btn.el_btn__arrowRightWithCircle:hover::after{
    right: calc(1.2rem - 3px);
}
.el_btn.el_btn__arrowRightWithCircle:hover::before{
    right: calc(0.5rem - 3px);
}


.el_btn.el_btn__rounded{
    border-radius: var(--radius);
}

.el_btn.el_btn__fullRounded{
    border-radius: 10rem;
}

.el_btn.el_btn__s{
    font-size: 0.9em;
}

.el_btn.el_btn__narrow{
    padding-top:0em;
    padding-bottom:0em;
}

.el_btn.el_btn__smpl{
    background-color: transparent;
    color: rgb(var(--sub));
    box-shadow: none;
}

.el_btn.el_btn__smpl:hover{
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
}

.el_btn.el_btn__fullWidth{
    width:100%;
}

/* hpかblな気もするが、複数の要素の間にボーダーを引くクラス*/
.el_listInterbalBoarder > *:nth-of-type(n + 2){
    position: relative;
}
.el_listInterbalBoarder > *:nth-of-type(n + 2)::before{
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    left:0;
    top:0;
    background-color: rgb(var(--acc));
}

/* youtube動画の埋め込み用＆レスポンシブサイズ */
.el_youtubeWrapper{
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.el_youtubeWrapper > iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* el_piechart */
.el_piechart{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    width:var(--width, 250px);
    height:var(--height, 250px);

    font-weight:bold;

    background-image: radial-gradient(var(--base-bg-color) 30%, transparent 31%), conic-gradient(var(--main-color) 0% var(--value), var(--light-bg-color) var(--value) 100%);
    border-radius: 50%;
}


/* HelPer */
.hp_shadow{
    box-shadow: var(--shadow);
}

.hp_shadowWhiteEdge{
    filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.5)) drop-shadow(0px 0px 0px rgba(255,255,255,0.5)) drop-shadow(0px 0px 0px rgba(255,255,255,0.5)) drop-shadow(0px 0px 0px rgba(255,255,255,0.5)) drop-shadow(0px 0px 0px rgba(255,255,255,0.5)) drop-shadow(0px 0px 1px rgba(255,255,255,0.5));
}

.hp_backdropBlur{
    backdrop-filter: blur(5px);
}

.hp_ma0{
    margin: 0!important;
}

.hp_mt0{
    margin-top: 0!important;
}

.hp_mb0{
    margin-bottom: 0!important;
}

.hp_ma1{
    margin: 1rem!important;
}

.hp_mt1{
    margin-top:1rem!important;
}

.hp_mr1{
    margin-right:1rem!important;
}

.hp_mb1{
    margin-bottom:1rem!important;
}

.hp_ml1{
    margin-left:1rem!important;
}

.hp_mt2{
    margin-top:2rem!important;
}

.hp_mr2{
    margin-right:2rem!important;
}

.hp_mb2{
    margin-bottom:2rem!important;
}

.hp_ml2{
    margin-left:2rem!important;
}

.hp_mt3{
    margin-top:3rem!important;
}

.hp_mr3{
    margin-right:3rem!important;
}

.hp_mb3{
    margin-bottom:3rem!important;
}

.hp_ml3{
    margin-left:3rem!important;
}

.hp_pa1{
    padding: 1rem!important;
}
.hp_pa2{
    padding: 2rem!important;
}
.hp_pa3{
    padding: 3rem!important;
}

.hp_pt1{
    padding-top:1rem!important;
}

.hp_pr1{
    padding-right:1rem!important;
}

.hp_pb1{
    padding-bottom:1rem!important;
}

.hp_pl1{
    padding-left:1rem!important;
}

.hp_pa2{
    padding: 2rem!important;
}

.hp_pt2{
    padding-top:2rem!important;
}

.hp_pr2{
    padding-right:2rem!important;
}

.hp_pb2{
    padding-bottom:2rem!important;
}

.hp_pl2{
    padding-left:2rem!important;
}

.hp_prlHalf{
    padding-right: 0.5rem!important;
    padding-left: 0.5rem!important;
}

.hp_ptb0{
    padding-top:0!important;
    padding-bottom: 0!important;
}

.hp_s{
    text-decoration:line-through!important;
}

.hp_bold{
    font-weight: bold;
}

.hp_noGap{
    gap:0;
}

.hp_noRowGap{
    row-gap: 0;
}

.hp_gap10p{
    gap:10%;
}

.hp_borderRound{
    border-radius: 6px;
}

.hp_txtUL{
    text-decoration:underline!important;
}

.hp_txtLeft{
    text-align: left;
}

.hp_txtCenter{
    text-align: center;
}

.hp_txtRight{
    text-align: right;
}

.hp_txtMain{
    color: rgb(var(--main));
}

.hp_txtSub{
    color: rgb(var(--sub));
}

.hp_txtBg{
    color: rgb(255,255,255);
}

.hp_txtGr{
    color: rgb(var(--acc));
}

.hp_fontSmall{
    font-size: 0.9rem;
}

.hp_fontLarge{
    font-size:2rem;
}

.hp_mag5p{
    transform: scale(1.05);
}

.hp_mag10p{
    transform: scale(1.1);
}

.hp_maxHeight300px{
    max-height: 300px;
}

.hp_height100px{
    height: 100px;
    width: auto;
    object-fit: contain;
}

.hp_height200px{
    height: 200px;
    width: auto;
    object-fit: contain;
}

.hp_blockFullWidth{
    width: 100%!important;
}

.hp_lineClamp2{
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.hp_lineClamp3{
    line-clamp: 3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.hp_lineClamp4{
    line-clamp: 4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.hp_lineClamp5{
    line-clamp: 5;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.hp_dispBlock{
    display: block;
}

.hp_noBeforeMark::before{
    display: none;
}

.hp_noAfterMark::before{
    display: none;
}

.hp_extLink{
    position: relative;
}

.hp_extLink::after{
    --size:1.2em;
    display: block;
    position: absolute;
    content: '';
    width:var(--size);
    height:var(--size);
    top:0;
    right:calc(-1.2 * var(--size));
    background-image: url('/itp/images/ico/ico_newwindow_dark.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
}

.hp_extLink.dark::after{
    background-image: url('/itp/images/ico/ico_newwindow.svg');
}

.hp_flex{
    display: flex;
}

.hp_flexCentering{
    display: flex;
    justify-content: center;
    align-items: center;
}

.hp_flexEnd{
    justify-content: flex-end;
}

.hp_alignCenter{
    align-items: center!important;
}

.hp_gridColumnDouble{
    grid-column: span 2;
}

.hp_listSupport{
    font-size: 2.5rem;
}

.hp_aspectRatio_1_1{
    aspect-ratio: 1/1!important;
}

.hp_aspectRatio_auto{
    aspect-ratio: auto!important;
}

.hp_figcaptionTop > figcaption{
    top:0!important;
    bottom: auto;
    height: auto;
}

.hp_border1{
    border: 1px #ccc solid!important;
}

.hp_border2{
    border: 2px #ccc solid!important;
}

.hp_border1sub{
    border: 1px rgb(var(--sub)) solid!important;
}

.hp_border2sub{
    border: 2px rgb(var(--sub)) solid!important;
}

.hp_tableCellSlash{
    background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), var(--border_color) 50%, var(--border_color) calc(50% + 0.5px), transparent calc(50% + 1px));
}

.hp_grid2c{
    grid-template-columns: repeat(2, 1fr)!important;
}

.hp_grid3c{
    grid-template-columns: repeat(3, 1fr)!important;
}

.hp_grid4c{
    grid-template-columns: repeat(4, 1fr)!important;
}

.hp_grid5c{
    grid-template-columns: repeat(5, 1fr)!important;
}

@media screen and (min-width:769px) {
    .hp_onlySP{
        display: none;
    }
   
    .hp_grid2cPC{
        grid-template-columns: repeat(2, 1fr)!important;
    }

    .hp_grid3cPC{
        grid-template-columns: repeat(3, 1fr)!important;
    }

    .hp_grid4cPC{
        grid-template-columns: repeat(4, 1fr)!important;
    }

    .hp_grid5cPC{
        grid-template-columns: repeat(5, 1fr)!important;
    }
}

@media screen and (max-width:768px) {
    .hp_onlyPC{
        display: none;
    }

    .hp_grid2cSP{
        grid-template-columns: repeat(2, 1fr)!important;
    }

    .hp_grid3cSP{
        grid-template-columns: repeat(3, 1fr)!important;
    }

    .hp_grid4cSP{
        grid-template-columns: repeat(4, 1fr)!important;
    }

    .hp_grid5cSP{
        grid-template-columns: repeat(5, 1fr)!important;
    }
}

/* hp_banner */
.hp_banner{
    color:rgb(255, 255, 255);
    background-color:rgb(var(--main));
    border-radius:0.5rem;
    padding:0px 9px;
    font-size:0.8rem;
    font-weight:bold;
    margin:0 6px;
}



/* BLock*/
/* pankuzu */
.bl_pankuzu *:is(a, a:visited, a:active, a:hover, a:focus){
    color: inherit;
    text-decoration: none;
}
.bl_pankuzu *:is(a:hover, a:focus){
    color: rgb(var(--sub));
    text-decoration: underline;
}

.bl_pankuzu > ul{
    display: flex;
}

.bl_pankuzu > ul > li:first-child::before{
    content: '\02302';
    padding-right: 0.5em;
    color: rgb(var(--sub));
}

.bl_pankuzu > ul > li:nth-of-type(n + 2)::before{
    content: '|';
    color: rgb(var(--light));
    padding-left: 1rem;
    padding-right: 1rem;
}

.bl_pankuzu.bl_pankuzu__dark{
    background-color: #302B27;
    border-image-source: linear-gradient(#302B27, #302B27);
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw 0 100vw;
    color: #fff;
}

.bl_pankuzu__dark > ul > li:first-child::before{
    color: #fff;
}

.bl_pankuzu__dark a:is(:hover, :focus){
    color: #fff;
}

@media screen and (max-width:768px) {
    .bl_pankuzu > ul{
        display: block;
    }

    .bl_pankuzu > ul > li:nth-of-type(n + 2)::before{
        padding-left: 1.75rem;
        padding-right: 0.8rem;    
    }
}


/* Movie */
.bl_movieWrapper{
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.bl_movieWrapper > iframe{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

/* paragraph */
/* blockレベルな気がする*/
.bl_p{

    padding-top:1rem;
    padding-bottom:1rem;
}

.bl_cite{
    display: inline-block;
    padding: 0em 1em;
    text-indent: 0em;
}

.bl_cite a{
    color: rgb(var(--sub));
    text-decoration: underline;
}


/* jumbotron */
.bl_jumbotron{
    width: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    aspect-ratio: 20/6;
}

.bl_jumbotron_inner{
    width: 100%;
    height:100%;
    background-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(1px);
}

.bl_jumbotron_title{
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    position: absolute;
    top:25%;
    right:15%;
    bottom:25%;
    left:15%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left:5rem;
    padding-right:5rem;
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    line-height:150%;
    z-index:2;
    text-align: center;
}

.bl_jumbotron_image{
    position: absolute;
    z-index:3;
    width:35%;
    right:0%;
    bottom:5%;
}

.bl_jumbotron_image > img{
    width: 100%;
}

.bl_jumbotron_cta{
    position: absolute;
    text-align: center;
    width:30rem;
    z-index:10;
    line-height: 2;
    left: calc(50% - 30rem / 2);
    top: 60%;
}

@media screen and (max-width:768px) {
    .bl_jumbotron{
        aspect-ratio: auto;
        height:60vh;
    }

    .bl_jumbotron_title{
        background-color: rgba(0,0,0,0.5);
        justify-content: center;
        align-items: center;
        text-align: center;
        top:0;
        left:0;
        bottom:0;
        right: 0;
        padding-left:1rem;
        padding-right:1rem;
    }

    .bl_jumbotron_image{
        display: none;
    }

    .bl_jumbotron_cta{
        position: absolute;
        top:calc(100% - 2.5rem);
    }
}


/* bl_featureBox */
.bl_featureBox{
    position: relative;
    width: 100%;
    padding:1rem;
    border: 2px rgb(var(--sub)) solid;
    line-height: 1.75;
    margin-top:3rem;
}

.bl_featureBoxTitle{
    position: absolute;
    top: 0;
    left:-2px;
    right: -2px;
    transform: translateY(-100%);
    background-color: rgb(var(--sub));
    color: #fff;
    padding: 0.25rem 1rem;
}

/* media */
.bl_media{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.bl_media_imgWrapper{
    flex: 0 0 calc((100% - 1rem) * 0.3);
}

.bl_media_imgWrapper > img{
    width:100%;
}

.bl_media_title{
    font-weight: bold;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom:1px rgb(var(--acc)) solid;
}

.bl_media_body{
    flex: 0 0 calc((100% - 1rem) * 0.7);
}

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

.bl_media.bl_media__rev{
    flex-direction: row-reverse;
}

@media screen and (max-width:768px) {
    .bl_media{
        flex-direction: column;
        align-items: center;
    }
    .bl_media_imgWrapper{
        flex:1 0 100%;
        text-align: center;
    }
    .bl_media_imgWrapper > img{
        width:100%;
    }
    .bl_media_title{
        padding-top: 0.25rem;
    }
    .bl_media_body{
        flex: 0 0 100%;
    }
    .bl_media.bl_media__rev{
        flex-direction: column;
    }
}


/* HalfMedia */
.bl_halfMedia{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.bl_halfMedia *{
    min-width: 0;
}

.bl_halfMedia_imgWrapper{
    flex: 0 0 calc((100% - 1rem) / 2);
}

.bl_halfMedia_imgWrapper > img{
    width:100%;
}

.bl_halfMedia_title{
    font-weight: bold;
    font-size: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom:1px rgb(var(--acc)) solid;

}
.bl_halfMedia_body{
    flex-grow: 1;
}

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

.bl_halfMedia_txt > p:not(:last-of-type){
    margin-bottom: 1rem;
}

.bl_halfMedia.bl_halfMedia__rev{
    flex-direction: row-reverse;
}

@media screen and (max-width:768px) {
    .bl_halfMedia{
        flex-direction: column;
        align-items: center;
    }
    .bl_halfMedia_imgWrapper{
        flex:1 0 100%;
        text-align: center;
    }
    .bl_halfMedia_imgWrapper > img{
        width:100%;
    }
    .bl_halfMedia_title{
        padding-top: 0.25rem;
    }
    .bl_halfMedia_body{
        flex: 1 0 100%;
    }
    .bl_halfMedia.bl_halfMedia__rev{
        flex-direction: column;
    }
}


/* Vertical Media */
.bl_VMedia{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, max-content);
}

.bl_VMedia_imgWrapper{
    width:100%;
}

.bl_VMedia_imgWrapper > img{
    width: 100%;
    height: 100%;
}

.bl_VMedia_body{
    width: 100%;
}

.bl_VMedia_title{
    position: relative;
    font-weight: bold;
    text-align: center;
}
.bl_VMedia_title::after{
    content: '';
    position: absolute;
    display: block;
    height:1px;
    width:34%;
    background-color: rgb(var(--sub));
    left: 33%;
}

.bl_VMedia_text{
    text-align: center;
}

@media screen and (max-width:768px) {
    .bl_VMedia_title{
        padding-top: 0rem;
        padding-bottom: 0rem;
    }
}


/* card */
.bl_card{
    position: relative;
    display: grid;
    grid-template-rows: min-content 1fr max-content;
    box-shadow: var(--shadow);
}

.bl_card_badge{
    display: flex;
    column-gap: 0.25rem;
    line-height: 100%;
}

.bl_card_badgeItem{
    background-color: rgb(var(--sub));
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.bl_card_badgeItem.bl_card_badgeItem__rounded{
    border-radius: var(--radius);
}

.bl_card_imgWrapper{
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bl_card_imgWrapper > img{
    object-fit: contain;
    max-width: 100%;
}

.bl_card_header{
    background-color: rgba(0,0,0, 0.8);
    color: #fff;
    padding:0.5rem;
    font-weight: bold;
}

.bl_card_body{
    padding:1rem 0.5rem;
}

.bl_card_body > *:last-child{
    margin-bottom: 0px;
}

.bl_card_title{
    font-size: 1.125rem;
    font-weight: bold;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    margin-bottom:0.25rem;
    border-bottom: 1px rgb(var(--acc)) solid;
}

.bl_card_txt{
    padding-bottom: 0.5rem;
}

.bl_card_footer{
    padding:0.5rem;
    text-align: right;
}

.bl_card_footerDate{
    color: rgb(var(--acc));
    font-weight: bold;
    font-size: 0.8rem;
    text-align: right;
}

a.bl_card{
    color: currentColor;
    text-decoration: none;
    transition:var(--delay);
    border: 1px transparent solid;
}

a.bl_card:is(:hover, :focus){
    box-shadow: var(--shadowHover);
}

a.bl_card .el_btn__arrowRight{
    text-align: right;
    box-shadow: none;
}

a.bl_card:is(:hover, :focus) .el_btn__arrowRight{
    background-color: #fff;
    color: rgb(var(--sub));
    border-color: currentColor;
}

a.bl_card:is(:hover, :focus) .el_btn__arrowRight::after{
    transform: translateX(20%) rotate(-45deg);
}

/* 要素の高さを揃えたカードレイアウト用コンテナ */
.bl_card_container{
    display: grid;
    grid-template-columns: repeat(auto-fit, 1fr);
    grid-auto-flow: column;
    column-gap: 1rem;
}
    
.bl_card_container *{
    min-width: 0;
}

@media screen and (min-width:769px) {
    .bl_card_container.bl_card_container__3r{
        grid-template-rows: repeat(3, max-content);
    }
    .bl_card_container.bl_card_container__4r{
        grid-template-rows: repeat(4, max-content);
    }
    .bl_card_container.bl_card_container__5r{
        grid-template-rows: repeat(5, max-content);
    }
    .bl_card_container.bl_card_container__6r{
        grid-template-rows: repeat(6, max-content);
    }
    .bl_card_container.bl_card_container__7r{
        grid-template-rows: repeat(7, max-content);
    }
    .bl_card_container.bl_card_container__3c{
        grid-template-columns: repeat(3, 1fr);
    }
    .bl_card_container.bl_card_container__4c{
        grid-template-columns: repeat(4, 1fr);
    }
    .bl_card_container.bl_card_container__5c{
        grid-template-columns: repeat(5, 1fr);
    }
    .bl_card_container > .bl_card,
    .bl_card_container > .bl_card > .bl_card_body{
        display: contents;
    }
}

@media screen and (max-width:768px) {
    .bl_card_container{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows:repeat(1, 1fr);
        grid-auto-flow: row;
        row-gap:2rem;
    }

    .bl_card_container > .bl_card,
    .bl_card_container > .bl_card > .bl_card_body{
        display: block;
    }

}


/* 半々のヒーローセクション（サブ）っぽいもの */
.bl_halfHero{
    --ex_height:40px;
    position: relative;
    margin-top: var(--ex_height);
    margin-bottom: var(--ex_height);
}

.bl_halfHeroInner{
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.bl_halfHero::before{
    content: "";
    display: block;
    position: absolute;
    clip-path: polygon(0 60%, 0 100%, 100% 100%, 100% 0);
    background-color: rgb(var(--sub));
    left:0;
    top:calc(0px - var(--ex_height) + 1px);
    width: 100%;
    height: var(--ex_height);
}

.bl_halfHero::after{
    content: "";
    display: block;
    position: absolute;
    clip-path: polygon(0 0 , 0 100%, 100% 20%, 100% 0);
    background-color: rgb(var(--sub));
    left:0;
    bottom:calc(0px - var(--ex_height) + 1px);
    width: 100%;
    height: var(--ex_height);
}

.bl_halfHero *{
    min-width: 0;
}

.bl_halfHeroLeft{
    padding: 1rem;
    color: #fff;
    font-weight: bold;
}

.bl_halfHeroLeft,
.bl_halfHeroRight{
    flex:1 1 50%;
}

.bl_halfHeroRight figure{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bl_halfHeroRight img{
    width: 100%;
    aspect-ratio: 5/3;
}

.bl_halfHeroLeftTitles{
    display: flex;
    padding-top:1rem;
    flex-direction: column;
    row-gap: 1rem;
    font-size:3rem;
}

.bl_halfHeroLeftTitles > span:nth-of-type(2){
    align-self: center;
}

.bl_halfHeroLeftTitles > span:nth-of-type(3){
    align-self: flex-end;
}

.bl_halfHeroLeftTxt{
    padding-top:2rem;
    line-height: 2;
}

@media screen and (max-width:768px) {
    .bl_halfHero{
        padding: 1rem;
        margin: 0;
    }

    .bl_halfHeroInner{
        display: flex;
        flex-direction: column-reverse;
    }

    .bl_halfHeroLeft,
    .bl_halfHeroRight{
        padding: 1rem 0;
    }

    .bl_halfHeroLeftTitles{
        font-size: 2.5rem;
    }

    .bl_halfHeroLeftTitles{
        font-size: 2rem;
        padding-top:0;
    }

    .bl_halfHeroLeftTitles > span:nth-child(n){
        justify-self: center;
        align-self: center;
    }

    .bl_halfHero::before,
    .bl_halfHero::after{
        display: none;
    }
}


/* トップとかに並べる導入実績のようなもの */
.bl_caseItems{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
    gap:6px;
}

.bl_caseItems :is(a, a:visited, a:active){
    color: #fff;
    text-decoration: none;
}

.bl_caseItems :is(a:focus, a:hover){
    text-decoration: underline;
    opacity: 0.8;
}

.bl_caseItems figure{
    position: relative;
}

.bl_caseItems figure > img{
    width: 100%;
    object-fit: contain;
    aspect-ratio: 343/300;
}

.bl_caseItems figure > figcaption{
    position: absolute;
    height: 2rem;
    top: calc(100% - 2rem);
    left:0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: rgba(0,0,0,0.66);
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* toDetailsブロック（詳細を見るブロック）*/
.bl_toDetails{
    width: 100%;
    text-align: right;
}



/* in-page index ページ頭の見出し */
.bl_ipi{
    background-color: #eee;
    width: max-content;
    max-width: 33vw;
    padding: 0rem 1rem;
    line-height:2;
    border:1px #ccc solid;
}

.bl_ipi :is(a, a:visited, a:active){
    color: inherit;
    text-decoration: none;
}

.bl_ipi :is(a:hover, a:focus){
    color: rgb(var(--sub));
    text-decoration: underline;
}

.bl_ipi > a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 2rem;
    position: relative;
    padding: 0.5rem 0;
}

.bl_ipi > a::after{
    --size:0.6rem;
    content: "";
    display: inline-block;
    width: var(--size);
    height: var(--size);
    border-right:1px currentColor solid;
    border-bottom: 1px currentColor solid;
    transform: rotate(-45deg);
}
.bl_ipi > a:hover::after{
    color: rgb(var(--sub));
}
.bl_ipi > a:not(:last-of-type){
    border-bottom: 1px #ccc solid;
}
@media screen and (max-width:768px) {
    .bl_ipi{
        width: 100%;
        max-width: none;
    }
}


/* in-page-navigation Block */
.bl_inPageNav{
    display:block;
    position: fixed;
    z-index:30;
    background-color: #eee;
    width:20vw;
    max-width:200px;
    padding: 0.5rem 0.5rem 1.5rem 0.5rem;
    left:0;
    bottom:0;
    border-top-right-radius: var(--radius);
    border:1px #ccc solid;
    line-height:150%;
}

.bl_inPageNav > ul{
    padding-bottom:1.5rem;
}
.bl_inPageNav > ul:last-child{
    padding-bottom:1.5rem;
}

.bl_inPageNav > ul > li{
    padding: 1rem 0.5rem;
    border-bottom:1px #ccc solid;
}/* ulのあとに何か（CTAボタン想定）がある場合は最後までborder-bottomを引いて良い */
.bl_inPageNav > ul:only-child > li:nth-last-of-type(n + 2){
    border-bottom:1px #ccc solid;
}/* そうでない場合は最後だけborder-bottom省略 */

.bl_inPageNav > ul > li > :is(a, a:visited, a:active){
    text-decoration: none;
    color: inherit;
}
.bl_inPageNav > ul > li > :is(a:hover, a:focus){
    text-decoration: underline;
}

@media screen and (max-width:1480px) {
    .bl_inPageNav{
        display: none;
    }
}


/* 強調広告っぽいブロック */
.bl_differ{
    width: 100%;
    background-color: rgb(var(--sub));
    border-radius: clamp(var(--radius), 2ch ,calc(var(--radius) * 3));
    margin-bottom: 3rem;
}

.bl_differ *{
    min-width: 0;
}

.bl_differTitle{
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    padding: 1.5rem 2rem 1rem 2rem;
}

.bl_differItems{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:1rem;
    padding:0 1rem 2rem 1rem;
}

.bl_differItem{
    position: relative;
    padding: 0;
    background-color: #fff;
}

.bl_differItemTitle{
    position: absolute;
    top:0;
    left:0;
    z-index: 1;

    writing-mode: vertical-lr;
    color: rgb(var(--sub));
    display: flex;
    font-size: 1.25rem;
    font-weight: bold;
    max-width:3rem;
    height: 100%;
    overflow-X: hidden;
    justify-content: center;
    align-items: center;
    transform: rotateZ(180deg);
    padding: 1rem 0.5rem;
}

.bl_differItemTxt{
    padding: 1rem 1rem 1rem 3rem;
    line-height: 1.75;
}

.bl_differItemTxtTitle{
    font-size: 1.1rem;
    color: rgb(var(--sub));
    font-weight: bold;
}

@media screen and (max-width:768px) {
    .bl_differ{
        margin-bottom: 1rem;
        margin-left: -1rem;
        width: calc(100% + 2rem);
        border-radius: 0;
    }
    .bl_differTitle{
        font-size: 1.9rem;
        text-indent: -0.5rem;
        padding: 1.5rem 1rem 1rem 1rem;
        text-align: center;
    }

    .bl_differItems{
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .bl_differItemTitle{
        position: static;
        width: auto;
        height: auto;
        max-width: none;
        min-width: none;
        transform: none;
        writing-mode: initial;
        overflow: auto;
    }

    .bl_differItemTxt{
        padding: 0rem 0.5rem 1rem 0.5rem;
    }
}

/* ヨコのCTAブロック */
#sideCTAMenu{
    display: none;
}

.bl_sideCTA{
    position: fixed;
    right: clamp(1rem, calc(((100vw - 1080px) / 2) + 0.5rem), calc(((100vw - 1080px) / 2) + 0.5rem) );
    bottom: 62px;
    z-index: 999;
    box-shadow: var(--shadow);
}

.bl_sideCTAWrapper{
    position: relative;
    background-color: rgb(var(--main));
    color: #fff;
}

.bl_sideCTABtn{
    display: inline-block;
    padding: 0.25rem 1rem;
    position: relative;
}

.bl_sideCTABtn::before{
    --size:0.5rem;
    content: '';
    display: inline-block;
    width: var(--size);
    height: var(--size);
    border-left: 2px currentColor solid;
    border-top: 2px currentColor solid;
    transform: translateY(20%) rotate(45deg);
    transition: all 0.2s;
}

#sideCTAMenu:checked ~ .bl_sideCTABtn::before{
    transform: translateY(-20%) rotate(225deg);
}

#sideCTAMenu:checked ~ .bl_sideCTABtn::after{
    content: '';
    display: block;
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    left:0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.bl_sideCTAInner :is(a, a:visited, a:active){
    color: #333;
    text-decoration: none;
}

.bl_sideCTAInner :is(a:focus, a:hover){
    color: inherit;
    text-decoration: underline;
}

.bl_sideCTAInner{
    display: none;
    position: absolute;
    background-color: rgb(var(--main));
    width: max-content;
    right: 0;
    transform: translateY(-130%);
    box-shadow: var(--shadow);
}

#sideCTAMenu:checked ~ .bl_sideCTAInner{
    display: block;
}

.bl_sideCTAInnerTitle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 0rem 0rem 1rem;
    line-height: 3;
}

.bl_sideCTAInnerBody{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    color: rgb(var(--main));
    width: 34ch;
}

.bl_sideCTAInnerBody > a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
}

.bl_sideCTAInnerBody > a::after{
    position: relative;
    --size:0.5rem;
    content: '';
    display: inline-block;
    width: var(--size);
    height: var(--size);
    border-top: 1px currentColor solid;
    border-right: 1px currentColor solid;
    transform: rotate(45deg);
    margin-right: 3px;
}

.bl_sideCTAInnerBody > a:hover::after{
    margin-right: 0px;
}

.bl_sideCTAInnerBody > a:is(:hover, :focus){
    background-color: #f0f0f0;
}

.bl_sideCTAInnerBody > a:not(:last-of-type){
    border-bottom: 1px #ddd solid;
}

.bl_sideCTAInnerCloseBtn{
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
}

.bl_sideCTAInnerCloseBtn::before,
.bl_sideCTAInnerCloseBtn::after{
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    position: absolute;
    top: 42.5%;
    left: 0;
    background-color: #fff;
}

.bl_sideCTAInnerCloseBtn::before{
    transform: rotate(-45deg);
}

.bl_sideCTAInnerCloseBtn::after{
    transform: rotate(45deg);
}

@media screen and (max-width:768px) {
    .bl_sideCTA{
        bottom: 0;
        right: 0;
    }
}


/* 機能紹介グリッド */
.bl_funcGrid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:1rem;
}

.bl_funcGridImgWrapper{
    position: relative;
}

.bl_funcGridImgWrapper > img{
    width: 100%;
    object-fit: cover;
    object-position: center bottom;
    aspect-ratio: 16/10;
}

.bl_funcGridImgWrapper > figcaption{
    position: absolute;
    left:0;
    right:0;
    bottom: 0;
    background-color: rgba(0,0,0, 0.8);
    color: #fff;
    padding: 0.1rem 0.5rem;
    font-size: 0.9rem;
}

.bl_funcGrid__2c{
    grid-row: span 2;
}


/* サービスの機能紹介等に使う用 */
/* bl_funcGridと何が違うんですか？？？ */
.bl_serviceFunc *{
    min-width: 0;
}

.bl_serviceFunc :is(a, a:visited, a:active){
    color: inherit;
    text-decoration: none;
}

.bl_serviceFunc :is(a:hover, a:focus){
    color: inherit;
    text-decoration: underline;
}

.bl_serviceFunc > a:hover{
    opacity: 0.8;
}

.bl_serviceFunc figure{
    position: relative;
}

.bl_serviceFunc figure > img{
    object-fit: cover;
    width: 100%;
    aspect-ratio: 6/4;
}

.bl_serviceFunc figure > figcaption{
    position: absolute;
    right: 0;
    bottom:0;
    left:0;
    background-color: rgba(0,0,0, 0.8);
    color: #fff;
    padding: 0.2rem 0.5rem;
}

.bl_serviceFunc > a > figure > figcaption{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bl_serviceFunc > a > figure > figcaption::after{
    content: '';
    display: inline-block;
    --size:0.5rem;
    width: var(--size);
    height: var(--size);
    border-left: 2px #fff solid;
    border-top:2px #fff solid;
    transform: rotate(135deg);
    margin-right: 0.1rem;
}

.bl_serviceFunc > a:hover > figure > figcaption::after{
    margin-right: calc(0.1rem - 2px);
}

.bl_serviceFuncTxt{
    line-height: 1.5;
    padding: 0.5rem 0;
}


/* CTA Block*/
.bl_ctaInPage{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media screen and (max-width:768px) {
    .bl_ctaInPage{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.bl_ctaInPageBG{
    background-image: url('/itp/images/top/oto_img_gr.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.bl_ctaInPageFilter{
    backdrop-filter: blur(8px);
}

.bl_ctaInPageTitle{
    font-size: 2rem;
    text-align: center;
    color: #fff;
}

.bl_ctaInPageTxt{
    font-size: 1.25rem;
    text-align: center;
    color: #fff;
}

/* el_table */
.el_table{
    --border_color:#ccc;
    --tb_border:1px var(--border_color) solid;
}
.el_table table{
    width: 100%;
    min-width:768px;
    overflow-x: auto;
    table-layout: fixed;
    position: relative;
}

.el_table th{
    padding:1rem;
    background-color: #f9f9f9;
    font-weight: bold;
    vertical-align: middle;
}

.el_table tr > th:first-child{
    width:20%;
    position: sticky;
    left:0;
    z-index: 2;
}

.el_table td{
    padding:1rem;
    vertical-align: middle;
}

/* border指定 */
.el_table{
    border: var(--tb_border);
}

.el_table tr:only-of-type,
.el_table tr:nth-last-of-type(n + 2),
.el_table tr:nth-last-of-type(n + 2){
    border-bottom: var(--tb_border);
}

.el_table th:only-of-type,
.el_table th:nth-last-of-type(n + 2),
.el_table td:nth-last-of-type(n + 2){
    border-right: var(--tb_border);
}

@media screen and (max-width:768px) {
    .el_table{
        overflow-x: scroll;
    }
}

.el_table .el_table__stripe table tr:nth-of-type(even){
    background-color: #fafafa;
}

/* vertical table*/
.el_verticalTable{
    --border_color:#ccc;
    --tb_border:1px var(--border_color) solid;
}
.el_verticalTable table{
    width: 100%;
    min-width:768px;
    overflow-x: auto;
    table-layout: fixed;
    position: relative;
}

.el_verticalTable th{
    padding:1rem;
    background-color: #f9f9f9;
    border: var(--tb_border);
    font-weight: bold;
    vertical-align: middle;
}

.el_verticalTable td{
    padding:0.6rem;
    border: var(--tb_border);
    vertical-align: middle;
    line-height: 150%;
}
@media screen and (max-width:768px) {
    .el_verticalTable{
        overflow-x: scroll;
    }
}

/* figure with caption */
.el_figCap{
    display: grid;
}

.el_figCap > img{
    grid-column: 1/-1;
    grid-row: 1/-1;
    width:100%;

}

.el_figCap > figCaption{
    grid-column: -1;
    grid-row: -1;
    align-self:end;
    justify-self: center;
    width:100%;
    padding:0.25rem 0.5rem;
    color:#fff;
    background-color: rgba(0, 0, 0, 0.9);
}



/* Unique */
.uq_top_customerLogo{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:12px;
}
.uq_top_customerLogo > a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.uq_top_customerLogo img{
    width: 197px;
    height: 50px;
    object-fit: contain;
}
.uq_top_customerLogoText{
    font-size: 2rem;
    font-weight: bold;
}
.uq_top_customerLogo::before,
.uq_top_customerLogo::after{
    content: "";
    display: block;
    width: 197px;
    height: 0;
    order: 1;
}
@media screen and (max-width:768px) {
    .uq_top_customerLogo{
        justify-content: space-between;
    }
    .uq_top_customerLogo > a{
        flex-basis: 150px;
    }
}

/* top ヒーローセクション */
.uq_top_heroBG{
    --direction:to left;
    min-height: 60vh;
    background-image: url("/itp/images/top/top_image_r.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.uq_top_heroBG::after {
    content: "";
    display: block;
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    left:0;
    z-index: 1;

    background:linear-gradient(
      var(--direction),
      hsla(0, 0%, 0%, 0) 0%,
      hsla(0, 0%, 0%, 0.003) 8%,
      hsla(0, 0%, 0%, 0.012) 15.1%,
      hsla(0, 0%, 0%, 0.028) 21.6%,
      hsla(0, 0%, 0%, 0.051) 27.6%,
      hsla(0, 0%, 0%, 0.081) 33.3%,
      hsla(0, 0%, 0%, 0.12) 38.7%,
      hsla(0, 0%, 0%, 0.167) 44%,
      hsla(0, 0%, 0%, 0.223) 49.3%,
      hsla(0, 0%, 0%, 0.288) 54.9%,
      hsla(0, 0%, 0%, 0.363) 60.7%,
      hsla(0, 0%, 0%, 0.448) 67.1%,
      hsla(0, 0%, 0%, 0.544) 74%,
      hsla(0, 0%, 0%, 0.651) 81.8%,
      hsla(0, 0%, 0%, 0.769) 90.4%,
      hsla(0, 0%, 0%, 0.9) 100%
    );
}

.uq_top_heroContents{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.uq_top_heroTitle{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    
    font-size: 2.5rem;
    line-height: 1.75;
    color: #fff;
}

.uq_top_heroTitle > .el_btn{
    margin-top: 1rem;
}

.uq_top_heroBadge{
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.uq_top_heroBadgeItem{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 9ch;
    height: 9ch;
    border-radius: 9ch;
    text-align: center;
    background-color: rgb(var(--sub));
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    line-height: 2;
}
@media screen and (max-width:768px) {
    .uq_top_heroBG{
        --direction:to top;   
    }

    .uq_top_heroContents{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .uq_top_heroTitle{
        font-size: 1.75rem;
    }

    .uq_top_heroTitle > .el_btn{
        width: 100%;
        font-size: 1rem;
        order: 1;
        text-align: center;
    }

    .uq_top_heroTitle,
    .uq_top_heroImage{
        display: contents;
    }
}


/* top logoめり込み*/
.uq_top_toplogo{
    position: relative;
    z-index: 1;
    max-width: 1080px;
    background-color: #fff;
    margin-left:auto;
    margin-right: auto;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    transform: translateY(-100px);
}
@media screen and (max-width:768px) {
    .uq_top_toplogo{
        display: none;
    }
}


/* top 選ばれる理由ブロック */
.uq_top_reason{
    display: flex;
    flex-direction: row;
    line-height: 1.5;
}

.uq_top_reason *{
    min-width: 0;
}

.uq_top_reasonLeft{
    flex:1 1 50%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-between;
}

.uq_top_reasonLeftTop{
    width: 640px;
    padding: 4rem 2rem 2rem 1rem;
}

.uq_top_reasonLeftTopTitle{
    font-size:2.5rem;
    padding-bottom: 2rem;
    
}

.uq_top_reasonLeftTopTxt{
    font-size: 1rem;
    padding-bottom: 3rem;
}

.uq_top_reasonLeftIMG{
    width:100%;
    height: 100%;
    background-image: url('/itp/images/top/img_rtc_01.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.uq_top_reasonLeftIMG > img{
    width:100%;
    height: 100%;
    aspect-ratio: 24/6;
    object-fit: cover;
}

.uq_top_reasonRightNumber{
    font-size: 3.5rem;
    color: rgb(var(--sub));
    font-weight: bold;
    flex:1 1 15%;
    order: 1;
}

.uq_top_reasonRight{
    flex:1 1 50%;
    padding: 4rem 2rem 2rem 2rem;
    background-color: rgba(0, 23, 66, 1);
    color: #fff;
}

.uq_top_reasonRightInner{
    width: calc(640px - 2rem);
    padding: 0 0 2rem 2rem;
    display: flex;
    flex-direction: row;
}

.uq_top_reasonRightInner::after{
    content: "";
    display: block;
    width: 3px;
    border-radius: 3px;
    background-color: rgb(var(--sub));
    flex-grow: 1;
    flex-shrink: 0;
    order: 2;
}

.uq_top_reasonRightDesc{
    flex:1 1 85%;
    order: 3;
    padding-left: 2rem;
}

.uq_top_reasonRightDescTitle{
    font-size: 1.6rem;
    padding-bottom: 0.75rem;
    font-weight: bold;

}

.uq_top_reasonRightDescTxt{
    line-height: 1.75;
}

/* 選ばれる理由ブロックだけブレークポイントが違うので注意 */
@media screen and (max-width:1280px){
    .uq_top_reason{
        flex-direction: column;
    }

    .uq_top_reasonLeftTop{
        width: auto;
        padding: 2rem 1rem 1rem 1rem;
    }

    .uq_top_reasonLeftTopTitle{
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
    }
    
    .uq_top_reasonLeftTopTxt{
        padding-bottom: 0;
    }

    .uq_top_reasonLeftIMG > img{
        aspect-ratio: 16/9;
    }

    .uq_top_reasonRight{
        padding:0 1rem;
    }

    .uq_top_reasonRightNumber{
        text-align: center;
        padding: 0 ;
    }

    .uq_top_reasonRightInner{
        width: auto;
        flex-direction: column;
        padding:0;
    }

    .uq_top_reasonRightInner::after{
        content: "";
        display: block;
        height: 3px;
        width: 100%;
        border-radius: 3px;
        background-color: rgb(var(--sub));
        flex-shrink: 0;
        order: 2;
    }

    .uq_top_reasonRightDesc{
        padding:0;
    }

    .uq_top_reasonRightDescTitle{
        padding-top:2rem;
    }

    .uq_top_reasonRightDescTxt{
        padding-bottom: 2rem;
    }
}

/* ITPページのヒーローセクション */
.uq_itp_heroBG{
    --direction:to left;
    min-height: 60vh;
    background-image: url("/itp/images/top/top_image_r.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    padding-top: 3rem;
    padding-bottom: 3rem;
}

.uq_itp_heroBG::after {
    content: "";
    display: block;
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    left:0;
    z-index: 1;

    background:linear-gradient(
      var(--direction),
      hsla(0, 0%, 0%, 0) 0%,
      hsla(0, 0%, 0%, 0.003) 8%,
      hsla(0, 0%, 0%, 0.012) 15.1%,
      hsla(0, 0%, 0%, 0.028) 21.6%,
      hsla(0, 0%, 0%, 0.051) 27.6%,
      hsla(0, 0%, 0%, 0.081) 33.3%,
      hsla(0, 0%, 0%, 0.12) 38.7%,
      hsla(0, 0%, 0%, 0.167) 44%,
      hsla(0, 0%, 0%, 0.223) 49.3%,
      hsla(0, 0%, 0%, 0.288) 54.9%,
      hsla(0, 0%, 0%, 0.363) 60.7%,
      hsla(0, 0%, 0%, 0.448) 67.1%,
      hsla(0, 0%, 0%, 0.544) 74%,
      hsla(0, 0%, 0%, 0.651) 81.8%,
      hsla(0, 0%, 0%, 0.769) 90.4%,
      hsla(0, 0%, 0%, 0.9) 100%
    );
}

.uq_itp_heroContents{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.uq_itp_heroTitle{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    
    font-size: 2.5rem;
    line-height: 1.75;
    color: #fff;
}

.uq_itp_heroTitle > .el_btn{
    margin-top: 1rem;
}

.uq_itp_heroImage{
    align-self: flex-end;
}

.uq_itp_heroGDA{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.uq_itp_heroBadge{
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.uq_itp_heroBadgeItem{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 9ch;
    height: 9ch;
    border-radius: 9ch;
    text-align: center;
    background-color: rgb(var(--sub));
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    line-height: 2;
}
@media screen and (max-width:768px) {
    .uq_itp_heroBG{
        --direction:to top;   
    }

    .uq_itp_heroContents{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .uq_itp_heroTitle{
        font-size: 1.75rem;
    }

    .uq_itp_heroTitle > .el_btn{
        width: 100%;
        font-size: 1rem;
        order: 999;
        text-align: center;
    }

    .uq_itp_heroTitle,
    .uq_itp_heroImage{
        display: contents;
    }

    .uq_itp_heroGDA{
        order: 1;
    }
}


/* ITPの価格比較ブロック */
.uq_itp_priceBlock{
    position: relative;
    z-index: 5;
    margin-top:-8rem;
    margin-bottom: -4rem;
}

.uq_itp_priceBlock a:not(.el_btn):is(a, a:visited, a:active){
    color: inherit;
    text-decoration: none;
}

.uq_itp_priceBlock a:not(.el_btn):is(a:hover, a:focus){
    text-decoration: underline;
}

.uq_itp_priceBlockEm{
    font-weight: bold;
    color: rgb(var(--sub));
}

.uq_itp_priceBlockItems{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, max-content);
    grid-auto-flow: column;
    column-gap: 2rem;
}

.uq_itp_priceBlockItem{
    display: contents;
}


.uq_itp_priceBlockItemTitle{
    background-color: rgb(var(--sub));
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border: 1px rgb(var(--sub)) solid;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.uq_itp_priceBlockItemTitle.uq_itp_priceBlockItemTitle__rec::before{
    --size:3rem;
    content: '';
    display: block;
    position: absolute;
    width: var(--size);
    height: var(--size);
    top: -1px;
    left: -1px;
    clip-path: polygon(0 0, 0 100%, 100% 0);
    background-color: rgb(var(--main));
}

.uq_itp_priceBlockItemTitle.uq_itp_priceBlockItemTitle__rec::after{
    content: "オススメ";
    display: block;
    position: absolute;
    font-size: 0.6rem;
    transform: rotate(-45deg);
    word-wrap: none;
    white-space: nowrap;
    left:-0.2rem;
    top:0.7rem;
}

.uq_itp_priceBlockItemFunc{
    background-color: #fff;
    padding: 0.5rem 1rem;
    border-left: 1px rgb(var(--sub)) solid;
    border-right: 1px rgb(var(--sub)) solid;
    padding-left: 2.5rem;
}

.uq_itp_priceBlockItemFunc > ul > li{
    position: relative;
    line-height: 2;
}

.uq_itp_priceBlockItemSupport::before{  
    --size:1.2rem;
    content: url('/itp/images/common/icon_circle.svg');
    display: inline-block;
    position: absolute;
    width: var(--size);
    height: var(--size);
    top:0.2rem;
    left:-1.5rem;
}

.uq_itp_priceBlockItemPartialSupport::before{  
    --size:1.2rem;
    content: url('/itp/images/common/icon_triangle.svg');
    display: inline-block;
    position: absolute;
    width: var(--size);
    height: var(--size);
    top:0.2rem;
    left:-1.5rem;
}


.uq_itp_priceBlockItemDTS{
    background-color: #fff;
    padding: 0.5rem 1rem 1rem 1rem;
    border-left: 1px rgb(var(--sub)) solid;
    border-right: 1px rgb(var(--sub)) solid;
    border-bottom: 1px #ccc solid;
    font-size: 1.1rem;
    font-weight: bold;
}

.uq_itp_priceBlockItemDTSTitle{
    font-size: 0.9rem;
    font-weight: normal;
}

.uq_itp_priceBlockItemPrice{
    background-color: #fff;
    padding: 1rem 1rem 0.5rem 1rem;
    text-align: center;
    border-left: 1px rgb(var(--sub)) solid;
    border-right: 1px rgb(var(--sub)) solid;
    font-size: 0.8rem;
}

.uq_itp_priceBlockItemPriceTxt{
    font-size: 2rem;
    color: rgb(var(--sub));
    font-weight: bold;
}

.uq_itp_priceBlockItemFor{
    background-color: #fff;
    padding: 0.25rem 1rem;
    text-align: center;
    border-left: 1px rgb(var(--sub)) solid;
    border-right: 1px rgb(var(--sub)) solid;
}

.uq_itp_priceBlockItemCTA{
    background-color: #fff;
    padding: 1rem 1rem;
    text-align: center;
    border-left: 1px rgb(var(--sub)) solid;
    border-right: 1px rgb(var(--sub)) solid;
    border-bottom: 1px rgb(var(--sub)) solid;
}
@media screen and (max-width:768px) {
    .uq_itp_priceBlock{
        margin-top: 0;
        margin-bottom: 0;
    }

    .uq_itp_priceBlockItems{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .uq_itp_priceBlockItem{
        display: block;
        padding-bottom: 1rem;
    }
}


/* topのモバイルビュー修正 */
.bl_jumbotron_title.uq_top_jumbotron_title{
    font-size: 2rem;
}

.bl_jumbotron_cta.uq_top_jumbotron_cta  > a.el_btn{
    font-size:1.5rem!important;
}
@media screen and (min-width:769px) {   
    .bl_jumbotron_cta.uq_top_jumbotron_cta > a:is(:hover, :focus){
        background-color: transparent;
        color: #fff;
        border-color: rgb(var(--main));
    }
}
@media screen and (max-width:768px) {
    .bl_jumbotron_cta.uq_top_jumbotron_cta > a.el_btn{
        font-size:1.2rem!important;
        width: 100%;
        bottom: 1.3rem;
    }
}


/* productsページのJumbotron */
.bl_jumbotron.uq_products_jumbotron{
    aspect-ratio: auto;
    height:clamp(300px, 40vh, 768px);
    background-position: right 0% top 30%;
}

/* ITPページのジャンボトロン */
.bl_jumbotron.uq_itp_jumbotron{
    height: 40vh;
}


/* カタログダウンロード */
.uq_catDL{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap:1rem;
}

.uq_catDL > a{
    text-align: center;
}

.uq_catDL > :is(a, a:active, a:visited){
    text-decoration: none;
    color: inherit;
    background-color: #fff;
}

.uq_catDL > :is(a:focus, a:hover){
    text-decoration: underline;
}

.uq_catDL > a img{
    box-shadow: var(--shadow);
}

.uq_catDL > a:hover img{
    box-shadow: var(--shadowHover);
}

@media screen and (max-width:768px) {
    .uq_catDL{
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}


/* 事例集の一覧 */
.uq_case_grid{
    display: grid;
    column-gap: 1.5rem;
    row-gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.uq_case_grid *{
    min-width: 0;
}

.uq_caseItem{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, max-content) 1fr repeat(2, max-content);
    gap: 0.5rem;

    background-color: #fff;
    box-shadow: 3px 3px 6px #eee;
}

.uq_caseItem > img{
    width: 100%;
    aspect-ratio: 346/300;
}

.uq_case_kisyu{
    width:fit-content;
    padding:2px 0.5rem 0 0.5rem;
    border: 1px rgb(var(--acc)) solid;
}

.uq_case_title{
    font-weight: bold;
    font-size: 1.25rem;
    border-bottom: 1px rgb(var(--acc)) solid;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.uq_case_desc{
    padding: 0 0.5rem 0 0.5rem;
}

.uq_case_kouka{
    display: inline-flex;
    column-gap: 0.5rem;
}

.uq_case_kouka > span{
    border: 1px rgb(var(--acc)) solid;
    text-align: center;
    padding: 2px 0.5rem 0 0.5rem;
}

.uq_case_info{
    padding:0 0.5rem 0 0.5rem;
}

.uq_case_infoPref::before{
    --size:0.8rem;
    content: '';
    display: inline-block;
    width: var(--size);
    aspect-ratio: 22/32;
    background-image: url('/itp/images/case/icon1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateY(15%);
}

.uq_case_infoArea::before{
    --size:2.2rem;
    content: '';
    display: inline-block;
    width: var(--size);
    aspect-ratio: 64/32;
    background-image: url('/itp/images/case/icon2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 0.5rem;
    transform: translateY(15%);
}

.uq_case_infoLoad::before{
    --size:1rem;
    content: '';
    display: inline-block;
    width: var(--size);
    aspect-ratio: 30/32;
    background-image: url('/itp/images/case/icon3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 0.5rem;
    transform: translateY(15%);
}

.uq_case_infoCars::before{
    --size:1.3rem;
    content: '';
    display: inline-block;
    width: var(--size);
    aspect-ratio: 32/32;
    background-image: url('/itp/images/case/icon4.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 0.5rem;
    transform: translateY(15%);
}

.uq_case_infoBiz::before{
    --size:1.3rem;
    content: '';
    display: inline-block;
    width: var(--size);
    aspect-ratio: 32/32;
    background-image: url('/itp/images/case/icon5.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 0.5rem;
    transform: translateY(20%);
}

.uq_case_infoBus::before{
    --size:1.5rem;
    content: '';
    display: inline-block;
    width: var(--size);
    aspect-ratio: 32/32;
    background-image: url('/itp/images/case/icon6.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 0.5rem;
    transform: translateY(25%);
}


.uq_case_link{
    padding:0 0.5rem 0.5rem 0.5rem;

    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;

    align-self: flex-end;
    margin-top: 1rem;
}


/* TOP差し込みニュース */
.uq_top_header_news{
    position: relative;
    font-size: 1rem;
    border-bottom: 1px var(--sub-color) solid;
    padding-left: 6rem;
    display: flex;
    justify-content: space-between;
}

.uq_top_header_news::before{
    content: "News";
    display: block;
    position: absolute;
    left:0;
    bottom: 0;

    width: 5rem;
    height: 1.5rem;
    background-color: var(--sub-color);

    color: #fff;
    font-size: 0.8rem;
    padding: 0.2rem 0rem 0rem 0.5rem;
    clip-path:polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%);
}

.uq_top_header_news_toDetails{
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap:0.5em;
}

.uq_top_header_news_toDetails::after{
    --size:0.4rem;
    content: "";
    display: inline-block;
    position: relative;
    border-top: var(--size) transparent solid;
    border-left: calc(var(--size) * 1.41) currentColor solid;
    border-bottom: var(--size) transparent solid;
}

a.uq_top_header_news:is(:hover, :focus){
    color: var(--sub-color);
}

a.uq_top_header_news:hover .uq_top_header_news_toDetails::after{
    left: 3px;
}

@media screen and (max-width:759px) {
    .uq_top_header_news{
        position: relative;
        border: 0px;
        border-top: 1px var(--sub-color) solid;
        margin-top: 2rem;
        padding-top:0.2rem;
        padding-left: 0;
        display: flex;
        flex-direction: column;
    }

    .uq_top_header_news::before{
        height: 1.5rem;
        left:0;
        top:-1.7rem;
    }

    .uq_top_header_news_toDetails{
        align-self: flex-end;
    }
}