@charset "utf-8";
html {
/******************************* 01 layout */
/******************************* 02 area */
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
font-size: min(max(20px, 4vw), max(20px, 2vw, 2vh));
/* text-align: justify; */
/******************************* 06 others */
}
body {
/******************************* 01 layout */
/******************************* 02 area */
width: 100%;
min-width: 300px;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
font-family: "Roboto", "Noto Sans JP", sans-serif;
/* font-family: "Roboto", "Noto Serif JP", sans-serif; */
font-weight: 300;
font-style: normal;
/******************************* 06 others */
}
header {
/******************************* 01 layout */
display: grid;
place-content: center;
/******************************* 02 area */
width: 100%;
height: 101svh;
/* margin-bottom: 50vh; */
/******************************* 03 background */
/******************************* 04 border */
/* border-bottom: 1px solid #000; */
/******************************* 05 typography */
/******************************* 06 others */
}
header h1 {
/******************************* 01 layout */
position: fixed;
z-index: 100;
right: 0.5rem;
bottom: 0.5rem;
/******************************* 02 area */
width: 8rem;
height: 2.3rem;
/******************************* 03 background */
background-color: #fff;
/******************************* 04 border */
border-radius: 1.2rem;
border: 0.05rem solid #000;
/******************************* 05 typography */
font-size: 0.8rem;
text-align: center;
color: #000;
/******************************* 06 others */
}
header h1 a {
/******************************* 01 layout */
display: grid;
place-items: center;
/******************************* 02 area */
width: 100%;
height: 100%;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 others */
}
header h2 {
/******************************* 01 layout */
/******************************* 02 area */
padding-bottom: 0.3rem;
/******************************* 03 background */
/******************************* 04 border */
border-bottom: 1px solid #000;
/******************************* 05 typography */
font-size: 1.2rem;
text-align: center;
/******************************* 06 others */
}
header h2 mark {
/******************************* 01 layout */
/******************************* 02 area */
display: block;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
font-size: 0.7rem;
text-align: center;
padding-bottom: 0.3rem;
/******************************* 06 others */
}
header p {
/******************************* 01 layout */
position: relative;
/******************************* 02 area */
margin-top: 1rem;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
font-size: 0.9rem;
text-align: center;
/******************************* 06 others */
}
header p::before {
/******************************* 01 layout */
content: "start";
position: absolute;
bottom: -2.5rem;
right: -1.5rem;
left: 0;
margin: auto;
/******************************* 02 area */
width: fit-content;
height: fit-content;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 others */
transform: rotate(90deg);
}
@keyframes scrollAnimation {
0% {
transform: scaleY(0);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: top;
}
50.1% {
transform: scaleY(1);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
header p::after {
/******************************* 01 layout */
content: "";
position: absolute;
bottom: -3.5rem;
right: 0;
left: 0;
margin-inline: auto;
/******************************* 02 area */
width: 0.035rem;
height: 3rem;
/******************************* 03 background */
background-color: #000;
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 others */
animation-name: scrollAnimation;
animation-duration: 1.8s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
footer {
/******************************* 01 layout */
display: grid;
place-content: center;
/******************************* 02 area */
width: 100%;
min-height: 100vh;
/* margin-top: 50vh; */
/******************************* 03 background */
background-color: #000;
/******************************* 04 border */
/******************************* 05 typography */
color: #fff;
/******************************* 06 others */
}
footer p {
/******************************* 01 layout */
position: relative;
/******************************* 02 area */
margin-bottom: 1rem;
/******************************* 03 background */
/******************************* 04 border */
border-top: 1px solid #000;
/******************************* 05 typography */
font-size: 0.9rem;
text-align: center;
/******************************* 06 others */
}
footer p::before {
/******************************* 01 layout */
content: "end";
position: absolute;
top: -2.5rem;
right: -1.5rem;
left: 0;
margin: auto;
/******************************* 02 area */
width: fit-content;
height: fit-content;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 others */
transform: rotate(90deg);
}
@keyframes scrollAnimation {
0% {
transform: scaleY(0);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: top;
}
50.1% {
transform: scaleY(1);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
footer p::after {
/******************************* 01 layout */
content: "";
position: absolute;
top: -3.5rem;
right: 0;
left: 0;
margin-inline: auto;
/******************************* 02 area */
width: 0.035rem;
height: 3rem;
/******************************* 03 background */
background-color: #fff;
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 others */
animation-name: scrollAnimation;
animation-duration: 1.8s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
/***********************************************************
試作
***********************************************************/
/*********************************** モーダル 開くボタン */
.js01_css {
/******************************* 01 layout */
/******************************* 02 area */
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
cursor: pointer;
}
/*********************************** モーダル コンテンツ（下部レイヤー） */
.js02_css {
/******************************* 01 layout */
/******************************* 02 area */
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
/* 非表示 透明 */
visibility: hidden;
opacity: 0;
/* 「非表示 透明」の場合は、transitionを指定しない。スマホの場合に一瞬表示される問題あり */
/* transition: 0.7s; */
}
.js02_css.js04_css {
/******************************* 01 layout */
/******************************* 02 area */
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
/* 表示 不透明 */
visibility: visible;
opacity: 1;
transition: 0.5s;
}
.js02_css {
/******************************* 01 layout */
/* 自要素 */
position: fixed;
z-index: 800;
inset: 0;
/******************************* 02 area */
width: 100%;
overflow-y: auto;
/******************************* 03 background */
background: rgba(0, 0, 0, 0.7);
/* 「position:fixed」が効かない為、backdrop-filterは使用禁止 */
/* backdrop-filter: blur(0.3rem); */
/* -webkit-backdrop-filter: blur(0.3rem); */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
cursor: pointer;
}
/*********************************** モーダル 閉じるボタン */
.js03_css {
/******************************* 01 layout */
/******************************* 02 area */
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
/* 非表示 透明 */
visibility: hidden;
opacity: 0;
display: none;
}
.js04_css .js03_css {
/******************************* 01 layout */
/******************************* 02 area */
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
/* 表示 不透明 */
visibility: visible;
opacity: 1;
display: block;
}
.js03_css {
/******************************* 01 layout */
/* 「.modal_content z-index」よりも上にlayout */
/* ボタンの表示位置 */
position: fixed;
z-index: 1000;
top: 3%;
right: 2%;
/******************************* 02 area */
width: 2rem;
height: 2rem;
/******************************* 03 background */
background-color: #fff;
/******************************* 04 border */
border: 0.1rem solid rgba(0, 0, 0, 0.7);
border-radius: 50%;
/******************************* 05 typography */
/******************************* 06 other */
cursor: pointer;
}
.js03_css::before,
.js03_css::after {
/******************************* 01 layout */
content: "";
position: absolute;
inset: 0;
margin: auto;
/******************************* 02 area */
width: 0.2rem;
height: 60%;
/******************************* 03 background */
background-color: #000;
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
}
.js03_css::before {
/******************************* 01 layout */
/* 角度調整 */
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
/******************************* 02 area */
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
}
.js03_css::after {
/******************************* 01 layout */
/* 角度調整 */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
/******************************* 02 area */
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
}
/*********************************** モーダル コンテンツ表示中にスクロールさせない為、bodyタグに対して「.js05_css」クラス追加 */
.js05_css {
/******************************* 01 layout */
/******************************* 02 area */
overflow: hidden;
height: 100vh;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
touch-action: none;
}
/*********************************** main.a03 > section.b01 */
.a02 .b01 {
/******************************* 01 layout */
/******************************* 02 area */
width: 100%;
padding: min(50svh, 300svw) 1rem;
/******************************* 03 background */
background-color: #f5f5f7;
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
container-type: inline-size;
}
/*********************************** main.a03 > section.b01 > h3 */
.a02 .b01 h3 {
/******************************* 01 layout */
/******************************* 02 area */
width: max(610px, 80vw);
max-width: 100%;
margin: 0 auto 3rem;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
font-weight: 700;
font-size: min(2rem, 12cqw);
/******************************* 06 other */
}
/*********************************** main.a03 > section.b01 > h3 > br */
.a02 .b01 h3 br {
display: none;
}
@media screen and (max-width: 520px) {
.a02 .b01 h3 br {
display: block;
}
}
/*********************************** main.a03 > section.b03 > dl.c03 */
.a02 .b01 .c01 {
/******************************* 01 layout */
display: grid;
/* 列 */
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
/******************************* 02 area */
width: max(610px, 80vw);
max-width: 100%;
padding: 0 1rem;
margin: 0 auto;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
/******************************* 06 other */
}
/*********************************** main.a03 > section.b03 > dl.c03 > dt.d01 */
.a02 .b01 .c01 .d01 {
/******************************* 01 layout */
display: grid;
place-content: center;
position: relative;
/******************************* 02 area */
/* 自要素 縦横比 */
aspect-ratio: 5 / 2.5;
/******************************* 03 background */
background-color: #fff;
box-shadow: 0.05rem 0.1rem 0.2rem rgba(0, 0, 0, 0.25);
/******************************* 04 border */
/* border: 0.01rem solid rgba(0, 0, 0, 0.5); */
border-radius: 0.5rem;
/******************************* 05 typography */
/******************************* 06 other */
cursor: pointer;
container-type: inline-size;
}
.a02 .b01 .c01 .d01::after {
/******************************* 01 layout */
/* 自要素 擬似要素 */
content: "＋";
position: absolute;
right: 2cqw;
top: 2cqw;
/* 子要素 */
display: grid;
place-items: center;
/******************************* 02 area */
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
font-size: 6cqw;
font-weight: 900;
color: #000;
/******************************* 06 other */
}
/*********************************** main.a03 > section.b03 > dl.c03 > dt.d01 > p.e01 */
.a02 .b01 .c01 .d01 .e01 {
/******************************* 01 layout */
/******************************* 02 area */
width: 100%;
/******************************* 03 background */
/******************************* 04 border */
/******************************* 05 typography */
font-size: 7cqw;
font-weight: 400;
/******************************* 06 other */
}
/*********************************** main.a03 > section.b03 > dl.c03 > dd.d02 > dl.e02 */
.a02 .b01 .c01 .d02 .e01 {
/******************************* 01 layout */
margin: 5rem auto 3.5rem;
position: relative;
z-index: auto;
/******************************* 02 area */
width: max(610px, 80vw);
max-width: 100%;
min-height: 150svh;
padding: 2rem 1rem 0;
/******************************* 03 background */
background-color: #fff;
/******************************* 04 border */
border-radius: 0.5rem;
/******************************* 05 typography */
font-weight: 700;
font-size: max(1.5rem, 1.5cqw);
/******************************* 06 other */
cursor: default;
}