/* localapp-css*/

/*----------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------
---- Business－PR/People－PR 専用のCSSクラス -start-------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------
*/


/*--背景画像セット START-----------------------------------------------------------------------------------------------------------------*/
:root {

    /* top-LOGO-画像設定： */
    --url_img_top_logo_pr_pr:  url(../img/default/top-logo-pr-pr.png);

    /* PR編集画面用-画像設定： */
    --url_img_display_type001:   url(../img/default/img-prinfo-displaytype-001.png);
    --url_img_display_type002:   url(../img/default/img-prinfo-displaytype-002.png);
    --url_img_display_type003:   url(../img/default/img-prinfo-displaytype-003.png);

    --url_img_ai_editable_type001:  url(../img/default/img-ai-editable-type-001.png);
    --url_img_ai_editable_type002:  url(../img/default/img-ai-editable-type-002.png);

    --url_img_press_flg_type001:  url(../img/default/img-presss-flg-type-001.png);
    --url_img_press_flg_type002:  url(../img/default/img-presss-flg-type-002.png);


    /* DM配布設定画面用-画像設定： */
    --url_img_distribution_seg_type000:  url(../img/default/img-distribution-seg-type-000.png);
    --url_img_distribution_seg_type001:  url(../img/default/img-distribution-seg-type-001.png);
    --url_img_distribution_seg_type002:  url(../img/default/img-distribution-seg-type-002.png);
    --url_img_distribution_seg_type003:  url(../img/default/img-distribution-seg-type-003.png);
    --url_img_distribution_seg_type004:  url(../img/default/img-distribution-seg-type-004.png);
    --url_img_distribution_seg_type011:  url(../img/default/img-distribution-seg-type-011.png);

    --url_img_period_seg_01mth:  url(../img/default/img-period-seg-01mth.png);
    --url_img_period_seg_02mth:  url(../img/default/img-period-seg-02mth.png);
    --url_img_period_seg_03mth:  url(../img/default/img-period-seg-03mth.png);
    --url_img_period_seg_06mth:  url(../img/default/img-period-seg-06mth.png);
    --url_img_period_seg_12mth:  url(../img/default/img-period-seg-12mth.png);

    --url_img_dm_list_flg_type001:  url(../img/default/img-dm-list-flg-type-001.png);
    --url_img_dm_list_flg_type002:  url(../img/default/img-dm-list-flg-type-002.png);


    /* エリア検索用MAP-画像設定： */
    --url_img_map_japan:              url(../img/default/img-map-japan.png);
    --url_img_map_hokkaido:           url(../img/default/img-map-hokkaido.png);
    --url_img_map_tohoku:             url(../img/default/img-map-tohoku.png);
    --url_img_map_kanto:              url(../img/default/img-map-kanto.png);
    --url_img_map_hokurikukoshinetsu: url(../img/default/img-map-hokurikukoshinetsu.png);
    --url_img_map_tokai:              url(../img/default/img-map-tokai.png);
    --url_img_map_kansai:             url(../img/default/img-map-kansai.png);
    --url_img_map_tyugoku:            url(../img/default/img-map-tyugoku.png);
    --url_img_map_shikoku:            url(../img/default/img-map-shikoku.png);
    --url_img_map_kyusyu:             url(../img/default/img-map-kyusyu.png);
    /* エリア検索用MAP-文字列画像設定： */
    --url_img_map_string_hokkaido:           url(../img/default/img-map-string-hokkaido.png);
    --url_img_map_string_tohoku:             url(../img/default/img-map-string-tohoku.png);
    --url_img_map_string_kanto:              url(../img/default/img-map-string-kanto.png);
    --url_img_map_string_hokurikukoshinetsu: url(../img/default/img-map-string-hokurikukoshinetsu.png);
    --url_img_map_string_tokai:              url(../img/default/img-map-string-tokai.png);
    --url_img_map_string_kansai:             url(../img/default/img-map-string-kansai.png);
    --url_img_map_string_tyugoku:            url(../img/default/img-map-string-tyugoku.png);
    --url_img_map_string_shikoku:            url(../img/default/img-map-string-shikoku.png);
    --url_img_map_string_kyusyu:             url(../img/default/img-map-string-kyusyu.png);


    /* 法人検索結果-画面用-画像設定： */
    --url_img_csv_download:          url(../img/default/img-csv-download.png);

}

.img_top_logo_pr_pr      { background-image: var(--url_img_top_logo_pr_pr);  background-size: contain; background-repeat: no-repeat; }

.img_pr_display_type001  { background-image: var(--url_img_display_type001);  background-size: contain; background-repeat: no-repeat; }
.img_pr_display_type002  { background-image: var(--url_img_display_type002);  background-size: contain; background-repeat: no-repeat; }
.img_pr_display_type003  { background-image: var(--url_img_display_type003);  background-size: contain; background-repeat: no-repeat; }

.img_ai_editable_type001 { background-image: var(--url_img_ai_editable_type001);  background-size: contain; background-repeat: no-repeat; }
.img_ai_editable_type002 { background-image: var(--url_img_ai_editable_type002);  background-size: contain; background-repeat: no-repeat; }

.img_press_flg_type001 { background-image: var(--url_img_press_flg_type001);  background-size: contain; background-repeat: no-repeat; }
.img_press_flg_type002 { background-image: var(--url_img_press_flg_type002);  background-size: contain; background-repeat: no-repeat; }


.img_distribution_seg_type000 { background-image: var(--url_img_distribution_seg_type000);  background-size: contain; background-repeat: no-repeat; }
.img_distribution_seg_type001 { background-image: var(--url_img_distribution_seg_type001);  background-size: contain; background-repeat: no-repeat; }
.img_distribution_seg_type002 { background-image: var(--url_img_distribution_seg_type002);  background-size: contain; background-repeat: no-repeat; }
.img_distribution_seg_type003 { background-image: var(--url_img_distribution_seg_type003);  background-size: contain; background-repeat: no-repeat; }
.img_distribution_seg_type004 { background-image: var(--url_img_distribution_seg_type004);  background-size: contain; background-repeat: no-repeat; }
.img_distribution_seg_type011 { background-image: var(--url_img_distribution_seg_type011);  background-size: contain; background-repeat: no-repeat; }

.img_period_seg_01mth { background-image: var(--url_img_period_seg_01mth);  background-size: contain; background-repeat: no-repeat; }
.img_period_seg_02mth { background-image: var(--url_img_period_seg_02mth);  background-size: contain; background-repeat: no-repeat; }
.img_period_seg_03mth { background-image: var(--url_img_period_seg_03mth);  background-size: contain; background-repeat: no-repeat; }
.img_period_seg_06mth { background-image: var(--url_img_period_seg_06mth);  background-size: contain; background-repeat: no-repeat; }
.img_period_seg_12mth { background-image: var(--url_img_period_seg_12mth);  background-size: contain; background-repeat: no-repeat; }

.img_dm_list_flg_type001 { background-image: var(--url_img_dm_list_flg_type001);  background-size: contain; background-repeat: no-repeat; }
.img_dm_list_flg_type002 { background-image: var(--url_img_dm_list_flg_type002);  background-size: contain; background-repeat: no-repeat; }



.img_map_japan              { background-image: var(--url_img_map_japan);  background-size: contain; background-repeat: no-repeat; }
.img_map_hokkaido           { background-image: var(--url_img_map_hokkaido);  background-size: contain; background-repeat: no-repeat; }
.img_map_tohoku             { background-image: var(--url_img_map_tohoku);  background-size: contain; background-repeat: no-repeat; }
.img_map_kanto              { background-image: var(--url_img_map_kanto);  background-size: contain; background-repeat: no-repeat; }
.img_map_hokurikukoshinetsu { background-image: var(--url_img_map_hokurikukoshinetsu);  background-size: contain; background-repeat: no-repeat; }
.img_map_tokai              { background-image: var(--url_img_map_tokai);  background-size: contain; background-repeat: no-repeat; }
.img_map_kansai             { background-image: var(--url_img_map_kansai);  background-size: contain; background-repeat: no-repeat; }
.img_map_tyugoku            { background-image: var(--url_img_map_tyugoku);  background-size: contain; background-repeat: no-repeat; }
.img_map_shikoku            { background-image: var(--url_img_map_shikoku);  background-size: contain; background-repeat: no-repeat; }
.img_map_kyusyu             { background-image: var(--url_img_map_kyusyu);  background-size: contain; background-repeat: no-repeat; }

