@charset "utf-8";

:root {
    --tp-pc-max-width: 1500px;
/*    --tp-pc-min-width: 1280px;*//*20220912*/
    --tp-pc-min-width: 1250px;/*20220912*/
    --tp-pc-base-width: 1024px;
    --tp-pc-header-top-height: 72px;
    --tp-pc-header-height: 120px;
    --tp-pc-leftside_menu-width: 232px;

    --tp-sp-max-width: 767px;
/*    --tp-sp-min-width: 375px;*//*20220914*/
    --tp-sp-min-width: 360px;/*20220914*/
    --tp-sp-header-height: 44px;
    --tp-sp-header-top-height: 44px;
}


/*----------------------------------------------*/
/* テンプレート */
/*----------------------------------------------*/
/* 表示幅 */
.hpci-tp_bg_width_full {
    width: 100%;
}

.hpci-tp_bg_width_margin {
    width: 100%;
    padding: 0 128px;
    max-width: var(--tp-pc-max-width);
    min-width: var(--tp-pc-min-width);
    margin: 0 auto;
}

.hpci-tp_bg_width_split {
    display: flex;
}

.hpci-tp_bg_width_leftside {
    width: var(--tp-pc-leftside_menu-width);
    padding: 0;
}

.hpci-tp_bg_width_rightside {
    width: calc(100% - var(--tp-pc-leftside_menu-width));
    margin-left: 40px;
}





/* 背景色 */
.hpci-tp_bg_white {
    background: #FFFFFF;
}

.hpci-tp_bg_lightgreen {
    background: #E9F2EC;
}

.hpci-tp_bg_luminosity {
    mix-blend-mode: luminosity;
    opacity: 0.07;
}

.hpci-tp_bg_lightgray {
    background: #F0F0F0;
}

.hpci-tp_bg_gray {
    background: #EDEDED;
}

.hpci-tp_bg_target_menu {
    background: linear-gradient(180deg, #fff 0%, #fff 72px, #E9F2EC 72px, #E9F2EC 100%);
}




/* エリア関連 */
.hpci-tp_headerMenuSect {
    height: 48px;
    background-color: #08875A;
}


.hpci-tp_hpciPanelSect {
    background: transparent url('../images/sample_bg_hpci_panel.png') 0% 0% no-repeat padding-box;
    background-size: cover;
    opacity: 1;
}

.hpci-tp_pageTitleSect {
    background: transparent linear-gradient(92deg, #DAF5DF 0%, #85D0B2 100%) 0% 0% no-repeat padding-box;
    margin-bottom: 36px;
}



/*----------------------------------------------*/
/*header*/
/*----------------------------------------------*/
#header {
}

.hpci-tp_header {
    width: 100%;
}

.hpci-tp_header_top {
    width: 100%;
    height: var(--tp-pc-header-top-height);
    display:table;
}

.hpci-tp_header_top ul {
    display: block;
/*    display: flex;*//*20220912*/
    height: 100%;
    min-width: var(--tp-pc-min-width);/*20220912*/
    max-width: var(--tp-pc-max-width);/*20220912*/
/*    width: var(--tp-pc-min-width);*//*20220912*/
    width: var(--client-width);/*20220912*/
    margin: 0 auto;
    font-size: 0;/* ADD20220928 */
}

.hpci-tp_header_top ul > li {
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
    text-align: left;
}



/* ロゴ */
.hpci-tp_header_logo {
    padding-left: 40px;
/*    margin-left: 40px;*//*20220912*/
    width: 349px;
}

.hpci-tp_header_logo a img {
    width: 309px;
    height: 45px;
    vertical-align: middle;
}


/* 言語 */
.hpci-tp_btn_lang {
    position: relative;
/*    padding-left: 388px;*//*20220912*/
/*    padding-left: 355px;*//*20220912*/
    padding-left: var(--lang-padding-left);/*20220912*/
    
/*    margin-left: 372px;*//*20220912*/
    top: -36px;
    width: auto;
}

.hpci-cm_pc select#language {
    width: 68px;
    font-size: 1.3rem;
}

.hpci-tp_btn_lang button {
    position: relative;
    float: right;
    padding: 0;
    top: 20px;
    width: 68px;
    height: 32px;
    font-size: 1.3rem;
    text-align: center;
    background-color: #EDEDED;
    border: none;
    color: #000;
}

.ccm-block-switch-language {
    opacity: 0;
}




/* 検索 */
.hpci-cm_pc .hpci-tp_btn_search {
    position: relative;
    padding-left: 27px;/*20220912*/
/*    margin-left: 27px;*//*20220912*/
    width: 307px;
}

