/**
* uaplus.css version 0.2.0
*/
/**
* Different box model
*
* We use the traditional box model, where the padding and border
* of the element is drawn inside and not outside the specified
* width and height. That makes combining relative and absolute
* units in properties like inline-size and
* block-size easier.
*
* See https://en.wikipedia.org/wiki/CSS_box_model
*/
*
/**
* Improve focus styles
*
* Add spacing between content and its focus outline.
*/
:where(:focus-visible) {
outline-offset: 3px;
}
/**
* Disable text size adjustment
*
* To improve readability on non-mobile optimized websites, browsers
* like mobile Safari increase the default font size when you switch
* a website from portrait to landscape. We don't want that for our
* optimized sites.
*
* See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
*/
:where(html) {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/**
* Increase line height
*
* Long paragraphs are easier to read if the line height is higher.
*/
:where(html) {
line-height: 1.5;
}
/**
* Add scrollbar gutter
*
* Prevent the page from “jumping” when switching from a long to a short page.
*
*/
:where(html) {
scrollbar-gutter: stable;
}
/**
* Remove UA styles for h1s nested in sectioning content
*
* Nesting h1s in section, articles, etc., shouldn't influence the
* styling of the heading since nesting doesn't influence
* semantics either.
*
* See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
* See https://github.com/whatwg/html/pull/11102
* See https://html.spec.whatwg.org/#sections-and-headings
*/
:where(h1) {
font-size: 2em;
margin-block: 0.67em;
}
/**
* Improve abbreviations with titles
*
* The abbr element with the title isn't helpful regarding
* accessibility because support is inconsistent, and it's only
* accessible to some users. Still, it's commonly used.
* This rule shows a dotted underline on abbreviations in all
* browsers (there's a bug in Safari) and changes the cursor.
*
* See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
*/
:where(abbr[title]) {
cursor: help;
text-decoration-line: underline;
text-decoration-style: dotted;
}
/**
* Optimize mark element in Forced Colors Mode
*
* The colors of the mark element don't change in Forced Colors Mode,
* which can be problematic. Use system colors instead.
*
* See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
*/
@media (forced-colors: active) {
:where(mark) {
color: HighlightText;
background-color: Highlight;
}
}
/**
* Avoid overflow caused by embedded content
*
* Ensure that embedded content (audio, video, images, etc.)
* doesn't overflow its container.
*/
:where(audio, iframe, img, svg, video) {
max-block-size: 100%;
max-inline-size: 100%;
}
/**
* Prevent fieldsets from causing overflow
*
* Reset the default `min-inline-size: min-content` to prevent
* children from stretching fieldsets
*
* See https://github.com/twbs/bootstrap/issues/12359
* and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
*/
:where(fieldset) {
min-inline-size: 0;
}
/**
* Turn labels into block elements
*
* Labels for inputs, selects, and textarea should be block
* elements.
*/
:where(label):has(+ :where(input:not([type="radio"], [type="checkbox"]), select, textarea)) {
display: block;
}
/**
* Increase the block-size of textareas
*
* The default height of textareas is small. We increase it a bit.
*/
:where(textarea:not([rows])) {
min-block-size: 6em;
}
/**
* Inherit font styling in form elements
*
* buttons, inputs, selects, and textarea should have the same font
* family and size as the rest of the page.
*/
:where(button, input, select, textarea) {
font-family: inherit;
font-size: inherit;
}
/**
* Normalize search input styles
*
* Remove the rounded corners of search inputs on macOS and IOS
* and normalize the background color
*/
:where([type="search"]) {
-webkit-appearance: textfield;
}
/* iOS only */
@supports (-webkit-touch-callout: none) {
:where([type="search"]) {
border: 1px solid -apple-system-secondary-label;
background-color: canvas;
}
}
/**
* Maintain direction in some input types
*
* Some input types should remain left-aligned in right-to-left
* languages,but only if the value isn't empty because the
* placeholder should be right-aligned.
*
* See https://rtlstyling.com/posts/rtl-styling#form-inputs
*/
:where(input):where([type="tel"], [type="url"], [type="email"], [type="number"]):not( :placeholder-shown) {
direction: ltr;
}
/**
* Improve table styling
*
* With the default styling, tables are hard to scan. These rules
* add padding and collapsed borders.
*/
:where(table) {
border-collapse: collapse;
border: 1px solid;
}
:where(th, td) {
border: 1px solid;
padding: 0.25em 0.5em;
vertical-align: top;
}
/**
* Fading dialogs
*
* Add fade in and fade out transitions for the dialog element
* and backdrops
*/
:where(dialog)::backdrop {
background: oklch(0% 0 0 / 0.3);
}
:where(dialog, [popover]),
:where(dialog)::backdrop {
opacity: 0;
transition: opacity 150ms ease-out, display 150ms allow-discrete,
overlay 150ms allow-discrete;
}
:where(dialog[open], :popover-open),
:where(dialog[open])::backdrop {
opacity: 1;
}
@starting-style {
:where(dialog[open], :popover-open),
:where(dialog[open])::backdrop {
opacity: 0;
}
}
/**
* Increase specificity of [hidden]
*
* Make it harder to accidentally unhide elements with the
* [hidden] attribute while still maintaining the until-found
* functionality.
*/
[hidden]:not([hidden="until-found"]) {
display: none !important;
}
/**
* Turn images into block elements
*/
:where(img) {
display: block;
}
/**
* Change cursor of
*
* By default, only the ::marker inside the summary uses the
* default cursor.
*/
:where(summary) {
cursor: default;
}
/**
* Remove the default border from iframes
*/
:where(iframe) {
border: none;
}
.mobile {
display: block;
width: 100%;
}
@media screen and (min-width: 700px) {
.hidden,
.mobile,
.mobileMenu,
address {
display: none;
}
html {
width: 1260px;
margin: auto;
background: url('../img/pcWrapBg2.webp') no-repeat fixed #cee937;
background-size: cover;
}
body {
width: 1200px;
padding: 0;
background: #fff;
border-right: 1px solid #ddd;
border-left: 1px solid #ccc;
box-shadow: 0 0 5px rgb(000 000 000 / 20%);
}
header#top {
.anime {
height: 208px;
div.flow-wrapper {
width: 1px;
height: 196px;
}
}
}
nav#globalNav {
width: 1198px;
height: 47px;
margin: auto;
ol {
display: flex;
margin: 0;
padding: 0;
list-style: none;
li {
width: 20%;
margin: 0 0.3em;
border: 3px solid #009e8f;
border-top-width: 3px;
border-top-style: solid;
border-top-color: rgb(0, 158, 143);
font-size: 1.4em;
text-align: center;
border-top: 5px solid green;
border-radius: 0 0 10px 10px;
a {
display: block;
color: #26a546;
font-size: 20px;
line-height: 37px;
float: none;
font-weight: 700;
text-decoration: none;
text-indent: 0;
}
}
}
}
section#globalSns {
width: 1168px;
padding: 10px 16px 5px;
ul.snsb {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
list-style: none;
}
}
main#main,
body {
display: flex;
width: 100%;
a {
color: inherit;
text-decoration: none;
}
article#globalLeft {
width: 203px;
margin: 0 16px;
display: flex;
flex-direction: column;
row-gap: 7.7px;
a {
width: 100%;
h3 {
color: #db0000;
top: -127px;
font-size: 20px;
font-weight: bold;
position: relative;
text-align: right;
line-height: 130%;
margin-right: .2rem;
}
&>h3.tm30 {
font-weight: 700;
position: relative;
line-height: 130%;
margin: 0 .2rem 0 0;
width: 98%;
color: #242424;
top: -120px;
font-size: 22px;
text-align: center;
}
p {
top: -122px;
color: #242424;
font-size: 1rem;
position: relative;
display: block;
margin-left: 53%;
}
& p.tm30 {
top: -121px;
color: #242424;
position: relative;
display: block;
text-align: center;
margin: 0;
font-size: 12px;
}
}
nav {
dl>dt {
width: 203px;
height: 40px;
margin: 0 0 10px;
padding: 0;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
dl>dd>a {
display: block;
height: 100%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
dl:nth-child(1)>dd {
width: 182px;
height: 73px;
margin: 10px;
}
dl:nth-child(2)>dd {
width: 182px;
height: 71px;
margin: 10px;
}
dl:nth-child(3)>dd {
width: 182px;
height: 73px;
margin: 10px 10px 11px;
}
dl:nth-child(1) {
padding-bottom: 15px;
background: url('../img/pcLeftMenu1.png') no-repeat;
}
dl:nth-child(2) {
padding-bottom: 11px;
background: url('../img/pcLeftMenu2.png') no-repeat;
}
dl:nth-child(3) {
padding-bottom: 1px;
background: url('../img/pcLeftMenu3.png') no-repeat;
}
}
.headoffice {
color: #fff;
border: 1px solid #000;
text-align: center;
font-weight: 700;
font-size: 16px;
padding: .4em;
margin: 8px 0 4px 0;
background-color: #0e3e98;
}
.suppportcenter {
width: 100%;
border: 2px solid #00aeff;
text-align: center;
box-sizing: border-box;
padding-top: 0.3em;
margin-bottom: 6px;
address,
article,
aside,
blockquote,
center,
dd,
details,
div,
dl,
dt,
fieldset,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
li,
menu,
nab,
noscript,
ol,
option,
p,
pre,
section,
table,
td,
th,
tr,
ul {
display: block;
margin: 0;
padding: 0;
padding-bottom: 0px;
padding-bottom: 0;
}
div img {
display: inline;
}
.support,
.reception {
margin-top: 10px;
color: #06148f;
h3 {
padding-bottom: 0.3em;
font-size: 20px;
font-weight: 700;
}
h4 {
font-size: 20px;
}
p {
padding: 0;
padding-left: 0px;
color: #000;
font-size: 10pt;
line-height: 12.5pt;
text-align: center;
padding-left: 1.5em;
}
}
.suppportcenter .support h3::before {
content: '▶';
}
.suppportcenter .reception h3,
.suppportcenter .support h3 {
padding-bottom: 0.3em;
font-size: 20px;
font-weight: 700;
}
.reception {
margin-top: 10px;
color: #2113ef;
}
ul {
margin-top: 0.3em;
margin-bottom: 1em;
}
li {
padding-left: 1.5em;
margin-bottom: 0;
font-size: 0.9em;
text-align: left;
}
li::before {
content: '◇';
}
h5 {
padding: 0 0 5px;
font-size: 14px;
}
}
.storelist {
margin: 16px 0 8px;
padding: 0.4em;
border: 1px solid #000;
color: #fff;
font-size: 20px;
text-align: center;
font-weight: 700;
background-color: #1f864c;
}
a.store {
position: relative;
span {
top: 10px;
position: absolute;
color: #094;
font-size: 17px;
text-align: center;
font-weight: 700;
display: block;
width: 100%;
}
}
.buy_title {
width: 201px;
height: 50px;
border: 2px solid #0e3e98;
color: #fff;
font-size: 30px;
line-height: 50px;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 700;
background-color: #0e3e98;
border-radius: 5px;
}
}
article#globalRight {
width: 945px;
margin-right: 16px;
.pc-rip {
font-size: 1.2rem;
background-color: #000000;
color: #ffffff;
border-top: 5px solid #000000;
border-bottom: 5px solid #ffffff;
padding: 10px 20px;
text-align: center;
font-family: 'Arial', 'Meiryo', sans-serif;
font-weight: normal;
}
section.search-area-map {
header.section-header {
width: 100%;
height: 35px;
margin: 0;
font-size: 20px;
background-color: green;
font-weight: 700;
line-height: 35px;
color: #fff;
display: flex;
}
}
section.soiMovie {
p.info {
padding-bottom: 8px;
margin: 0;
color: #00f;
text-align: center;
}
div.wrapper {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
margin: 0 0 10px 0;
height: 250px;
.card {
display: inline-block;
height: 235px;
margin: 0 8px;
h1.card-title {
color: #333;
font-size: 16px;
padding-top: 10px;
padding-left: 45px;
margin-bottom: 15px;
font-weight: 700;
background-image: url('../img/tuktuk.png');
background-repeat: no-repeat;
background-position: 10px;
}
}
}
}
section.new-listing {
margin: 2rem 0;
article#id2 {
header.section-header {
width: 100%;
height: 35px;
margin: 0;
font-size: 20px;
background-color: green;
font-weight: 700;
line-height: 35px;
color: #fff;
display: flex;
}
div#new {
width: 945px;
max-height: 800px;
overflow: scroll;
dl {
display: flex;
width: 97%;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #62a478;
dt {
width: 280px;
margin: 0;
padding: 0;
}
dd {
width: calc(100% - 210px);
margin-left: 6px;
dl {
display: flex;
flex-wrap: wrap;
dt.new-name {
display: none;
dt {
width: 8rem;
margin: 0;
padding: 0 0 0 18px;
background: url('../img/pcNewTitleBg.png') left 50% no-repeat;
}
}
dd.new-name {
width: 100%;
margin-bottom: .5rem;
}
}
}
}
}
}
}
}
}
}