/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho+B1:wght@400;500;700&display=swap');
/*
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
font-weight: 500;
font-weight: 700;
font-family: 'Shippori Mincho B1', serif;
font-weight: 400;
font-weight: 500;
font-weight: 700;
*/
:root{
--color: #1a1a1a;
--color-pale: #4d4d4d;
--color-rgb: 26, 26, 26;
--color-theme: #d6d8da;
--color-theme-rgb: 214, 216, 218;
--color-point: #6e8094;
--color-point-rgb: 110, 128, 148;
--color-border: #808080;
--color-area1: #e39b88;
--color-area2: #93889f;
--color-area3: #ceba79;
--color-area4: #8bbda7;
--color-variable: var(--color-theme);
--wrap: min(calc(100vw - 40px), 1140px);
--wrap-fit: calc(100vw - 40px);
--wrap-max: 1140px;
--font: 'Noto Sans JP', sans-serif;
--font-go: var(--font);
--font-min: 'Shippori Mincho B1', serif;
}
html{
scroll-behavior: smooth;
scroll-padding-top: 60px;
}
body{
color: var(--color);
font: 400 16px var(--font);
/*font-feature-settings: "palt";*/
/*text-align: justify; 英文では解除*/
overflow-wrap: break-word;
line-height: 1;
}
body.nav{
overflow: hidden;
}
::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;
word-break: break-word;
}
.done a{
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;
}
main{}
main a{
color: #0096ba;
}
main a:where(:hover,:focus){
text-decoration: underline;
}
main p{
line-height: 1.75;
}
:where(input,textarea,select){
accent-color: var(--color-theme);
}
:where(input,textarea,select):focus{
border: 1px solid var(--color-theme);
}
:where(input[type="radio"],input[type="checkbox"]){}
:where(input[type="radio"],input[type="checkbox"])+label{}
:where(input[type="radio"],input[type="checkbox"])+label:before{
color: rgba(var(--color-rgb),0.2);
}
:where(input[type="radio"],input[type="checkbox"]):checked+label{}
:where(input[type="radio"],input[type="checkbox"]):checked+label:before{
animation: checked 0.2s forwards;
color: var(--color);
}
@keyframes checked{
30% {box-shadow: 0 0 0 1em rgba(var(--color-rgb),0.5);}
}
#wrapper{
display: grid;
}
#wrapper > *{
grid-column: 1;
}
#wrapper #header{
z-index: 120;
}
#wrapper #nav{
z-index: 140;
}
#wrapper #floatingNav{
z-index: 130;
}
#header{}
@media (max-width: 991.98px) {
#header{
position: sticky;
top: 0;
height: 60px;
display: flex;
justify-content: space-between;
background: var(--color-theme);
}
#header #siteName{
margin-left: 20px;
align-self: center;
}
#header #hNav{
display: none;
}
#header #searchButton{
margin-left: auto;
}
}
@media (min-width: 992px) {
#header{
display: grid;
grid-template-rows: 44px auto;
background: #fff;
border-bottom: 1px solid var(--color-border);
}
#header:before{
content: attr(data-text);
grid-column: 1 / 3;
grid-row: 1;
display: grid;
align-items: center;
padding-left: 24px;
background: var(--color-theme);
}
#header #siteName{
grid-column: 1;
grid-row: 2;
align-self: center;
margin: 16px 0 16px 24px;
}
#header #searchButton{
display: none;
}
#header #navButton{
display: none;
}
#header #hNav{
grid-column: 2;
grid-row: 1 / 3;
}
}
@media (min-width: 1200px) {
#header #siteName a{
width: 240px;
}
}
#siteName{}
#siteName a{
display: block;
font-size: 18px;
}
@media (min-width: 992px) {
#siteName a{
width: 200px;
aspect-ratio: 4 / 1;
background: url("../images/logoType.webp") center no-repeat;
background-size: contain;
font-size: 0;
transition: none;
overflow: hidden;
}
}
#hNav{
justify-self: end;
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-rows: 44px auto auto;
align-items: center;
grid-gap: 0 10px;
padding: 0 24px 16px 24px;
}
#hNav :where(#hNavGlobal, #hNavPickup){
grid-column: 1 / 4;
font-size: min(1.1vw, 16px);
order: 1;
}
#hNav #hNavSearch{
margin-left: auto;
}
#hNav #hNavGlobal{
margin-top: 16px;
}
#hNav #hNavGlobal:last-child{
grid-row: 2 / 4;
}
#hNav #hNavGlobal:not(:last-child){
align-self: end;
}
#hNav #hNavPickup{
margin-top: 8px;
}
#hNavSearch{}
#hNavSearch form{
height: 24px;
background: #fff;
grid-gap: 4px;
font-size: 12px;
}
#hNavSearch [type="submit"]{
order: -1;
width: 24px;
}
#hNavExtra{}
#hNavExtra ul{
display: flex;
grid-gap: 10px;
}
#hNavExtra a{
display: grid;
grid-template-columns: auto 8px 6px;
align-items: center;
grid-gap: 8px;
height: 24px;
padding: 2px 8px;
background: #fff;
border: 1px solid var(--color-border);
font-size: 12px;
}
#hNavExtra a:before{
content: "";
height: 16px;
border-right: 1px solid var(--color-border);
order: 1;
}
#hNavExtra a:after{
content: "";
width: 6px;
height: 8px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background: currentColor;
order: 2;
}
#hNavLanguage{}
#hNavLanguage dl{
position: relative;
font-size: 12px;
}
#hNavLanguage dl > dd{
display: none;
}
#hNavLanguage dt{
display: grid;
grid-template-columns: auto 8px 6px;
align-items: center;
grid-gap: 8px;
height: 24px;
padding: 2px 8px;
background: #fff;
border: 1px solid var(--color-border);
cursor: pointer;
}
#hNavLanguage dt:before{
content: "";
height: 16px;
border-right: 1px solid var(--color-border);
order: 1;
}
#hNavLanguage dt:after{
content: "";
width: 6px;
height: 8px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background: currentColor;
transform: rotate(90deg);
order: 2;
}
#hNavLanguage dt.open{}
#hNavLanguage dt.open:after{
transform: rotate(-90deg);
}
#hNavLanguage dt.open+dd{
display: block;
height: calc(24px * 3);
}
#hNavLanguage dt+dd{
position: absolute;
top: 100%;
width: 100%;
height: 0;
transition: height 0.2s ease-out;
overflow: hidden;
z-index: 1;
}
#hNavLanguage a{
display: grid;
align-items: center;
height: 24px;
padding: 2px 8px;
background: #fff;
border: 0 solid var(--color-border);
border-width: 0 1px 1px 1px;
text-align: center;
}
#hNavGlobal{}
#hNavGlobal ul{
display: flex;
justify-content: flex-end;
align-items: center;
grid-gap: 8px;
}
#hNavGlobal li{
display: contents;
}
#hNavGlobal li:nth-child(n+2):before{
content: "\FF0F";
}
#hNavGlobal a{
display: grid;
font-weight: 500;
}
#hNavGlobal a[href="/favorite/index.html"]{
grid-template-columns: 16px auto;
align-items: center;
grid-gap: 4px;
margin-left: 16px;
}
#hNavGlobal a[href="/favorite/index.html"]:before{
content: "";
width: 16px;
height: 16px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background: currentColor;
}
#hNavPickup{}
#hNavPickup ul{
display: flex;
justify-content: flex-end;
grid-gap: 24px;
}
#hNavPickup li{
max-width: 50%;
}
#hNavPickup a{
display: grid;
grid-template-columns: 11px auto;
grid-gap: 8px;
font-weight: 500;
line-height: 1.65;
}
#hNavPickup a:before{
content: "";
width: 11px;
height: 11px;
background: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
transform: translateY(calc(0.35em + 3px));
}
#navButton{
width: 60px;
aspect-ratio: 1;
display: grid;
align-content: center;
justify-items: center;
grid-gap: 5px;
margin: 0;
padding: 0;
background: var(--color-theme);
border: none;
color: var(--color);
font-size: 10px;
box-sizing: border-box;
text-transform: uppercase;
cursor: pointer;
}
#navButton i{
width: 32px;
height: 2px;
background: currentColor;
border-radius: 1px;
animation-duration: 0.75s;
animation-fill-mode: forwards;
transition: transform 0.75s;
}
#navButton.on{}
#navButton.on i{}
#navButton.on i:nth-of-type(1){
animation-name: navButton-bar01_on;
}
#navButton.on i:nth-of-type(2){
animation-delay: 0.375s;
animation-duration: 0.1875s;
animation-name: navButton-bar02_on;
}
#navButton.on i:nth-of-type(3){
animation-name: navButton-bar03_on;
}
#navButton.off{}
#navButton.off i{}
#navButton.off i:nth-of-type(1){
animation-name: navButton-bar01_off;
}
#navButton.off i:nth-of-type(2){
animation-name: navButton-bar02_off;
}
#navButton.off i:nth-of-type(3){
animation-name: navButton-bar03_off;
}
@keyframes navButton-bar01_on{
0% {
transform: translateY(0);
}
50% {
transform: translateY(7px) rotate(0);
}
100% {
transform: translateY(7px) rotate(45deg);
}
}
@keyframes navButton-bar01_off{
0% {
transform: translateY(7px) rotate(45deg);
}
50% {
transform: translateY(7px) rotate(0);
}
100% {
transform: translateY(0);
}
}
@keyframes navButton-bar02_on{
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes navButton-bar02_off{
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
@keyframes navButton-bar03_on{
0% {
transform: translateY(0);
}
50% {
transform: translateY(-7px) rotate(0);
}
100% {
transform: translateY(-7px) rotate(-45deg);
}
}
@keyframes navButton-bar03_off{
0% {
transform: translateY(-7px) rotate(-45deg);
}
50% {
transform: translateY(-7px) rotate(0);
}
100% {
transform: translateY(0);
}
}
#searchButton{
position: relative;
width: 60px;
aspect-ratio: 1;
margin: 0;
padding: 0;
background: var(--color-theme);
border: none;
font-size: 0;
box-sizing: border-box;
text-transform: uppercase;
cursor: pointer;
transform: translateX(16px);
}
#searchButton:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: 28.5px 28.5px;
background: currentColor;
}
#nav{
position: fixed;
top: 60px;
left: 100%;
display: grid;
align-content: start;
width: min(100%, 480px);
height: calc(100% - 60px);
padding: 20px 0 40px 0;
background: #fff;
transform: translateX(0);
transition: transform 0.2s ease-out;
overflow-y: auto;
overscroll-behavior: none;
z-index: 110;
}
.nav #nav{
transform: translateX(-100%);
}
#nav h2{
display: none;
}
#nav #navPickup{
margin-top: 24px;
}
@media (min-width: 480px) {
#nav{
border-left: 1px solid var(--color-border);
}
}
@media (max-width: 767.98px) {
#nav{
grid-template-columns: 20px 1fr 20px;
grid-gap: 20px 0;
}
#nav #navGlobal{
grid-column: 1 / 4;
}
#nav #navPickup{
grid-column: 1 / 4;
}
#nav #navFavorite{
grid-column: 2;
grid-row: 2;
justify-self: center;
}
#nav #navSearch{
grid-column: 2;
grid-row: 1;
}
}
@media (min-width: 768px) {
#nav{
grid-template-columns: 20px 1fr 1.5fr 20px;
grid-gap: 20px;
}
#nav #navGlobal{
grid-column: 1 / 5;
grid-row: 2;
}
#nav #navPickup{
grid-column: 1 / 5;
grid-row: 3;
}
#nav #navFavorite{
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: stretch;
}
#nav #navSearch{
grid-column: 3;
grid-row: 1;
}
}
#navGlobal{}
#navGlobal ul{
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--color-border);
}
#navGlobal li{
background: var(--color-theme);
border-bottom: 1px solid var(--color-border);
}
#navGlobal li:nth-child(odd){
border-right: 1px solid var(--color-border);
}
#navGlobal a{
display: grid;
align-items: center;
height: 48px;
padding: 8px 20px;
font-weight: 500;
}
#navPickup{}
#navPickup ul{
display: grid;
border-top: 1px solid var(--color-border);
}
#navPickup li{
background: var(--color-theme);
border-bottom: 1px solid var(--color-border);
}
#navPickup a{
display: grid;
grid-template-columns: 11px auto;
grid-gap: 8px;
align-items: center;
min-height: 48px;
padding: 8px 20px;
text-align: center;
font-weight: 500;
line-height: 1.65;
}
#navPickup a:before{
content: "";
width: 11px;
height: 11px;
background: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
}
#navSearch{}
#navSearch form{
display: grid;
grid-template-columns: auto 48px;
}
#navSearch input[type="text"]{
padding: 8px;
align-self: center;
}
#navFavorite{}
#navFavorite a{
display: grid;
grid-template-columns: 16px auto;
justify-content: center;
grid-gap: 8px;
padding: 16px;
background: var(--color-theme);
font-weight: 500;
}
#navFavorite a:before{
content: "";
width: 16px;
height: 16px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: currentColor;
}
#floatingNav{
position: fixed;
top: 0;
height: 60.5px;
width: 100%;
display: flex;
align-items: center;
grid-gap: 24px;
background: #fff;
border-bottom: 1px solid var(--color-border);
transform: translateY(-100%);
transition: transform 0.2s ease-out;
}
#floatingNav.active,
.nav #floatingNav{
transform: translateY(0);
}
#floatingNav #siteName{
margin-left: 20px;
}
#floatingNav #navButton{
margin-left: auto;
}
@media (max-width: 991.98px) {
#floatingNav{
display: none;
}
}
#floatingNavGlobal{
font-size: min(0.9vw, 16px);
}
#floatingNavGlobal ul{
display: flex;
align-items: center;
grid-gap: 8px;
}
#floatingNavGlobal li{
display: contents;
}
#floatingNavGlobal li:nth-child(n+2):not(:last-child):before{
content: "\FF0F";
}
#floatingNavGlobal a{
display: grid;
font-weight: 500;
}
#floatingNavGlobal a[href="/favorite/index.html"]{
grid-template-columns: 16px auto;
align-items: center;
grid-gap: 4px;
margin-left: 8px;
}
#floatingNavGlobal a[href="/favorite/index.html"]:before{
content: "";
width: 16px;
height: 16px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background: currentColor;
}
#pagePath{
padding: 8px 0;
background: #fff;
}
#pagePath ul{
display: flex;
flex-wrap: wrap;
grid-gap: 8px;
width: var(--wrap);
margin: 0 auto;
font-size: clamp(10px, 2.1vw, 14px);
line-height: 1.65;
}
#pagePath li{}
#pagePath li a{
text-decoration: underline;
}
#pagePath li+li{}
#pagePath li+li:before{
content: ">";
margin-right: 8px;
}
#main{
overflow: hidden;
}
#pageTop{
grid-row: 6;
align-self: flex-end;
justify-self: end;
position: -webkit-sticky;
position: sticky;
bottom: 0;
width: 3em;
height: 3em;
background: var(--color-theme);
color: transparent;
text-align: center;
cursor: pointer;
opacity: 0;
z-index: 100;
display: none;
}
.done #pageTop{
transition: opacity 0.2s ease-out 1s;
}
.done:not(.scrollTop) #pageTop{
opacity: 1;
}
#pageTop:hover{
background: #e50012;
}
#pageTop:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 2em;
background: #fff;
}
#footer{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
border-top: 1px solid var(--color-border);
padding-bottom: 36px;
}
#footer > *{
grid-column: 2;
}
#fNavGlobal{
display: grid;
padding-top: 16px;
font-feature-settings: "palt";
line-height: 1.65;
}
#fNavGlobal dt{
border-bottom: 1px solid var(--color-border);
font-weight: 500;
}
#fNavGlobal dd{
font-size: 14px;
}
#fNavGlobal a{
display: inline-grid;
grid-template-columns: 1em auto;
}
#fNavGlobal a:before{
content: "-";
}
#fNavGlobal a[href="/favorite/index.html"]{
margin-bottom: 1em;
}
@media (max-width: 575.98px) {
#fNavGlobal dl{}
#fNavGlobal dl > dd{
display: none;
}
#fNavGlobal dt{
display: grid;
grid-template-columns: auto 20px;
grid-gap: 4px;
align-items: center;
height: 56px;
color: #595757;
}
#fNavGlobal dt:after{
content: "";
width: 18px;
height: 16px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: 17.16px 15.71px;
background: var(--color);
}
#fNavGlobal dt.open{}
#fNavGlobal dt.open:after{
transform: rotate(90deg);
}
#fNavGlobal dt.open+span{
display: grid !important;
grid-gap: 12px;
padding: 16px 0 24px 0;
}
}
@media (min-width: 576px) {
#fNavGlobal{
grid-template-columns: repeat(2, auto);
align-items: start;
grid-gap: 56px;
padding-top: 80px;
}
#fNavGlobal dl{
display: grid;
grid-gap: 8px 16px;
}
#fNavGlobal dt{
margin-bottom: 4px;
padding-bottom: 20px;
pointer-events: none;
}
#fNavGlobal span{
display: contents;
}
}
@media (min-width: 768px) {
#fNavGlobal{
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
#fNavGlobal{
grid-template-columns: repeat(4, auto);
}
}
@media (min-width: 1200px) {
#fNavGlobal{
grid-template-columns: repeat(4, 1fr);
}
}
#fNavRelated{
border: 0 solid var(--color-border);
}
#fNavRelated a{
display: grid;
grid-template-columns: auto 20px;
grid-gap: 8px;
align-items: center;
height: 56px;
color: #595757;
font-weight: 500;
}
#fNavRelated a:after{
content: "";
width: 18px;
height: 16px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: 17.16px 15.71px;
background: var(--color);
}
@media (max-width: 575.98px) {
#fNavRelated{
border-bottom-width: 1px;
}
#fNavRelated li+li{
border-top: 1px solid var(--color-border);
}
#fNavRelated li+li.dummy{
border-top: none;
}
}
@media (min-width: 576px) {
#fNavRelated{
margin-top: 56px;
border-width: 1px 0;
}
#fNavRelated ul{
display: grid;
grid-template-columns: repeat(2, 1fr);
}
#fNavRelated a{
height: 40px;
padding: 8px 16px;
}
}
@media (min-width: 576px) and (max-width: 991.98px) {
#fNavRelated li{
padding: 20px 0;
}
#fNavRelated li:nth-child(n+3){
border-top: 1px solid var(--color-border);
}
#fNavRelated li:nth-child(odd) a{
border-right: 1px solid var(--color-border);
}
}
@media (min-width: 992px) {
#fNavRelated ul{
grid-template-columns: repeat(3, auto);
padding: 20px 0;
}
#fNavRelated li+li{
border-left: 1px solid var(--color-border);
}
#fNavRelated a{
text-align: center;
}
}
@media (min-width: 1200px) {
#fNavRelated ul{
grid-template-columns: repeat(3, 1fr);
}
}
#fAddress{
margin-top: clamp(32px, 8.4vw, 56px);
}
#fAddress dl{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 0 24px;
text-align: center;
line-height: 1.65;
}
#fAddress dt{
width: 100%;
font-weight: 500;
}
#fAddress dt+dd{
width: 100%;
margin-top: 4px;
}
#copyright{
margin-top: clamp(24px, 5.4vw, 36px);
}
#copyright p{
font-size: clamp(10px, 2.1vw, 14px);
text-align: center;
}
#emergency{
position: fixed;
left: 50%;
bottom: clamp(16px, 3.6vw, 24px);
width: min(var(--wrap-fit), 30em);
transform: translateX(-50%);
z-index: 1000;
display: none; /* ちらつき防止のためdefault none */
}
#emergency dl{
display: grid;
gap: 8px;
padding: clamp(16px, 3.6vw, 24px);
background: #fff;
line-height: 1.65;
filter: drop-shadow(0 0 0.2em rgba(0, 0, 0, 0.5));
cursor: pointer;
}
#emergency dt{
font-weight: 700;
}
#emergency dd{}
#emergency dd:has(a){
display: flex;
justify-content: center;
}
#emergency dd a{
display: grid;
grid-template-columns: auto 18px;
grid-gap: 16px;
align-items: center;
width: min(100%, 300px);
min-height: 50px;
margin: 8px 0 0 0;
padding: 4px 16px;
background: #fff;
border: 1px solid var(--color-border);
color: inherit;
text-align: center;
line-height: 1.65;
text-decoration: none;
}
#emergency dd a:after{
content: "";
aspect-ratio: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: 17.16px 15.71px;
background: currentColor;;
}
#emergency button{
position: absolute;
top: 0;
right: 0;
display: block;
width: 32px;
aspect-ratio: 1;
margin: 0;
padding: 0;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: 40%;
font-size: 0;
cursor: pointer;
overflow: hidden;
}
#customSearch{
position: fixed;
top: 60px;
left: 0;
width: 100%;
padding: 20px;
background: var(--color-theme);
transform: translateY(-100%);
transition: transform 0.2s ease-out;
}
.search:not(.nav) #customSearch{
transform: translateY(0);
}
#customSearch form{
background: #fff;
grid-template-columns: auto 48px;
}
#customSearch input[type="text"] {
padding: 8px;
align-self: center;
}
@media (min-width: 992px) {
#customSearch{
display: none;
}
}
#tabMenu{
position: relative;
overflow: hidden;
}
#tabMenu:before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid var(--color-border);
}
#tabMenu ul{
width: var(--wrap);
margin: 0 auto;
display: flex;
grid-gap: 0.5px;
}
#tabMenu li{
display: contents;
}
#tabMenu a{
position: relative;
display: grid;
align-content: center;
margin: 16px 0 1px 0;
padding: clamp(4px, 1.2vw, 8px) clamp(12px, 2.4vw, 16px);
background: #fff;
outline: 1px solid var(--color-border);
color: inherit;
font-size: clamp(12px, 2.4vw, 16px);
line-height: 1.65;
text-align: center;
word-break: keep-all;
text-decoration: none;
cursor: pointer;
}
#tabMenu a:before{
content: "";
position: absolute;
right: 1px;
bottom: 1px;
width: 4px;
height: 4px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: currentColor;
pointer-events: none;
}
#tabMenu .select{}
#tabMenu .select a{
margin: 1px 0 0 0;
border-bottom: none;
font-weight: 500;
pointer-events: none;
z-index: 1;
}
@media (min-width: 768px) {
#tabMenu a{}
#tabMenu a:before{
right: 2px;
bottom: 2px;
width: 6px;
height: 6px;
}
}
@media (min-width: 1200px) {
#tabMenu a{
padding: 8px 24px;
}
}
#pagenation{
margin: var(--space) auto;
}
#pagenation :where(ul,ol){
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
grid-gap: 0.5em;
width: var(--wrap);
margin: auto;
list-style: none;
}
#pagenation a{
display: grid;
place-items: center;
height: 40px;
color: inherit;
text-decoration: none;
}
#pagenation a:not([rel]){
aspect-ratio: 1;
background: #fff;
border: 1px solid var(--color-border);
}
#pagenation a:not([rel]).lsc-current-page{
background: var(--color-theme);
}
#pagenation a[rel]{
grid-gap: 0.5em;
font-weight: 700;
}
#pagenation a[rel]:before{
width: 16px;
aspect-ratio: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center;
-webkit-mask-size: contain;
background: currentColor;
transform: translateY(5%);
}
#pagenation a[rel="prev"]{
grid-template-columns: 16px auto;
margin-right: 8px;
}
#pagenation a[rel="prev"]:before{
content: "";
transform: scale(-1, 1);
}
#pagenation a[rel="next"]{
grid-template-columns: auto 16px;
margin-left: 8px;
}
#pagenation a[rel="next"]:before{
content: "";
order: 1;
}
#pagenation ul{}
#pagenation ul li{
display: flex;
}
#pagenation ul li+li{}
#pagenation ul li+li:before{
content: "｜";
margin-right: 0.5em;
}
@media (min-width: 576px) {
#pagenation a{
height: 50px;
}
}
.subject{
position: relative;
display: inline-block;
padding: 0 clamp(16px, 3.6vw, 24px);
font: clamp(20px, 4.2vw, 28px) var(--font-min);
line-height: 1.65;
text-align: center;
}
.subject:before,
.subject:after{
content: "";
position: absolute;
top: 50%;
width: 100vw;
height: clamp(32px, 6vw, 40px);
background-repeat: repeat-x;
transform: translateY(-50%);
}
.subject:before{
right: 100%;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-position: right center;
}
.subject:after{
left: 100%;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-position: left center;
}
.topicsList{
color: #595757;
}
.topicsList p{
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
}
.topicsList dl{
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
grid-gap: 8px 16px;
}
.topicsList dt{
grid-column: 1 / 3;
grid-row: 2;
font-weight: 500;
line-height: 1.65;
}
.topicsList dd{
display: contents;
}
.topicsList dd ul{
display: grid;
grid-template-areas: 'main';
width: 120px;
}
.topicsList dd li{
grid-area: main;
padding: 2px;
background: #fff;
border: 1px solid var(--color-border);
font-size: 14px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
}
.topicsList dd a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
@media (min-width: 768px) {
.topicsList dl{
grid-template-columns: auto auto 1fr;
align-items: start;
grid-gap: 0;
}
.topicsList dt{
grid-column: 3;
grid-row: 1;
}
.topicsList dd{}
.topicsList dd time{
grid-column: 2;
grid-row: 1;
margin-right: 32px;
padding: 0 32px;
border-right: 1px solid var(--color-border);
text-align: center;
transform: translateY(6px);
}
.topicsList dd ul{
grid-column: 1;
grid-row: 1;
transform: translateY(6px);
}
}
.infoWin{
background: #fff;
}
.infoWin dl{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: 'photo photo';
grid-gap: 8px;
width: clamp(168px, 40vw, 350px);
}
.infoWin dl:before{
content: "";
grid-area: photo;
width: 100%;
background: var(--dummy);
background-size: cover;
aspect-ratio: 1 / 0.667;
}
.infoWin dt{
grid-column: 1 / 3;
color: #4d4d4d;
font-weight: 700;
font-size: clamp(12px, 2.1vw, 14px);
line-height: 1.65;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.infoWin dt+dd{
grid-column: 1 / 3;
grid-row: 2;
position: relative;
padding-top: 66.66%;
}
.infoWin dd{
display: contents;
}
.infoWin dd{}
.infoWin dd:nth-of-type(2):last-child{}
.infoWin dd:nth-of-type(2):last-child a{
grid-column: 1 / 3;
justify-self: center;
width: 50%;
}
.infoWin dd img{
grid-area: photo;
width: 100%;
aspect-ratio: 1 / 0.667;
object-fit: cover;
}
.infoWin dd img[src=""]{
display: none;
}
.infoWin dd a{
display: grid;
place-items: center;
padding: 8px 4px;
background: #fff;
border: 1px solid var(--color-border);
color: inherit;
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(10px, 1.8vw, 12px);
text-decoration: none;
}
.infoPin{
display: grid;
width: 54px;
height: 62px;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4))
}
.infoPin:after{
content: "";
justify-self: center;
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: #fff;
transform: scale(0.6, 1) translateX(-40%);
}
.infoPin img{
width: 46px;
height: 46px;
background: var(--color);
border: 4px solid #fff;
object-fit: cover;
}
.categoryPin{
width: 50px;
height: 60px;
background: url('data:image/svg+xml;charset=UTF-8,') center top no-repeat;
}
.categoryPin:before{
content: "";
display: block;
width: 36px;
aspect-ratio: 1;
margin: 7px;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
background: var(--color-point);
}
.categoryPin[data-category="c1"]:before{
-webkit-mask-image: var(--icon-c1);
}
.categoryPin[data-category="c2"]:before{
-webkit-mask-image: var(--icon-c2);
}
.categoryPin[data-category="c3"]:before{
-webkit-mask-image: var(--icon-c3);
}
.categoryPin[data-category="c4"]:before{
-webkit-mask-image: var(--icon-c4);
}
.categoryPin[data-category="c5"]:before{
-webkit-mask-image: var(--icon-c5);
}
.categoryPin[data-category="c6"]:before{
-webkit-mask-image: var(--icon-c6);
}
.categoryPin[data-category="c7"]:before{
-webkit-mask-image: var(--icon-c7);
}
.countPin{
display: grid;
place-items: center;
width: 40px;
height: 54px;
padding-bottom: 16px;
background: url('data:image/svg+xml;charset=UTF-8,') center top no-repeat;
color: #fff;
font-weight: 500;
}
.slick-arrow{
position: relative;
width: clamp(48px, 9vw, 60px);
aspect-ratio: 1;
background: transparent;
border: 1px solid currentColor;
border-radius: 100%;
color: inherit;
font-size: 0;
z-index: 1;
}
.slick-arrow:before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: min(40%, 17px);
aspect-ratio: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: currentColor;
transform: translate(-50%, -50%);
}
.slick-prev{}
.slick-prev:before{
transform: translate(-50%, -50%) scale(-1, 1);
}
.cse-search-box{
display: grid;
grid-template-columns: auto auto;
border: 1px solid var(--color-border);
overflow: hidden;
}
.cse-search-box input{
padding: 0;
border: none;
}
.cse-search-box [type="submit"]{
aspect-ratio: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: min(80%, 32px);
background: currentColor;
}
/* image */
:root{
--dummy: #eaedf0 url('/common/images/dummy.svg') center no-repeat;
--icon-c1: url('data:image/svg+xml;charset=UTF-8,');
--icon-c2: url('data:image/svg+xml;charset=UTF-8,');
--icon-c3: url('data:image/svg+xml;charset=UTF-8,');
--icon-c4: url('data:image/svg+xml;charset=UTF-8,');
--icon-c5: url('data:image/svg+xml;charset=UTF-8,');
--icon-c6: url('data:image/svg+xml;charset=UTF-8,');
--icon-c7: url('data:image/svg+xml;charset=UTF-8,');
--icon-c8: url('data:image/svg+xml;charset=UTF-8,');
--icon-c9: url('data:image/svg+xml;charset=UTF-8,');
--pattern-area1: url('data:image/svg+xml;charset=UTF-8,');
--pattern-area2: url('data:image/svg+xml;charset=UTF-8,');
--pattern-area3: url('data:image/svg+xml;charset=UTF-8,');
--pattern-area4: url('data:image/svg+xml;charset=UTF-8,');
}