app/template/default/Block/top_main02.twig line 1

Open in your IDE?
  1. <link rel="stylesheet" href="/css/top_main_img02.css">
  2. {# 当日出荷の赤帯 (本番 new_top_お知らせ ブロックから移植 2026-08-05) #}
  3. <link rel="preconnect" href="https://fonts.googleapis.com">
  4. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  5. <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
  6. <div id="tojitsu_top"><div><dl>
  7.   <dt><span style="color: red;">当日出荷</span></dt>
  8.   <dd>対応中！</dd>
  9.   <dt id="uketuke"><p>受付〆<b>平日13時</b>まで入金確認分</p></dt>
  10. </dl></div></div>
  11. <style>
  12.   #tojitsu_top{
  13.     clear: both;
  14.     background-color: red;
  15.     color: white;
  16.     text-align: center;
  17.     padding: 25px 0 0 0;
  18.     font-family: "Noto Sans JP", sans-serif;
  19.     font-optical-sizing: auto;
  20.     font-weight: 900;
  21.     font-style: normal;
  22.     line-height: 100%;
  23.     font-size: 110%;
  24.     height: 80px !important;
  25.   }
  26.   #tojitsu_top div{
  27.     display: table;
  28.     margin: auto;
  29.   }
  30.   #tojitsu_top div dl {
  31.     display: table-row;
  32.   }
  33.   #tojitsu_top div dl dt,
  34.   #tojitsu_top div dl dd{
  35.     display: table-cell;
  36.     vertical-align: middle;
  37.   }
  38.   #tojitsu_top div dl dd{
  39.     padding: 0 10px;
  40.     font-size: 110%;
  41.   }
  42.   #tojitsu_top div dl dt:nth-child(1){
  43.     background-color: white;
  44.     padding: 6px 10px 8px 10px !important;
  45.     border-radius: 3px;
  46.     font-size: 150%;
  47.   }
  48.   #tojitsu_top div dl dt b{
  49.     font-size: 150%;
  50.   }
  51.   #tojitsu_top div dl dt p{
  52.     margin: 0;
  53.     padding: 0;
  54.     color: yellow;
  55.   }
  56.   @media screen and (min-width:641px) {/*pc*/
  57.     #tojitsu_top div{
  58.       margin-bottom: 20px !important;
  59.     }
  60.   }
  61.   @media screen and (max-width:640px) {/*sm*/
  62.     #tojitsu_top{
  63.       margin: 0 0 -25px 0 !important;
  64.       height: 130px !important;
  65.     }
  66.     #tojitsu_top div dl,
  67.     #tojitsu_top div dl dt#uketuke{
  68.       clear: both;
  69.       display: block;
  70.       margin: 0;
  71.       padding: 10px 0 0 0;
  72.     }
  73.     #tojitsu_top div dl dt:nth-child(1){
  74.       font-size: 120%;
  75.     }
  76.   }
  77. </style>
  78. {# 2026-08-05 本番(coinpalace.jp)トップの8バナー構成に更新:
  79.    2x2バナー表(プーさん/ウルトラハイレリーフ/桜ブリタニア/フランス国立造幣局)
  80.    + 小川社長書籍バナー(左右2リンク) + 金バナー2枚(バーからコイン/売却)
  81.    旧6バナー(gold1/2, john, 5guineas, showroom, devo)から差替え。スタイルは本番のブロック内styleを移植 #}
  82. <style type="text/css">
  83.     .mainbanar_table a:hover img {
  84.         opacity: 0.9;
  85.     }
  86. @media only screen and (min-width:641px) {/*pc*/
  87.     .sm{
  88.         display: none;
  89.     }
  90.     .mainbanar_table img{
  91.         width: 100%;
  92.         height: auto;
  93.     }
  94.     .mainbanar_table{
  95.         display: table;
  96.     }
  97.     .mainbanar_table a{
  98.         display: table-cell;
  99.         width: 50%;
  100.     }
  101.     .banartables{
  102.         width: 100%;
  103.         height: 230px;
  104.         border-collapse: collapse;
  105.         border-spacing: 0;
  106.     }
  107.     .banartables td{
  108.         padding: 0;
  109.     }
  110.     .banartables td{
  111.         width: 50%;
  112.     }
  113.     .banartables td a{
  114.         display: block;
  115.         width: 100%;
  116.         height: 230px;
  117.         background-position: center top;
  118.         background-repeat: no-repeat;
  119.         background-size: auto 230px;
  120.     }
  121.     .banartables td a:hover {
  122.         opacity: 0.9;
  123.     }
  124.     #mainbanar_ogawa {
  125.         display: block;
  126.         width: 100%;
  127.         height: 230px;
  128.         background-image: url(/user_data/img/topbanner_pc.jpg);
  129.         background-position: center top;
  130.         background-repeat: no-repeat;
  131.         background-size: auto 230px;
  132.     }
  133.     #mainbanar_ogawa a{
  134.         display: block;
  135.         width: 50%;
  136.         height: 230px;
  137.         margin: 0;
  138.         padding: 0;
  139.         float: left;
  140.         box-sizing: border-box;
  141.     }
  142.     #mainbanar_ogawa a:hover{
  143.         background-color: rgba(255, 255, 255, 0.1);
  144.     }
  145.     #mainbanar_ogawa::after{
  146.         content: "";
  147.         display: block;
  148.         clear: both;
  149.     }
  150. }
  151. /*---------*/
  152. @media only screen and (max-width:640px) {/*sm*/
  153.     .pc{
  154.         display: none;
  155.     }
  156.     .mainbanar_table img{
  157.         width: 100%;
  158.         height: auto;
  159.         margin: 0;
  160.     }
  161.     .banartables,
  162.     .banartables tr,
  163.     .banartables td{
  164.         display: block;
  165.         clear: both;
  166.         margin: 0;
  167.         padding: 0;
  168.     }
  169.     .banartables td a{
  170.         display: block;
  171.     }
  172.     .banartables td a img{
  173.         width: 100%;
  174.         height: auto;
  175.     }
  176.     #mainbanar_ogawa {
  177.         display: block;
  178.         width: 100%;
  179.         height: 34.5vw;
  180.         background-image: url(/user_data/img/topbanner_sm.jpg);
  181.         background-position: center top;
  182.         background-repeat: no-repeat;
  183.         background-size: 100% auto;
  184.     }
  185.     #mainbanar_ogawa a{
  186.         display: block;
  187.         width: 50%;
  188.         height: 34.5vw;
  189.         margin: 0;
  190.         padding: 0;
  191.         float: left;
  192.         box-sizing: border-box;
  193.     }
  194.     #mainbanar_ogawa::after{
  195.         content: "";
  196.         display: block;
  197.         clear: both;
  198.     }
  199. }
  200. </style>
  202. <table class="banartables" id="smspace"><tr>
  203.     <td><a style="background-image: url(/user_data/img/top_banner_half_poo.jpg); background-color: #fbdf57;" href="/products/list?name=くまのプーさん100周年"><img src="/user_data/img/top_banner_half_poo_sm.jpg" class="sm"></a></td>
  204.     <td><a style="background-image: url(/user_data/img/top_banner_half_ultra.jpg); background-color: #444444;" href="/products/list?name=ウルトラハイレリーフ"><img src="/user_data/img/ultrahighrelief_sm.jpg" class="sm"></a></td>
  205. </tr>
  206. <tr>
  207.     <td><a style="background-image: url(/user_data/img/top_banner_half_sakura.jpg); background-color: #c1e0f2;" href="/sp/2025_privy/"><img src="/user_data/img/top_privybritannia_sm.jpg" class="sm"></a></td>
  208.     <td><a style="background-image: url(/user_data/img/top_banner_half_monnaie.jpg); background-color: #02065d;" href="/sp/monnaie_de_paris/"><img src="/user_data/img/monnaie_sm.jpg" class="sm"></a></td>
  209. </tr>
  210. </table>
  212. <div id="mainbanar_ogawa"><a href="/products/detail/6490" class="lef"></a><a href="/products/detail/6143" class="right"></a></div>
  214. <div class="mainbanar_table" id="topbanar_margin">
  215. <a href="/coins_from_bars"><img src="/user_data/img/top_banner_half_gold2.jpg" class="pc"><img src="/user_data/img/top_banner_half_gold2_sm.jpg" class="sm"></a>
  216. <a href="/sell_gold_bars"><img src="/user_data/img/top_banner_half_gold1.jpg" class="pc"><img src="/user_data/img/top_banner_half_gold1_sm.jpg" class="sm"></a>
  217. </div>