.img_map_string_hokkaido           { background-image: var(--url_img_map_string_hokkaido);  background-size: contain; background-repeat: no-repeat; }
.img_map_string_tohoku             { background-image: var(--url_img_map_string_tohoku);  background-size: contain; background-repeat: no-repeat; }
.img_map_string_kanto              { background-image: var(--url_img_map_string_kanto);  background-size: contain; background-repeat: no-repeat; }
.img_map_string_hokurikukoshinetsu { background-image: var(--url_img_map_string_hokurikukoshinetsu);  background-size: contain; background-repeat: no-repeat; }
.img_map_string_tokai              { background-image: var(--url_img_map_string_tokai);  background-size: contain; background-repeat: no-repeat; }
.img_map_string_kansai             { background-image: var(--url_img_map_string_kansai);  background-size: contain; background-repeat: no-repeat; }
.img_map_string_tyugoku            { background-image: var(--url_img_map_string_tyugoku);  background-size: contain; background-repeat: no-repeat; }
.img_map_string_shikoku            { background-image: var(--url_img_map_string_shikoku);  background-size: contain; background-repeat: no-repeat; }
.img_map_string_kyusyu             { background-image: var(--url_img_map_string_kyusyu);  background-size: contain; background-repeat: no-repeat; }

.img_csv_download    { background-image: var(--url_img_csv_download);  background-size: contain; background-repeat: no-repeat; }


/*--背景画像セット END-----------------------------------------------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------*/
/*-------------------------------- PR専用カテゴリカラー --------------------------*/
/*---------------------------------------------------------------------------*/
.bg_color_top      {background: linear-gradient(.25turn, grey, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, grey);}
.bg_color_tech     {background: linear-gradient(.25turn, navy, 1%, rgb(235, 235, 235),  5%, rgb(235, 235, 235), 95%, rgb(235, 235, 235), 99%, navy);}
.bg_color_gourmet  {background: linear-gradient(.25turn, tomato, 1%, rgb(235, 235, 235), 5%, rgb(235, 235, 235), 95%, rgb(235, 235, 235), 99%, tomato);}
.bg_color_healthy  {background: linear-gradient(.25turn, forestgreen, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, forestgreen);}
.bg_color_travel   {background: linear-gradient(.25turn, palegreen, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, palegreen);}
.bg_color_business {background: linear-gradient(.25turn, black, 1%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 99%, black);}
.bg_color_event    {background: linear-gradient(.25turn, lightpink, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, lightpink);}
.bg_color_entertmt {background: linear-gradient(.25turn, lemonchiffon, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, lemonchiffon);}
.bg_color_lifestyle{background: linear-gradient(.25turn, lightcyan, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, lightcyan);}



/*---------------------------------------------------------------------------*/
/*-------------------------------- PR専用業種カラー --------------------------*/
/*---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------------------------*/
/*---------------- (base-aoxyz.cssをlocalapp.cssで上書き) ダウンへスクロールするボタン要素 ID ----*/
/*--------------------------------------------------------------------------------------------*/
gf
/*----------------トップ/ダウンへスクロールするボタン要素 ID --------------------------------*/
/*スクロールトップボタン-----------------------------*/
#id_btn_to_top {
    /*isActiveで表示するため、ここの設定は不要だが、id_btn_to_top の定義は必須のため以下を記述*/
    /*画面内で位置固定=絶対(fixed)配置*/
    position: fixed;
    display: inline-block;
    /*位置は別途レスポンジブ対応*/
    /*枠の大きさ*/
    height: 35px;
    width:  35px;
    border-radius: 5px;
    /*矢印の文字*/
    color: white;
    text-decoration:  none;
    background-color: yellow;
    cursor:pointer;
    /* スクロール前は非表示--jsで表示をコントロール- */
    opacity: 0.5;
    transition: all 0.65s;

    z-index: 401; /*TOP-scroll-btn*/
}
/*jsでクラスをaddするためid定義  isActive の定義を記載しないと、何も表示されない*/
#id_btn_to_top.isActive {
    /*画面内で位置固定=絶対(fixed)配置*/
    position: fixed;
    display: inline-block;
    /*位置は別途レスポンジブ対応*/
    /*枠の大きさ*/
    height: 35px;
    width:  35px;
    border-radius: 5px;
    /*矢印の文字*/
    color: white;
    text-decoration:  none;
    background-color: yellow;
    cursor:pointer;
    /* スクロール前は非表示--jsで表示をコントロール- */
    opacity: 0.5;
    transition: all 0.65s;

    z-index: 401; /*TOP-scroll-btn*/
}
/*スマホレスポンシブ対応--最小が481pxに適用する＝スマホ/タブレット*/
@media screen and (max-width: 480px){
    #id_btn_to_top.isActive { top: 90%; right: 20px; /* エリア配置の位置 */ }
}
@media screen and (min-width: 481px) {
    #id_btn_to_top.isActive { top: 90%; right: 20px; /* エリア配置の位置 */ }
}
#id_btn_to_top.isActive:hover {
    height: 50px;
    width:  50px;
}
#id_btn_to_top.isActive::before {
    /*絶対(absolute)配置*/
    position: absolute;
    display:  block;
    /*-- 枠内での矢印棒の位置 -- */
    top:    8px;
    bottom: 0;
    left:   0;
    right:  0;
    content:  '';
    /*-- 矢印棒の長さ -- */
    width: 15px;
    height: 15px;
    /*-- 矢印棒の太さ -- */
    border-top: solid 4px;
    border-right: solid 4px;
    border-color:white;
    margin:  auto;
    transform: rotate(-45deg);
}





/*スクロールダウンボタン-----------------------------*/
#id_btn_to_bottom {
    /*画面内で位置固定=絶対(fixed)配置*/
    position: fixed;
    display:  inline-block;
    /*位置は別途レスポンジブ対応*/
    /*枠の大きさ*/
    height: 35px;
    width:  35px;
    border-radius: 5px;
    /*矢印の文字*/
    color: white;
    text-decoration:  none;
    background-color: blue;
    cursor:pointer;
    opacity: 0.5;
    transition: all 0.65s;

    z-index: 401; /*DOWN-scroll-btn*/
}
#id_btn_to_bottom:hover {
    height: 50px;
    width:  50px;
}
#id_btn_to_bottom::before {
    /*絶対(absolute)配置*/
    position: absolute;
    display:  block;
    /*-- 枠内での矢印棒の位置 -- */
    top:    0;
    bottom: 8px;
    left:   0;
    right:  0;
    content:  '';
    /*-- 矢印棒の長さ -- */
    width: 15px;
    height: 15px;
    /*-- 矢印棒の太さ -- */
    border-top: solid 4px;
    border-right: solid 4px;
    border-color:white;
    margin:  auto;
    transform: rotate(135deg);
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    #id_btn_to_bottom { top: 15%; right: 20px; /* エリア配置の位置 */ }
}
@media screen and (min-width: 481px) {
    #id_btn_to_bottom { top: 20%; right: 20px; /* エリア配置の位置 */ }
}

/*--------------------------------------------------------------------------------------------*/
/*---------------- ダウンへスクロールするボタン要素 ID ------------------------------------------*/
/*--------------------------------------------------------------------------------------------*/






/*------------------------------------------------------------------------------------------------------------------------*/
/*------------------------ (base-aoxyz.cssをlocalapp.cssで上書き) イメージ部品:downscroll-----------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------*/

/*スクロールダウン全体の場所*/
.scrolldown_mark{
    position:fixed;
    /*描画位置  デフォルト設定は右下  */
    top:30%;
    right:10%;

    z-index: 99;   /*-- 重なり */
}

/*Scrollテキストの描写*/
.scrolldown_mark span{
    /*描画位置*/
    position: absolute;
    left:-10px;
    bottom:-65px;
    /*テキストの形状*/
    color: rgb(70, 220, 255);
    opacity: 0.9;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown_mark:before {
    content: "";
    /*位置*/
    position: absolute;
    left:-5.5px;
    /*丸の形状*/
    width:13px;
    height:13px;
    border-radius: 50%;

    background:rgb(70, 220, 255);
    opacity: 0.8;

    /*動き ループ*/
    animation:
    circlemove 2.0s ease-in-out infinite,
    cirlemovehide 2.0s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:80px;}
     100%{bottom:-5px;}
}
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
    0%{opacity:0}
    50%{opacity:1;}
    80%{opacity:0.9;}
    100%{opacity:0;}
}
@media screen and (max-width: 480px){
    .scrolldown_mark:before {
    left:-4.5px;
    /*丸の形状*/
    width:10px;
    height:10px;
    }
}
/* 線の描写 */
.scrolldown_mark:after{
    /*位置*/
    position: absolute;
    content:"";

    bottom:0;
    left:0;
    /*線の形状*/
    width:2px;
    height: 90px;
    background:rgb(70, 220, 255);
    opacity: 0.8;
}

/*--------------------------------------------------------------------------------------------*/
/*------------------------イメージ部品:downscroll-----------------------------------*/
/*--------------------------------------------------------------------------------------------*/





