Announcements working

web_assets/announcement/news_common.css

@@ -0,0 +1,465 @@
+
+/*+-+-+-+-+-+-+-+-+-+-+-++-+-+-+-+-+
+背景設定
++-+-+-+-+-+-+-+-+-+-+-++-+-+-+-+-+*/
+
+html {
+    box-sizing: border-box; /* 1 */
+    cursor: default; /* 2 */
+    line-height: 1.5; /* 3 */
+    -ms-text-size-adjust: 100%; /* 4 */
+    -webkit-text-size-adjust: 100%; /* 5 */
+}
+*,
+::before,
+::after {
+    /* 表示無い個所の処理 */
+    background-repeat: no-repeat; /* 1 */
+    box-sizing: inherit; /* 2 */
+}
+body {
+    font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
+    font-size: 2.0vw;
+    font-weight: normal;
+    color: #494949;
+    background-color: #f5ffff;
+    background-size: cover;
+    background-attachment: fixed;
+    -webkit-touch-callout: none; /* リンク長押しのポップアップを無効化*/
+    -webkit-user-select: none; /* テキスト長押しの選択ボックスを無効化*/
+    -webkit-tap-highlight-color:rgba(0,0,0,0);/*リンクの領域表示を無効化*/
+}
+
+/* ダークモード */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #f5ffff;
+        color: #494949;
+    }
+    #header {
+        background-color: #f5ffff;
+    }
+    #tab div.on {
+        color: #f5ffff;
+    }
+    .detail_text {
+        color: #494949;
+    }
+    #tab div a, #tab div a:visited {
+        color: #494949;
+    }
+    #news_list .news .info_date {
+        color: #828282;
+    }
+}
+/*+-+-+-+-+-+-+-+-+-+-+-++-+-+-+-+-+
+文字大きさ、ポジション 幅1580px基準のvw
++-+-+-+-+-+-+-+-+-+-+-++-+-+-+-+-+*/
+/* 詳細本文 */
+/* 40文字×無制限 */
+.detail_text {
+    font-size: 2.0vw;
+    color: #494949;
+    font-weight: normal;
+}
+
+/* 装飾用 */
+/* <div class="title"> */
+#detail .title {
+    font-weight: bold;
+}
+
+/* <span class="bold"> */
+#detail .bold {
+    font-weight: bold;
+}
+
+/* <div class="date"> */
+#detail .date {
+    color: #f93981;
+}
+
+/* <span class="pink"> */
+#detail .pink {
+    color: #f93981;
+}
+
+/* 見出し用 *
+/* 更新日 24px */
+.date_text {
+    font-size: 1.6vw;
+    font-weight: normal;
+}
+
+/* タイトル 32px */
+.title_text {
+    font-size: 2.0vw;
+    font-weight: normal;
+}
+
+.update_text {
+    font-size: 1.3vw;
+    font-weight: normal;
+}
+
+#tab {
+    font-size: 2.0vw;
+    font-weight: normal;
+}
+
+/*+-+-+-+-+-+-+-+-+-+-+-++-+-+-+-+-+
+メニュータブ
++-+-+-+-+-+-+-+-+-+-+-++-+-+-+-+-+*/
+#header {
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    height: 7.2vw;
+    background-color: #F2FFFF;
+    z-index: 1;
+}
+#tab {
+    position: relative;
+    top: 0;
+    margin: 1.6vw 1.3vw;
+    width: 97.4vw;
+    height: 4.0vw;
+    z-index: 1;
+}
+
+#tab>div {
+    float: left;
+    width: 18.9vw;
+    height: 4.0vw;
+    color: #494949;
+    text-align: center;
+    line-height: 4.0vw;
+    position: relative;
+}
+
+#tab div:nth-child(1), #tab div:nth-child(2) {
+    border-right: #CDD0D0 1px solid;
+}
+
+#tab div a, #tab div a:visited {
+    color: #494949;
+}
+
+#tab div.on {
+    color: #f5ffff;
+    background-image: url("../0_common_images/news_img_tab.png");
+    background-repeat: repeat-x;
+    background-size: contain;
+}
+
+#tab a {
+    display: block;
+    height: 100%;
+    background-position: center;
+    background-size: 15.5vw;
+    text-decoration: none;
+}
+
+#tab .tab_text {
+    text-align: center;
+    line-height: 100%;
+}
+
+#tab .new img.bg_badge {
+    position: absolute;
+    z-index: 2;
+    top: -0.5vw;
+    right: 1.1vw;
+    width: 2.4vw;
+    height: auto;
+}
+
+#tab .new img.bg_badge_eff {
+    position: absolute;
+    z-index: 1;
+    top: -1.3vw;
+    right: 0.3vw;
+    width: 4.0vw;
+    height: auto;
+}
+
+#tab>div.read_btn, #tab>div.more_btn {
+    float: right;
+    width: 15.6vw;
+    height: 4.0vw;
+    margin: 0vw -0.4vw 0vw 0.4vw;
+}
+
+#tab .read_btn img, #tab .more_btn img {
+    width: 15.6vw;
+    height: auto;
+}
+
+#tab img.off {
+    opacity: 0.5;
+}
+
+#tab_bottom {
+    margin-top: 7.2vw;
+}
+
+/*+-+-+-+-+-+-+-+-+-+-+-++-+-+-+-+-+
+共通項目
++-+-+-+-+-+-+-+-+-+-+-++-+-+-+-+-+*/
+/*種類アイコン画像*/
+.info_type_image img.tag {
+    width : 13.7vw; /* 画像を枠の100%の横幅にする */
+    height: auto; /* 画像の縦幅を自動調整 */
+}
+
+.info_type_image img.present {
+    width : 1.5vw;
+    height: auto;
+    margin-left: 0.5vw;
+}
+
+.information_area {
+    width: 100%;
+    overflow: hidden;
+}
+
+.information {
+    position: relative;
+    float: left;
+    overflow: hidden;
+}
+
+.information img.new {
+    width : 8.3vw;
+    height: auto;
+}
+
+img.arrow {
+    width : 1.8vw;
+    height: auto;
+    margin-top: 2.4vw;
+    margin-left: 1.0vw;
+    margin-right: 0.4vw;
+}
+
+img.arrow_back {
+    width : 1.8vw;
+    height: auto;
+    margin-top: 2.4vw;
+    margin-right: 1.4vw;
+    transform: scale(-1, 1);
+}
+
+.info_title {
+    margin-top: 0vw;
+    word-break: break-all;
+}
+
+.anchor {
+    position: absolute;
+    margin-top: -7.2vw;
+}
+
+.clear {
+    clear: both;
+}
+
+#outer {
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+}
+
+#outer #center {
+    height:100%;
+    width:100%;
+    display:table;
+}
+
+#outer #center p {
+    display: table-cell;
+    height: 100%;
+    text-align: center;
+    vertical-align: middle;
+}
+
+/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
+お知らせリスト設定
++-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
+#news_list .main_image img {
+    width : 20.86vw;
+    height: 8.34vw;
+    float: left;
+}
+
+#news_list .news {
+    display: block;
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+    color: #494949;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);/*リンクの領域表示を無効化*/
+    overflow: hidden;
+}
+
+#news_list .news .info_date {
+    color: #828282;
+}
+
+#news_list ul {
+    margin: 1.3vw 1.3vw 0;
+    padding: 0;
+    width: 97.4vw;
+}
+
+#news_list li {
+    list-style: none;
+}
+
+#news_list hr, #detail hr {
+    background-image: url("../0_common_images/news_img_line.png");
+    background-repeat: repeat-x;
+    background-size: contain;
+    height: 0.26vw;
+    border: 0;
+    margin-top: 0.8vw;
+    margin-bottom: 0.8vw;
+}
+
+#news_list hr.hr_detail {
+    margin-top: 1.1vw;
+    margin-bottom: 1.1vw;
+
+}
+
+#news_list .list_area {
+    overflow: hidden;
+}
+
+#news_list .information {
+    float: left;
+    margin-left: 2.0vw;
+    width: 70.5vw;
+}
+
+#news_list .info_type_image {
+    float: left;
+    margin-top: 0.8vw;
+    width: 13.7vw;
+}
+
+#news_list .info_date {
+    float: left;
+    margin-top: 1.0vw;
+    margin-left: 2.0vw;
+}
+
+#news_list .info_new_image {
+    float: right;
+    margin-top: 0.7vw;
+    width: 8.3vw;
+}
+
+#news_list .arrow_image {
+    float: left;
+    width: 3.2vw;
+    height: 8.3vw;
+}
+
+#page_area {
+    margin-top: 3%;
+    padding: 0 2.0vw 4.0vw 2.0vw;
+    width: 100%;
+    overflow: auto;
+    font-size: 1.2vw;
+
+    display: none;
+}
+
+#paging {
+    text-align: center;
+}
+
+#page_area .page {
+    font-size: 1.8vw;
+    font-weight: bold;
+    padding-left: 1.5vw;
+    padding-right: 1.5vw;
+    color: #191919;
+    text-decoration: none;
+}
+
+#page_area .page.new {
+    color: #c12424;
+}
+
+#page_area .page.off {
+    color: #aaaaaa;
+}
+
+/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
+詳細ページ設定
++-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
+#detail {
+    width: 100%;
+    height: 100%;
+}
+
+#detail .detail_text {
+    width : 97.4vw;
+    height : auto;
+    vertical-align:middle;
+    padding: 0;
+    margin: 0vw 1.3vw 1.3vw;
+}
+
+#detail .detail_image {
+    width: 100%;
+    padding: 1.0vw;
+    text-align: center;
+
+    display: none;
+}
+
+#detail .detail_image img {
+    width: 45.0vw;
+    height: auto;
+}
+
+.detail_text img {
+    max-width: 100%;
+}
+
+/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
+外部コンテンツページ設定
++-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
+#contents {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+#contents #banner_list {
+    position: relative;
+    left: 3vw;
+}
+
+#contents .banner {
+    float: left;
+    padding: 0.6vw;
+}
+
+#contents .banner:nth-child(3n+4) {
+    clear: both;
+}
+
+#contents .clear {
+    clear: both;
+}
+
+#contents img {
+    width: 30.0vw;
+    height: auto;
+}

