/*
    Created on : 2018/10/08, 12:14:02
    Author     : Goods Memo
*/

/* 初期化する。*/
.goodsmemo-amazon-items div,
.goodsmemo-amazon-items span,
.goodsmemo-amazon-items p,
.goodsmemo-amazon-items img,
.goodsmemo-rakuten-items div,
.goodsmemo-rakuten-items span,
.goodsmemo-rakuten-items p,
.goodsmemo-rakuten-items img
{
    margin: 0;
    padding: 0;
    border: 0;
}

.goodsmemo-amazon-items.goodsmemo-items,
.goodsmemo-rakuten-items.goodsmemo-items
{
    border-bottom: 1px #ddd solid;
    margin-bottom: 20px;
}

.goodsmemo-amazon-items .goodsmemo-oneItem,
.goodsmemo-rakuten-items .goodsmemo-oneItem
{
    clear: both;

    padding-top: 20px;
    padding-bottom: 20px;

    border-top: 1px #ddd solid;
}

/* 商品画像ブロック */
.goodsmemo-amazon-items .goodsmemo-oneItem .imageArea,
.goodsmemo-rakuten-items .goodsmemo-oneItem .imageArea
{
    /* 商品画像の下側に、リンクボタンを表示する */
    float: none;

    margin-bottom: 10px;
}

.goodsmemo-amazon-items .goodsmemo-oneItem .imageArea img,
.goodsmemo-rakuten-items .goodsmemo-oneItem .imageArea img
{
    /* 幅が128よりも狭い画像があった。 */
    width : auto;/* imgタグのwidth値を解除 */
    height: auto;
}


/* 商品名のリンクボタン */

/*
特定のスマートフォン端末で、オレンジ色のリンクボタンが描画されないなど、
CSSが適用されない場合があった※。
特定のワードプレステーマのCSSで、aタグの下線と文字色（例：水色）が適用された。
プラグインのCSSで!importantを指定して、強制適用してみる。
※ワードプレスのカスタマイズ中 / 追加 CSS で、
リンクボタンのCSSを指定すると、オレンジ色のリンクボタンが描画された。
*/

/* 商品名のリンクボタン */
.goodsmemo-amazon-items .goodsmemo-oneItem .title a,
.goodsmemo-rakuten-items .goodsmemo-oneItem .title a,
.goods_memo_ad_asp .title a /* 自分用 */
{
    /* 角丸で矢印付きのボタン */
    display: inline-block !important;
    padding: 10px 40px 10px 40px !important;
    background-color: #FFB724 !important; /* 明るいオレンジ */
    color: #000000 !important; /* 黒色 */
    text-decoration: none !important;
    border-radius: 25px !important; /* 角をより丸く */
    position: relative !important;

    /* 立体的な効果を追加 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) , 0 3px 6px rgba(0, 0, 0, 0.1) !important;
    border-bottom: 4px solid #E5A322 !important; /* 境界の調整 */

    margin-bottom: 10px !important; /* 例：ボタンの下側にある価格が、暗くなるのを防ぐため */

    /* トランジション設定 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

    /* aタグの文字数が短い場合 */
    width: fit-content !important; /* コンテンツの幅に合わせる */
    max-width: 500px !important; /* 最大幅を500pxに設定 */
    box-sizing: border-box !important; /* パディングを幅に含める */
    white-space: normal !important; /* 長いテキストを折り返す */
    word-wrap: break-word !important; /* 単語の途中でも折り返す */
    min-height: 44px !important; /* ボタンの最小の高さを設定 */
}

/* 一つ目の矢印 */
.goodsmemo-amazon-items .goodsmemo-oneItem .title a::after,
.goodsmemo-rakuten-items .goodsmemo-oneItem .title a::after,
.goods_memo_ad_asp .title a::after /* 自分用 */
{
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid #000000 !important; /* 黒色 */
    border-right: 2px solid #000000 !important; /* 黒色 */
    transform: translateY(-50%) rotate(45deg) !important;
}

/* 二つ目の矢印 */
.goodsmemo-amazon-items .goodsmemo-oneItem .title a::before,
.goodsmemo-rakuten-items .goodsmemo-oneItem .title a::before,
.goods_memo_ad_asp .title a::before /* 自分用 */
{
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid #000000 !important; /* 黒色 */
    border-right: 2px solid #000000 !important; /* 黒色 */
    transform: translateY(-50%) rotate(45deg) !important;
}