/*--------------------------------------------------------------------------------------------*/
/*-------------------------------- common-slider nonJS スライダーCSS --------------------------*/
/*--------------------------------------------------------------------------------------------*/
/* 共通部品 common-slider のCSSオーバーライド*/
.common-slider {
    max-width: 1400px;
    height:    160px;
}
/*base-aoxyz.css の slider-item に追記*/
.slider-item {
    position: relative;  /* ★下層のabsoluteを枠内で利かすため aタグなど★ */
    text-align: center;  /* アイテムのaタグなどのインライン要素を中央へセット(親要素である slider-item にセットする必要あり) */
    border-radius:  5px;        /* 角丸指定 */
}
.slider-item:hover{
    box-shadow: 10px 10px 20px rgba(0, 0, 60, 0.9);
    border-radius:  10px;        /* 角丸指定 */
    transition: 0.5s; /* アニメーションの速度 */
}
/*<a>*/
.slider-item .div_a {
    text-decoration: none;
    display:blcok;
    padding:0px;
}
/*<div - div_left>*/
.common-slider .div_left{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    display: inline-block;   /* div_leftとdiv_rightを横並びへ */
    width:60%;               /* div_left:65%  div_right:30% */
    height:150px;            /*tag_pic の画像の縦最大幅と同じ*/
  /*  background-color: red; */
}
/*<div - title_h*/
.common-slider .title_h{
    margin: 0;
    padding: 0;
    width:100%;
    height:65%;             /* title 65% : それ以外35%*/
    line-height: 25px;      /* 行間 */
    color: black;
    text-overflow: ellipsis " [..]";
    overflow: hidden;
    white-space: wrap;
}
/*<div - sub_info>*/
.common-slider .sub_info{
    margin: 0;
    padding: 0;
    width:100%;
    line-height: 15px;
    color: grey;
}
/*<picuture - div_right>*/
.common-slider .div_right{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    display: inline-block;   /* div_leftとdiv_rightを横並びへ */
    width:35%;               /* div_left:65%  div_right:35% */
    min-height:150px;
  /*  background-color: yellow; */
}
/*<img>*/
/*<img>タグではwidth heightを指定せず、その親で指定することでレスポンシブに対応できる*/
.common-slider .div_right .tag_pic{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    margin:0px;             /*サイズ変更の際に中央配置へ縦横の自動調整*/
    max-width:100%;
    max-height:150px;        /*画像の縦最大幅*/
    object-fit: contain;
}
/*<hr 区切り線>*/
.common-slider hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 3px dotted lightgray;
}
/*スマホレスポンシブ対応--最大が700pxに適用する＝スマホとタブレット*/
/*画像＋文章の幅があるため、一概に960pxにはできない*/
@media screen and (max-width: 700px){
    .slider-item {
        min-width: 300px;
    }

}

/*--------------------------------------------------------------------------------------------*/
/*-------------------------------- common-slider nonJS スライダーCSS --------------------------*/
/*--------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-複合検索 -- start ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/

.box_flex_combination {
    display: flex;                /* フレックスボックスにする */

    flex-direction: row;          /* 主軸方向の定義 */
    flex-wrap: wrap;              /* 折り返し有無指定 */
    justify-content:start;        /* 主軸方向(複数の場合)-間隔配置 ( start / space-around / center )  */
    align-content:stretch;        /* 主軸でない方向(複数の場合)-間隔配置 */
    align-items:start;            /* 主軸でない方向-制約範囲内で拡張(center/flex-start-/start/stretch) */

    max-width: 1000px;
    
    padding: 0px 0px ; /* 内周 */
    margin-right:auto; /* 左寄せ */
}
.box_flex_combination_item {
    align-self: center;  /* アイテムの垂直方向の位置を指定 */
    text-align: center;  /* アイテムのaタグなどのインライン要素を中央へセット(親要素である box_flex_combination_item にセットする必要あり) */
    position: relative;  /* ★下層のabsoluteを枠内で利かすため★ */
    max-width: 300px;
    min-width: 300px;
    padding: 0px;
    border-radius:  5px;        /* 角丸指定 */
}


/*表題*/
.label_tag_combination {
    max-width: 300px;  /* for_pc_div_img_map_area の width とそろえる*/
    text-align: center;
    margin-right:auto; /* 左寄せ */
    padding: 0px 0px ; /* 内周 */
}

.box_search_tag_button {
    box-sizing: border-box;
    height:50px;
    margin:1px 0px 10px;
    padding:5px;
}
.box_search_tag_button{
    border: 1px solid lightsteelblue;
    border-radius: 6px;
}
.box_search_tag_button { width: 50%; right:5px; background-color: var(--AOXYZ_blue); /*AOXYZblue*/ }

.tag_combination_input  {
    box-sizing: border-box;
    width: 100%;
    padding:5px;
    border: 1px solid lightsteelblue;
    border-radius: 5px;
    height:40px;
    text-align-last: center;
    font-size: large;
}
.tag_combination_input:disabled {
    background-color:lightgrey;
}

/* JSで入力枠の拡大表示/縮小表示を切り替え */
.tag_combination_input.twofold_frame  { height:70px;}

.tag_combination_input:focus {
    outline:0;
    animation: kf_border-contact-flash .5s forwards;
}

/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 700px){
    .box_flex_combination{
        justify-content:center;        /* 主軸方向(複数の場合)-間隔配置 ( start / space-around / center )  */
        align-items:center;            /* 主軸でない方向-制約範囲内で拡張(center/flex-start-/start/stretch) */
    }
    .label_tag_combination{
        margin-left:auto; margin-right:auto;   /* 中央寄せ */
    }
}

/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-複合検索 -- end ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-企業分類検索 -- start ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/

/*表題*/
.label_tag_compclassification {
    max-width: 600px;  /* for_pc_div_img_map_area の width とそろえる*/
    text-align: center;
    margin-left:auto; margin-right:auto;
    padding: 0px 0px ; /* 内周 */
}

.tag_compclassification_input  {
    box-sizing: border-box;
    width: 100%;
    padding:5px;
    border: 1px solid lightsteelblue;
    border-radius: 5px;
    height:35px;
    text-align-last: center;
    font-size: large;
}
.tag_compclassification_input:disabled {
    background-color:lightgrey;
}

/* JSで入力枠の拡大表示/縮小表示を切り替え */
.tag_compclassification_input.twofold_frame  { height:70px;}

.tag_compclassification_input:focus {
    outline:0;
    animation: kf_border-contact-flash .5s forwards;
}


/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-企業分類検索 -- end ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-エリア検索 -- start ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/

/*スマホレスポンシブ対応--最小480px＝タブレット or PC*/
@media screen and (min-width: 701px) {
    .for_mobile_table_img_map_area{
        display: none;
    }
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 700px){
    .for_pc_div_img_map_area{
        display: none;
    }
}
/*表題*/
.label_tag_for_tgt_clt_search ,.label_tag_area {
    max-width: 600px;  /* for_pc_div_img_map_area の width とそろえる*/
    text-align: center;
    margin-left:auto; margin-right:auto;
    padding: 0px 0px ; /* 内周 */
}

.tag_postalcode_input  {
    box-sizing: border-box;
    width: 100%;
    padding:5px;
    border: 1px solid lightsteelblue;
    border-radius: 5px;
    height:35px;
    text-align-last: center;
    font-size: large;
}
.tag_postalcode_input:disabled {
    background-color:lightgrey;
}

/* JSで入力枠の拡大表示/縮小表示を切り替え */
.tag_postalcode_input.twofold_frame  { height:70px;}

.tag_postalcode_input:focus {
    outline:0;
    animation: kf_border-contact-flash .5s forwards;
}


/*地図画像や文字画像のキャンバス基本設定(共通設定)*/
/* 画像の位置やサイズは、今回、固定で指定しているため、ここではキャンバスのwidth/heightを変えると、サイズや位置もすべて変更の必要あり*/
.for_pc_div_img_map_area{
    position: relative;
    /*-- 画像のサイズをディスプレイに合わせるCSS */
    width: 600px;   /* label_tag_area の width とそろえる*/
    height: 500px;
    margin-left: auto; margin-right: auto;
}
/*地図画像の基本設定(共通設定)*/
.for_pc_div_img_map_area .for_pc_map_base{
    /*親要素の範囲内で位置を定義*/
    position: absolute; display: block;
    width: 100%; height: 100%;
    /* 位置 */
    top: 0; left: 0;
}
/*文字画像の基本設定(共通設定)*/
.for_pc_div_img_map_area .for_pc_map_string_base{
    /*親要素の範囲内で位置を定義*/
    position: absolute; display: block;
    border: 3px solid rgba(0, 0, 0, 0.5); /* 未選択のボーダーは半透明 */
    border-radius: 10%;
    opacity:0.8;                          /* 未選択は半透明 */
}
/*ホバー時の変化*/
 .for_pc_div_img_map_area .for_pc_map_string_hokkaido:hover
