{"id":1372,"date":"2024-02-25T12:52:47","date_gmt":"2024-02-25T12:52:47","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=1372"},"modified":"2024-02-25T13:27:22","modified_gmt":"2024-02-25T13:27:22","slug":"buyer_page_code","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/buyer_page_code","title":{"rendered":"\u3010\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3011\u5165\u9580\u7de8\uff1a\u30d0\u30a4\u30e4\u30fc\u30da\u30fc\u30b8"},"content":{"rendered":"\n

\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u9020<\/h2>\n\n\n\n
site2\n\u2502  \n\u2502\u2500js\n\u2502  \u2514\u2500common.js\n\u2502\n\u251c\u2500css\n\u2502    \u251c\u2500reset.css\n\u2502    \u2514\u2500style.css\n\u2502\n\u2502\u2500img\n\u2502   \u2514\u2500\u753b\u50cf\u30d5\u30a1\u30a4\u30eb etc...\n\u2502\n\u2502\n\u2514\u2500index.html\n<\/code><\/pre><\/div>\n\n\n\n
HTML<\/h2>\n\n\n\n
index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="ja">\n  <head>\n    <meta charset="UTF-8">\n    <title>WishJapan<\/title>\n    <meta name="description"\n      content="\u3010WishJapan\u3011\u6d77\u5916\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc\u306e\u30d0\u30a4\u30e4\u30fc\u3068\u7e4b\u304c\u308b\u30a2\u30d7\u30ea">\n    <meta name="keywords" content="\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc,\u30d0\u30a4\u30e4\u30fc,\u30a2\u30d7\u30ea">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <meta property="og:url" content="https:\/\/wishjapan.com">\n    <meta property="og:type" content="website">\n    <meta property="og:title" content="WishJapan">\n    <meta property="og:description"\n      content="\u3010WishJapan\u3011\u6d77\u5916\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc\u306e\u30d0\u30a4\u30e4\u30fc\u3068\u7e4b\u304c\u308b\u30a2\u30d7\u30ea">\n    <meta property="og:site_name" content="WishJapan">\n    <meta property="og:image" content="https:\/wishjapan.com\/img\/logo.png">\n    <meta name="robots" content="noindex">\n    <link rel="preconnect" href="https:\/\/fonts.googleapis.com">\n    <link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>\n    <link\n      href="https:\/\/fonts.googleapis.com\/css2?family=M+PLUS+1p:wght@400;500;700&family=Raleway:wght@400;500&display=swap"\n      rel="stylesheet">\n    <link rel="stylesheet" type="text\/css" href="css\/reset.css">\n    <link rel="stylesheet" type="text\/css" href="css\/style.css">\n  <\/head>\n  <body>\n    <header class="header" id="header">\n      <div class="header-wrap">\n        <div class="header-wrap__logo">\n          <a href="\/"><img src="img\/logo.png" alt="\u30ed\u30b4\u753b\u50cf"><\/a>\n        <\/div>\n        <nav class="header-wrap__nav">\n          <ul class="header-wrap__nav__list">\n            <li class="header-wrap__nav__list__item">\n              <a href="#about">\u3069\u3093\u306a\u30a2\u30d7\u30ea\uff1f<\/a>\n            <\/li>\n            <li class="header-wrap__nav__list__item">\n              <a href="#use">\u5229\u7528\u65b9\u6cd5<\/a>\n            <\/li>\n            <li class="header-wrap__nav__list__item">\n              <a href="#item">\u5165\u8377\u5546\u54c1<\/a>\n            <\/li>\n            <li class="header-wrap__nav__list__item __app">\n              <a href="#app">\u5229\u7528\u767b\u9332<\/a>\n            <\/li>\n          <\/ul>\n        <\/nav>\n      <\/div>\n      <div class="drawer"><\/div>\n    <\/header>\n    <section class="top" id="top">\n      <div class="top-wrap">\n        <div class="top-wrap__left">\n          <img src="img\/top.png" alt="\u30c8\u30c3\u30d7\u753b\u50cf">\n        <\/div>\n        <div class="top-wrap__right">\n          <div class="top-wrap__right__txt">\n            <h1>\u6d77\u5916\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc\u306e<br>\u30d0\u30a4\u30e4\u30fc\u3068\u3064\u306a\u304c\u308b<\/h1>\n          <\/div>\n          <div class="top-wrap__right__logo">\n            <img src="img\/logo.png" alt="\u30c8\u30c3\u30d7\u753b\u50cf">\n          <\/div>\n          <div class="top-wrap__right__sub">\n            <p>WishJapan\u3068\u306f\u3001<span class="br">\u6d77\u5916\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc\u306e\u30d0\u30a4\u30e4\u30fc\u306b<br><\/span>\n            \u300c\u30a2\u30ec\u300d\u304c\u6b32\u3057\u3044\uff01\u3092\u4f9d\u983c\u3067\u304d\u308b\u30a2\u30d7\u30ea<\/p>\n          <\/div>\n          <div class="top-wrap__right__dw">\n            <div class="top-wrap__right__dw__one">\n              <a href="https:\/\/play.google.com\/store\/apps?hl=ja&gl=US\/">\n                <img src="img\/google.png" alt="google store">\n              <\/a>\n            <\/div>\n            <div class="top-wrap__right__dw__one">\n              <a href="https:\/\/play.apple.com\/store\/apps?hl=ja&gl=US\/">\n                <img src="img\/apple.png" alt="apple store">\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n    <section class="company" id="company">\n      <div class="scroll-infinity">\n        <ul class="scroll-infinity__list scroll-infinity__list--left">\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (1).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (2).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (3).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (4).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (5).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (6).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (7).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (8).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (9).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (10).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (11).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (12).png">\n          <\/li>\n        <\/ul>\n        <ul class="scroll-infinity__list scroll-infinity__list--left">\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (1).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (2).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (3).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (4).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (5).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (6).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (7).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (8).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (9).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (10).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (11).png">\n          <\/li>\n          <li class="scroll-infinity__item">\n            <img src="img\/logo (12).png">\n          <\/li>\n        <\/ul>\n      <\/div>\n    <\/section>\n    <div class="dot">\n      <section class="about" id="about">\n        <div class="about-wrap __inner">\n          <div class="ttl-block">\n            <span class="s-ttl">ABOUT APP<\/span>\n            <h1 class="m-ttl">\u3069\u3093\u306a\u30a2\u30d7\u30ea\uff1f<\/h1>\n          <\/div>\n          <div class="about-wrap__con">\n            <div class="about-wrap__con__img">\n              <img src="img\/about.png" alt="\u753b\u50cf">\n            <\/div>\n            <div class="about-wrap__con__txt">\n              <div class="about-wrap__con__txt__main">\n              <p>WishJapan\u306f\u3001\u6d77\u5916\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc\u306e\u30d0\u30a4\u30e4\u30fc\u3068\u6d77\u5916\u5728\u4f4f\u8005\u3092\u7e4b\u3050\u30a2\u30d7\u30ea\u3002\u8fd1\u6240\u306e\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc\u306b\u300c\u30a2\u30ec\u300d\u304c\u6b32\u3057\u3044\uff01\u300c\u30b3\u30ec\u300d\u304c\u3042\u3063\u305f\u3089\u52a9\u304b\u308b\uff01\u306a\u3069\u6d77\u5916\u5728\u4f4f\u8005\u306e\u58f0\u3092\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc\u306e\u30d0\u30a4\u30e4\u30fc\u306b\u76f4\u63a5\u5c4a\u3051\u308b\u30b5\u30fc\u30d3\u30b9\u3067\u3059\u3002<br><br><\/p>\n              <\/div>\n              <div class="about-wrap__con__txt__sub">\n              <p>\u4f8b\u3048\u3070\u3001\u3081\u3093\u3064\u3086\u3001\u30a6\u30b9\u30bf\u30fc\u30bd\u30fc\u30b9\u3001\u30ab\u30ec\u30fc\u30eb\u30fc\u3001\u30dd\u30f3\u9162\u3001\u304a\u5473\u564c\u3001\u304a\u308d\u3057\u3057\u3087\u3046\u304c\u3001\u304a\u308d\u3057\u306b\u3093\u306b\u304f\u3001\u6885\u5e72\u3057\u3001\u304a\u7c73\u3001\u30d8\u30a2\u30b1\u30a2\u5546\u54c1\u3001etc\u2026<br>\n              \u305a\u3063\u3068\u6b32\u3057\u304b\u3063\u305f\u5546\u54c1\u3001WishJapan\u3067\u4f9d\u983c\u3057\u3066\u307f\u307e\u305b\u3093\u304b\uff1f<\/p>\n              <\/div>\n            <\/div>\n          <\/div>          \n        <\/div>\n      <\/section>\n      <section class="use" id="use">\n        <div class="use-wrap __inner">\n          <div class="ttl-block">\n            <span class="s-ttl">HOW TO USE<\/span>\n            <h1 class="m-ttl">\u3054\u5229\u7528\u65b9\u6cd5<\/h1>\n          <\/div>\n          <div class="use-wrap__con">\n            <div class="use-wrap__con__block">\n              <div class="use-wrap__con__block__no">\n                <p>STEP<br><span>01<\/span><\/p>\n              <\/div>\n              <div class="use-wrap__con__block__img">\n                <img src="img\/use.png" alt="\u53c2\u8003\u753b\u50cf">\n              <\/div>\n              <div class="use-wrap__con__block__txt">\n                <p>\u6b32\u3057\u3044\u5546\u54c1\u3092\u63d0\u643a\u5148\u306e\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc\u306b\u4f9d\u983c\u3057\u307e\u3059\u3002<br>\n                \u4f9d\u983c\u306f\u30011\u5546\u54c11\u500b\u306e\u5c0f\u30ed\u30c3\u30c8\u304b\u3089\u5927\u30ed\u30c3\u30c8\u307e\u3067OK\uff01<br>\n                \u5bfe\u8c61\u306e\u65e5\u7cfb\u30b9\u30fc\u30d1\u30fc\u3088\u308a24\u6642\u9593\u4ee5\u5185\u306b\u3054\u8fd4\u4fe1\u3057\u307e\u3059\u3002<\/p>\n              <\/div>\n            <\/div>\n            <div class="use-wrap__con__block">\n              <div class="use-wrap__con__block__no">\n                <p>STEP<br><span>02<\/span><\/p>\n              <\/div>\n              <div class="use-wrap__con__block__img __rev">\n                <img src="img\/buyer.jpg" alt="\u53c2\u8003\u753b\u50cf">\n              <\/div>\n              <div class="use-wrap__con__block__txt">\n                <p>\u5546\u54c1\u3092\u5165\u8377\u3057\u304a\u5ba2\u69d8\u306b\u3054\u9023\u7d61\u3057\u307e\u3059\u3002<br>\n                \u5165\u8377\u76ee\u5b89\u306f\u3001\u4f9d\u983c\u304b\u30892\u9031\u9593\u7a0b\u5ea6\u3067\u3059\u3002<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n      <section class="item" id="item">\n        <div class="item-wrap __inner">\n          <div class="ttl-block">\n            <span class="s-ttl">JAPANESE ITEMS<\/span>\n            <h1 class="m-ttl">\u904e\u53bb\u306e\u5165\u8377\u5546\u54c1<\/h1>\n          <\/div>\n          <div class="item-wrap__con">\n            <div class="item-wrap__con__item">\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (1).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.10.01\u5165\u8377<br>\n                  \u30ab\u30b4\u30e1 \u30a6\u30b9\u30bf\u30fc\u30bd\u30fc\u30b9<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (5).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.10.01\u5165\u8377<br>\n                  \u304d\u306c\u304c\u3055 \u3086\u3067\u3046\u3069\u3093<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (8).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.09.20\u5165\u8377<br>\n                  FAUCHON \u30d1\u30bb\u30ea<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (11).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>22022.09.15\u5165\u8377<br>\n                  \u30df\u30c4\u30ab\u30f3 \u7a40\u7269\u9162<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (2).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.09.15\u5165\u8377<br>\n                  \u30df\u30c4\u30ab\u30f3 \u5473\u307d\u3093<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (3).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.09.10\u5165\u8377<br>\n                  S&B \u30c6\u30fc\u30d6\u30eb\u30b3\u30b7\u30e7\u30fc<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (6).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.08.30\u5165\u8377<br>\n                  \u30e4\u30de\u30ad \u3081\u3093\u3064\u3086<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (4).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.08.30\u5165\u8377<br>\n                  \u30de\u30eb\u30c4\u30cd \u63d6\u4fdd\u4e43\u7cf8<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (10).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>22022.07.05\u5165\u8377<br>\n                  \u65e5\u6e05 \u30ad\u30e3\u30ce\u30fc\u30e9\u6cb9<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (7).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.07.05\u5165\u8377<br>\n                  \u30b5\u30f3\u30e9 \u30aa\u30ea\u30fc\u30d6\u30aa\u30a4\u30eb<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (9).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.07.01\u5165\u8377<br>\n                  S&B \u3055\u3093\u3057\u3087\u3046\u306e\u7c89<\/p>\n                <\/div>\n              <\/div>\n              <div class="item-wrap__con__item__block">\n                <div class="item-wrap__con__item__block__img">\n                  <img src="img\/item (12).jpg" alt="\u5546\u54c1">\n                <\/div>\n                <div class="item-wrap__con__item__block__txt">\n                  <p>2022.06.30\u5165\u8377<br>\n                  \u76db\u7530 \u7d14\u7c73\u6599\u7406\u9152<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class="arrow left"><<\/div>\n            <div class="arrow right">><\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n      <section class="app" id="app">\n        <div class="app-wrap __inner">\n          <div class="ttl-block">\n            <span class="s-ttl">APP DOWNLOAD<\/span>\n            <h1 class="m-ttl">\u3054\u5229\u7528\u767b\u9332<\/h1>\n          <\/div>\n          <div class="app-wrap__con">\n            <p>\u7121\u6599\u306e\u30a2\u30d7\u30ea\u767b\u9332\u306f\u3053\u3061\u3089\u304b\u3089<\/p>\n            <div class="app-wrap__con__dw">\n              <div class="app-wrap__con__dw__one">\n                <a href="https:\/\/play.google.com\/store\/apps?hl=ja&gl=US\/">\n                  <img src="img\/google.png" alt="google store">\n                <\/a>\n              <\/div>\n              <div class="app-wrap__con__dw__one">\n                <a href="https:\/\/play.apple.com\/store\/apps?hl=ja&gl=US\/">\n                  <img src="img\/apple.png" alt="apple store">\n                <\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n    <\/div>\n    <footer class="footer" id="footer">\n      <div class="footer-wrap">\n        <img src="img\/logo.png" akt="\u30ed\u30b4\u753b\u50cf">\n        <nav class="footer-wrap__nav">\n          <ul class="footer-wrap__nav__list">\n            <li class="footer-wrap__nav__list__item">\n              <a href="#about">\u3069\u3093\u306a\u30a2\u30d7\u30ea\uff1f<\/a>\n            <\/li>\n            <li class="footer-wrap__nav__list__item">\n              <a href="#use">\u5229\u7528\u65b9\u6cd5<\/a>\n            <\/li>\n            <li class="footer-wrap__nav__list__item">\n              <a href="#item">\u5165\u8377\u5546\u54c1<\/a>\n            <\/li>\n            <li class="footer-wrap__nav__list__item">\n              <a href="#app">\u5229\u7528\u767b\u9332<\/a>\n            <\/li>\n          <\/ul>\n        <\/nav>\n        <p>E-mail:wishjapan@geemail.com<\/p>\n        <small>\u00a92024 WishJapan ALL RIGHTS RESERVED<\/small>\n      <\/div>\n    <\/footer>\n    <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js"><\/script>\n    <script type="text\/javascript" src="js\/common.js"><\/script>\n  <\/body>\n\n<\/html><\/code><\/pre><\/div>\n\n\n\n
CSS<\/h2>\n\n\n\n
reset.css<\/h3>\n\n\n\n
@charset "UTF-8";\n\nhtml,\nbody,\ndiv,\nspan,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\nabbr,\naddress,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\nsamp,\nsmall,\nstrong,\nsub,\nsup,\nvar,\nb,\ni,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  font-size: 100%;\n  vertical-align: baseline;\n  background: transparent;\n}\n\nbody {\n  line-height: 1;\n}\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n  display: block;\n}\n\nnav ul {\n  list-style: none;\n}\n\nblockquote,\nq {\n  quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n  content: '';\n  content: none;\n}\n\na {\n  margin: 0;\n  padding: 0;\n  font-size: 100%;\n  vertical-align: baseline;\n  background: transparent;\n}\n\n\/* change colours to suit your needs *\/\nins {\n  background-color: #ff9;\n  color: #000;\n  text-decoration: none;\n}\n\n\/* change colours to suit your needs *\/\nmark {\n  background-color: #ff9;\n  color: #000;\n  font-style: italic;\n  font-weight: bold;\n}\n\ndel {\n  text-decoration: line-through;\n}\n\nabbr[title],\ndfn[title] {\n  border-bottom: 1px dotted;\n  cursor: help;\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n\/* change border colour to suit your needs *\/\nhr {\n  display: block;\n  height: 1px;\n  border: 0;\n  border-top: 1px solid #cccccc;\n  margin: 1em 0;\n  padding: 0;\n}\n\ninput,\nselect {\n  vertical-align: middle;\n}<\/code><\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
@charset "UTF-8";\nhtml {\n  font-size: 16px;\n}\n\nbody {\n  line-height: 1;\n  letter-spacing: 1px;\n  word-break: break-all;\n  color: #000;\n  font-weight: 400;\n  font-family: "M PLUS 1p", sans-serif;\n}\n\na {\n  text-decoration: none;\n}\n\nli {\n  list-style: none;\n}\n.header-wrap {\n  margin: 1%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header-wrap__logo {\n  width: 15vw;\n}\n.header-wrap__logo img {\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n.header-wrap__logo img:hover {\n  opacity: 0.5;\n  transition: 0.3s;\n}\n.header-wrap__nav {\n  width: 45%;\n}\n.header-wrap__nav__list {\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n}\n.header-wrap__nav__list__item a {\n  font-weight: 500;\n  color: #000;\n  text-align: center;\n  width: 25%;\n  font-size: 16px;\n}\n.header-wrap__nav__list__item a:hover {\n  opacity: 0.5;\n}\n.__app {\n  width: 22.5%;\n}\n.__app a {\n  width: 100%;\n  background-color: #e63746;\n  padding: 0 2%;\n  border-radius: 30px;\n  line-height: 3;\n  color: #fff;\n  text-align: center;\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n  transition: 0.2s;\n}\n.__app a::before {\n  content: "";\n  width: 90%;\n  height: 10px;\n  position: absolute;\n  top: 100%;\n  left: 5%;\n  background: radial-gradient(\n    ellipse at center,\n    rgba(0, 0, 0, 0.35) 0%,\n    rgba(0, 0, 0, 0) 80%\n  );\n  z-index: -1;\n  opacity: 0;\n  transition: 0.3s;\n}\n.__app a:hover {\n  transform: translateY(-7px);\n  opacity: 1;\n}\n.__app a:hover::before {\n  transform: translateY(7px);\n  opacity: 1;\n}\n.drawer {\n  visibility: hidden;\n}\n.top-wrap {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 2% 3%;\n}\n.top-wrap__left {\n  width: 45vw;\n}\n.top-wrap__left img {\n  width: 100%;\n  height: 100%;\n}\n.top-wrap__right {\n  width: 55%;\n  text-align: center;\n}\n.top-wrap__right__txt {\n  font-size: 2.8vw;\n  font-weight: 600;\n  line-height: 2.3;\n  letter-spacing: 2.5px;\n}\n.top-wrap__right__logo {\n  width: 40vw;\n  margin: 2% auto;\n}\n.top-wrap__right__logo img {\n  width: 100%;\n  height: 100%;\n}\n.top-wrap__right__sub {\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 16px;\n  font-weight: 500;\n  letter-spacing: 1.8px;\n  line-height: 3;\n}\n.top-wrap__right__dw {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 5% auto;\n  width: 30vw;\n}\n.top-wrap__right__dw__one {\n  width: 45%;\n}\n.top-wrap__right__dw__one a img {\n  width: 100%;\n}\n.top-wrap__right__dw__one a img:hover {\n  opacity: 0.7;\n}\n@keyframes infinity-scroll-left {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n.scroll-infinity {\n  display: flex;\n  overflow: hidden;\n  margin-bottom: 5%;\n}\n.scroll-infinity__list {\n  display: flex;\n  list-style: none;\n  padding: 0;\n}\n.scroll-infinity__list--left {\n  animation: infinity-scroll-left 80s infinite linear 0.5s both;\n}\n.scroll-infinity__item {\n  width: calc(100vw \/ 6);\n}\n.scroll-infinity__item img {\n  width: 90%;\n}\n.dot {\n  background-color: #f5f5f5;\n  background-image: radial-gradient(#e63746 30%, transparent 30%),\n    radial-gradient(#e63746 30%, transparent 30%);\n  background-size: 18vw 18vw;\n  background-position: 0 0, 9vw 9vw;\n  padding-top: 3%;\n  padding-bottom: 1vh;\n}\n.__inner {\n  width: 75%;\n}\n.about-wrap,\n.use-wrap,\n.item-wrap,\n.app-wrap {\n  background-color: #fff;\n  box-shadow: 4px 10px 10px 4px rgba(0, 0, 0, 0.25);\n  border-radius: 60px;\n  padding: 1% 3%;\n  margin: 4% auto;\n}\n.ttl-block {\n  width: 70vw;\n  text-align: center;\n  margin: 30px auto;\n}\n.s-ttl {\n  display: inline-block;\n  font-family: "Raleway", sans-serif;\n  font-weight: 500;\n  color: #e9e3e3;\n  font-size: 30px;\n  letter-spacing: 6px;\n}\n.m-ttl {\n  font-size: 20px;\n}\n.about-wrap__con {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 3%;\n}\n.about-wrap__con__img {\n  width: 25%;\n  margin-right: 3%;\n}\n.about-wrap__con__img img {\n  width: 100%;\n  height: 100%;\n}\n.about-wrap__con__txt {\n  width: 53%;\n  font-weight: 500;\n  letter-spacing: 0.8px;\n  word-wrap: break-word;\n  line-height: 2;\n}\n.use-wrap__con {\n  margin-bottom: 3%;\n}\n.use-wrap__con__block {\n  display: flex;\n  width: 75%;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 1% auto;\n}\n.use-wrap__con__block__no {\n  width: 7vw;\n  height: 7vw;\n  background-color: #e63746;\n  border-radius: 50%;\n  margin-right: 2vw;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}\n.use-wrap__con__block__no p {\n  font-family: "Raleway", sans-serif;\n  font-weight: 500;\n  color: #fff;\n  display: inline-block;\n  vertical-align: middle;\n}\n.use-wrap__con__block__no p span {\n  font-size: 1.8vw;\n}\n.use-wrap__con__block__img {\n  width: 9vw;\n  margin-right: 2vw;\n}\n.use-wrap__con__block__img img {\n  width: 100%;\n  height: 100%;\n}\n.use-wrap__con__block__txt {\n  font-weight: 500;\n  letter-spacing: 0.8px;\n  word-wrap: break-word;\n  line-height: 2;\n}\n.app-wrap__con {\n  width: 90%;\n  text-align: center;\n  margin: 2% auto;\n}\n.app-wrap__con__dw {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-top: 2%;\n}\n.app-wrap__con__dw__one {\n  width: 13vw;\n  margin: 0 2%;\n}\n.app-wrap__con__dw__one a img {\n  width: 100%;\n}\n.app-wrap__con p {\n  text-align: center;\n  font-weight: 500;\n  letter-spacing: 0.8px;\n  word-wrap: break-word;\n  line-height: 2;\n}\n.app-wrap__con__dw__one img:hover {\n  opacity: 0.7;\n}\n.footer-wrap {\n  text-align: center;\n}\n.footer-wrap img {\n  width: 20vw;\n  margin: 2% auto;\n}\n.footer-wrap__nav__list {\n  width: 45vw;\n  display: flex;\n  justify-content: space-around;\n  margin: 1% auto 3%;\n}\n.footer-wrap__nav__list__item a {\n  color: #000;\n}\n.footer-wrap__nav__list__item a:hover {\n  opacity: 0.7;\n}\n.footer-wrap p,\n.footer-wrap small {\n  font-size: 14px;\n}\n.footer-wrap small {\n  display: inline-block;\n  margin: 1.5% auto;\n}\n.item-wrap__con {\n  width: 100%;\n  margin: 3% auto;\n  position: relative;\n  overflow: hidden;\n}\n\n.item-wrap__con__item {\n  display: flex;\n  width: fit-content;\n  transition: transform 0.3s ease;\n  transform: translateX(0);\n}\n.item-wrap__con__item__block {\n  flex-shrink: 0;\n  width: 12.5vw;\n  text-align: center;\n  padding: 0 0.02%;\n}\n.item-wrap__con__item__block__img img {\n  width: 80%;\n}\n.item-wrap__con__item__block__txt {\n  text-align: center;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.2px;\n  word-wrap: break-word;\n  line-height: 2;\n}\n.arrow {\n  background-color: #a6a6a6dc;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  position: absolute;\n  top: 40%;\n  transform: translateY(-50%);\n  color: #ffffff;\n  font-size: 15px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.arrow.left {\n  left: 0;\n}\n.arrow.right {\n  right: 0;\n}\n.Hide {\n  display: none;\n}\n.arrow:hover {\n  opacity: 0.5;\n}\n@media screen and (max-width: 1024px) {\n  .about-wrap__con__txt {\n    width: 70%;\n  }\n  .item-wrap__con__item__block {\n    width: 19.5vw;\n  }\n  .use-wrap__con__block {\n    width: 95%;\n  }\n  .use-wrap__con__block__no p span {\n    font-size: 20px;\n  }\n  .item-wrap__con__item__block__img img {\n    width: 70%;\n  }\n}\n@media screen and (max-width: 768px) {\n  .header-wrap__logo {\n    width: 20vw;\n  }\n  .top-wrap__right__dw {\n    width: 35vw;\n  }\n  .br::before {\n    content: "\\A";\n    white-space: pre;\n  }\n  .top-wrap__right__sub {\n    line-height: 1.8;\n    font-size: 14.5px;\n  }\n  .item-wrap__con__item__block {\n    width: 25vw;\n  }\n  .about-wrap,\n  .use-wrap,\n  .item-wrap,\n  .app-wrap {\n    border-radius: 40px;\n  }\n  .about-wrap__con {\n    display: flex;\n    flex-wrap: wrap;\n    padding: 1% 0.4%;\n  }\n  .about-wrap__con__txt {\n    width: 100%;\n  }\n  .about-wrap__con__txt {\n    order: 1;\n    margin-bottom: 3%;\n  }\n  .about-wrap__con__img {\n    order: 2;\n    width: 35%;\n  }\n  .use-wrap__con__block__no p span {\n    font-size: 20px;\n  }\n  .footer-wrap__nav__list {\n    width: 60vw;\n  }\n  .drawer {\n    visibility: visible;\n    width: 27.5px;\n    position: absolute;\n    top: 15px;\n    right: 15px;\n    border-top: solid 4px #aaaaaa;\n    cursor: pointer;\n    z-index: 100;\n  }\n  .drawer::before,\n  .drawer::after {\n    content: "";\n    display: block;\n    width: 27.5px;\n    background: #aaaaaa;\n    height: 4px;\n    position: absolute;\n    top: 0;\n    right: 0;\n    transition: all 0.5s;\n  }\n  .drawer::before {\n    top: 6px;\n  }\n  .drawer::after {\n    top: 15px;\n  }\n  .header-wrap__nav {\n    position: fixed;\n    display: none;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: 50;\n    background: #fff;\n  }\n  .header-wrap__nav__list {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translateY(-50%) translateX(-50%);\n    text-align: center;\n  }\n  .header-wrap__nav__list__item {\n    margin: 5% auto;\n  }\n  .header-wrap__nav__list__item a {\n    line-height: 3;\n    font-size: 18px;\n  }\n  .header-wrap__nav__list__item.__app {\n    width: 150px;\n    border-radius: 50px;\n  }\n  body.nav-open header .drawer {\n    border-top: 0;\n  }\n  body.nav-open header .drawer::before {\n    top: 9px;\n    transform: rotate(-45deg);\n  }\n  body.nav-open header .drawer::after {\n    top: 9px;\n    transform: rotate(45deg);\n  }\n  .use-wrap__con__block {\n    display: block;\n    text-align: center;\n  }\n  .use-wrap__con__block__no {\n    margin: 0 auto;\n    width: 70px;\n    height: 70px;\n  }\n  .use-wrap__con__block__img {\n    margin: 2% auto;\n    width: 150px;\n  }\n  .scroll-infinity__item {\n    width: calc(100vw \/ 4);\n  }\n  .app-wrap__con__dw__one {\n    width: 20vw;\n  }\n}\n@media screen and (max-width: 480px) {\n  .top-wrap {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    flex-direction: column-reverse;\n  }\n  .top-wrap__left {\n    transform: translateY(-180px);\n    width: 250px;\n  }\n  .top-wrap__right {\n    margin-top: 5%;\n    width: 100%;\n  }\n  .top-wrap__right__txt {\n    font-size: 16px;\n  }\n  .top-wrap__right__dw {\n    width: 50vw;\n    transform: translateY(250px);\n  }\n  .top-wrap__right__sub {\n    transform: translateY(240px);\n    font-size: 14px;\n  }\n  .top-wrap__right__txt br {\n    display: none;\n  }\n  .item-wrap__con__item__block {\n    width: 38vw;\n    padding: 2% 0%;\n  }\n  .about-wrap,\n  .use-wrap,\n  .item-wrap,\n  .app-wrap {\n    border-radius: 30px;\n  }\n  .__inner {\n    width: 85%;\n  }\n  .about-wrap__con__img {\n    width: 40vw;\n  }\n  .about-wrap__con__txt__sub br {\n    display: none;\n  }\n  .use-wrap__con__block__img {\n    width: 30vw;\n  }\n  .footer-wrap__nav__list {\n    width: 90vw;\n    font-size: 14px;\n  }\n  .s-ttl {\n    font-size: 22px;\n  }\n  .m-ttl {\n    font-size: 18px;\n  }\n  .scroll-infinity__item {\n    width: calc(100vw \/ 3);\n  }\n  .use-wrap__con__block__txt br {\n    display: none;\n  }\n  .use-wrap__con__block {\n    text-align: left;\n  }\n  .app-wrap__con__dw__one {\n    width: 22vw;\n    margin: 4% auto;\n  }\n  .footer-wrap__nav__list {\n    margin: 5% auto;\n  }\n  .footer-wrap img {\n    width: 30vw;\n  }\n}<\/code><\/pre><\/div>\n\n\n\n
JavaScript<\/h2>\n\n\n\n
common.js<\/h3>\n\n\n\n
const container = document.querySelector('.item-wrap__con');\n    const boxContainer = document.querySelector('.item-wrap__con__item');\n    const leftArrow = document.querySelector('.arrow.left');\n    const rightArrow = document.querySelector('.arrow.right');\n    const scrollAmount = 200; \/\/ \uff13\u56de\u3067\u6700\u5927\u5024\u307e\u3067\u884c\u304f\u7a0b\u5ea6\u306e\u6570\u5024\n\n    leftArrow.addEventListener('click', () => {\n      const containerWidth = container.offsetWidth;\n      const maxScrollAmount = boxContainer.offsetWidth - containerWidth;\n      const currentScrollAmount = Math.abs(parseInt(boxContainer.style.transform.split('(')[1])) || 0;\n      const newScrollAmount = Math.max(currentScrollAmount - scrollAmount, 0);\n      boxContainer.style.transform = `translateX(-${newScrollAmount}px)`;\n      updateArrowVisibility(newScrollAmount, maxScrollAmount);\n    });\n\n    rightArrow.addEventListener('click', () => {\n      const containerWidth = container.offsetWidth;\n      const maxScrollAmount = boxContainer.offsetWidth - containerWidth;\n      const currentScrollAmount = Math.abs(parseInt(boxContainer.style.transform.split('(')[1])) || 0;\n      const newScrollAmount = Math.min(currentScrollAmount + scrollAmount, maxScrollAmount);\n      boxContainer.style.transform = `translateX(-${newScrollAmount}px)`;\n      updateArrowVisibility(newScrollAmount, maxScrollAmount);\n    });\n\n    function updateArrowVisibility(scrollAmount, maxScrollAmount) {\n      if (scrollAmount === 0) {\n        leftArrow.classList.add('Hide');\n      } else {\n        leftArrow.classList.remove('Hide');\n      }\n\n      if (scrollAmount === maxScrollAmount) {\n        rightArrow.classList.add('Hide');\n      } else {\n        rightArrow.classList.remove('Hide');\n      }\n    }\n\nwindow.onunload = function() {};\nfunction sizecheck() {\n  w = window.innerWidth ? window.innerWidth : $(window).width();\n  h = window.innerHeight ? window.innerHeight : $(window).height();\n}\n\nsizecheck();\n$(function () {\n  if (w > 769) {\n} else { \n  $(".drawer").click(function(){\n  $('body').toggleClass('nav-open');\n  $('.header-wrap__nav').fadeToggle(200);\n    });\n  $("header-wrap__nav__list__item a").click(function(){\n  $('body').toggleClass('nav-open');\n  $('.header-wrap__nav').fadeToggle(200);\n    });\n  }\n}); <\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u9020 HTML index.html CSS reset.css style.css JavaScript common.js<\/p>\n","protected":false},"author":2,"featured_media":1499,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"swell_btn_cv_data":"","footnotes":""},"categories":[101],"tags":[],"class_list":["post-1372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts\/1372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/comments?post=1372"}],"version-history":[{"count":6,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts\/1372\/revisions"}],"predecessor-version":[{"id":1501,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts\/1372\/revisions\/1501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/media\/1499"}],"wp:attachment":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/media?parent=1372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/categories?post=1372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/tags?post=1372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}