app/template/user_data/trading_card-design.twig line 1

Open in your IDE?
  1. {% extends '@user_data/layout/default_frame.twig' %}
  2. {% block title %}
  3.     トレーディングカード印刷 - デザイン方法 | こだわり品質【小ロット1個から】ZEAMI Goods
  4. {% endblock %}
  5. {% block content %}
  6.     <!-- ▼▼ MAIN CONTENTS __________________________________________________________________________________________________ ▼▼ -->
  7.     <main
  8.         id="mainContents">
  9.         <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  10.         <div id="bread_crumbBloc" class="fades">
  11.             <ul id="breadCrumb" class="fades">
  12.                 <li class="up">
  13.                     <a href="/"><img src="{{ asset('assets/img/icon_home.png') }}" alt="ホーム"></a>
  14.                 </li>
  15.                 <li class="up">
  16.                     <a href="/category/{{ category.id ?? '' }}">{{category.name ?? ''}}</a>
  17.                 </li>
  18.                 <li class="up">デザイン方法</li>
  19.             </ul>
  20.             <!-- ///// #breadCrumb +++++ ///// -->
  21.             <!-- ///// +++++ #bread_crumbBloc +++++ ///// -->
  22.         </div>
  23.         <!-- // == MAIN ================================================================================ // -->
  24.         <section
  25.             id="Design" class="section_basic">
  26.             <!-- // ++ ページタイトル ++ /////////////////////////////////////////////////////////////// -->
  27.             <div id="section_titleBloc" class="fades twolayout_body">
  28.                 <div id="title_twoLayout">
  29.                     <h3 class="section_title up">デザイン方法</h3>
  30.                     <p class="title_cap up">プロからアマチュア、初めての方もご安心ください。</p>
  31.                     <p class="section_note up">当店は一般の方からプロの絵描き様、企業様まで幅広くご利用いただいております。<br>
  32.                         Adobe IllustratorやPhotoshopの完全データでのご入稿はもちろん、スマホやPCで簡単にご使用いただけるデザインシミュレーターでのデザインも可能です。</p>
  33.                 </div>
  34.                 <!-- //// ++++ #title_twoLayout ++++ //// -->
  35.                 <figure id="titlePic" class="two_layout"><img src="{{ asset('/html/user_data/assets/image/design_title_pic.jpg') }}"></figure>
  36.                 <!-- ///// #section_titleBloc +++++ ///// -->
  37.             </div>
  38.             <!-- // ++ TAB NAVI ++ //////////////////////////////////////////////////////////// -->
  39.             <aside id="tabnaviBody" class="fades">
  40.                 <ul id="tabNavi">
  41.                     <li class="tnavi01 up">
  42.                         <a href="#Period01">Illustrator</a>
  43.                     </li>
  44.                     <li class="tnavi02 up">
  45.                         <a href="#Period02">Photoshop</a>
  46.                     </li>
  47.                     <li class="tnavi03 up">
  48.                         <a href="#Period03">Clip Studio</a>
  49.                     </li>
  50.                     <li class="tnavi04 up">
  51.                         <a href="#Period04">その他</a>
  52.                     </li>
  53.                     <li class="tnavi05 up">
  54.                         <a href="#Period05">シミュレーター</a>
  55.                     </li>
  56.                 </ul>
  57.             </aside>
  58.             <!-- //// #tabnaviBody +++++ ///// -->
  59.             <!-- // ++ TAB CONTAINER ++ //////////////////////////////////////////////////////////// -->
  60.             <div
  61.                 id="informationContainer" class="fades">
  62.                 <!-- ■■ Illustrator ++ ■■ -->
  63.                 <article
  64.                     id="Period01" class="panel">
  65.                     <!-- // ++ コンテンツタイトル ++ /////////////////////////////////////////////////////////////// -->
  66.                     <div id="section_titleBloc" class="fades twolayout_body inbox">
  67.                         <div id="title_twoLayout">
  68.                             <p class="title_cap up">入稿可能なデータ形式</p>
  69.                             <p class="indent section_note up">◯ Adobe Illustrator ai形式(全バージョン対応)</p>
  70.                             <p class="indent section_note up">◯ カラーモード:CMYK</p>
  71.                             <p class="indent section_note up">◯ ファイル保存名/フォルダ保存名:半角英数のみ</p>
  72.                             <p class="indent section_note up">◯ 画像はリンク配置を行い、必ず全リンク画像データを添えたフォルダを圧縮してご入稿ください</p>
  73.                         </div>
  74.                         <!-- //// ++++ #title_twoLayout ++++ //// -->
  75.                         <figure id="titlePic" class="two_layout download">
  76.                             <a href="/html/user_data/assets/template/TradingCard_ai.zip" target="_blank">
  77.                                 <img src="{{ asset('assets/img/btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_pc">
  78.                                 <img src="{{ asset('assets/img/sp_btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_sp">
  79.                             </a>
  80.                         </figure>
  81.                         <!-- //// ++++ #titlePic ++++ //// -->
  82.                         <!-- ///// #section_titleBloc +++++ ///// -->
  83.                     </div>
  84.                     <h3 class="section_title up">データの作成方法</h3>
  85.                     <dl
  86.                         class="design_container">
  87.                         <!-- ☆☆ ONE DATA ☆☆ -->
  88.                         <dt class="up">
  89.                             <p class="design_num up">1</p>
  90.                             <h4 class="design_title up">デザインサイズ</h4>
  91.                         </dt>
  92.                         <dd class="design_note_box">
  93.                             <div class="one_box fades">
  94.                                 <ul class="design_piclist fades">
  95.                                     <li><img src="{{ asset('/html/user_data/assets/image/design_tc01.png') }}" class="up"></li>
  96.                                 </ul>
  97.                                 <!-- // ** one_boxdesign_piclist ** // -->
  98.                                 <!-- // ** .one_box ** // -->
  99.                             </div>
  100.                             <div class="one_box fades">
  101.                                 <p class="indent up">◯ テンプレートファイルを用いて規格サイズ通り実寸で制作してください。</p>
  102.                                 <p class="indent up">◯ テンプレートは縦横自由にご使用いただけます。</p>
  103.                                 <p class="indent up">◯ 最大1mmの裁断ズレが発生することがありますので1mmの背景塗り足しを設けてください。</p>
  104.                                 <p class="indent up">◯ デザインは両面行っていただけますようお願いいたします。</p>
  105.                                 <!-- // ** .one_box ** // -->
  106.                             </div>
  107.                         </dd>
  108.                         <!-- /// .design_note_box *** /// -->
  109.                         <!-- ☆☆ ONE DATA ☆☆ -->
  110.                         <dt class="up">
  111.                             <p class="design_num up">2</p>
  112.                             <h4 class="design_title up">カラーモードについて</h4>
  113.                         </dt>
  114.                         <dd class="design_note_box fades">
  115.                             <div class="one_box fades">
  116.                                 <ul class="design_piclist fades">
  117.                                     <li><img src="{{ asset('/html/user_data/assets/image/design_tc02.png') }}" class="up"></li>
  118.                                 </ul>
  119.                                 <!-- // ** one_boxdesign_piclist ** // -->
  120.                                 <!-- // ** .one_box ** // -->
  121.                             </div>
  122.                             <div class="one_box fades">
  123.                                 <p class="indent up">◯ カラーモードRGBのファイルは印刷時にCMYK形式に変換させていただきます。</p>
  124.                                 <p class="indent up">◯ CMYKはRGBに比べ表現できる色の幅が狭いため、データによっては色味が大きく変化したように感じる場合があります。<br>※特色対応不可</p>
  125.                                 <!-- // ** .one_box ** // -->
  126.                             </div>
  127.                         </dd>
  128.                         <!-- /// .design_note_box *** /// -->
  129.                     </dl>
  130.                     <!-- //// .design_container **** //// -->
  131.                     <!-- // ++ データ作成上のご注意 ++ ///////////////////////////////////////////////////////////////////////////////////// -->
  132.                     <div class="bottom_notes_bloc fades">
  133.                         <aside class="one_box caution_box fades">
  134.                             <div class="caution_inner">
  135.                                 <h5 class="caution_title up">データ作成上のご注意</h5>
  136.                                 <p class="up indent">1. 文字は必ずアウトライン化してください。</p>
  137.                                 <p class="up indent">2. デザインが複数ある場合、同一アートボードに全て並べて配置し、1ファイルにまとめてご入稿ください。</p>
  138.                                 <p class="up indent">3. デザインにロックをかけるのはお控えください。印刷不良の原因となることがございます。</p>
  139.                                 <p class="up indent">4. サイズ加工を行っておりません。実寸にてご入稿ください。</p>
  140.                                 <p class="up indent">5. 配置画像データの解像度は350dpi以上を推奨させていただいています。</p>
  141.                                 <p class="up indent">6. 配置画像の解像度が低い場合でも、印刷できるデータであればそのまま印刷致します。仕上がりが不鮮明な場合でも保証対象とはなりませんのでご注意ください。</p>
  142.                                 <p class="up indent">7. 保存の際にICCプロファイルを埋め込まないでください。</p>
  143.                                 <p class="up indent">8. スタイライズ(ドロップシャドウやぼかしなど)をご使用の場合は、粗く印刷される場合がございます。Photoshop等にて画像化したものをご入稿いただくことを推奨とさせていただきます。</p>
  144.                                 <!-- // ** .caution_box ** // -->
  145.                             </div>
  146.                         </aside>
  147.                         <!-- //// .bottom_notes_bloc **** //// -->
  148.                     </div>
  149.                 </article>
  150.                 <!-- //// #Period01 ++++ //// -->
  151.                 <!-- ■■ Photoshop ++ ■■ -->
  152.                 <article
  153.                     id="Period02" class="panel">
  154.                     <!-- // ++ コンテンツタイトル ++ /////////////////////////////////////////////////////////////// -->
  155.                     <div id="section_titleBloc" class="fades twolayout_body inbox">
  156.                         <div id="title_twoLayout">
  157.                             <p class="title_cap up">入稿可能なデータ形式</p>
  158.                             <p class="indent section_note up">◯ Adobe Photoshop psd形式(全バージョン対応)</p>
  159.                             <p class="indent section_note up">◯ 推奨解像度:350dpi</p>
  160.                             <p class="indent section_note up">◯ カラーモード:CMYK</p>
  161.                             <p class="indent section_note up">◯ ファイル保存名/フォルダ保存名:半角英数のみ</p>
  162.                         </div>
  163.                         <!-- //// ++++ #title_twoLayout ++++ //// -->
  164.                         <figure id="titlePic" class="two_layout download">
  165.                             <a href="/html/user_data/assets/template/TradingCard_psd.zip" target="_blank">
  166.                                 <img src="{{ asset('assets/img/btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_pc">
  167.                                 <img src="{{ asset('assets/img/sp_btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_sp">
  168.                             </a>
  169.                         </figure>
  170.                         <!-- //// ++++ #titlePic ++++ //// -->
  171.                         <!-- ///// #section_titleBloc +++++ ///// -->
  172.                     </div>
  173.                     <h3 class="section_title up">データの作成方法</h3>
  174.                     <dl
  175.                         class="design_container">
  176.                         <!-- ☆☆ ONE DATA ☆☆ -->
  177.                         <dt class="up">
  178.                             <p class="design_num up">1</p>
  179.                             <h4 class="design_title up">デザインサイズ</h4>
  180.                         </dt>
  181.                         <dd class="design_note_box">
  182.                             <div class="one_box fades">
  183.                                 <ul class="design_piclist fades">
  184.                                     <li><img src="{{ asset('/html/user_data/assets/image/design_tc01.png') }}" class="up"></li>
  185.                                 </ul>
  186.                                 <!-- // ** one_boxdesign_piclist ** // -->
  187.                                 <!-- // ** .one_box ** // -->
  188.                             </div>
  189.                             <div class="one_box fades">
  190.                                 <p class="indent up">◯ テンプレートファイルを用いて規格サイズ通り実寸で制作してください。</p>
  191.                                 <p class="indent up">◯ テンプレートは縦横自由にご使用いただけます。</p>
  192.                                 <p class="indent up">◯ 最大1mmの裁断ズレが発生することがありますので1mmの背景塗り足しを設けてください。</p>
  193.                                 <p class="indent up">◯ デザインは両面行っていただけますようお願いいたします。</p>
  194.                                 <!-- // ** .one_box ** // -->
  195.                             </div>
  196.                         </dd>
  197.                         <!-- /// .design_note_box *** /// -->
  198.                         <!-- ☆☆ ONE DATA ☆☆ -->
  199.                         <dt class="up">
  200.                             <p class="design_num up">2</p>
  201.                             <h4 class="design_title up">カラーモードについて</h4>
  202.                         </dt>
  203.                         <dd class="design_note_box fades">
  204.                             <div class="one_box fades">
  205.                                 <ul class="design_piclist fades">
  206.                                     <li><img src="{{ asset('/html/user_data/assets/image/design_tc02.png') }}" class="up"></li>
  207.                                 </ul>
  208.                                 <!-- // ** one_boxdesign_piclist ** // -->
  209.                                 <!-- // ** .one_box ** // -->
  210.                             </div>
  211.                             <div class="one_box fades">
  212.                                 <p class="indent up">◯ カラーモードRGBのファイルは印刷時にCMYK形式に変換させていただきます。</p>
  213.                                 <p class="indent up">◯ CMYKはRGBに比べ表現できる色の幅が狭いため、データによっては色味が大きく変化したように感じる場合があります。<br>※特色対応不可</p>
  214.                                 <!-- // ** .one_box ** // -->
  215.                             </div>
  216.                         </dd>
  217.                         <!-- /// .design_note_box *** /// -->
  218.                     </dl>
  219.                     <!-- //// .design_container **** //// -->
  220.                     <!-- // ++ データ作成上のご注意 ++ ///////////////////////////////////////////////////////////////////////////////////// -->
  221.                     <div class="bottom_notes_bloc fades">
  222.                         <aside class="one_box caution_box fades">
  223.                             <div class="caution_inner">
  224.                                 <h5 class="caution_title up">データ作成上のご注意</h5>
  225.                                 <p class="up indent">1. デザインが複数ある場合、1つのファイルに1つのデザインを配置してください。(例)デザイン3種類→3つのファイルにわけて保存</p>
  226.                                 <p class="up indent">2. デザインにロックをかけるのはお控えください。印刷不良の原因となることがございます。</p>
  227.                                 <p class="up indent">3. サイズ加工を行っておりません。実寸にてご入稿ください。</p>
  228.                                 <p class="up indent">4. 解像度が低い場合でも、印刷できるデータであればそのまま印刷致します。仕上がりが不鮮明な場合でも保証対象とはなりませんのでご注意ください。</p>
  229.                                 <p class="up indent">5. 保存の際にICCプロファイルを埋め込まないでください。</p>
  230.                                 <!-- // ** .caution_box ** // -->
  231.                             </div>
  232.                         </aside>
  233.                         <!-- //// .bottom_notes_bloc **** //// -->
  234.                     </div>
  235.                 </article>
  236.                 <!-- //// #Period02 ++++ //// -->
  237.                 <!-- ■■ Clip Studio ++ ■■ -->
  238.                 <article
  239.                     id="Period03" class="panel">
  240.                     <!-- // ++ コンテンツタイトル ++ /////////////////////////////////////////////////////////////// -->
  241.                     <div id="section_titleBloc" class="fades twolayout_body inbox">
  242.                         <div id="title_twoLayout">
  243.                             <p class="title_cap up">入稿可能なデータ形式</p>
  244.                             <p class="indent section_note up">◯ Adobe Photoshop psd形式(全バージョン対応)</p>
  245.                             <p class="indent section_note up">◯ 推奨解像度:350dpi</p>
  246.                             <p class="indent section_note up">◯ カラーモード:CMYK</p>
  247.                             <p class="indent section_note up">◯ ファイル保存名/フォルダ保存名:半角英数のみ</p>
  248.                         </div>
  249.                         <!-- //// ++++ #title_twoLayout ++++ //// -->
  250.                         <figure id="titlePic" class="two_layout download">
  251.                             <a href="/html/user_data/assets/template/TradingCard_psd.zip" target="_blank">
  252.                                 <img src="{{ asset('assets/img/btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_pc">
  253.                                 <img src="{{ asset('assets/img/sp_btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_sp">
  254.                             </a>
  255.                         </figure>
  256.                         <!-- //// ++++ #titlePic ++++ //// -->
  257.                         <!-- ///// #section_titleBloc +++++ ///// -->
  258.                     </div>
  259.                     <h3 class="section_title up">データの作成方法</h3>
  260.                     <dl
  261.                         class="design_container">
  262.                         <!-- ☆☆ ONE DATA ☆☆ -->
  263.                         <dt class="up">
  264.                             <p class="design_num up">1</p>
  265.                             <h4 class="design_title up">デザインサイズ</h4>
  266.                         </dt>
  267.                         <dd class="design_note_box">
  268.                             <div class="one_box fades">
  269.                                 <ul class="design_piclist fades">
  270.                                     <li><img src="{{ asset('/html/user_data/assets/image/design_tc01.png') }}" class="up"></li>
  271.                                 </ul>
  272.                                 <!-- // ** one_boxdesign_piclist ** // -->
  273.                                 <!-- // ** .one_box ** // -->
  274.                             </div>
  275.                             <div class="one_box fades">
  276.                                 <p class="indent up">◯ テンプレートファイルを用いて規格サイズ通り実寸で制作してください。</p>
  277.                                 <p class="indent up">◯ テンプレートは縦横自由にご使用いただけます。</p>
  278.                                 <p class="indent up">◯ 最大1mmの裁断ズレが発生することがありますので1mmの背景塗り足しを設けてください。</p>
  279.                                 <p class="indent up">◯ デザインは両面行っていただけますようお願いいたします。</p>
  280.                                 <!-- // ** .one_box ** // -->
  281.                             </div>
  282.                         </dd>
  283.                         <!-- /// .design_note_box *** /// -->
  284.                         <!-- ☆☆ ONE DATA ☆☆ -->
  285.                         <dt class="up">
  286.                             <p class="design_num up">2</p>
  287.                             <h4 class="design_title up">カラーモードについて</h4>
  288.                         </dt>
  289.                         <dd class="design_note_box fades">
  290.                             <div class="one_box fades">
  291.                                 <ul class="design_piclist fades">
  292.                                     <li><img src="{{ asset('/html/user_data/assets/image/design_tc02.png') }}" class="up"></li>
  293.                                 </ul>
  294.                                 <!-- // ** one_boxdesign_piclist ** // -->
  295.                                 <!-- // ** .one_box ** // -->
  296.                             </div>
  297.                             <div class="one_box fades">
  298.                                 <p class="indent up">◯ カラーモードRGBのファイルは印刷時にCMYK形式に変換させていただきます。</p>
  299.                                 <p class="indent up">◯ CMYKはRGBに比べ表現できる色の幅が狭いため、データによっては色味が大きく変化したように感じる場合があります。<br>※特色対応不可</p>
  300.                                 <!-- // ** .one_box ** // -->
  301.                             </div>
  302.                         </dd>
  303.                         <!-- /// .design_note_box *** /// -->
  304.                     </dl>
  305.                     <!-- //// .design_container **** //// -->
  306.                     <!-- // ++ データ作成上のご注意 ++ ///////////////////////////////////////////////////////////////////////////////////// -->
  307.                     <div class="bottom_notes_bloc fades">
  308.                         <aside class="one_box caution_box fades">
  309.                             <div class="caution_inner">
  310.                                 <h5 class="caution_title up">データ作成上のご注意</h5>
  311.                                 <p class="up indent">1. デザインが複数ある場合、1つのファイルに1つのデザインを配置してください。(例)デザイン3種類→3つのファイルにわけて保存</p>
  312.                                 <p class="up indent">2. デザインにロックをかけるのはお控えください。印刷不良の原因となることがございます。</p>
  313.                                 <p class="up indent">3. サイズ加工を行っておりません。実寸にてご入稿ください。</p>
  314.                                 <p class="up indent">4. 解像度が低い場合でも、印刷できるデータであればそのまま印刷致します。仕上がりが不鮮明な場合でも保証対象とはなりませんのでご注意ください。</p>
  315.                                 <p class="up indent">5. 保存の際にICCプロファイルを埋め込まないでください。</p>
  316.                                 <!-- // ** .caution_box ** // -->
  317.                             </div>
  318.                         </aside>
  319.                         <!-- //// .bottom_notes_bloc **** //// -->
  320.                     </div>
  321.                 </article>
  322.                 <!-- //// #Period03 ++++ //// -->
  323.                 <!-- ■■ その他 ++ ■■ -->
  324.                 <article
  325.                     id="Period04" class="panel">
  326.                     <!-- // ++ コンテンツタイトル ++ /////////////////////////////////////////////////////////////// -->
  327.                     <div id="section_titleBloc" class="fades twolayout_body inbox">
  328.                         <div id="title_twoLayout">
  329.                             <p class="title_cap up">入稿可能なデータ形式</p>
  330.                             <p class="indent section_note up">◯ jpg形式, png形式, gif形式, pdf形式</p>
  331.                             <p class="indent section_note up">◯ ファイル保存名/フォルダ保存名:半角英数のみ</p>
  332.                         </div>
  333.                         <!-- //// ++++ #title_twoLayout ++++ //// -->
  334.                         <!--
  335.                         <figure id="titlePic" class="two_layout download">
  336.                             <a href="#" target="_blank">
  337.                                 <img src="{{ asset('assets/img/btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_pc">
  338.                                 <img src="{{ asset('assets/img/sp_btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_sp">
  339.                             </a>
  340.                         </figure>-->
  341.                         <!-- //// ++++ #titlePic ++++ //// -->
  342.                         <!-- ///// #section_titleBloc +++++ ///// -->
  343.                     </div>
  344.                     <h3 class="section_title up">データの作成方法</h3>
  345.                     <dl class="design_container">
  346.                         
  347.                         <dd class="design_note_box fades">
  348.                             <div class="one_box fades">
  349.                                 <p class="up">下図のように背景を広めにとり、できるだけ大きく作成してください。当店で適切なサイズに縮小します。</p>
  350.                                 <!-- // ** .one_box ** // -->
  351.                             </div>
  352.                             <div class="one_box fades">
  353.                                 <ul class="design_piclist fades ">
  354.                                     <li><img src="{{ asset('/html/user_data/assets/image/design_sticker24.jpg') }}" class="up"></li>
  355.                                 </ul>
  356.                                 <!-- // ** one_boxdesign_piclist ** // -->
  357.                                 <!-- // ** .one_box ** // -->
  358.                             </div>
  359.                         </dd>
  360.                     </dl>
  361.                     
  362.                     
  363.                     <h3 class="section_title up">カラーモードをRGBでデータを製作された場合のご注意</h3>
  364.                     <dl class="design_container">
  365.                         
  366.                         <dd class="design_note_box fades">
  367.                             <div class="one_box fades">
  368.                                 <p class="up">CMYKはRGBに比べ表現できる色の幅が狭いため、データによっては色味が大きく変化したように感じる場合があります。</p>
  369.                                 <!-- // ** .one_box ** // -->
  370.                             </div>
  371.                             <div class="one_box fades">
  372.                                 <ul class="design_piclist fades ">
  373.                                     <li><img src="{{ asset('/html/user_data/assets/image/design_sticker07.png') }}" class="up"></li>
  374.                                 </ul>
  375.                                 <!-- // ** one_boxdesign_piclist ** // -->
  376.                                 <!-- // ** .one_box ** // -->
  377.                             </div>
  378.                         </dd>
  379.                     </dl>
  380.                     <!-- //// .design_container **** //// -->
  381.                     <!-- // ++ データ作成上のご注意 ++ ///////////////////////////////////////////////////////////////////////////////////// -->
  382.                     <div class="bottom_notes_bloc fades">
  383.                         <aside class="one_box caution_box fades">
  384.                             <div class="caution_inner">
  385.                                 <h5 class="caution_title up">データ作成上のご注意</h5>
  386.                                 <p class="up indent">1. 保存形式:jpg、png、gif、pdf</p>
  387.                                 <p class="up indent">2. ファイル保存名/フォルダ保存名:半角英数のみ</p>
  388.                                 <p class="up indent">3. カラーモード:CMYK</p>
  389.                                 <p class="up indent">4. デザインが複数ある場合、1つのファイルに1つのデザインを配置してください。(例)デザイン3種類→3つのファイルにわけて保存</p>
  390.                                 <!-- // ** .caution_box ** // -->
  391.                             </div>
  392.                         </aside>
  393.                         <!-- //// .bottom_notes_bloc **** //// -->
  394.                     </div>
  395.                 </article>
  396.                 <!-- //// #Period04 ++++ //// -->
  397.                 <!-- ■■ シュミレーター ++ ■■ -->
  398.                 <article
  399.                     id="Period05" class="panel">
  400.                     <!-- // ++ コンテンツタイトル ++ /////////////////////////////////////////////////////////////// -->
  401.                     <div id="section_titleBloc" class="fades twolayout_body inbox">
  402.                         <div id="title_twoLayout">
  403.                             <p class="title_cap up">シミュレーターには非対応です</p>
  404.                         </div>
  405.                         <!-- //// ++++ #title_twoLayout ++++ //// -->
  406. <!--
  407.                         <figure id="titlePic" class="two_layout download">
  408.                             <a href="#" target="_blank">
  409.                                 <img src="{{ asset('assets/img/btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_pc">
  410.                                 <img src="{{ asset('assets/img/sp_btn_dwl-temp.png') }}" alt="テンプレートをダウンロード" class="for_sp">
  411.                             </a>
  412.                         </figure>-->
  413.                         <!-- //// ++++ #titlePic ++++ //// -->
  414.                         <!-- ///// #section_titleBloc +++++ ///// -->
  415.                     </div>
  416. <!--
  417.                     <h3 class="section_title up">データの作成方法</h3>
  418.                     <dl class="design_container"></dl>-->
  419.                     <!-- //// .design_container **** //// -->
  420.                 </article>
  421.                 <!-- //// #Period05 ++++ //// -->
  422.                 <!-- //// ++++ #informationContainer ++++ //// -->
  423.             </div>
  424.         </section>
  425.         <!-- ///// +++++ #Design +++++ ///// -->
  426.         <!-- ///// +++++ #mainContents +++++ ///// -->
  427.     </main>
  428. {% endblock %}