,.for_pc_div_img_map_area .for_pc_map_string_tohoku:hover
,.for_pc_div_img_map_area .for_pc_map_string_kanto:hover
,.for_pc_div_img_map_area .for_pc_map_string_hokurikukoshinetsu:hover
,.for_pc_div_img_map_area .for_pc_map_string_tokai:hover
,.for_pc_div_img_map_area .for_pc_map_string_kansai:hover
,.for_pc_div_img_map_area .for_pc_map_string_tyugoku:hover
,.for_pc_div_img_map_area .for_pc_map_string_shikoku:hover
,.for_pc_div_img_map_area .for_pc_map_string_kyusyu:hover
{
    background-color: rgb(180, 255, 255);
    border: 3px solid rgba(0, 0, 0, 1); /* 未選択のボーダーは透明 */
    opacity:1.0;
}
/*文字画像の画像サイズ＆画像配置*/
.for_pc_div_img_map_area .for_pc_map_string_hokkaido            { width: 130px; height: 70px;  /*位置*/ top:  5%; left:  55%; }
.for_pc_div_img_map_area .for_pc_map_string_tohoku              { width: 110px; height: 130px; /*位置*/ top: 25%; left:  80%; }
.for_pc_div_img_map_area .for_pc_map_string_kanto               { width: 110px; height: 130px; /*位置*/ top: 55%; left:  80%; }
.for_pc_div_img_map_area .for_pc_map_string_hokurikukoshinetsu  { width: 150px; height: 100px; /*位置*/ top: 25%; left:  42%; }
.for_pc_div_img_map_area .for_pc_map_string_tokai               { width: 100px; height: 100px; /*位置*/ top: 65%; left:  60%; }
.for_pc_div_img_map_area .for_pc_map_string_kansai              { width: 110px; height: 110px; /*位置*/ top: 70%; left:  41%; }
.for_pc_div_img_map_area .for_pc_map_string_tyugoku             { width: 100px; height: 100px; /*位置*/ top: 34%; left:  22%; }
.for_pc_div_img_map_area .for_pc_map_string_shikoku             { width: 100px; height: 100px; /*位置*/ top: 72%; left:  23%; }
.for_pc_div_img_map_area .for_pc_map_string_kyusyu              { width: 110px; height: 130px; /*位置*/ top: 35%; left:  2%; }




/*モバイル用レスポンシブ---------------------------------------------*/
/*地図画像や文字画像のキャンバスTABLE基本設定(共通設定)*/
.for_mobile_table_img_map_area{
    /*-- 画像のサイズをディスプレイに合わせるCSS */
    width: 400px;
    height: auto;
    margin-left: auto; margin-right: auto;
    /*-- テーブルのセル同士の距離を指定 collapse:境界無し  */
    border-collapse: collapse;
}
/*-- trテーブルデータ要素 */
.for_mobile_table_img_map_area tr{
    border: solid 0px black;
    height: 95px;
}
/*-- tdテーブルデータ要素 */
.for_mobile_table_img_map_area td{
    border: solid 0px black;
}
.for_mobile_table_img_map_area td:hover {
	background-color: rgb(180, 255, 255);
}
/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-エリア検索 -- end ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/






/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-エリア検索-市区町村絞り込み検索 -- start ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/

/*-- 切替用タブ(エリア切替TAB) -- start -------------------------------------------------*/
.tab_btn_clntsrch{
    display: none; /*タブの切り替えを制御するラジオボタンを非表示に*/
}
.tab_label_clntsrch_wrap{
    /*デフォルト値キャンセル*/
    padding:0; margin: 0; list-style-type:none;
    display:flex; /*ボタンを横並び*/
    margin-top:5px;
    justify-content:space-around; /*横幅いっぱいに配置*/
    border-bottom:15px solid darkgreen;
}
/*TABのラベル表示設定*/
.tab_label_clntsrch{
    display:block;
    /*レスポンシブ用に個別タブの幅をセット*/
    min-width: 100px;
    padding: 10px 0px;
    margin:0px;
    box-sizing:border-box;
    border-top:  1px solid grey;
    border-left: 1px solid grey;
    border-right:1px solid grey;
    border-radius: 4px 4px 0 0;
    background-color: whitesmoke;
    text-align:center;
    transition: all 0.5s  ease-in-out;
}
@media screen and (min-width: 450px) and (max-width: 900px){
    .tab_label_clntsrch {
        min-width: 50px;
    }
}
@media screen and (max-width: 450px){
    .tab_label_clntsrch {
        min-width: 10px;
    }
}
/* Non-check and hovering */
#id_tab_input_clntsrch_001 ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_001:hover,
#id_tab_input_clntsrch_002 ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_002:hover,
#id_tab_input_clntsrch_003 ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_003:hover,
#id_tab_input_clntsrch_004 ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_004:hover,
#id_tab_input_clntsrch_005 ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_005:hover,
#id_tab_input_clntsrch_006 ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_006:hover,
#id_tab_input_clntsrch_007 ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_007:hover,
#id_tab_input_clntsrch_008 ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_008:hover,
#id_tab_input_clntsrch_009 ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_009:hover
{
    background-color: darkgreen;
    color: white
}
/* on-check */
#id_tab_input_clntsrch_001:checked ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_001,
#id_tab_input_clntsrch_002:checked ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_002,
#id_tab_input_clntsrch_003:checked ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_003,
#id_tab_input_clntsrch_004:checked ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_004,
#id_tab_input_clntsrch_005:checked ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_005,
#id_tab_input_clntsrch_006:checked ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_006,
#id_tab_input_clntsrch_007:checked ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_007,
#id_tab_input_clntsrch_008:checked ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_008,
#id_tab_input_clntsrch_009:checked ~ .tab_label_clntsrch_wrap  #id_tab_label_clntsrch_009
{
    background-color: darkgreen;  /* チェックON */
    color: white;
    font-weight: bold;
}

/*タブ切替時の表示非表示の初期設定=none*/
.tab_content{
    padding: 5px 0px 5px 1px;
    display: none; /*初期状態*/
}
#id_tab_input_clntsrch_001:checked ~ #id_tab_content_clntsrch_001,
#id_tab_input_clntsrch_002:checked ~ #id_tab_content_clntsrch_002,
#id_tab_input_clntsrch_003:checked ~ #id_tab_content_clntsrch_003,
#id_tab_input_clntsrch_004:checked ~ #id_tab_content_clntsrch_004,
#id_tab_input_clntsrch_005:checked ~ #id_tab_content_clntsrch_005,
#id_tab_input_clntsrch_006:checked ~ #id_tab_content_clntsrch_006,
#id_tab_input_clntsrch_007:checked ~ #id_tab_content_clntsrch_007,
#id_tab_input_clntsrch_008:checked ~ #id_tab_content_clntsrch_008,
#id_tab_input_clntsrch_009:checked ~ #id_tab_content_clntsrch_009
{
    display: block;  /* チェックON */
}
/*-- 切替用タブ(エリア切替TAB) -- end -------------------------------------------------*/


.area_editor_aside {
    position: relative;
    background-color: whitesmoke;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    text-align: left;
}

.client_search_area_seg{
    display:block;
    min-width: 100px;
    padding: 20px 0px 10px 0px;
    margin:0px;
    border-bottom:  1px dashed grey;
}


/*---------- box_flex_client_search_checkbox  ターゲット法人 検索画面の市区町村選択CHEXKBOXの表示のCSS ------------------------*/
.box_flex_client_search_checkbox {
    display: flex;                 /* フレックスボックスにする */
    flex-direction: row;           /* アイテムが水平方向に左から右へと配置 */
    flex-wrap: wrap;               /* 折り返し有無指定 */
    justify-content: stretch;      /* 主軸方向(複数の場合)-間隔配置 */
    align-items: flex-start;       /* 主軸でない方向-制約範囲内で拡張(center/flex-start/start/end/stretch) */
    
    max-width: 1400px;
    padding: 0px;
    margin:  0%;              /* 外側の余白 */
    margin-left:auto; margin-right:auto;
}
.box_flex_client_search_checkbox_item {
    align-self: left;    /* アイテムの垂直方向の位置を指定 */
    text-align: left;    /* アイテムのaタグなどのインライン要素を左へセット(親要素であるbox_flex_client_search_checkbox_itemにセットする必要あり) */
    position: relative;  /* ★下層のabsoluteを枠内で利かすため aタグなど★ */
    width: 30%;          /*flexのmax-widthを３等分*/
    min-width: 50px;
    padding: 3px;
    margin:  0%;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
}
.box_flex_client_search_checkbox_item:hover{
    box-shadow: 10px 10px 20px rgba(0, 0, 60, 0.9);
    border-radius:  10px;        /* 角丸指定 */
    transition: 0.5s; /* アニメーションの速度 */
}

/*スマホレスポンシブ対応--最大が700pxに適用する＝スマホとタブレット*/
/*画像＋文章の幅があるため、一概に960pxにはできない*/
@media screen and (max-width: 700px){
    .box_flex_client_search_checkbox {
        flex-direction: column;
        align-items: start;
    }
    .box_flex_client_search_checkbox_item {
        width: 100%;
    }
}
/*---------- box_flex_client_search_checkbox  ターゲット法人 検索画面の市区町村選択CHEXKBOXの表示のCSS ------------------------*/


/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-エリア検索-市区町村絞り込み検索 -- end ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-エリア検索-検索結果画面 -- start ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/

/* ターゲット法人 検索 の契約プラン表示 */
#id_contract_plan_grade_name_area{
    position: static;
    box-sizing: border-box;  /*-- borderまでをwidth100%とするための指定処理、入れないとMarginまで広がってしまう */
    width: 100%;
    background-color: rgba(0, 240, 255, 1);
    color:black;
    padding: 0px 0px 0px 0px;         /* 内側の余白*/

    z-index: 97;   /*-- 重なり */
}