.goodsmemo-amazon-items .goodsmemo-oneItem .title a:hover,
.goodsmemo-rakuten-items .goodsmemo-oneItem .title a:hover,
.goods_memo_ad_asp .title a:hover /* 自分用 */
{
    background-color: #E5A322 !important; /* 暖かいオレンジ */

    /* 立体的な効果を追加 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) , 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
    border-bottom: 4px solid #CC931F !important; /* 境界の調整 */
}

.goodsmemo-amazon-items .goodsmemo-oneItem .title a:active,
.goodsmemo-rakuten-items .goodsmemo-oneItem .title a:active,
.goods_memo_ad_asp .title a:active /* 自分用 */
{
    background-color: #E5A322 !important; /* 暖かいオレンジ */
    color: #000000 !important; /* 黒色 */

    /* クリック時の影を調整 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) , 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(2px) !important;
    border-bottom: 2px solid #CC931F !important; /* 境界の調整 */
}


/* 商品詳細テーブル */
.goodsmemo-amazon-items .goodsmemo-oneItem .itemDetailsTable,
.goodsmemo-rakuten-items .goodsmemo-oneItem .itemDetailsTable
{
    display: table;
    border-collapse: separate;  /* セルの間隔を空ける */
    border-spacing: 5px 0;  /* 左右 上下で記述。上 下 右 左と指定できない */
}
.goodsmemo-amazon-items .goodsmemo-oneItem .itemDetailsTable .tableRow,
.goodsmemo-rakuten-items .goodsmemo-oneItem .itemDetailsTable .tableRow
{
    display: table-row;
}
.goodsmemo-amazon-items .goodsmemo-oneItem .itemDetailsTable .tableRow p,
.goodsmemo-rakuten-items .goodsmemo-oneItem .itemDetailsTable .tableRow p
{
    display: table-cell;
}
.goodsmemo-amazon-items .goodsmemo-oneItem .itemDetailsTable .tableRow p.rowLabel,
.goodsmemo-rakuten-items .goodsmemo-oneItem .itemDetailsTable .tableRow p.rowLabel
{
    text-align: right;/* インラインブロックのspanに対して、右寄せ指定。*/
    min-width: 4.6em;
    /*margin-right: 5px;*/ /* table-cell に margin は無効です。display: table; で余白を指定する。*/
}

/* 価格 */
.goodsmemo-amazon-items .goodsmemo-oneItem .priceValue,
.goodsmemo-rakuten-items .goodsmemo-oneItem .priceValue
{
    font-size: 115%;
    color: #b12704;
}
.goodsmemo-amazon-items .goodsmemo-oneItem .priceTime,
.goodsmemo-rakuten-items .goodsmemo-oneItem .priceTime
{
    margin-left: 10px;
}
.goodsmemo-amazon-items .goodsmemo-oneItem a.priceTimeLink,
.goodsmemo-rakuten-items .goodsmemo-oneItem a.priceTimeLink
{
    color: #333;
    margin-left: 10px;
}
.goodsmemo-amazon-items .goodsmemo-oneItem a:hover.priceTimeLink,
.goodsmemo-rakuten-items .goodsmemo-oneItem a:hover.priceTimeLink
{
    color: #e53900;
}

/* ポイント倍率 */
.goodsmemo-amazon-items .goodsmemo-oneItem .pointRate,
.goodsmemo-rakuten-items .goodsmemo-oneItem .pointRate
{
    font-size: 115%;
    color: #b12704;
    margin-left: 5px;
}

.goodsmemo-amazon-items .footer,
.goodsmemo-rakuten-items .footer
{
    clear: both;
    font-size: 70%;

    padding-top: 20px;
    padding-bottom: 20px;

    border-top: 1px #ddd solid;
}

.goodsmemo-amazon-search-widget
{
    padding-top: 20px;
    padding-bottom: 20px;

    min-width:336px;
    min-height: 320px;/* 20px + 280px + 20px */

    border-top: 1px #ddd solid;
    border-bottom: 1px #ddd solid;
}

p.gma-error-message
{
    max-height: 4em;/* 大体２行ほどの高さ */
    overflow: auto;
}