.hpci-cm_pc .hpci-tp_btn_search form {
    width: 280px;
    position: relative;
}

.hpci-cm_pc .hpci-tp_btn_search form h3{
    font-size: 1.3rem;
    font-weight: normal;
    color: #000;
    display: inline;
}

.hpci-cm_pc .hpci-tp_btn_search form input[name='query'],
.hpci-cm_pc .hpci-tp_btn_search form input[name='searchKeywords'] {
    padding-left: 5px;
    margin-left: 12px;
    width: 140px;
    border: 1px solid #A3A3A3;
}

.hpci-cm_pc .hpci-tp_btn_search form input[name='submit'] {
    position: absolute;
    width: 50px;
    background: #757575 0% 0% no-repeat padding-box;
    color: #FFFFFF;
    border: 1px solid #A3A3A3;
    border-left: none;
}

.hpci-cm_pc .hpci-tp_btn_search form input[name='submit']:hover {
    opacity: 0.8;
}

.search_icon {
}

.search_icon::before {
    position: absolute;
    content: '';
    width: 7px;
    height: 7px;
    top: 11px;
    left: 128px;/*20220912*/
/*    left: 101px;*//*20220912*/
    border-radius: 50%;
    box-shadow: 0 0 0 1px #8b8b8b;
}

.search_icon::after {
    position: absolute;
    content: '';
    width: 6px;
    height: 7px;
    top: 18px;
    left: 131px;/*20220912*/
/*    left: 104px;*//*20220912*/
    border-top: solid 1px #8B8B8B;
    transform: rotate(45deg);
}


.search_icon.en::before {
    left: 91px;/*20220912*/
/*    left: 64px;*//*20220912*/
}

.search_icon.en::after {
    left: 94px;/*20220912*/
/*    left: 67px;*//*20220912*/
}

/* Safari用の検索アイコン修正 */
.search_icon_iPad_portrait::before {
    left: 146px;
}
.search_icon_iPad_portrait::after {
    left: 149px;
}

/* Safari用の検索アイコン修正(英語版) */
.hpci-cm_pc .search_icon_en_iPad_portrait::before {
    left: 99px;
}
.hpci-cm_pc .search_icon_en_iPad_portrait::after {
    left: 103px;
}

/* iPad Chrome用の検索アイコン修正 */
.search_icon_chrome_portrait::before {
    left: 128px;
}
.search_icon_chrome_portrait::after {
    left: 131px;
}

/* iPad Chrome用の検索アイコン修正(英語版) */
.hpci-cm_pc .search_icon_chrome_portrait_en::before {
    left: 91px;
}
.hpci-cm_pc .search_icon_chrome_portrait_en::after {
    left: 94px;
}

/* 詳細検索 */
.hpci-tp_btn_detail_search {
    display: none!important;
    visibility: hidden;
    padding-left: 8px;
    width: 68px;
}

.hpci-tp_btn_detail_search a {
    width: 68px;
    display: inline-block;
    padding: 6px 8px 5px 8px;
    text-decoration: none;
    background: #EDEDED;
    font-size: 1.3rem;
    color: #000;
}


/* ヘルプデスク */
.hpci-tp_btn_helpdesk {
    padding-left: 32px;/*20220912*/
/*    margin-left: 32px;*//*20220912*/
/*    width: 128px;*//* DEL20220928 */
    width: 160px;/* ADD20220928 */
    height: var(--tp-pc-header-top-height);
}
.hpci-tp_btn_helpdesk:hover {
    opacity : 0.8;
}