.status_tag {
    text-align: right;
    padding: 5px;   /* 内側の余白*/
    margin: 10px;
}

.box_flex_search_rslt {
    display: flex;                 /* フレックスボックスにする */
    flex-direction: row;           /* アイテムが水平方向に左から右へと配置 */
    flex-wrap: wrap;               /* 折り返し有無指定 */
    justify-content: stretch; /* 主軸方向(複数の場合)-間隔配置 */
    align-items: center;           /* 主軸でない方向-制約範囲内で拡張(center/flex-start/start/end/stretch) */
    
    max-width: 2000px;
    padding: 0px;
    margin:  0%;              /* 外側の余白 */
    margin-left:auto; margin-right:auto;
}
.box_flex_search_rslt_item_min   ,.box_flex_search_rslt_item_1col ,.box_flex_search_rslt_item_2col ,.box_flex_search_rslt_item_3col
,.box_flex_search_rslt_item_4col ,.box_flex_search_rslt_item_5col ,.box_flex_search_rslt_item_6col
,.box_flex_search_rslt_item_7col ,.box_flex_search_rslt_item_8col ,.box_flex_search_rslt_item_9col
,.box_flex_search_rslt_item_for_conditionview ,.box_flex_search_rslt_item_for_underline {
    align-self: center;  /* アイテムの垂直方向の位置を指定 */
    text-align: left;    /* アイテムのaタグなどのインライン要素を中央へセット(親要素であるbox_flex_prlist_index_display_itemにセットする必要あり) */
    position: relative;  /* ★下層のabsoluteを枠内で利かすため aタグなど★ */
    padding: 1px;
    margin:  0px;              /* 外側の余白 */
    border-radius:  0px;        /* 角丸指定 */
}
.box_flex_search_rslt_item_min  { width: 5%;   min-width: 100px;  }
.box_flex_search_rslt_item_1col { width: 96%;  min-width: 350px; }
.box_flex_search_rslt_item_2col { width: 50%;  min-width: 350px; }
.box_flex_search_rslt_item_3col { width: 33.33%;  min-width: 300px; }
.box_flex_search_rslt_item_4col { width: 25%;  min-width: 200px; }
.box_flex_search_rslt_item_5col { width: 19%;  min-width: 200px; }
.box_flex_search_rslt_item_6col { width: 16%;  min-width: 200px; }
.box_flex_search_rslt_item_7col { width: 14%;  min-width: 200px; }
.box_flex_search_rslt_item_8col { width: 12%;  min-width: 200px; }
.box_flex_search_rslt_item_9col { width: 11%;  min-width: 200px; }

.box_flex_search_rslt_item_for_conditionview { width: 24%;  min-width: 250px; }
.box_flex_search_rslt_item_for_fullunderline { width: 100%;  min-width: 10px; }




/* ターゲット法人 検索 CSVファイルダウンロードボタンエリア装飾  --------------------- */
.label_tag_search_rslt_btn {
    max-width: 90%;  /* for_pc_div_img_map_area の width とそろえる*/
    text-align: left;
    margin-left:auto; margin-right:auto;
    padding: 0px 0px ; /* 内周 */
}

/* ターゲット法人 検索 CSVファイルダウンロード画面装飾 start --------------------- */
.cls_csv_download{
    display: inline-block;
    width: 50px;
    padding: 0px;
    border: 2px solid rgba(0, 0, 0, 0); /* 未選択のボーダーは透明 */
    opacity:1;                          /* 未選択は半透明 */
}
#id_btn_download_area:hover .cls_csv_download {
    border: 2px solid rgba(0, 150, 255, 1);
}
.img_tag_area{
    /*色は非表示のためalfa=0*/
    color:rgba(240,240,240,0);
    background-size: contain; background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    .cls_csv_download {
        width: 40px;
        height: 40px;
    }
}
/* ターゲット法人 検索 CSVファイルダウンロード画面装飾 end --------------------- */


/*-----------------------------------------------------------------------------------------------------------------------*/
/*-- 顧客開拓・営業支援-ターゲット法人 検索-エリア検索-検索結果画面 -- end ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------*/




/*--個別PR画面用の配置選択の画像（ラジオ選択）の装飾 - pr_display_type -- start -------------------------------------------*/
input[type=radio].radio_pr_display_type{
    display: none;  /*ラジオボタン非表示*/
}
.cls_pr_display_type{
    display: inline-block;
    width: 32%;
    padding: 1%;
    border: 5px solid rgba(0, 0, 0, 0); /* 未選択のボーダーは透明 */
    opacity:0.3;                          /* 未選択は半透明 */
}
input[type="radio"]:checked + .cls_pr_display_type {
    opacity:1;
    border: 5px solid rgba(0, 150, 255, 1);
}
.img_tag_area{
    /*色は非表示のためalfa=0*/
    color:rgba(240,240,240,0);
    background-size: contain; background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    .cls_pr_display_type .img_tag_area{
        width: 100px;
        height: 140px;
    }
}
/*--個別PR画面用の配置選択の画像（ラジオ選択）の装飾 - pr_display_type -- end -------------------------------------------*/


/*--個別PR画面用の配置選択の画像（ラジオ選択）の装飾 - ai_editable_type -- start -------------------------------------------*/
input[type=radio].radio_ai_editable_type{
    display: none;  /*ラジオボタン非表示*/
}
.cls_ai_editable_type{
    display: inline-block;
    width: 49%;
    padding: 1%;
    border: 5px solid rgba(0, 0, 0, 0); /* 未選択のボーダーは透明 */
    opacity:0.3;                          /* 未選択は半透明 */
}
input[type="radio"]:checked + .cls_ai_editable_type {
    opacity:1;
    border: 5px solid rgba(0, 150, 255, 1);
}
.img_tag_area{
    /*色は非表示のためalfa=0*/
    color:rgba(240,240,240,0);
    background-size: contain; background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    .cls_ai_editable_type .img_tag_area{
        width: 95%;
    }
}
/*--個別PR画面用の配置選択の画像（ラジオ選択）の装飾 - ai_editable_type -- end -------------------------------------------*/




/*--個別PR画面用のPR記事のプレス配信選択の画像（ラジオ選択）の装飾 - press_flg_type -- start -------------------------------------------*/
input[type=radio].radio_press_flg_type{
    display: none;  /*ラジオボタン非表示*/
}
.cls_press_flg_type{
    display: inline-block;
    width: 49%;
    padding: 1%;
    border: 5px solid rgba(0, 0, 0, 0); /* 未選択のボーダーは透明 */
    opacity:0.3;                          /* 未選択は半透明 */
}
input[type="radio"]:checked + .cls_press_flg_type {
    opacity:1;
    border: 5px solid rgba(0, 150, 255, 1);
}
.img_tag_area{
    /*色は非表示のためalfa=0*/
    color:rgba(240,240,240,0);
    background-size: contain; background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    .cls_press_flg_type .img_tag_area{
        width: 95%;
    }
}
/*--個別PR画面用の配置選択の画像（ラジオ選択）の装飾 - press_flg_type -- end -------------------------------------------*/






/*--DM自動配布の STATUSエリアの装飾 - dm_auto_status -- start -------------------------------------------*/
.dm_auto_status {
    list-style: none;     /* リストの先頭記号削除*/
    width: 100%;
    min-width:300px;
    text-align: center;
    overflow: hidden;     /* ボックスに収まらない内容の表示方法*/
}
/*--DM自動配布の STATUSエリアの装飾 - dm_auto_status -- end -------------------------------------------*/


/*--DM自動配布のDM配布の配布区分 選択の画像（ラジオ選択）の装飾 - distribution_seg_type -- start -------------------------------------------*/
input[type=radio].radio_distribution_seg_type{
    display: none;  /*ラジオボタン非表示*/
}
.cls_distribution_seg_type{
    display: inline-block;
    width: 49%;
    padding: 1%;
    border: 5px solid rgba(0, 0, 0, 0); /* 未選択のボーダーは透明 */
    opacity:0.3;                          /* 未選択は半透明 */
}
input[type="radio"]:checked + .cls_distribution_seg_type {
    opacity:1;
    border: 5px solid rgba(0, 150, 255, 1);
}
.img_tag_area{
    /*色は非表示のためalfa=0*/
    color:rgba(240,240,240,0);
    background-size: contain; background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    .cls_distribution_seg_type {
        width: 49%;
    }
    .cls_distribution_seg_type  .img_tag_area{
        width: 80%;
    }
}
/*--DM自動配布のDM配布の配布区分 選択の画像（ラジオ選択）の装飾 - distribution_seg_type -- end -------------------------------------------*/