web_assets/announcement/sanitize.css

@@ -0,0 +1,550 @@
+/*! sanitize.css v4.0.0 | CC0 License | github.com/10up/sanitize.css */
+
+/* Display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+	display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+	display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+	display: none;
+	height: 0;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+	display: none;
+}
+
+/* Elements of HTML (https://www.w3.org/TR/html5/semantics.html)
+   ========================================================================== */
+
+/**
+ * 1. Remove repeating backgrounds in all browsers (opinionated).
+ * 2. Add box sizing inheritence in all browsers (opinionated).
+ */
+
+*,
+::before,
+::after {
+	background-repeat: no-repeat; /* 1 */
+	box-sizing: inherit; /* 2 */
+}
+
+/**
+ * 1. Add text decoration inheritance in all browsers (opinionated).
+ * 2. Add vertical alignment inheritence in all browsers (opinionated).
+ */
+
+::before,
+::after {
+	text-decoration: inherit; /* 1 */
+	vertical-align: inherit; /* 2 */
+}
+
+/**
+ * 1. Add border box sizing in all browsers (opinionated).
+ * 2. Add the default cursor in all browsers (opinionated).
+ * 3. Add a flattened line height in all browsers (opinionated).
+ * 4. Prevent font size adjustments after orientation changes in IE and iOS.
+ */
+
+html {
+	box-sizing: border-box; /* 1 */
+	cursor: default; /* 2 */
+	font-family: sans-serif; /* 3 */
+	line-height: 1.5; /* 3 */
+	-ms-text-size-adjust: 100%; /* 4 */
+	-webkit-text-size-adjust: 100%; /* 5 */
+}
+
+/* Sections (https://www.w3.org/TR/html5/sections.html)
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+	margin: 0;
+}
+
+/**
+ * Correct the font sizes and margins on `h1` elements within
+ * `section` and `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+	font-size: 2em;
+	margin: .67em 0;
+}
+
+/* Grouping content (https://www.w3.org/TR/html5/grouping-content.html)
+   ========================================================================== */
+
+/**
+ * 1. Correct font sizing inheritance and scaling in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+ * 1. Correct the height in Firefox.
+ * 2. Add visible overflow in Edge and IE.
+ */
+
+hr {
+	height: 0; /* 1 */
+	overflow: visible; /* 2 */
+}
+
+/**
+ * Remove the list style on navigation lists in all browsers (opinionated).
+ */
+
+nav ol,
+nav ul {
+	list-style: none;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Add a bordered underline effect in all browsers.
+ * 2. Remove text decoration in Firefox 40+.
+ */
+
+abbr[title] {
+	border-bottom: 1px dotted; /* 1 */
+	text-decoration: none; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+	font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+	font-style: italic;
+}
+
+/**
+ * Add the correct colors in IE 9-.
+ */
+
+mark {
+	background-color: #ffff00;
+	color: #000000;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+ * Correct the font size in all browsers.
+ */
+
+small {
+	font-size: 83.3333%;
+}
+
+/**
+ * Change the positioning on superscript and subscript elements
+ * in all browsers (opinionated).
+ * 1. Correct the font size in all browsers.
+ */
+
+sub,
+sup {
+	font-size: 83.3333%; /* 1 */
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -.25em;
+}
+
+sup {
+	top: -.5em;
+}
+
+/*
+ * Remove the text shadow on text selections (opinionated).
+ * 1. Restore the coloring undone by defining the text shadow (opinionated).
+ */
+
+::-moz-selection {
+	background-color: #b3d4fc; /* 1 */
+	color: #000000; /* 1 */
+	text-shadow: none;
+}
+
+::selection {
+	background-color: #b3d4fc; /* 1 */
+	color: #000000; /* 1 */
+	text-shadow: none;
+}
+
+/* Embedded content (https://www.w3.org/TR/html5/embedded-content-0.html)
+   ========================================================================== */
+
+/*
+ * Change the alignment on media elements in all browers (opinionated).
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+	vertical-align: middle;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+	border-style: none;
+}
+
+/**
+ * Change the fill color to match the text color in all browsers (opinionated).
+ */
+
+svg {
+	fill: currentColor;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+	overflow: hidden;
+}
+
+/* Links (https://www.w3.org/TR/html5/links.html#links)
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove the gaps in underlines in iOS 8+ and Safari 8+.
+ */
+
+a {
+	background-color: transparent; /* 1 */
+	-webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline when hovering in all browsers (opinionated.
+ */
+
+:hover {
+	outline-width: 0;
+}
+
+/* Tabular data (https://www.w3.org/TR/html5/tabular-data.html)
+   ========================================================================== */
+
+/*
+ * Remove border spacing in all browsers (opinionated).
+ */
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* transform-style:  (https://www.w3.org/TR/html5/forms.html)
+   ========================================================================== */
+
+/**
+ * 1. Remove the default styling in all browsers (opinionated).
+ * 3. Remove the margin in Firefox and Safari.
+ */
+
+/* button, */
+input,
+select
+/* textarea */
+{
+	background-color: transparent; /* 1 */
+	border-style: none; /* 1 */
+	color: inherit; /* 1 */
+	font-size: 1em; /* 1 */
+	margin: 0; /* 3 */
+}
+
+/**
+ * Correct the overflow in IE.
+ * 1. Correct the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+	overflow: visible;
+}
+
+/**
+ * Remove the inheritance in Edge, Firefox, and IE.
+ * 1. Remove the inheritance in Firefox.
+ */
+
+button,
+select { /* 1 */
+	text-transform: none;
+}
+
+/**
+ * 1. Prevent the WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+	-webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+ * Correct the focus styles unset by the previous rule.
+ */
+
+:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the border, margin, and padding in all browsers.
+ */
+
+fieldset {
+	border: 1px solid #c0c0c0;
+	margin: 0 2px;
+	padding: .35em .625em .75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+	display: table; /* 1 */
+	max-width: 100%; /* 1 */
+	padding: 0; /* 2 */
+	white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Remove the vertical scrollbar in IE.
+ * 2. Change the resize direction on textareas in all browsers (opinionated).
+ */
+
+textarea {
+	overflow: auto; /* 1 */
+	resize: vertical; /* 2 */
+}
+
+/**
+ * Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+	padding: 0;
+}
+
+/**
+ * Correct the cursor style on increment and decrement buttons in Chrome.
+ */
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari for OS X.
+ */
+
+::-webkit-search-cancel-button,
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+ * Correct the text style on placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+	color: inherit;
+	opacity: .54;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/* WAI-ARIA (https://www.w3.org/TR/html5/dom.html#wai-aria)
+   ========================================================================== */
+
+/**
+ * Change the cursor on busy elements (opinionated).
+ */
+
+[aria-busy="true"] {
+	cursor: progress;
+}
+
+/*
+ * Change the cursor on control elements (opinionated).
+ */
+
+[aria-controls] {
+	cursor: pointer;
+}
+
+/*
+ * Change the cursor on disabled, not-editable, or otherwise
+ * inoperable elements (opinionated).
+ */
+
+[aria-disabled] {
+	cursor: default;
+}
+
+/* User interaction (https://www.w3.org/TR/html5/editing.html)
+   ========================================================================== */
+
+/*
+ * Remove the tapping delay on clickable elements (opinionated).
+ * 1. Remove the tapping delay in IE 10.
+ */
+
+a,
+area,
+button,
+input,
+label,
+select,
+textarea,
+[tabindex] {
+	-ms-touch-action: manipulation; /* 1 */
+	touch-action: manipulation;
+}
+
+/*
+ * Change the display on visually hidden accessible elements (opinionated).
+ */
+
+[hidden][aria-hidden="false"] {
+	clip: rect(0, 0, 0, 0);
+	display: inherit;
+	position: absolute;
+}
+
+[hidden][aria-hidden="false"]:focus {
+	clip: auto;
+}