app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% block stylesheet %}
  10.     <link rel="stylesheet" href="{{ asset('assets/css/common_style.css', 'user_data') }}">
  11.     <link rel="stylesheet" href="{{ asset('assets/css/header_nav_0.css') }}">
  12.     {#<link rel="stylesheet" href="{{ asset('assets/css/page/_homepage.css', 'user_data') }}">#}
  13. {% endblock %}
  14. {% set body_class = 'front_page' %}
  15. {% block javascript %}
  16.     <script>
  17.         // 画面ロード時
  18.         window.addEventListener("load", function () { 
  19.         
  20.             // 要素取得
  21.             const carousel = document.querySelector(".carousel");
  22.             let slides = [...document.querySelectorAll(".carousel a")];
  23.         
  24.             let slideWidth = slides[0].offsetWidth;
  25.             let currentIndex = 1;
  26.             carousel.style.transition = "none";
  27.             carousel.style.transform = `translateX(${slideWidth + (-slideWidth) * currentIndex}px)`;
  28.         
  29.         
  30.             console.log(slides.map(slide => slide.innerHTML));
  31.         
  32.             // 切り替え機能
  33.             function updateSlide(newIndex) {
  34.                 if (newIndex >= slides.length) {
  35.                     currentIndex = 0; 
  36.                 } else if (newIndex < 0) {
  37.                     currentIndex = slides.length - 1;
  38.                 } else {
  39.                     currentIndex = newIndex;
  40.                 }
  41.         
  42.                 carousel.style.transition = "transform 0.8s ease-in-out";
  43.                 carousel.style.transform = `translateX(${slideWidth + (-slideWidth) * currentIndex}px)`;
  44.         
  45.                 console.log(currentIndex);
  46.                 console.log("Current index:", currentIndex);
  47.             }
  48.         
  49.             // 進むボタン
  50.             document.querySelector(".next-btn").addEventListener("click", () => {
  51.                 updateSlide(currentIndex + 1);
  52.             });
  53.         
  54.             // 戻るボタン
  55.             document.querySelector(".prev-btn").addEventListener("click", () => {
  56.                 updateSlide(currentIndex - 1); 
  57.             });
  58.         
  59.         
  60.             // レスポンシブ
  61.             window.addEventListener("resize", () => {
  62.                 slideWidth = slides[0].offsetWidth; 
  63.                 carousel.style.transition = "none"; 
  64.                 carousel.style.transform = `translateX(${slideWidth + (-slideWidth)  * currentIndex}px)`;
  65.             });
  66.         });
  67.         
  68.         // SNS表示、非表示
  69.         document.addEventListener("DOMContentLoaded", function () {
  70.             const toggleBtn = document.querySelector("#sns-opcl");
  71.             const target = document.querySelector(".sns-scroll");
  72.         
  73.             toggleBtn.addEventListener("click", function () {
  74.                 target.classList.toggle("active");
  75.                 toggleBtn.classList.toggle("active");
  76.             });
  77.         });
  78.     </script>
  79. {% endblock javascript %}
  80. {% block main %}
  81.     <main class="main-content">
  82.         <div class="top-bg">
  83.             <img src="{{ asset('assets/img/common-bg.png', 'user_data') }}" class="" alt="共通TOP-BG"/>
  84.         </div>
  85.         <div class="site-cont">
  86.             
  87.             
  88.             <div class="photo-pub-dou">
  89.                 <div class="pub-area">
  90.                     <span class="corner-rt"></span>
  91.                     <span class="corner-lb"></span>
  92.                     <img src="{{ asset('assets/img/title_ic_ec-book.svg', 'user_data') }}" class="icon" alt="フォトサイトストックicon" />
  93.                     <h2 class="photo-pub-title">フォトパブ堂書店</h2>
  94.                     <p>列車・バス・古地図・郷土の歴史といった書籍を取り扱っているECサイトです。</p>
  95.                     <div class="image-area flexlist f-jc-center f-ai-center">
  96.                         <img src="{{ asset('assets/img/bookpackage001.jpg', 'user_data') }}" alt="書影1" class="item01">
  97.                         <img src="{{ asset('assets/img/bookpackage003.jpg', 'user_data') }}" alt="書影2" class="item02">
  98.                         <img src="{{ asset('assets/img/bookpackage002.jpg', 'user_data') }}" alt="書影3" class="item03">
  99.                     </div>
  100.                 </div>
  101.                 
  102.                 <div class="btn-wrapper">
  103.                     <a href="{{url('books')}}" class="btn-p">
  104.                         <div class="btn-text-p">フォトパブ堂書店を利用する</div>
  105.                         <div class="btn-icon-p">→</div>
  106.                     </a>
  107.                 </div>
  108.             </div>
  109.             
  110.             
  111.             
  112.             
  113.             
  114.             
  115.             
  116.             <div class="photo-stock">
  117.                 <div class="stock-area container flexlist f-jc-center">
  118.                     <span class="corner-rt"></span>
  119.                     <span class="corner-lb"></span>
  120.                     <img src="{{ asset('assets/img/title_ic_ec-photo.svg', 'user_data') }}" class="icon" alt="フォトサイトストックicon"/>
  121.                     <h2 class="photo-stock-title">フォトパブ写真館</h2>
  122.                     <p>あらゆる列車の写真を取り扱っているECサイトです。無料素材の利用や、提供素材の登録も可能です。</p>
  123.                     <div class="image-area flexlist f-ai-start f-jc-center">
  124.                         <img src="{{ asset('assets/img/photo001.jpg', 'user_data') }}" alt="写真1" class="item01">
  125.                         <img src="{{ asset('assets/img/photo003.jpg', 'user_data') }}" alt="写真2" class="item02">
  126.                         <img src="{{ asset('assets/img/photo002.jpg', 'user_data') }}" alt="写真3" class="item03">
  127.                     </div>
  128.                 </div>
  129.                 <div class="btn-wrapper">
  130.                     <a href="{{url('photos')}}" class="btn-s">
  131.                         <span class="btn-text-s">フォトパブ写真館を利用する</span>
  132.                         <span class="btn-icon-s">→</span>
  133.                     </a>
  134.                 </div>
  135.             </div>
  136.             
  137.             
  138.             
  139.             
  140.             
  141.         </div>
  142.     </main>
  143.     <section class="guide">
  144.         <div class="guide-title">
  145.             <img src="/html/user_data/assets/img/header_ic_guide.svg" alt="">
  146.             <h2>ご利用ガイド</h2>
  147.         </div>
  148.         <div class="pipe-line">
  149.             <div class="pipe">
  150.                 <div class="line"></div>
  151.             </div>
  152.             <div class="grey"></div>
  153.         </div>
  154.         <div class="base-area">
  155.             <div class="cont-area">
  156.                 <h3 class="cont-title">はじめに</h3>
  157.                 <div class="guide-cont">
  158.                     <p>このたびはフォトパブ堂書店およびフォトパブ写真館をご利用いただき、誠にありがとうございます。</p>
  159.                     <p>当サイトでは、株式会社フォト・パブリッシングが発行する出版物を中心に、バス・鉄道・歴史にまつわる書籍、写真など、こだわりの品物をお届けしています。</p>
  160.                     <p>安心してお買い物いただけるよう、ご利用方法やご注意事項をまとめました。</p>
  161.                 </div>
  162.             </div>
  163.             <div class="cont-area">
  164.                 <h3 class="cont-title">サービスの内容</h3>
  165.                 <div class="guide-cont">
  166.                     <div>
  167.                         <h4>■ フォトパブ堂書店:</h4>
  168.                         <p>当フォトパブ堂書店では、出版社および著者による書籍をオンラインで販売するECサービスです。</p>
  169.                         <p>出版社・著者・編集者によって企画・制作された書籍を、読者の皆さまに直接お届けすることを目的としています。</p>
  170.                         <br>
  171.                         <p>サイト上で商品をご注文いただき、発送手段、決済手段を選択していただくうえ、発送いたします。</p>
  172.                         <p>また、少部数出版・自費出版作品の取り扱いも行っており、一般流通では手に入りにくい貴重な書籍との出会いの場としてもご活用いただけます。</p>
  173.                     </div>
  174.                     <br>
  175.                     <div>
  176.                         <h4>■ フォトパブ写真館:</h4>
  177.                         <p>当フォトパブ写真館では、毎月一定数のポイント(サービス専用の電子通貨)をサブスクリプション形式で購入していただく仕組みとなっております。</p>
  178.                         <p>このポイントを利用して、有料の写真(デジタルコンテンツ)をダウンロード・購入していただきます。</p>
  179.                         <p>そのため、ポイントの購入=サブスクリプション契約の締結を意味し、有料コンテンツの利用にはこの契約が前提となります。</p>
  180.                         <br>
  181.                         <p><ポイント(サービス用電子通貨)について></p>
  182.                         <ul>
  183.                             <li>ポイントはサブスクリプション契約により、毎月自動的に付与されます。</li>
  184.                             <li>付与されたポイントは当月限り有効であり、翌月以降への繰り越しはできません。</li>
  185.                             <li>未使用分についての返金・換金・補填は承っておりません。</li>
  186.                         </ul>
  187.                         <br>
  188.                         <p><デジタルコンテンツ(写真素材)について></p>
  189.                         <ul>
  190.                             <li>一度ポイントを使用して購入されたコンテンツの返品・交換・返金は、商品の性質上お受けできません。</li>
  191.                             <li>ただし、重大な欠陥や再生不良等があった場合には、状況を確認のうえ、再提供または代替措置を検討いたします。</li>
  192.                         </ul>
  193.                         <br>
  194.                         <p><サブスクリプション(自動課金)について></p>
  195.                         <ul>
  196.                             <li>サブスクリプション契約は、解約手続きがない限り毎月自動更新され、ポイントが付与されます。</li>
  197.                             <li>解約をご希望の場合は、次回課金日前日までにマイページより手続きをお願いいたします。</li>
  198.                             <li>解約後も契約期間満了日まではサービスをご利用いただけますが、日割りでの返金には対応しておりません。</li>
  199.                             <li>契約期間中の途中解約・未使用ポイント分についても返金はいたしかねます。</li>
  200.                         </ul>
  201.                     </div>
  202.                 </div>
  203.             </div>
  204.             <div class="cont-area">
  205.                 <h3 class="cont-title">ご注文の流れ</h3>
  206.                 <div class="guide-cont">
  207.                     <div>
  208.                         <h4>■ フォトパブ堂書店:</h4>
  209.                         <ol>
  210.                             <li>会員登録(無料)またはログイン<br>
  211.                                 当サイトをご利用いただくには会員登録が必要です。<br>
  212.                                 すでに会員の方は、ログインしてからお買い物をお楽しみください。</li>
  213.                             <li>商品をカートに追加</li>
  214.                             <li>購入手続きへ進む</li>
  215.                             <li>お客様情報・配送先を入力</li>
  216.                             <li>支払い方法を選択</li>
  217.                             <li>内容を確認し、注文確定</li>
  218.                         </ol>
  219.                         <p>ご注文完了後、ご登録のメールアドレスに確認メールが届きます。</p>
  220.                     </div>
  221.                     <br>
  222.                     <div>
  223.                         <h4>■ フォトパブ写真館:</h4>
  224.                         <p>当サイトでは、毎月一定数のポイント(サービス専用の電子通貨)をサブスクリプション形式で購入していただく仕組みです。</p>
  225.                         <p>現在は、サービスの無料トライアル期間中(2026年2月末まで)となっており、課金は発生いたしません。</p>
  226.                         <p>有料サービスは2026年3月より開始予定です。</p>
  227.                         <br>
  228.                         <ol>
  229.                             <li>会員登録(無料)またはログイン<br>
  230.                                 当サイトをご利用いただくには会員登録が必要です。<br>
  231.                                 すでに会員の方は、ログインしてからお買い物をお楽しみください。</li>
  232.                             <li>サブスクリプションとしてのポイント商品をカートに追加</li>
  233.                             <li>購入手続きへ進む</li>
  234.                             <li>クレジットカード情報を入力</li>
  235.                             <li>内容を確認し、注文確定</li>
  236.                             <li>ご注文完了後、ご登録のメールアドレスに確認メールが届きます。</li>
  237.                             <li>サブスクリプションの購入後、ポイント付与</li>
  238.                             <li>商品をカートに追加</li>
  239.                             <li>購入手続きへ進む</li>
  240.                             <li>内容を確認し、注文確定</li>
  241.                         </ol>
  242.                         <p>ご注文完了後、ご登録のメールアドレスに確認メールが届きます。</p>
  243.                     </div>
  244.                 </div>
  245.             </div>
  246.             <div class="cont-area">
  247.                 <h3 class="cont-title">お支払い方法</h3>
  248.                 <div class="guide-cont">
  249.                     <div>
  250.                         <h4>■ フォトパブ堂書店:</h4>
  251.                         <ul>
  252.                             <li>クレジットカード(VISA/Mastercard/JCB/AMEXなど)</li>
  253.                             <li>コンビニ決済</li>
  254.                             <li>Apple Pay</li>
  255.                             <li>Google Pay</li>
  256.                             <li>PayPal</li>
  257.                         </ul>
  258.                     </div>
  259.                     <br>
  260.                     <div>
  261.                         <h4>■ フォトパブ写真館:</h4>
  262.                         <ul>
  263.                             <li>クレジットカード決済(VISA/Mastercard/JCB/AMEXなど)のみ</li>
  264.                         </ul>
  265.                     </div>
  266.                 </div>
  267.             </div>
  268.             <div class="cont-area">
  269.                 <h3 class="cont-title">配送について</h3>
  270.                 <div class="guide-cont">
  271.                     <div>
  272.                         <h4>■ フォトパブ堂書店:</h4>
  273.                         <ul>
  274.                             <li>配送方法:クリックポスト/レターパックプラス/ヤマト運輸(宅急便)</li>
  275.                             <li>商品や冊数、サイズに応じて配送方法が異なります</li>
  276.                             <li>同梱されず、複数通に分かれて発送される場合があります</li>
  277.                         </ul>
  278.                         <p>例:2冊購入 → クリックポスト2通になる可能性あり</p>
  279.                     </div>
  280.                     <br>
  281.                     <div>
  282.                         <h4>■ フォトパブ写真館:</h4>
  283.                         <p>当サイトで提供するデジタルコンテンツは、物理的な商品の発送を伴わず、インターネット経由での提供となります。</p>
  284.                     </div>
  285.                 </div>
  286.             </div>
  287.             <div class="cont-area">
  288.                 <h3 class="cont-title">送料について</h3>
  289.                 <div class="guide-cont">
  290.                     <div>
  291.                         <h4>■ フォトパブ堂書店:</h4>
  292.                         <p>3,500円(税込)以上のご注文で送料無料</p>
  293.                         <p>3,500円未満の場合は所定の送料がかかります(配送方法により異なります)</p>
  294.                     </div>
  295.                     <br>
  296.                     <div>
  297.                         <h4>■ フォトパブ写真館:</h4>
  298.                         <p>当サイトで提供するデジタルコンテンツは、物理的な商品の発送を伴わずの為、送料は付きません。</p>
  299.                     </div>
  300.                 </div>
  301.             </div>
  302.             <div class="cont-area">
  303.                 <h3 class="cont-title">領収書について</h3>
  304.                 <div class="guide-cont">
  305.                     <div>
  306.                         <h4>■ フォトパブ堂書店:</h4>
  307.                         <p>領収書は商品に同梱してお届けします</p>
  308.                         <p>不要の場合は、ご注文時の備考欄にその旨をご記載ください</p>
  309.                     </div>
  310.                     <br>
  311.                     <div>
  312.                         <h4>■ フォトパブ写真館:</h4>
  313.                         <p>サブスクリプションの購入に領収書ご希望の場合は、ご注文後にお問い合わせフォームまたはメールにてご連絡ください。</p>
  314.                         <p>内容を確認のうえ、電子発行(PDF形式)にてメール送付させていただきます。</p>
  315.                     </div>
  316.                 </div>
  317.             </div>
  318.             <div class="cont-area">
  319.                 <h3 class="cont-title">キャンセル・返品・交換</h3>
  320.                 <div class="guide-cont">
  321.                     <div>
  322.                         <h4>■ フォトパブ堂書店:</h4>
  323.                         <p>発送前であればキャンセル可能です(お問い合わせ先までご連絡ください)</p>
  324.                         <p>発送後のキャンセル・返品は原則承ることができません。</p>
  325.                         <p>商品に破損・汚損など不備があった場合は、交換または返金で対応いたしますので、<br>
  326.                         商品到着後、7日以内にご連絡ください。</p>
  327.                     </div>
  328.                     <br>
  329.                     <div>
  330.                         <h4>■ フォトパブ写真館:</h4>
  331.                         <p><返品・返金について></p>
  332.                         <ul>
  333.                             <li>一度購入(ポイント利用)されたデジタルコンテンツは、性質上、返品・交換・返金はお受けできません。</li>
  334.                             <li>コンテンツに重大な欠陥や再生不良がある場合は、当社にて状況確認のうえ、再提供または代替措置を検討いたします。</li>
  335.                         </ul>
  336.                         <br>
  337.                         <p><不具合が発生した場合></p>
  338.                         <ul>
  339.                             <li>ダウンロードや閲覧に不具合があった場合は、お問い合わせフォームより状況をご連絡ください。</li>
  340.                             <li>当社にて確認のうえ、再提供または代替措置を検討いたします。</li>
  341.                         </ul>
  342.                         <br>
  343.                         <p><自動ポイント購入の解約について></p>
  344.                         <ul>
  345.                             <li>自動課金(サブスクリプション)は、解約手続きがない限り毎月自動更新されます。</li>
  346.                             <li>解約希望の場合は、次回課金日の前日までにマイページから手続きを行ってください。</li>
  347.                             <li>解約手続き後も、契約期間満了日までの利用は可能ですが、日割りでの返金はございません。</li>
  348.                             <li>サービスの性質上、日割りでの精算や途中解約による返金は承っておりません。</li>
  349.                         </ul>
  350.                     </div>
  351.                 </div>
  352.             </div>
  353.             <div class="cont-area">
  354.                 <h3 class="cont-title">お気に入り機能について(フォトパブ堂書店およびフォトパブ写真館)</h3>
  355.                 <div class="guide-cont">
  356.                     <p>会員登録をしていただくと、気になる商品を「お気に入り登録」することが可能です。</p>
  357.                     <p>会員ページの「お気に入り一覧」から、いつでも確認・再注文できます。</p>
  358.                 </div>
  359.             </div>
  360.             <div class="cont-area">
  361.                 <h3 class="cont-title">お問い合わせ</h3>
  362.                 <div class="guide-cont">
  363.                     <p>株式会社フォト・パブリッシング</p>
  364.                     <p>電話:03-4212-3561(平日10:00〜18:00 ※年末年始を除く)/p>
  365.                     <p>メール:info@photo-pub.co.jp</p>
  366.                 </div>
  367.             </div>
  368.     
  369.     
  370.             <div class="cont-area">
  371.                 <h3 class="cont-title">よくあるご質問(FAQ)</h3>
  372.                 <div class="guide-cont">
  373.                     <h4>■ 注文・決済に関する質問(フォトパブ堂書店およびフォトパブ写真館)</h4>
  374.                     <div class="qa">
  375.                         <p>Q. 注文のキャンセルはどうすればいいですか?</p>
  376.                         <p class="answer">A. お問い合わせ先までお電話またはメールにてご連絡ください。</p>
  377.                     </div>
  378.                     <div class="qa">
  379.                         <p>Q. 支払い方法を間違えてしまいました。変更できますか?</p>
  380.                         <p class="answer">A.ご注文後、支払い方法の変更は承れません。決済前に確認いただくようお願いいたします。</p>
  381.                     </div>
  382.                     <div class="qa">
  383.                         <p>Q. 注文後に支払い方法を変更できますか?</p>
  384.                         <p class="answer">A.支払い方法の変更は、注文確定前であれば可能です。注文後は変更できません。</p>
  385.                     </div>
  386.                     <div class="qa">
  387.                         <p>Q. 決済エラーが出て注文できません</p>
  388.                         <p class="answer">A.支払い情報の再入力や他の支払い方法をお試しください。問題が解決しない場合は、お問い合わせ先までご連絡ください。</p>
  389.                     </div>
  390.                     <h4>■ 配送・発送に関する質問(フォトパブ堂書店およびフォトパブ写真館)</h4>
  391.                     <div class="qa">
  392.                         <p>Q. いつ発送されますか?</p>
  393.                         <p class="answer">A.決済確認後、5営業日以内に発送いたします。</p>
  394.                     </div>
  395.                     <div class="qa">
  396.                         <p>Q. 配送状況はどこで確認できますか?</p>
  397.                         <p class="answer">A.レターパック:一部追跡可能(日本郵便サイト)<br>
  398.                         ヤマト運輸:荷物お問い合わせシステムで確認可能<br>
  399.                         クリックポスト:簡易追跡あり(詳細な追跡は不可)</p>
  400.                     </div>
  401.                     <div class="qa">
  402.                         <p>Q. 海外発送はできますか?</p>
  403.                         <p class="answer">A. 現在対応しておりません。ご要望がありましたらお問い合わせ先までご連絡ください。</p>
  404.                     </div>
  405.                     <div class="qa">
  406.                         <p>Q. 商品が届きません/遅れています</p>
  407.                         <p class="answer">A. 確認いたしますので、お問い合わせ先までご連絡ください。</p>
  408.                     </div>
  409.                     <div class="qa">
  410.                         <p>Q. クリックポストはポスト投函ですか?</p>
  411.                         <p class="answer">A. はい、ポスト投函となります。</p>
  412.                     </div>
  413.                     <div class="qa">
  414.                         <p>Q. 配達日時の指定はできますか?</p>
  415.                         <p class="answer">A.配達日時の指定はヤマト運輸(宅急便)のみ可能です。その他の配送方法では指定できません。</p>
  416.                     </div>
  417.                 </div>
  418.                 <p>ご利用ガイドをご確認いただいてもご不明な点がございましたら、お問い合わせ先までご連絡ください。</p>
  419.                 <br>
  420.                 <p>今後ともフォトパブ堂書店およびフォトパブ写真館をよろしくお願いいたします。</p>
  421.             </div>
  422.         </div>
  423.     </section>
  424. {% endblock %}