/*--DM自動配布の配布周期選択の画像（ラジオ選択）の装飾 - dm_auto_period_seg_type -- start -------------------------------------------*/
input[type=radio].radio_dm_auto_period_seg_type{
    display: none;  /*ラジオボタン非表示*/
}
.cls_dm_auto_period_seg_type{
    display: inline-block;
    width: 19%;
    padding: 1%;
    border: 5px solid rgba(0, 0, 0, 0); /* 未選択のボーダーは透明 */
    opacity:0.3;                          /* 未選択は半透明 */
}
input[type="radio"]:checked + .cls_dm_auto_period_seg_type {
    opacity:1;
    border: 5px solid rgba(0, 150, 255, 1);
}
.img_tag_area{
    /*色は非表示のためalfa=0*/
    color:rgba(240,240,240,0);
    background-size: contain; background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    .cls_dm_auto_period_seg_type {
        width: 30%;
        width:85px;
    }
    .cls_dm_auto_period_seg_type  .img_tag_area{
        width: 70%;
    }
}
/*--DM自動配布の配布周期選択の画像（ラジオ選択）の装飾 - dm_auto_period_seg_type -- end -------------------------------------------*/




/*-- DM配布済一覧のリストをメールで必要か否か 選択の画像（ラジオ選択）の装飾 - dm_list_flg_type -- start -------------------------------------------*/
input[type=radio].radio_dm_list_flg_type{
    display: none;  /*ラジオボタン非表示*/
}
.cls_dm_list_flg_type{
    display: inline-block;
    width: 49%;
    padding: 1%;
    border: 5px solid rgba(0, 0, 0, 0); /* 未選択のボーダーは透明 */
    opacity:0.3;                          /* 未選択は半透明 */
}
input[type="radio"]:checked + .cls_dm_list_flg_type {
    opacity:1;
    border: 5px solid rgba(0, 150, 255, 1);
}
.img_tag_area{
    /*色は非表示のためalfa=0*/
    color:rgba(240,240,240,0);
    background-size: contain; background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    .cls_dm_list_flg_type {
        width: 49%;
    }
    .cls_dm_list_flg_type  .img_tag_area{
        width: 80%;
    }
}
/*-- DM配布済一覧のリストをメールで必要か否か 選択の画像（ラジオ選択）の装飾 - dm_list_flg_type -- end -------------------------------------------*/



/*-- DM自動配布設定のお見積り金額の自動計算 の装飾 - estimated_amt_tag -- start -------------------------------------------*/
.estimated_amt_tag {
    box-sizing: border-box;
    width: 100%;
    height:50px;
    margin:5px 0px;
    padding:5px;
}
/*-- DM自動配布設定のお見積り金額の自動計算 の装飾 - estimated_amt_tag -- end -------------------------------------------*/



/*-- DM自動配布設定 確認画面用モーダルウィンドウ系 の装飾 - modal_area -- start -------------------------------------------*/
/*モーダル表示時の背景の設定*/
.modal_area{
  display: block;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 200, 100, 0.4); /*背景半透明*/
}
/*モーダル表示時のコンテンツ内容の背景設定*/
.modal_content_area {
  margin: 30% auto;
  width: 75%;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.5),0 7px 20px 0 rgba(0,0,0,0.8);
  animation-name: modalopen;
  animation-duration: 1s;
}
@keyframes modalopen {
  from {opacity: 0}
  to {opacity: 1}
}
/*モーダルウィンドウの上部画面*/
.modal_header_area {
  padding: 0px;
}
.modal_head_top {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.modal_head_top_title {
  width: 70%;  /* 100 - modal_close_areaのwidht*2 */
  text-align: center;
}
.modal_close_area {
  width: 15%;
  text-align: center;
}
.modal_close_area:hover {
  cursor: pointer;
}
.modal_div_tag {
  display: inline-block;
  width: 100%;
}
/*モーダルウィンドウの下部画面*/
.modal-body {
  padding: 10px 20px;
}
.modal_input_tag {
    /*-- 初期化 --*/
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    background:none;
    /*-- 初期化 --ここまで*/
    display: inline-block;
    width: 45%;
    height:70px;
    margin:0px;
    padding:5px;
}
/*-- DM自動配布設定 確認画面用モーダルウィンドウ系 の装飾 - modal -- end -------------------------------------------*/







/*-------------------------------- AOXYZ-css の上書き の装飾関連 --------------------------------*/
/*box_flex_itemの aタグの影*/

.box_flex_item a , .box_flex_item_mono a{
    position: absolute; /* 親の枠内で絶対値 */
    width: 100%;
    height: 100%;
    /*余白による中央からズレの可能性を排除*/
    margin:0;  
    padding:0; 

    /*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
    -ms-transform: translate(-10%,-30%);    /*旧対応*/
    -webkit-transform: translate(-10%,-30%);/*旧対応*/
    transform: translate(-10%,-30%);

    opacity: 0;
}
/*スマホレスポンシブ対応--最大が960pxに適用する＝タブレットとスマホ*/
@media screen and (max-width: 960px){
    .box_flex_item a , .box_flex_item_mono a{
        /*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
        -ms-transform: translate(-5%,-30%);    /*旧対応*/
        -webkit-transform: translate(-5%,-30%);/*旧対応*/
        transform: translate(-5%,-30%);
    }
}

/*-------------------------------- AOXYZ-css の上書き の装飾関連 --------------------------------*/





/*-------------------------------- PR-PR.jp のメニュー の装飾関連 --------------------------------*/
/* PR-PR.jp のメニュー */
#id_bizpr_menu{
    position: fixed; /*-- 画面スクロールしても残る */
    box-sizing: border-box;  /*-- borderまでをwidth100%とするための指定処理、入れないとMarginまで広がってしまう */
    width: 100%;
    background-color: rgb(15, 130, 0);
    color:grey;

    z-index: 97;   /*-- 重なり */
}

/*スマホレスポンシブ対応--最大が960pxに適用する＝タブレットとスマホ*/
@media screen and (max-width: 960px){
    #id_bizpr_menu {
        display: none;
    }
}
#id_bizpr_menu_mobile{
    position: fixed;         /*-- 画面スクロールしても残る */
    display: flex;           /*-- ハンバーガーメニューとホームを並べる */
    box-sizing: border-box;  /*-- borderまでをwidth100%とするための指定処理、入れないとMarginまで広がってしまう */
    width: 100%;
    min-width:300px;
    max-width:480px;      /*media screenの幅に合わせる*/
    height:60px;          /*--ハンバーガーの上部幅に合わせる--*/
    background: black;

    z-index: 97;   /*-- 重なり */
}

/*スマホレスポンシブ対応--最小が961pxに適用する＝タブレットとスマホ以外*/
@media screen and (min-width: 961px) {
    #id_bizpr_menu_mobile {
        display: none;
    }
}
@media screen and (min-width: 481px) and (max-width: 960px){
    #id_bizpr_menu_mobile {
        /*タブレットでは四角形のメニュータブへ変更*/
        min-width:80px;
        max-width:80px;
        min-height:70px;
        max-height:70px;
    }
}
/*-------------------------------- PR-PR.jp のメニュー の装飾関連 --------------------------------*/



/*-------------------------------- PR-PR ローカルメニューの装飾関連--------------------------------*/

/* トップナビ＝メニュー*/
ul.pr_top_nav {
    list-style: none;     /* リストの先頭記号削除*/
    width: 100%;
    min-width:300px;
    top: 0;
    margin: 0;               /* 外側の余白*/
    padding: 5px 5px 0 5px;    /* 内側の余白*/
    overflow: hidden;     /* ボックスに収まらない内容の表示方法*/
}

/* ホームリンク以外の項目の並べ方 */
ul.pr_top_nav li {
    float: right; /* 浮かせて右に寄せる */
}
/*-- トップナビのリストのリンク（a）CSS */
ul.pr_top_nav li a {
    display: inline-block; /* 横並びに配置する */
    color: white;
    vertical-align: middle;
    padding: 10px 15px; /* 内側の余白*/
    text-decoration: none;
    font-weight: Medium;
  /*  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.73); */ /* 文字にかげをつける */
    border-radius: 15px 15px 15px 15px; /* 枠に丸みをつける */
    transition: 1s; /* アニメーションの速度 */
}

/* トップナビの会社名ホームリンク*/
ul.pr_top_nav li.home {
    float: left; /* 浮かせて左に寄せる */
    padding: 5px;    /* 内側の余白*/
    color: whitesmoke;
}
/*-- カーソルオン */
ul.pr_top_nav li.home a:hover {
    background: whitesmoke;
    color: black;
  /*  text-shadow: 4px 4px 10px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); */ /* 文字にかげをつける */
}


/*-- 現在のナビ */
ul.pr_top_nav li.active a {
    background: white;
    color: black;
    font-weight: Medium;
}
/*-- カーソルオン */
ul.pr_top_nav li a:hover {
    background: whitesmoke;
    color: black;
  /*  text-shadow: 4px 4px 10px rgba(219, 219, 216, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);  *//* 文字にかげをつける */
}