.hpci-tp_btn_helpdesk div {
    padding-top: 18px;
    display: flex;
    width: 128px;
    height: 100%;
    /*background: transparent linear-gradient(119deg, #FFC137 0%, #FFA337 100%) 0% 0% no-repeat padding-box;*/
    background: transparent linear-gradient(119deg, #f7cb6c 0%, #fbaa80 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
}

.hpci-tp_btn_helpdesk a {
    position: relative;
}

.hpci-tp_btn_helpdesk img {
    margin-top: calc((var(--tp-pc-header-top-height) - 23px) / 2 - 18px);
    margin-left: 11px;
    width: 20px;
    height: 23px;
}

.hpci-tp_btn_helpdesk span {
    position: absolute;
    width: 80px;
    /* font-size: 1.3rem; */
    font-size: 13px;
    font-weight: bold;
    color: #222222;
    margin-left: 9px;
    margin-right: 8px;
}
/* Safari 改行対策 */
.hpci-tp_btn_helpdesk span::after {
    content: ".";
    width: 0;
    font-size: 0;
    color: transparent;
    margin-right: 1px;
    pointer-events: none;
}
/* iPad横向き時 ヘルプデスク */
.hpci-tp_btn_helpdesk_iPad span {
    font-size: 12px;
}
/* Safari */
/* iPad横向き時 ヘルプデスク */
.hpci-tp_btn_helpdesk_iPad_landscape span {
    font-size: 12px;
}

/* iPad縦向き時 ヘルプデスク */
.hpci-tp_btn_helpdesk_iPad_portrait span {
    font-size: 10px;
}

/* Chrome */
/* iPad縦向き時 ヘルプデスク */
.hpci-tp_btn_helpdesk_chrome_portrait span {
    font-size: 14px;
}

/*----------------------------------------------*/
/*Contents*/
/*----------------------------------------------*/
.hpci-tp_titleSect  div {
    width: 100%;
    height: 96px;
    background: -moz-linear-gradient(left, ##FFC137, #FFA337);
    background: -webkit-linear-gradient(left, #FFC137, #FFA337);
    background: linear-gradient(to right, #FFC137, #FFA337);
}

/* プリインストールされたアプリケーションソフトウェアページ コードブロック */
.hpci-enter_exam_outer {
    width: 100%;
    padding-left: 15px;
    margin-bottom: 20px;
}
.hpci-enter_exam {
    border-radius: 5px;
    border: solid 1px;
    width: 100%;
    padding: 5px;
    font-size: 12px;
    overflow-x: auto;
}
/* ↓20220921 ADD↓ */
.hpci-enter_exam::-webkit-scrollbar {
    height: 10px;
}
.hpci-enter_exam::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 5px;
}
.hpci-enter_exam::-webkit-scrollbar-track-piece {
    background: #efefef;
    border-radius: 5px;
}
/* ↑20220921 ADD↑ */
.hpci-enter_exam pre {
    margin: 0;
    line-height: 1.3em;
    display: inline-block;
}

/* ↓WYSIWYG系ブロック 共通CSS↓ */
/* 見出し */
.hpci_article_title
{
    border-top: 2px solid #08875A;
    height: 47px;
    position: relative;
    margin-bottom: 23px;
    padding-top : 10px;
}
.hpci_article_title span,
.hpci_article_title p
{
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 3.5rem;
    color: #222;
}
.hpci_article_title span::before,
.hpci_article_title p::before
{
    content: "";
    display: inline-block;
    margin-right : 11px;
    border-top: 12px solid #08875A;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}
    
/* 中見出し */
.hpci-17_ft_content h3,
.hpci-18_ai_image h3,
.hpci-19_ltrt_sentence h3,
.hpci-20_liri_images h3,
.hpci-21_ltri_sentence_image h3,
.hpci-22_lirt_image_sentence h3,
.hpci-23_ss_table  h3,
.hpci-49_ft_content h3
{
    display         : block;
    margin-bottom   : 15px;
    margin-left     : 15px;
    min-height      : 31px;
    padding-left    : 15px;
    position        : relative;
    background      : #FFF 0% 0% no-repeat padding-box;
    font-weight     : bold;
    font-size       : 1.8rem;
    line-height     : 3.5rem;
    color           : #222;
}
.hpci-17_ft_content h3::before,
.hpci-18_ai_image h3::before,
.hpci-19_ltrt_sentence h3::before,
.hpci-20_liri_images h3::before,
.hpci-21_ltri_sentence_image h3::before,
.hpci-22_lirt_image_sentence h3::before,
.hpci-23_ss_table  h3::before,
.hpci-49_ft_content h3::before
{
    content: "";
    display: inline-block;
    position: absolute;
    top    : 10px;
    left   : 0;
    margin-right : 11px;
    width        : 6px;
    height       : 16px;
    background   : #08875A 0% 0% no-repeat padding-box;
}
.hpci_title_M
{
    display         : block;
    margin-top      : 15px;
    margin-bottom   : 15px;
    margin-left     : 15px;
    min-height      : 31px;
    padding-left    : 15px;
    position        : relative;
    background      : #FFF 0% 0% no-repeat padding-box;
}
.hpci_title_M span,
.hpci_title_M p
{
    font-weight     : bold;
    font-size       : 1.8rem;
    line-height: 3.5rem;
    color: #222;
}
.hpci_title_M span::before,
.hpci_title_M p::before
{
    content: "";
    display: inline-block;
    position: absolute;
    top    : 10px;
    left   : 0;
    margin-right : 11px;
    width        : 6px;
    height       : 16px;
    background   : #08875A 0% 0% no-repeat padding-box;
}
/* 表 */
/* .hpci-17_ft_entity table, */
.hpci-18_ai_entity table,
.hpci-19_ltrt_entity table,
.hpci-20_liri_entity table,
.hpci-21_ltri_entity table,
.hpci-22_lirt_entity table,
.hpci-23_ss_table  table,
.hpci-49_ft_entity table
{
    font-size       : 1.4rem;
    width           : 100%;
    border-collapse : collapse;
    border-spacing  : 0;
}
/* .hpci-17_ft_entity table th, */
.hpci-18_ai_entity table th,
.hpci-19_ltrt_entity table th,
.hpci-20_liri_entity table th,
.hpci-21_ltri_entity table th,
.hpci-22_lirt_entity table th,
.hpci-23_ss_table  table th,
.hpci-49_ft_entity table th
{
    background-color : #efeeee;
    font-weight      : bold;
    border           : 1px solid #bbc8cf;
    padding          : 10px;
}
/* .hpci-17_ft_entity table td, */
.hpci-18_ai_entity table td,
.hpci-19_ltrt_entity table td,
.hpci-20_liri_entity table td,
.hpci-21_ltri_entity table td,
.hpci-22_lirt_entity table td,
.hpci-23_ss_table  table td,
.hpci-49_ft_entity table td
{
    border  : 1px solid #bbc8cf;
    padding : 10px;
}
/* 表形式（thを含まないもの） */
/* .hpci-17_ft_entity table.notline_table td, */
.hpci-18_ai_entity table.notline_table td,
.hpci-19_ltrt_entity table.notline_table td,
.hpci-20_liri_entity table.notline_table td,
.hpci-21_ltri_entity table.notline_table td,
.hpci-22_lirt_entity table.notline_table td,
.hpci-23_ss_table  table.notline_table td,
.hpci-49_ft_entity table.notline_table td
{
    border  : none;
}

/* 中点 */
.hpci-17_ft_content ul li,
.hpci-18_ai_image ul li,
.hpci-19_ltrt_sentence ul li,
.hpci-20_liri_images ul li,
.hpci-21_ltri_sentence_image ul li,
.hpci-22_lirt_image_sentence ul li,
.hpci-23_ss_table  ul li,
.hpci-49_ft_content ul li
{
    padding-left  : 15px;
    position      : relative;
}
.hpci-17_ft_content ul li::before,
.hpci-18_ai_image ul li::before,
.hpci-19_ltrt_sentence ul li::before,
.hpci-20_liri_images ul li::before,
.hpci-21_ltri_sentence_image ul li::before,
.hpci-22_lirt_image_sentence ul li::before,
.hpci-23_ss_table  ul li::before,
.hpci-49_ft_content ul li::before
{
    position         : absolute;
    content          : "";
    width            : 8px;
    height           : 8px;
    border-radius    : 100%;
    background-color : #08875A;
    top              : 7px;
    left             : 0;
}
.hpci-17_ft_content ul li ul,
.hpci-18_ai_image ul li ul,
.hpci-19_ltrt_sentence ul li ul,
.hpci-20_liri_images ul li ul,
.hpci-21_ltri_sentence_image ul li ul,
.hpci-22_lirt_image_sentence ul li ul,
.hpci-23_ss_table  ul li ul,
.hpci-49_ft_content ul li ul
{
    margin-left  : 25px;
}
.hpci-17_ft_content ul li ul li,
.hpci-18_ai_image ul li ul li,
.hpci-19_ltrt_sentence ul li ul li,
.hpci-20_liri_images ul li ul li,
.hpci-21_ltri_sentence_image ul li ul li,
.hpci-22_lirt_image_sentence ul li ul li,
.hpci-23_ss_table  ul li ul li,
.hpci-49_ft_content ul li ul li
{
    padding-left  : 15px;
    position      : relative;
}
.hpci-17_ft_content ul li ul li::before,
.hpci-18_ai_image ul li ul li::before,
.hpci-19_ltrt_sentence ul li ul li::before,
.hpci-20_liri_images ul li ul li::before,
.hpci-21_ltri_sentence_image ul li ul li::before,
.hpci-22_lirt_image_sentence ul li ul li::before,
.hpci-23_ss_table  ul li ul li::before,
.hpci-49_ft_content ul li ul li::before
{
    position         : absolute;
    content          : "";
    width            : 8px;
    height           : 8px;
    border-radius    : 100%;
    background-color : #FA8B00;
    top              : 9px;
    left             : 0;
}

.hpci-17_ft_content ul li.list_kome,
.hpci-18_ai_image ul li.list_kome,
.hpci-19_ltrt_sentence ul li.list_kome,
.hpci-20_liri_images ul li,
.hpci-21_ltri_sentence_image ul li.list_kome,
.hpci-22_lirt_image_sentence ul li.list_kome,
.hpci-23_ss_table  ul li.list_kome,
.hpci-49_ft_content ul li.list_kome
{
    position      : relative;
}
.hpci-17_ft_content ul li.list_kome::before,
.hpci-18_ai_image ul li.list_kome::before,
.hpci-19_ltrt_sentence ul li.list_kome::before,
.hpci-20_liri_images ul li::before,
.hpci-21_ltri_sentence_image ul li.list_kome::before,
.hpci-22_lirt_image_sentence ul li.list_kome::before,
.hpci-23_ss_table  ul li.list_kome::before,
.hpci-49_ft_content ul li.list_kome::before
{
    background      : url(../images/kome.png) no-repeat;
    position        : absolute;
    width           : 8px;
    height          : 8px;
    top             : 9px;
    left            : 0;
}

/* 水平線 */
.hpci-17_ft_entity hr,
.hpci-18_ai_entity hr,
.hpci-19_ltrt_entity hr,
.hpci-20_liri_entity hr,
.hpci-21_ltri_entity hr,
.hpci-22_lirt_entity hr,
.hpci-23_ss_table  hr,
.hpci-49_ft_entity hr
{
    border-width: 1px 0px 0px 0px;
    border-style: dashed;
    height: 1px;
}


/*----------------------------------------------*/
/*footer*/
/*----------------------------------------------*/
footer {
    margin-top: 30px;
}

.hpci-tp_footer_full {
    border-top: 1px solid #E8E8E8;
}

.hpci-tp_footer{
    display: flex;
    padding: 32px 128px 0px;
    max-width: var(--tp-pc-base-width);
    min-width: var(--tp-pc-min-width);
    margin: 0 auto 33px;
}

.hpci-tp_footer_left {
    width: 50%;
}

.hpci-tp_footer_right {
    width: 50%;
}

.hpci-tp_footer_address span {
    margin-top: 13px;
    margin-bottom: 14px;
    font-size: 1.3rem;
    color: #3B4043;
}


.hpci-tp_footer_address > img {
    width: 309px;
    height: 33px;
}

.hpci-tp_footer_address a {
    display: inline-block;
    margin-top: 14px;
    padding: 9px 7px 26px;
    height: 32px;
    text-decoration: none;
    background: #555555;
    font-size: 1.2rem;
    color: #fff;
}
.hpci-tp_footer_address a:hover {
    opacity : 0.8;
}

.hpci-tp_footer_address a img{
    margin-left: 6px;
    width: 9px;
    height: 9px;
}



.hpci-tp_footer_sns {
    width: 100%;
}

.hpci-tp_footer_navi {
    width: 100%;
}

.hpci-tp_footer_copyright {
    padding-top: 2rem;
    height: 55px;
    text-align: center;
    font-size: 1.2rem;
    color: #222222;
    background-color: #EDEDED;
}







/*----------------------------------------*/
/* pagetop */
/* ------------------------------------------ */
.hpci-tp_pagetop {
    position: fixed;
    right: 0px;
    bottom: 55px;
    background-color: #555555;
    width: 44px;
    height: 44px;
}
.hpci-tp_pagetop a {
    width: 44px;
    height: 44px;
    text-decoration: none;
}

.hpci-tp_pagetop a::before, .hpci-tp_pagetop a::after {
    content: "";
    position: absolute;
    top: 38%;
    left: 50%;
    width: 2px;
    height: 10px;
    background: #FFFFFF;
}

.hpci-tp_pagetop a::before {
    transform: translate(-145%,0%) rotate(50deg);
}

.hpci-tp_pagetop a::after {
    transform: translate(145%,0%) rotate(-50deg);
}

.hpci-tp_pagetop a:hover {
    opacity: 0.8;
}











/*----------------------------------------*/
/* cookie panel */
/* ------------------------------------------ */
.hpci-tp_active {
    display: block !important;
}

.hpci-tp_cookie_panel {
    display: none;
}

.hpci-tp_cookie_panel.hpci-tp_active {
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    min-height: 120px;
    padding: 3rem 128px;
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
    word-break: break-all;
    word-wrap: break-word;
}

.hpci-tp_cookie_box {
    display: block;
    margin: 0 auto;
    max-width: 1024px;
}

.hpci-tp_cookie_box div {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}

.hpci-tp_cookie_box div a {
    color: #fff;
    text-decoration: underline;
}

/*
.hpci-tp_cookie_box .hpci-tp_cookie_close_btn {
    float: right;
    display: block;
    margin: 0 0 0 auto;
    padding: 0;
    right: calc((100vw - 1024px - 30px) / 2);;
    top: 15px;
    background: url("../images/icon_modal_close.png") center center no-repeat;
    background-size: 28px;
    width: 30px;
    height: 30px;
}
*/

/*
.hpci-tp_cookie_close_btn span {
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}
*/

.hpci-tp_cookie_box .hpci-tp_cookie_message_and_ok_btn {
    display: table;
    width: 100%;
    padding: 0 40px 0 0;
}

.hpci-tp_cookie_message_and_ok_btn .hpci-tp_messege_cookie {
    padding: 0;
    text-align: left;
    vertical-align: top;
    width: 100%;
}

.hpci-tp_cookie_ok_btn {
    height: 100%;
    opacity: .8;
}

.hpci-tp_cookie_allow_btn {
    height: 100%;
    opacity: .8;
}

.hpci-tp_cookie_decline_btn {
    height: 100%;
    opacity: .8;
}

.hpci-tp_cookie_ok_btn a {
    display: table;
    background: #FCA530;
    text-align: center;
    width: 197px;
    height: 40px;
    color: #000 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    font-size: 1.8rem;
}

.hpci-tp_cookie_ok_btn span {
    display: table-cell;
    vertical-align: middle;
    height: 45px;
}

.hpci-tp_cookie_ok_btn:hover {
    opacity: 1;
    box-shadow: none;
}

.hpci-tp_cookie_allow_btn a {
    display: table;
    background: #FCA530;
    text-align: center;
    width: 150px;
    height: 40px;
    color: #000 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    font-size: 1.8rem;
}

.hpci-tp_cookie_allow_btn span {
    display: table-cell;
    vertical-align: middle;
    height: 45px;
}

.hpci-tp_cookie_allow_btn:hover {
    opacity: 1;
    box-shadow: none;
}

.hpci-tp_cookie_decline_btn a {
    display: table;
    background: #CCCCCC;
    text-align: center;
    width: 85px;
    height: 40px;
    color: #000 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    font-size: 1.8rem;
}

.hpci-tp_cookie_decline_btn span {
    display: table-cell;
    vertical-align: middle;
    height: 45px;
}

.hpci-tp_cookie_decline_btn:hover {
    opacity: 1;
    box-shadow: none;
}





/*-------------------------------------*/
/* スマートフォン表示 */
/*-------------------------------------*/
@media screen and (max-width:767px) {
    /*----------------------------------------------*/
    /* テンプレート */
    /*----------------------------------------------*/
    .hpci-tp_bg_width_full {
        padding: 0 0px;
   }

    .hpci-tp_bg_width_margin {
        padding: 0 10px;
        min-width: var(--tp-sp-min-width);
    }

    .hpci-tp_bg_width_split {
        flex-direction: column-reverse;
    }

    .hpci-tp_bg_width_leftside {
        width: 100%;
        margin-top: 30px;
        }

    .hpci-tp_bg_width_rightside {
        width: 100%;
        margin-left: 0px;
    }

    .hpci-tp_headerMenuSect {
        display: none;
    }

    .hpci-tp_bg_width_margin.hpci-tp_bg_width_split {
        padding: 0;
    }

    .hpci-tp_bg_width_rightside {
        padding: 0 10px;
    }


    /*----------------------------------------------*/
    /*header*/
    /*----------------------------------------------*/
    .hpci-tp_header_top_sp {
        width: 100%;
        height: var(--tp-sp-header-top-height);
        display:table;
/*
        position: fixed;
*/
        z-index: 2000;
        background-color: #ffffff;
        box-shadow: 0px 3px 10px #0000002e;
    }

    .hpci-tp_header_top_sp ul {
        display: table;
        height: 100%;
        width: 100%;
    }

    .hpci-tp_header_top_sp ul > li {
        display:table-cell;
        margin-top: auto;
        margin-bottom: auto;
        vertical-align: middle;
        text-align: left;
    }


    /* ロゴ */
    .hpci-tp_header_logo {
        padding-left: 10px;
        width: 138px;
    }

    .hpci-tp_header_logo a img {
        width: 138px;
        height: 20px;
        vertical-align: middle;
    }


    /* ヘルプデスク */
    .hpci-tp_btn_helpdesk {
        padding-left: 67px;
        width: auto;
        height: var(--tp-sp-header-top-height);
    }

    .hpci-tp_header_top ul > li.hpci-tp_btn_helpdesk {
        vertical-align: 50%;
    }

    .hpci-tp_btn_helpdesk div {
        padding-top: 3px;
        display: flex;
        width: 104px;
        height: 36px;
        background: transparent linear-gradient(109deg, #FFC137 0%, #FFA337 100%) 0% 0% no-repeat padding-box;
        border-radius: 50px;
        opacity: 1;
        margin: 0 12px 0 auto;
    }

    .hpci-tp_btn_helpdesk a {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }

    .hpci-tp_btn_helpdesk img {
        margin-top: calc((var(--tp-sp-header-top-height) - 12px) / 2 - 6px);
        margin-left: 11px;
        width: 13px;
        height: 12px;
    }

    .hpci-tp_btn_helpdesk span {
        position: absolute;
        width: 65px;
        font-size: 1.0rem;
        font-weight: bold;
        letter-spacing: 0px;
        color: #222222;
        text-align: center;
        margin-left: 6px;
        margin-right: 13px;
        opacity: 1;
    }


    /* ハンバーガーメニュー */
    .hpci-tp_hamburger_menu_btn {
        padding-left: 12px;
        width: 44px;
        height: var(--tp-sp-header-top-height);
    }

    .hpci-tp_hamburger_menu_btn .menuBtn {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        display: block;
        width: 44px;
        height: 44px;
        background-color: #08875A;
    }

    .hpci-tp_hamburger_menu_btn .menuBtn span {
        position: absolute;
        left: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: -webkit-transform .3s ease;
        transition: -webkit-transform .3s ease;
        transition: transform .3s ease;
        transition: transform .3s ease, -webkit-transform .3s ease;
        background-color: #08875A;
    }

    .hpci-tp_hamburger_menu_btn .menuBtn span {
        left: 55%;
        width: 20px;
        height: 1px;
        margin-left: -12px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
    }

    .hpci-tp_hamburger_menu_btn .menuBtn span.m1 {
        top: 8px;
    }

    .hpci-tp_hamburger_menu_btn .menuBtn span.m2 {
        top: 15px;
    }

    .hpci-tp_hamburger_menu_btn .menuBtn span.m3 {
        top: 22px;
    }

    .hpci-tp_hamburger_menu_btn .menuBtn span.txt {
        background: none;
        left: 12px;
        top: 25px;
        width: 100%;
        font-size: 1.0rem;
        color: #fff;
        letter-spacing: -0.2px;
        text-align: center;
        opacity: 1;
    }

    .hpci-tp_hamburger_menu_btn .menuBtn.is-menuOpen span.m1 {
        -webkit-transform: translateY(20px) rotate(-315deg);
        transform: translateY(7px) rotate(-315deg);
    }
    .hpci-tp_hamburger_menu_btn .menuBtn.is-menuOpen span.m2 {
        opacity: 0;
    }
    .hpci-tp_hamburger_menu_btn .menuBtn.is-menuOpen span.m3 {
        -webkit-transform: translateY(-20px) rotate(315deg);
        transform: translateY(-7px) rotate(315deg);
    }

    .hpci-tp_hamburger_menu {
        display: none;
        position: absolute;
        top: 44px;
        width: 100%;
        border-bottom: 1px solid #E8E8E8;
        background-color: white;
        z-index: 1000;
    }


    .hpci-tp_hamburger_menu_bottom {
        margin-top: 39px;
    }

    .hpci-tp_hamburger_menu_bottom .hpci-tp_btn_lang {
        padding-left: 0px;
    }

    .hpci-tp_btn_lang button {
        top: 0px;
        float: left;
    }

    .hpci-tp_hamburger_menu_bottom .hpci-tp_btn_search {
        clear: both;
        position: relative;
        font-size: 0;
        height: 60px;
        position: relative;
        top: -20px;
        }

    .hpci-tp_hamburger_menu_bottom .hpci-tp_btn_search h3 {
        padding-left: 0px;
        margin-top: 2px;
        margin-bottom: 8px;
        font-size: 1.3rem;
        letter-spacing: 0px;
        color: #222222;
    }

    .hpci-tp_hamburger_menu_bottom .hpci-tp_btn_search input[name='query'] {
        margin-top: 2px;
        padding-left: 5px;
        width: 229px;
        height: 32px;
    }

    .hpci-tp_hamburger_menu_bottom .hpci-tp_btn_search input[name='submit'] {
        width: 50px;
        height: 32px;
        font-size: 1.2rem;
        letter-spacing: 0px;
        color: #fff;
        background-color: #757575;
        border: 1px solid #A3A3A3;
        border-left: none;
    }
    .hpci-tp_hamburger_menu_bottom .hpci-tp_btn_search input[name='submit']:hover {
        opacity: 0.7;
    }


    .hpci-tp_btn_helpdesk_sp_menu {
        margin-top: 20px;
        position: relative;
        top: -20px;
    }

    .hpci-tp_btn_helpdesk_sp_menu div {
        position: relative;
        padding-top: 20px;
        margin: 0 auto;
        width: 278px;
        height: 44px;
        background: transparent linear-gradient(109deg, #FFB100 0%, #FF8900 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
    }

    .hpci-tp_btn_helpdesk_sp_menu a {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }

    .hpci-tp_btn_helpdesk_sp_menu img {
        margin-top: 1.5rem;
        margin-left: 43px;
        width: 13px;
        height: 12px;
    }

    .hpci-tp_btn_helpdesk_sp_menu span {
        margin-left: 10px;
        width: 172px;
        height: 20px;
        font-size: 1.4rem;
        font-weight: bold;
        letter-spacing: 0px;
        color: #222222;
        text-align: center;
        opacity: 1;
    }


    .hpci-tp_btn_close {
        margin-top: 25px;
        height: 50px;
        position: relative;
        top: -20px;
    }

    .hpci-tp_btn_close div {
        position: relative;
    }

    .hpci-tp_btn_close a {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #08875A;
        text-align: center;
    }

    .hpci-tp_btn_close .cross {
        margin-right: 15px;
        position: relative;
        display: inline-block;
        width: 14px;
        height: 14px;
        transform: matrix(0, 1, -1, 0, 0, 0);
        opacity: 1;
    }

    .cross::before, .cross::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 19px;
        background: #1F7974;
    }

    .cross::before {
      transform: translate(-50%,-50%) rotate(45deg);
    }
     
    .cross::after {
      transform: translate(-50%,-50%) rotate(-45deg);
    }



    .search_icon::before {
        top: 39px;
        left: 10px;
    }

    .search_icon::after {
        top: 47px;
        left: 13px;
    }



    .hpci-tp_hamburger_menu_contents {
        background-color: #08875A;
    }



    /*----------------------------------------------*/
    /*footer*/
    /*----------------------------------------------*/
    .hpci-tp_footer{
        display: flex;
        padding: 26px 10px 0px;
        max-width: var(--tp-sp-max-width);
        min-width: var(--tp-sp-min-width);
        margin: 0 auto 36px;
    }

    .hpci-tp_footer {
        flex-direction: column-reverse;
    }

    .hpci-tp_footer_left {
        width: 100%;
    }

    .hpci-tp_footer_right {
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
    }

    .hpci-tp_footer_sns {
        width: 50%;
    }

    .hpci-tp_footer_navi {
        width: 50%;
    }

    .hpci-tp_footer_address {
        margin-top: 32px;
        text-align: center;
    }

    .hpci-tp_footer_address span {
        margin-top: 14px;
        margin-bottom: 15px;
        font-size: 1.2rem;
    }


    .hpci-tp_cookie_panel.hpci-tp_active {
        padding: 0px;
        height: 250px;
    }

/*
    .hpci-tp_cookie_box .hpci-tp_cookie_close_btn {
        margin: 10px 10px 0 0;
    }
*/

    .hpci-tp_cookie_box {
        display: block;
    }

    .hpci-tp_cookie_box div {
        display: block;
        padding: 5px 10px 0px;
        font-size: 1.4rem;
        margin-top: 3px;
    }

    .hpci-tp_cookie_box .hpci-tp_cookie_message_and_ok_btn {
        padding: 10px;
    }

    .hpci-tp_cookie_message_and_ok_btn .hpci-tp_cookie_ok_btn {
        padding-top: 5px;
    }

    .hpci-tp_cookie_box div a {
        margin: 0 auto 0;
        margin-top: 11px;
        width: 169px;
        height: 40px;
    }






    .hpci-tp_footer_copyright {
        font-size: 1.0rem;
    }

/*----------------------------------------------*/
/*Contents*/
/*----------------------------------------------*/
    .hpci-17_ft_content,
    .hpci-18_ai_image,
    .hpci-19_ltrt_sentence,
    .hpci-20_liri_images,
    .hpci-21_ltri_sentence_image,
    .hpci-22_lirt_image_sentence,
    .hpci-23_ss_table,
    .hpci-49_ft_content
    {
        font-size  : 1.4rem;
    }

/*★確認用*/
    .hpci-tp_footer_sns img {
        width: 100%;
    }
    .hpci-tp_footer_navi img {
        width: 100%;
    }



}