/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Noto+Serif+TC:wght@200..900&family=Shippori+Mincho:wght@400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
/*
Noto Sans JP
font-family: "Noto Sans JP", sans-serif;
Noto Serif JP
font-family: "Noto Serif JP", serif;
Noto Sans TC
font-family: "Noto Sans TC", sans-serif;
Noto Serif TC
font-family: "Noto Serif TC", serif;
Zen Kaku Gothic New
font-family: "Zen Kaku Gothic New", sans-serif;
Shippori Mincho
font-family: "Shippori Mincho", serif;
Source Code Pro
font-family: "Source Code Pro", monospace;
*/
[src="[url]"]{
background: #ccc;
}
:root{
--color: #333;
--color-rgb: 51, 51, 51;
--color-theme: #1e643c;
--color-theme-rgb: 30, 100, 60;
--variable-color: var(--color-theme);
--color-border: #808080;
--font: 'Noto Sans JP', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
--font-min: 'Noto Serif JP', serif;
--wrap-space: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
--wrap-fit: calc(min(100dvw, 100%) - (var(--wrap-space) * 2));
--wrap-max: 1100px;
--wrap: clamp(327px, calc(max(100dvw, 100%) - 48px), var(--wrap-max));
--dummy: #f2f2f2 url('/common/images/logoType.svg') no-repeat center / 75%;
}
html{
min-width: 375px;
scroll-behavior: smooth;
scroll-padding-top: 56px;
}
body{
color: var(--color);
font: 400 16px var(--font);
line-height: 1.65;
overflow-wrap: anywhere;
}
::selection{
background: var(--color-theme);
color: #fff;
}
::-moz-selection{
background: var(--color-theme);
color: #fff;
}
_::content, _:future, body:not(*:root) {
/* Chromeのハック */
/*フォント細いって言われたとき
font-weight: 500;
*/
}
_::-webkit-full-page-media, _:future, :root body{
/* safariのハック */
}
@-moz-document url-prefix(){
/* Firefoxのハック */
.xxx{
}
}
a{
color: inherit;
.done &{
transition-property: color, text-decoration, background, background-color, background-size, border, border-color, box-shadow, filter, opacity;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
:focus-visible{
outline: var(--color-theme) auto 2px;
outline-offset: 2px;
}
}
wbr{
.translated-ltr &:not(:lang(ja)){
display: none;
}
}
@-moz-document url-prefix(){
wbr{
display: none;
}
}
main{
& a{
color: var(--color-theme);
text-decoration: underline;
}
}
input,
textarea,
select{
background-color: transparent;
accent-color: var(--color-theme);
caret-color: var(--color-theme);
}
input{
&[type="checkbox"]:checked,
&[type="radio"]:checked{
background-color: var(--color-theme);
border-color: var(--color-theme);
}
}
button{
display: grid;
align-items: center;
min-height: 48px;
padding: 8px 16px;
background: var(--color-theme);
color: white;
text-align: center;
&:focus-visible{
outline: var(--color-theme) auto 2px;
outline-offset: 2px;
}
}
details{
all: unset;
display: block;
box-sizing: border-box;
&::details-content{
box-sizing: border-box;
}
}
summary{
all: unset;
box-sizing: border-box;
cursor: pointer;
&::-webkit-details-marker{
display:none;
}
}
#wrapper{
display: grid;
grid-template-rows: auto auto 1fr;
min-height: 100dvh;
#header{
grid-column: 1;
grid-row: 1;
position: sticky;
top: 0;
z-index: 110;
}
#nav{
z-index: 120;
@media (min-width: 1200px) {
grid-column: 1;
grid-row: 1;
justify-self: end;
position: sticky;
top: 0;
margin-right: clamp(64px, calc(120 / 1200 * 100dvw), 120px);
}
}
#footer,
#pageTop{
order: 10;
}
#navButton{
grid-column: 1;
grid-row: 1;
justify-self: end;
position: sticky;
top: 0;
z-index: 120;
}
}
#header{
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
#siteName{
margin: 0 auto 0 var(--wrap-space);
}
#hNav{
order: 1;
}
@media (min-width: 1200px) {
#navButton{
display: none;
}
}
}
#siteName{
& a{
position: relative;
display: block;
height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
aspect-ratio: 315 / 80;
background: url('/common/images/logoType.svg') no-repeat center top / contain;
font-size: 0;
transition: none;
@media (min-width: 992px) {
height: 64px;
}
@media (min-width: 1400px) {
height: 72px;
}
:lang(ja) & {
background:
url('/common/images/logoType.svg') no-repeat center top / contain,
url('/common/images/logoType-jp.svg') no-repeat right 32% bottom / 56% auto;
aspect-ratio: 315 / 92;
@media (min-width: 1400px) {
height: 80px;
}
}
}
}
#hNav{}
#hNavLanguage{
& summary{
display: grid;
align-content: center;
justify-items: center;
grid-row-gap: 0.5em;
aspect-ratio: 1;
width: clamp(64px, calc(120 / 1200 * 100dvw), 120px);
background: var(--color-theme);
color: #fff;
font-weight: 700;
font-size: clamp(10px, calc(15 / 1200 * 100dvw), 15px);
letter-spacing: 0.03em;
text-align: center;
&:before{
content: "";
aspect-ratio: 1;
width: clamp(24px, calc(36 / 1200 * 100dvw), 36px);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& summary+div{
position: absolute;
top: 100%;
right: 0;
display: grid;
background: #fff;
filter: drop-shadow(0 0 4px rgba(89, 87, 87, 0.3));
transform: translate(-8px, 8px);
@media (min-width: 992px) {
transform: translate(-16px, 16px);
}
}
& li{
&:nth-of-type(n+2){
border-top: 1px solid var(--color-border);
}
}
& a{
display: grid;
align-items: center;
min-height: 48px;
padding: 4px 16px;
}
}
#navButton{
all: unset;
box-sizing: border-box;
cursor: pointer;
display: grid;
align-content: center;
justify-items: center;
grid-gap: clamp(4px, calc(6 / 992 * 100dvw), 6px);
aspect-ratio: 1;
width: clamp(64px, calc(80 / 992 * 100dvw), 80px);
color: currentColor;
overflow: hidden;
& i{
width: clamp(16px, calc(24 / 992 * 100dvw), 24px);
height: 2px;
background: currentColor;
}
}
#nav{
& h2{
display: none;
}
& a{
font-weight: 500;
}
@media (max-width: 1199.98px) {
position: fixed;
top: 0;
left: 100%;
display: grid;
align-content: start;
width: min(100%, 260px);
height: 100%;
padding: 64px 24px;
background: var(--color-theme);
overflow-y: auto;
overscroll-behavior: none;
transform: translateX(0);
transition: transform 0.2s ease-out;
.nav &{
transform: translateX(-100%);
}
#navClose{
position: absolute;
top: 8px;
right: 8px;
}
#navLogin{
margin-top: 72px;
}
}
@media (min-width: 1200px) {
display: flex;
align-items: center;
column-gap: clamp(32px, calc(40 / 1200 * 100dvw), 40px);
margin-left: 200px;
#navLogin{
margin-right: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
}
#navClose{
display: none;
}
}
}
#navClose{
all: unset;
box-sizing: border-box;
cursor: pointer;
position: relative;
display: block;
aspect-ratio: 1;
width: 40px;
background: #fff;
border-radius: 100%;
color: var(--color);
font-size: 0;
overflow: hidden;
&:before,
&:after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 2px;
background: currentColor;
}
&:before{
transform: translate(-50%, -50%) rotate(45deg);
}
&:after{
transform: translate(-50%, -50%) rotate(-45deg);
}
}
#navGlobal{
& a{
letter-spacing: 0.03em;
}
@media (max-width: 1199.98px) {
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
min-height: 48px;
border-bottom: 1px solid currentColor;
color: #fff;
font-size: 15px;
font-family: var(--font-min);
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
@media (min-width: 1200px) {
& ul{
display: flex;
align-items: center;
column-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
}
&:lang(ja){
font-family: "Zen Kaku Gothic New", var(--font);
}
& a{
/*font-size: clamp(14px, calc(18 / 1200 * 100dvw), 18px);*/
text-align: center;
}
}
@media (min-width: 1200px) and (max-width: 1299.98px) {
&:lang(en) {
& a{
font-size: 14px;
}
}
}
@media (min-width: 1400px) {
& a{
font-size: 18px;
text-align: center;
}
}
}
#navLogin{
&:lang(ja){
font-family: "Zen Kaku Gothic New", var(--font);
}
& ul{
display: grid;
}
& li{
display: contents;
}
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
min-height: 40px;
padding: 8px 16px;
background: var(--color-theme);
border-radius: 2px;
color: #fff;
font-weight: 500;
letter-spacing: 0.1em;
text-align: center;
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
transform: translateX(8px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
li:nth-child(2) &{
background: #c1272d;
}
}
@media (max-width: 1199.98px) {
& ul{
grid-row-gap: 16px;
justify-content: center;
}
& a{
border: 1px solid currentColor;
}
}
@media (min-width: 1200px) {
& ul{
&:has(li:nth-child(2)){
display: grid;
grid-template-columns: repeat(2, auto);
column-gap: 8px;
}
}
& a{
/*font-size: clamp(14px, calc(16 / 1200 * 100dvw), 16px);*/
font-size: 14px;
}
}
@media (min-width: 1200px) {
& ul{
&:has(li:nth-child(2)){
grid-template-columns: repeat(2, auto);
&:lang(ja){
grid-template-columns: repeat(2, 1fr);
}
}
}
}
@media (min-width: 1200px) and (max-width: 1299.98px) {
&:lang(en) {
& a{
font-size: 12px;
}
}
}
@media (min-width: 1400px) {
& a{
font-size: 16px;
text-align: center;
}
}
}
#pagePath{
display: grid;
grid-template-columns: var(--wrap-fit);
justify-content: center;
padding: 8px 0;
background: #f3f3f3;
font-weight: 500;
letter-spacing: 0.1em;
&:lang(ja){
font-family: "Zen Kaku Gothic New", var(--font);
}
& ul{
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 8px;
font-size: 14px;
}
& li{
display: contents;
&:not(:first-child){
&:before{
content: "\FF1E";
}
}
}
& a{
display: block;
text-decoration: underline;
}
}
_::-webkit-full-page-media, _:future, :root #alert{
all: unset;
box-sizing: border-box;
position: fixed;
top: 50%;
display: grid;
grid-template-rows: auto 1fr;
width: min(calc(100% - 16px), 960px);
max-height: min(calc(100% - 16px), 960px);
padding: 24px;
transform: translateY(-50%);
}
#alert{
display: grid;
grid-template-rows: auto 1fr;
width: min(calc(100% - 16px), 960px);
max-width: unset;
max-height: min(calc(100% - 16px), 960px);
padding: 24px;
background: transparent;
overflow: hidden;
&:not([open]){
visibility: hidden;
pointer-events: none;
}
&::backdrop{
background: rgba(0, 0, 0, 0.5);
}
& h2{
grid-row: 1;
display: grid;
grid-template-columns: 32px auto;
justify-content: center;
align-items: center;
column-gap: 16px;
min-height: 56px;
padding: 8px 24px;
background: #c1272d;
border-radius: 8px 8px 0 0;
color: #fff;
font-weight: 700;
font-size: 20px;
font-family: inherit;
text-align: center;
letter-spacing: 0.05em;
@media (min-width: 992px) {
padding: 8px 40px;
}
&:before{
content: "";
aspect-ratio: 1;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
}
}
& button{
outline: none;
}
#alertList{
max-height: 100%;
padding: 0 clamp(16px, calc(24 / 992 * 100dvw), 24px);
background: #fff;
border: 2px solid #c1272d;
border-radius: 0 0 8px 8px;
overflow-y: auto;
outline: none;
/*scrollbar-color: #c1272d transparent;*/
&::backdrop{
background: rgba(0, 0, 0, 0.5);
}
&::-webkit-scrollbar{
width: 16px;
}
&::-webkit-scrollbar-track{
background: transparent;
}
&::-webkit-scrollbar-thumb{
background: #c1272d;
background-clip: content-box;
border: 3px solid transparent;
border-radius: 8px;
}
&::-webkit-scrollbar-button{
display: none;
height: 16px;
background: #c1272d;
}
}
#alertClose{
all: unset;
box-sizing: border-box;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
aspect-ratio: 1;
width: 48px;
background: #999;
border-radius: 100%;
font-size: 0;
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
}
}
}
#alertList{
display: grid;
& details{
display: contents;
&[open] summary:after{
transform: scaleY(-1);
order: -1;
}
}
& summary{
display: grid;
grid-template-rows: auto 1fr;
justify-items: center;
grid-row-gap: 4px;
width: 3.5em;
font-size: 12px;
line-height: 1.2;
text-align: center;
cursor: pointer;
z-index: 1;
outline: none;
&:after{
content: "";
aspect-ratio: 1;
width: 14px;
background: #c1272d;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
}
}
.alertItem{
padding: clamp(16px, calc(24 / 992 * 100dvw), 24px) 0;
&:nth-child(n+2){
border-top: 1px dotted;
}
&:has(details){
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
column-gap: 8px;
}
& details{
&[open]::details-content{
grid-column: 1 / 3;
margin-top: 16px;
padding: 16px;
background: #f2f2f2;
}
}
& summary{
align-self: end;
}
}
}
#footer{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
margin-top: 16px;
#fAddress{
margin-top: 32px;
}
#copyright{
margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
}
#pageTop{
order: -1;
justify-self: start;
}
}
#fAddress{
display: grid;
font-weight: 500;
&:lang(ja){
font-family: "Zen Kaku Gothic New", var(--font);
}
&:after{
content: "";
display: grid;
align-content: center;
justify-content: center;
width: 140px;
aspect-ratio: 200 / 273;
background: url('/common/images/logoType-v.svg') no-repeat center top;
}
:lang(ja) &:after{
aspect-ratio: 200 / 295;
background:
url('/common/images/logoType-v.svg') no-repeat center top / contain,
url('/common/images/logoType-jp.svg') no-repeat center bottom / contain;
}
& dl{
justify-self: start;
}
& dt{
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid currentColor;
}
& dd:nth-of-type(1){
font-size: 20px;
letter-spacing: 0.05em;
}
& p{
margin-top: clamp(40px, calc(80 / 1200 * 100dvw), 80px);
font-size: 14px;
letter-spacing: 0.05em;
}
@media (max-width: 767.98px) {
&:after{
justify-self: center;
margin-top: clamp(40px, calc(80 / 1200 * 100dvw), 80px);
}
}
@media (min-width: 768px) {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 1fr auto;
&:after{
grid-column: 2;
grid-row: 1 / 3;
margin-left: 48px;
}
}
}
#copyright{
padding: 16px 0;
text-align: center;
& p:nth-child(1){
letter-spacing: 0.1em;
}
& p:nth-child(2){
font: 20 14px var(--font-min);
letter-spacing: 0.05em;
}
}
#pageTop{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 16px;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
&:lang(ja){
font-family: "Zen Kaku Gothic New", var(--font);
}
&:after{
content: "";
aspect-ratio: 1;
width: 36px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
#pagenation{
&:lang(ja){
font-family: "Zen Kaku Gothic New", var(--font);
}
& ul,
& ol{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
grid-gap: 8px;
list-style: none;
}
& ul{
column-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
& li{
display: contents;
&:nth-child(n+2):before{
content: "|";
}
&:only-child:before,
&:only-child:after{
content: "|";
}
}
}
& a{
display: grid;
text-decoration: none;
color: inherit;
font-weight: 500;
&:not([rel]){
aspect-ratio: 1;
width: 48px;
place-items: center;
padding-bottom: 0.1em;
background: #f3f3f3;
border-radius: 100%;
font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
}
&[rel="prev"],
&[rel="next"]{
align-items: center;
grid-gap: 4px;
color: inherit;
&:before{
aspect-ratio: 1;
width: 10px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
background: currentColor;
}
}
&[rel="prev"]{
grid-template-columns: auto auto;
&:before{
content: "";
transform: scale(-1, 1);
}
}
&[rel="next"]{
grid-template-columns: auto auto;
&:before{
content: "";
order: 1;
}
}
&[rel="list"]{
}
&.lsc-current-page{
background: #c8aa14;
color: #fff;
pointer-events: none;
}
}
}
#process{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
& ol{
display: grid;
grid-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
@media (min-width: 768px) {
&:has(li:nth-child(4)){
grid-template-columns: repeat(4, 1fr);
}
&:has(li:nth-child(5)){
grid-template-columns: repeat(5, 1fr);
}
}
& li{
grid-row: 1;
display: grid;
place-content: center;
min-height: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
padding: 0.25em;
background: #ebebeb;
border-radius: 4px;
font-weight: 600;
font-size: clamp(10px, calc(16 / 768 * 100dvw), 16px);
text-align: center;
&.select{
background: rgba(200, 170, 20, 0.8);
color: #fff;
}
&.selectDone {
background: rgba(200, 170, 20, 0.4);
color: #fff;
}
&:nth-child(n+2){
position: relative;
&:before{
content: "";
position: absolute;
top: 50%;
left: 0;
aspect-ratio: 1;
width: clamp(16px, calc(24 / 768 * 100dvw), 24px);
background: #ccc;
transform: translate(-100%, -50%);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
}
}
.anchor{
position: sticky;
top: 0;
}
:root{
--pattern: url('data:image/svg+xml;charset=UTF-8,');
}
.lscDisable{
pointer-events: none!important;
cursor: not-allowed!important;
opacity: 0.5!important;
}
.lscDim{
opacity: 0.5!important;
}
.lscNone{
display: none!important;
}
.lscInvisible{
opacity:0!important;
}
.lscNotAllowed{
cursor: not-allowed!important;
}
.lsf-error-btn{
background-color: red!important;
}
.lscErrorStr{
color:red!important
}
.lscErrorBorder{
border: solid red 1px!important;
background-color: #FFDCDD!important;
}
.err{
color:red!important;
}
.picker[aria-hidden="true"]{
display: none;
}
.picker button{
color: inherit;
}
.is-active::after {
background: #000!important;
}
/* default.css L.4 で checkbox 効かなくなるので追加
input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
background: #fff;
cursor: pointer;
position: relative;
}*/
/* チェックが入った時のスタイル
input[type="checkbox"]:checked {
background: #c8aa14;
border-color: #c8aa14;
}*/
/* チェック時のレ点（擬似要素で作成）
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
*/