/*スマホレスポンシブ対応--最大が900pxに適用する＝タブレット直前のPC*/
@media screen and (max-width: 1100px){
    ul.topnav li a {
        padding: 10px 5px; /* 画面横幅が狭い場合には、li a のスキマを細くする 内側の余白*/
    }
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    ul.pr_top_nav li {
        float: none; /* 浮かせず、text-alignて位置を調整 */
        margin-left: 10%;
        text-align: left;
    }
    .copyright {
        padding: 0% 25%;
    }
}



/*-- ナビのリストの二段落目リスト（ul）CSS */
ul.pr_top_nav li ul {
    list-style: none; /* リストの先頭記号削除*/
    display: none;    /* 非表示にしておく*/
    margin: 0px;      /* 外側の余白*/
    padding: 0px;     /* 内側の余白*/
    background: rgb(12, 0, 170);
}
ul.pr_top_nav  li ul a:hover {
    display: block;   /* カーソルが乗ったら表示する*/
    transition-delay: 2s; /* アニメーションの速度 */
}

ul.pr_top_nav2 li ul {
    visibility: hidden;
    opacity: 0;
    z-index: 80;
}


ul.pr_top_nav ul  {
    display: none;   /* 非表示にしておく*/
}

/*--------------------------------グローバルメニューの装飾関連--------------------------------*/






/*-------------------------------- ログインユーザー情報表示の装飾関連--------------------------------*/
/* PR-PR.jp のメニュー */
#id_logininfo{
    position: fixed; /*-- 画面スクロールしても残る */
    box-sizing: border-box;  /*-- borderまでをwidth100%とするための指定処理、入れないとMarginまで広がってしまう */
    width: 100%;
    top:130px;
    background-color: rgba(0, 240, 255, 1);
    color:black;
    padding: 0px 10px 0px 10px;         /* 内側の余白*/

    z-index: 97;   /*-- 重なり */
}

#id_logininfo ul{
    list-style: none;     /* リストの先頭記号削除*/
    min-width:300px;
    margin: 0px;          /* 外側の余白*/
    padding: 0px;         /* 内側の余白*/
    overflow: hidden;     /* ボックスに収まらない内容の表示方法*/
    float: right;          /* 浮かせて左に寄せる */
}

/*スマホレスポンシブ対応--最大が960pxに適用する＝タブレットとスマホ*/
@media screen and (max-width: 960px){
    #id_logininfo{
        top:60px;
    }
}

/*-------------------------------- ログインユーザー情報表示の装飾関連--------------------------------*/




/*-------------------------------- register-prinfo 画面の制作依頼ステータス表示の装飾関連--------------------------------*/
/* PR-PR.jp のメニュー */
#id_request_design_flg{
    position: relative; /*-- 画面スクロールしても残る */
    box-sizing: border-box;  /*-- borderまでをwidth100%とするための指定処理、入れないとMarginまで広がってしまう */
    width: 100%;
    background-color: rgba(0, 240, 255, 1);
    color:black;
    padding: 0px 0px 0px 0px;         /* 内側の余白*/

    z-index: 97;   /*-- 重なり */
}

#id_request_design_flg ul{
    list-style: none;     /* リストの先頭記号削除*/
    min-width:300px;
    margin: 0px;          /* 外側の余白*/
    padding: 0px;         /* 内側の余白*/
    overflow: hidden;     /* ボックスに収まらない内容の表示方法*/
    text-align: center;          /* 浮かせて左に寄せる */
}

/*-------------------------------- register-prinfo 画面の制作依頼ステータス表示の装飾関連--------------------------------*/





/*--------------------------------middle-navi(中間メニュー)の装飾関連--------------------------------*/

/* middle-navi＝中間メニュー*/
.midnav {
    list-style: none;     /* リストの先頭記号削除*/
    width: 100%;
    min-width:300px;
    margin: 0;            /* 外側の余白*/
    padding: 1% 5%;       /* 内側の余白*/
    overflow: hidden;     /* ボックスに収まらない内容の表示方法*/
    color: black;
}
.midnav li {
    float: left;           /* 浮かせて左に寄せる */
    margin-right: 15px;            /* 外側の余白*/
}
.midnav a {
    text-decoration: none;     /* 初期化 */
    color: black;
}
/*スマホレスポンシブ対応--最大が960pxに適用する＝タブレットとスマホ*/
@media screen and (max-width: 960px){
    .midnav {
        display: none;
    }
}

/*--------------------------------middle-nav(中間メニュー)の装飾関連--------------------------------*/





/*---------------------  box_register_pr ユーザー新規登録・既存更新用のCSS START ---*/
.box_register_pr {    
    max-width: 1400px;
    min-width:300px;
    margin-left:auto; margin-right:auto;
    padding: 1% 5%;
}
.box_register_pr_tag_input ,.box_register_pr_tag_textarea 
,.box_register_pr_tag_select ,.box_register_pr_tag_button {
    box-sizing: border-box;
    width: 100%;
    margin:1px 0px 10px;
    padding:5px;
}
.box_register_pr_tag_input ,.box_register_pr_tag_textarea 
,.box_register_pr_tag_select {
    border: 1px solid lightsteelblue;
    border-radius: 5px;
}
.box_register_pr_tag_input ,.box_register_pr_tag_select { height:35px;}
.box_register_pr_tag_button { height:50px;}
.box_register_pr textarea         { height:500px; resize:none;}
.box_register_pr .textarea_h100   { height:100px; resize:none;}
.box_register_pr .textarea_free   { height:500px; resize:vertical;}
/* JSで入力枠の拡大表示/縮小表示を切り替え */
.box_register_pr_tag_input.twofold_frame ,.box_register_pr_tag_select.twofold_frame { height:70px;}
.box_register_pr_tag_button.twofold_frame { height:100px;}

/* フォーカス時に高さを変更 */
.box_register_pr_tag_input:focus {
    outline:0;
    height:100px;
}
/* フォーカス時に枠を強調 */
.box_register_pr_tag_textarea:focus ,.box_register_pr_tag_select:focus {
    outline:0;
    animation: kf_border-contact-flash .5s forwards;
}


/* 入力必須項目の入力前の設定 と 入力値が適正な場合の設定 */
.box_register_pr_tag_input:required ,.box_register_pr_tag_textarea:required {
    background-color:rgb(255, 240, 255);
}
.box_register_pr_tag_input:required:valid ,.box_register_pr_tag_textarea:required:valid {
    background-color:whitesmoke;
}

/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    /*type="url"の場合のみ*/
    .box_register_pr_tag_input .type_url{
        height: 70px;
    }
}
/*---------------------  box_register_userinfo_for_pr ユーザー新規登録・既存更新用のCSS END ---*/




/*---------------------  box_body_list_sentence_dbl_col FLEX２列表示用 START ---*/
.box_body_list_sentence_dbl_col {    
    display: flex; /* flexbox */
    flex-wrap: wrap;
}

.box_body_list_sentence_dbl_col_item {
    position: relative; /* ★下層のpaper-cornerのabsoluteを枠内で利かすため★ */
    padding: 10px;
    margin-top:     5px;           /* 外側の余白 */
    margin-bottom:  5px;           /* 外側の余白 */
    margin-left:    1%;            /* 外側の余白 */
    margin-right:   1%;            /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    color: black;
    text-align: left;

    /* 装飾--紙質を出す */
    box-shadow: inset 0 0 30px rgba(145, 145, 145, 0.8);
}
/* スマホ以外 最小画面サイズ481px以上*/
@media screen and (min-width: 481px) {
    .box_body_list_sentence_dbl_col_item {
        min-width: 200px;
        min-height: 50px;
        width: 48%;
    }
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px) {
    .box_body_list_sentence_dbl_col_item {
        min-width: 200px;
        min-height: 50px;
        width: 100%;
    }
}
.box_body_list_sentence_dbl_col_item:nth-child(2n-1) {
    /* グラディエーション背景色指定 */
    background: whitesmoke;
}
.box_body_list_sentence_dbl_col_item:nth-child(2n) {
    /* グラディエーション背景色指定 */
    background: lightgreen;
}
.box_body_list_sentence_dbl_col_button{
    box-sizing: border-box;
    width: 100%;
    margin:1px 0px 10px;
    padding:5px;
    background: whitesmoke;
}



/*---------------------  box_body_list_sentence_dbl_col FLEX２列表示用 END ---*/






/*--------------------------------------------------------------------------------------*/
/*--------------------- box_flex_prlist_index_display  prlist_index-説明文と図形の表示のCSS ------------------------*/
/*--------------------------------------------------------------------------------------*/
.box_flex_prlist_index_display {
    display: flex;                 /* フレックスボックスにする */
    flex-direction: row;           /* アイテムが水平方向に左から右へと配置 */
    flex-wrap: wrap;               /* 折り返し有無指定 */
    justify-content: stretch; /* 主軸方向(複数の場合)-間隔配置 */
    align-items: center;           /* 主軸でない方向-制約範囲内で拡張(center/flex-start/start/end/stretch) */
    
    max-width: 1400px;
    padding: 0px;
    margin:  0%;              /* 外側の余白 */
    margin-left:auto; margin-right:auto;
}
.box_flex_prlist_index_display_item {
    align-self: center;  /* アイテムの垂直方向の位置を指定 */
    text-align: center;  /* アイテムのaタグなどのインライン要素を中央へセット(親要素であるbox_flex_prlist_index_display_itemにセットする必要あり) */
    position: relative;  /* ★下層のabsoluteを枠内で利かすため aタグなど★ */
    width: 50%;           /*flexのmax-widthの半分弱*/
    min-width: 300px;
    padding: 3px;
    margin:  0%;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
}
.box_flex_prlist_index_display_item:hover{
    box-shadow: 10px 10px 20px rgba(0, 0, 60, 0.9);
    border-radius:  10px;        /* 角丸指定 */
    transition: 0.5s; /* アニメーションの速度 */
}
/*<a>*/
.box_flex_prlist_index_display_item .div_a {
    text-decoration: none;
    display:blcok;
    padding:0px;
}
/*<div - div_left>*/
.box_flex_prlist_index_display .div_left{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    display: inline-block;   /* div_leftとdiv_rightを横並びへ */
    width:65%;               /* div_left:65%  div_right:30% */
    height:150px;            /*tag_picの画像の縦最大幅と同じ*/
  /*  background-color: red; */
}
/*<div - title_h*/
.box_flex_prlist_index_display .title_h{
    margin: 0;
    padding: 0;
    width:100%;
    height:75%;             /* title 75% : それ以外25%*/
    line-height: 25px;      /* 行間 */
    color: black;
    text-overflow: ellipsis " [..]";
    overflow: hidden;
    white-space: wrap;
}
/*<div - sub_info>*/
.box_flex_prlist_index_display .sub_info{
    margin: 0;
    padding: 0;
    width:100%;
    line-height: 15px;
    color: grey;
}
/*<picuture - div_right>*/
.box_flex_prlist_index_display .div_right{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    display: inline-block;   /* div_leftとdiv_rightを横並びへ */
    width:30%;               /* div_left:65%  div_right:30% */
  /*  background-color: yellow; */
}
/*<img>*/
/*<img>タグではwidth heightを指定せず、その親で指定することでレスポンシブに対応できる*/
.box_flex_prlist_index_display .div_right .tag_pic{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    margin:0px;             /*サイズ変更の際に中央配置へ縦横の自動調整*/
    max-width:100%;
    max-height:150px;        /*画像の縦最大幅*/
    object-fit: contain;
}
/*<hr 区切り線>*/
.box_flex_prlist_index_display .hr_div {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 3px dotted lightgray;
}

/*スマホレスポンシブ対応--最大が700pxに適用する＝スマホとタブレット*/
/*画像＋文章の幅があるため、一概に960pxにはできない*/
@media screen and (max-width: 700px){
    .box_flex_prlist_index_display {
        flex-direction: column;
        align-items: start;
    }
    .box_flex_prlist_index_display_item {
        width: 100%;
    }
    .box_flex_prlist_index_display .title_h{
        height:100px;
    }

}
/*--------------------- box_flex_prlist_index_display  prlist_index-説明文と図形の表示のCSS ------------------------*/






/*--------------------------------------------------------------------------------------*/
/*--------------------- box_my_prlist_display PRLIST表示用 START ------------------------*/
/*--------------------------------------------------------------------------------------*/
.box_my_prlist_display {
    display: flex;                 /* フレックスボックスにする */
    flex-direction: row;           /* アイテムが水平方向に左から右へと配置 */
    flex-wrap: wrap;               /* 折り返し有無指定 */
    justify-content: stretch; /* 主軸方向(複数の場合)-間隔配置 */
    align-items: center;           /* 主軸でない方向-制約範囲内で拡張(center/flex-start/start/end/stretch) */
    
    max-width: 1400px;
    padding: 0px;
    margin:  0%;              /* 外側の余白 */
    margin-left:auto; margin-right:auto;
}
.box_my_prlist_display_item {
    align-self: center;  /* アイテムの垂直方向の位置を指定 */
    text-align: center;  /* アイテムのaタグなどのインライン要素を中央へセット(親要素であるbox_my_prlist_display_itemにセットする必要あり) */
    position: relative;  /* ★下層のabsoluteを枠内で利かすため aタグなど★ */
    width: 50%;           /*flexのmax-widthの半分弱*/
    min-width: 300px;
    padding: 3px;
    margin:  0%;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
}
.box_my_prlist_display_item:hover{
    box-shadow: 10px 10px 20px rgba(0, 0, 60, 0.9);
    border-radius:  10px;        /* 角丸指定 */
    transition: 0.5s; /* アニメーションの速度 */
}
/*<a>*/
.box_my_prlist_display_item .div_a {
    text-decoration: none;
    display:blcok;
    padding:0px;
}
/*<div - div_left>*/
.box_my_prlist_display .div_left{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    display: inline-block;   /* div_leftとdiv_rightを横並びへ */
    width:65%;               /* div_left:65%  div_right:30% */
    height:150px;            /*tag_picの画像の縦最大幅と同じ*/
  /*  background-color: red; */
}
/*<div - title_h*/
.box_my_prlist_display .title_h{
    margin: 0;
    padding: 0;
    width:100%;
    height:75%;             /* title 75% : それ以外25%*/
    line-height: 25px;      /* 行間 */
    color: black;
    text-overflow: ellipsis " [..]";
    overflow: hidden;
    white-space: wrap;
}
/*<div - sub_info>*/
.box_my_prlist_display .sub_info{
    margin: 0;
    padding: 0;
    width:100%;
    line-height: 15px;
    color: grey;
}
/*<picuture - div_right>*/
.box_my_prlist_display .div_right{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    display: inline-block;   /* div_leftとdiv_rightを横並びへ */
    width:30%;               /* div_left:65%  div_right:30% */
  /*  background-color: yellow; */
}
/*<img>*/
/*<img>タグではwidth heightを指定せず、その親で指定することでレスポンシブに対応できる*/
.box_my_prlist_display .div_right .tag_pic{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    margin:0px;             /*サイズ変更の際に中央配置へ縦横の自動調整*/
    max-width:100%;
    max-height:150px;        /*画像の縦最大幅*/
    object-fit: contain;
}
/*<hr 区切り線>*/
.box_my_prlist_display hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 3px dotted lightgray;
}

/*スマホレスポンシブ対応--最大が700pxに適用する＝スマホとタブレット*/
/*画像＋文章の幅があるため、一概に960pxにはできない*/
@media screen and (max-width: 700px){
    .box_my_prlist_display {
        flex-direction: column;
        align-items: start;
    }
    .box_my_prlist_display_item {
        width: 100%;
    }
    .box_my_prlist_display .title_h{
        height:100px;
    }

}

/*--------------------- box_my_prlist_display PRLIST表示用 EMD ---*/







/*--------------------------------------------------------------------------------------*/
/*--------------------- box_my_prinfo_display PR表示用 START ------------------------*/
/*--------------------------------------------------------------------------------------*/

.box_my_prinfo_display hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 3px dotted lightgray;
}
/*<img>*/
/*<img>タグではwidth heightを指定せず、その親で指定することでレスポンシブに対応できる*/
.box_my_prinfo_display .tag_pic{
    position: relative;      /* ★下層のabsoluteを枠内で利かすため★ */
    margin:0px;             /*サイズ変更の際に中央配置へ縦横の自動調整*/
    max-width:100%;
    max-height:500px;        /*画像の縦最大幅*/
    object-fit: contain;
}

/*--------------------- box_my_prinfo_display PRLIST表示用 EMD ---*/




/*--------------------------------------------------------------------------------------*/
/*--------------------- box_reviewing_user_info_list  審査中リストのCSS ------------------------*/
/*--------------------------------------------------------------------------------------*/
.box_reviewing_user_info_list {
    display: flex;                 /* フレックスボックスにする */
    flex-direction: row;           /* アイテムが水平方向に左から右へと配置 */
    flex-wrap: wrap;               /* 折り返し有無指定 */
    justify-content: stretch; /* 主軸方向(複数の場合)-間隔配置 */
    align-items: center;           /* 主軸でない方向-制約範囲内で拡張(center/flex-start/start/end/stretch) */
    
    max-width: 1400px;
    padding: 0px;
    margin:  0%;              /* 外側の余白 */
    margin-left:auto; margin-right:auto;
}
.box_reviewing_user_info_list_item {
    align-self: center;  /* アイテムの垂直方向の位置を指定 */
    text-align: center;  /* アイテムのaタグなどのインライン要素を中央へセット(親要素であるbox_reviewing_user_info_list_itemにセットする必要あり) */
    position: relative;  /* ★下層のabsoluteを枠内で利かすため aタグなど★ */
    width: 50%;           /*flexのmax-widthの半分弱*/
    min-width: 250px;
    padding: 3px;
    margin:  0%;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
}

/*--------------------- box_reviewing_user_info_list 審査中リストのCSS EMD ---*/



/*----------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------
---- Business－PR/People－PR 専用のCSSクラス -end-------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------
*/