@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
} article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");
.mincho {
font-family:'Source Serif 4',"游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.gothic {
font-family:'noto sans jp',"游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}
html { font-family:'noto sans jp',"游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
font-size: 62.5%;
font-weight: 500;
}
.sp {
display: none;
}
@media screen and (max-width: 959px) {
.sp {
display: block;
}
}
.ta-c {
text-align: center;
}
.ilb {
display: inline-block;
}
body {
font-size: 1.6em; background-size: cover;
background-color: #F0F0F0;
}
img {
max-width: 100%;
object-fit: cover;
}
a {
text-decoration: none;
}
.wrap-a {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
border-top: #000 2px solid;
border-bottom: #000 2px solid;
} .wrap-b {
width: 100%;
position: relative;
height: fit-content;
display: flex;
justify-content: center;
}
.firstview_image {
width: 35%;
height: 85vh;
border-radius: 0 !important;
object-position: center 15%;
position: relative;
display: block;
@media screen and (max-width:767px) {
width: 100%;
height: 60vh;
}
}
#firstView .wrap-a {
background-image: radial-gradient(hsla(0, 0%, 63%, .5) 1px, transparent 0);
background-size: 20px 20px; background-repeat: repeat;
}
.firstview_image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 !important;
object-position: center 15%;
}
.record_area {
width: 55%;
padding: 32px;
height: 85vh;
background-color: #df1f7c;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.record_area .img_area {
display: flex;
width: 60%;
height: auto;
aspect-ratio: 366/274;
gap: -5%;
align-items: end;
}
.record_area .img_area img {
object-fit: contain;
}
.music_title {
position: absolute;
right: 0;
top: 0;
}
.record {
width: 75% !important;
}
.needle {
width: 25% !important;
transform-origin: 80% 10%;
position: relative;
left: -18px;
top: -8px;
}
.play_btn {
cursor: pointer;
writing-mode: vertical-lr;
color: #000;
display: flex;
place-items: center;
transition: all 0.3s ease-in-out;
will-change: transform; gap: 24px;
font-size: 2rem;
text-transform: uppercase;
@media screen and (max-width:767px) {
writing-mode: horizontal-tb;
}
} .play_btn .play {
color: #000;
background-color: #fff;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
opacity: 1;
visibility: visible;
}
.play_btn .stop {
color: #000;
background-color: #fff;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
opacity: 0;
visibility: hidden;
@media screen and (max-width:767px) {
padding-bottom: 0px !important;
}
}
.play_btn.on .play {
color: #000;
background-color: #fff;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
opacity: 0;
visibility: hidden;
@media screen and (max-width:767px) {
padding-bottom: 0px !important;
}
}
.play_btn.on .stop {
color: #000;
background-color: #fff;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
opacity: 1;
visibility: visible;
}
.play_btn .play:hover {
color: #fff;
background-color: #000;
}
.play_btn .stop:hover {
color: #fff;
background-color: #000;
}
.fa-backward {
color: #E8F0FE;
font-size: 18px;
transition: all 0.1s ease-in-out;
}
.reload_btn {
transition: all 0.3s ease-in-out;
cursor: pointer;
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: #151A1A;
display: grid;
place-items: center;
}
.reload_btn svg {
width: 2rem;
}
.reload_btn path {
fill: #E8F0FE;
}
.reload_btn:hover path {
fill: #151A1A;
}
.reload_btn:hover {
background-color: #E8F0FE;
}
.reload_btn.isplay {
background-color: #E8F0FE;
}
.reload_btn:hover .fa-backward {
color: #151A1A;
}
.reload_btn.isplay .fa-backward {
color: #151A1A;
}
.music_title {
width: fit-content;
position: absolute;
top: 32px;
left: 50%;
transform: translateX(-50%);
font-family: "Source Serif 4", 'Spectral SC', serif;
}
.music_title .title {
color: #fff;
font-size: 24px;
}
.prev,
.next {
cursor: pointer;
}
.prev .fa-solid {
color: #E8F0FE !important;
}
.next .fa-solid {
color: #E8F0FE !important;
}
.btn-a {
width: 112px;
height: 40px;
display: grid;
place-items: center;
background-color: #4A4DFE;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.6rem;
transition: all 0.3s; }
.prev_next {
display: flex;
align-items: center;
gap: 24px;
}
.btn-a:hover {
border: 1px solid #4A4DFE;
color: #4A4DFE;
background-color: transparent;
}
#player {
position: absolute;
opacity: 0;
width: 0px;
height: 0px;
background-color: #fff;
}
.btn-a .btnIcon {
padding-right: 0.5rem;
margin-left: -1rem;
}
.btn-b {
margin-left: auto;
margin-right: auto;
margin-top: 24px;
max-width: 600px;
padding: 22px 0;
background-color: #fff;
color: #000;
border-radius: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 2rem;
}
.btn-b:hover {
opacity: 0.6;
}
.btn-b .btnIcon {
padding-right: 1.2rem;
margin-left: -1rem;
}
.music_list {
width: 100%;
display: grid;
row-gap: 1.8rem;
grid-template-columns: repeat(2, 1fr);
color: #E8F0FE;
column-gap: 1rem;
}
.music-item {
cursor: pointer !important;
padding: 6px;
color: #000;
background-image: linear-gradient(45deg, #df1f7c 0%, #f779a1 50%, #ffbdd5 100%);
transition: all 0.3s ease;
background-size: 200% 100%;
background-position: -100% -100%;
}
.music-item:hover {
background-position: 0% 0%;
}
.music-item.select {
background-position: 0% 0%;
color: #E8F0FE;
}
.btns {
position: absolute;
right: 3.2%;
bottom: 3rem;
display: flex;
flex-direction: column;
gap: 2rem;
@media screen and (max-width:767px) {
top: 8px;
right: 50%;
width: 100%;
justify-content: center;
transform: translateX(50%);
flex-direction: row;
height: fit-content;
}
}
@media screen and (max-width:1282px) {
.record_area {
gap: 1.6rem;
}
.music-item {
padding: 4px;
font-size: 14px;
}
.record_area .img_area {
width: 60%;
}
.fa-backward {
color: #E8F0FE;
font-size: 14px;
transition: all 0.1s ease-in-out;
}
.reload_btn {
transition: all 0.3s ease-in-out;
cursor: pointer;
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: #151A1A;
display: grid;
place-items: center;
}
}
@media screen and (max-width:1100px) {
.music_list {
row-gap: 1rem;
grid-template-columns: repeat(1, 1fr);
}
.record_area {
padding: 16px;
}
.music_list {
row-gap: 0.6rem;
}
}
@media screen and (max-width:960px) {
.record_area {
gap: 10px;
padding: 16px 24px;
}
.reload_btn {
width: 3rem;
height: 3rem;
}
.reload_btn svg {
width: 1.2rem;
}
.fa-refresh {
font-size: 16px;
}
}
@media screen and (max-width:600px) {
.needle {
width: 25% !important;
transform-origin: 80% 10%;
position: relative;
left: -10px;
top: -8px;
}
.record_area {
gap: 0px;
padding: 48px 24px 16px; }
.music_list {
grid-template-columns: repeat(1, 1fr) !important;
}
.reload_btn {
top: 16px;
left: 16px;
width: 3rem;
height: 3rem;
}
.fa-refresh {
font-size: 16px;
}
} #header {
width: 100%;
z-index: 9999; background-color: #1EF1C4;
position: fixed;
top: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
border-bottom: #000 2px solid;
}
#header.topPage_header {
top: -200px;
}
#header.disp {
top: 0; -webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#header h1 {
font-family: "Source Serif 4",'Spectral SC', serif;
text-align: center;
font-size: 2.3rem;
line-height: 1;
padding-top: 1.7rem;
padding-bottom: 1.4rem;
}
#header h1 span {
font-size: 1.5rem;
padding-top: 1rem;
}
@media screen and (max-width: 424px) {
#header h1 {
font-size: 5.4vw;
}
#header h1 span {
font-size: 3.5vw;
}
}
#header a {
color: #000;
}
#header .wrap-a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
border-top: none;
border-bottom: none; padding: 0px 32px;
}
#header .hmbIcon_outer {
display: none;
}
#header .nav_wrap {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#header .nav_wrap ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
#header .nav_wrap ul li {
margin-left: 15px;
margin-right: 15px;
font-size: 1.5rem;
font-family: 'noto sans jp',"游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
letter-spacing: 0.2rem;
}
#header .nav_wrap ul li>a {
position: relative;
-webkit-perspective: 4000px;
perspective: 4000px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#header .nav_wrap ul li>a:hover .item {
-webkit-transform: translateZ(-16px) rotateX(90deg);
transform: translateZ(-16px) rotateX(90deg);
}
#header .nav_wrap ul li>a:hover .hover {
opacity: 1;
}
@media screen\0 {
#header .nav_wrap ul li>a:hover .item {
-webkit-transform: none;
transform: none;
}
#header .nav_wrap ul li>a:hover .normal {
opacity: 0.6;
}
#header .nav_wrap ul li>a:hover .hover {
opacity: 1;
}
}
#header .nav_wrap ul li .item {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
height: 1.6rem;
}
#header .nav_wrap ul li .normal { -webkit-transform: translateZ(16px);
transform: translateZ(16px);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#header .nav_wrap ul li .hover {
position: absolute;
opacity: 0;
top: 0;
-webkit-transform: rotateX(-90deg) translateZ(16px);
transform: rotateX(-90deg) translateZ(16px);
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-weight: bold;
}
@media screen and (max-width: 1160px) {
#header {
height: 69px;
-webkit-transition: height 0.7s linear;
transition: height 0.7s linear;
}
}
@media screen and (max-width: 1160px) and (max-width: 424px) {
#header {
height: 18.2vw;
}
}
@media screen and (max-width: 1160px) {
#header.open {
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
height: 100vh;
}
#header h1 {
padding-top: 1.25rem;
padding-bottom: 1rem;
}
#header .wrap-a {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#header .spHeader_wrap {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#header .hmbIcon_outer {
display: block;
width: 26px;
height: auto;
position: relative;
}
#header .hmbIcon_outer::before {
content: "";
display: block;
padding-top: 100%;
}
#header .hmbIcon_outer .hmbIcon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#header .hmbIcon_outer .hmbIcon span {
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
position: absolute;
display: block;
width: 100%;
height: 2px;
background-color: #000;
}
#header .hmbIcon_outer .hmbIcon span:nth-child(1) {
top: 8%;
}
#header .hmbIcon_outer .hmbIcon span:nth-child(2) {
top: 46%;
}
#header .hmbIcon_outer .hmbIcon span:nth-child(3) {
bottom: 8%;
}
#header .hmbIcon_outer .hmbIcon.open span:nth-child(1) {
top: 46%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#header .hmbIcon_outer .hmbIcon.open span:nth-child(2) {
right: 0;
width: 0;
}
#header .hmbIcon_outer .hmbIcon.open span:nth-child(3) {
top: 46%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#header .nav_wrap {
height: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
#header .nav_wrap ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 30px;
}
#header .nav_wrap ul li {
font-size: 3rem;
margin-top: 4rem;
}
#header .nav_wrap.open {
height: auto;
display: block;
opacity: 1;
pointer-events: auto;
-webkit-transition: opacity 1s linear 0.3s;
transition: opacity 1s linear 0.3s;
}
} .go2top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #4A4DFE;
color: #fff;
padding: 24px 0;
} .go2top .icon {
padding-right: 1rem;
}
#footer {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #1EF1C4;
padding: 68px 0 26px;
color: #000;
.wrap-a {
border: none;
padding: 0 32px;
}
}
#footer a {
color: #000;
}
#footer li {
font-size: 2rem;
margin-bottom: 2rem;
font-family: 'noto sans jp',"游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
#footer li a {
-webkit-transition: all 0.3s;
transition: all 0.3s;
letter-spacing: 0.3rem;
}
#footer li a:hover {
letter-spacing: 1rem;
opacity: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#footer .snsIcons {
position: relative;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
display: grid;
}
#footer .snsIcons .snsIcon {
margin-left: 1rem;
margin-right: 1rem;
}
#footer .copy {
text-align: center;
margin-top: 100px;
}
@media screen and (max-width: 959px) {
#footer .copy {
margin-top: 20px;
}
}
.sideIcons {
position: -webkit-sticky;
position: sticky;
bottom: 20px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.sideIcons.disp {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.sideIcons .wrap-a {
position: relative;
border: none;
padding: 0;
}
.sideIcons a {
width: 40px;
}
.sideIcons a:hover .snsIcon {
font-size: 3.5rem;
-webkit-transition: all 0.12s;
transition: all 0.12s;
}
.sideIcons a .snsIcon {
-webkit-transition: all 1s;
transition: all 1s;
display: grid;
place-items: center;
margin-left: auto;
margin-right: auto;
width: fit-content;
} .snsIcons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 83px;
position: absolute;
right: 0;
bottom: 0;
padding-bottom: 20px;
}
.snsIcons .snsIcon {
font-size: 30px;
margin-top: 1.8rem;
color: #aaa;
}
.noPost {
font-size: 2rem;
text-align: center;
width: 100%;
} .acv_list {
width: 100% !important;
padding: 37px 34px 33px !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.acv_list:first-child {
margin-top: 0;
}
.acv_list:not(:first-child) {
border-left: 2px solid #000;
}
.acv_list img {
-ms-flex-negative: 0;
flex-shrink: 0;
margin-right: 36px;
width: 130px;
height: 130px;
}
.acv_list .text {
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 0;
overflow-wrap: break-word;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.acv_list .text>* {
width: 100%;
}
.acv_list p {
width: 100%;
min-height: 0;
word-break: break-all;
}
@media screen and (max-width: 767px) {
.acv_list {
padding: 4.8vw 4.3vw 4.3vw;
border-radius: 1.3vw;
margin-top: 3.8vw;
}
.acv_list img {
margin-right: 4.8vw;
width: 16.9vw;
height: 16.9vw;
}
.acv_list .btn-a {
width: 18.3vw;
padding: 1.7vw 0;
border-radius: 0.7vw;
font-size: 2.1vw;
}
.acv_list .btn-a .btnIcon {
padding-right: 1.6vw;
margin-left: -1.3vw;
}
} #topPage .wrap-b {
position: relative;
}
#topPage .wrap-b .flow_text {
position: absolute;
right: 4.5%;
top: 50%;
transform: translate(0, -50%);
writing-mode: vertical-lr;
background-color: #fff;
text-transform: uppercase;
padding: 10px;
}
#topPage #firstView h1 {
font-family: "Source Serif 4",'Spectral SC', serif;
text-align: center;
font-size: 3rem;
line-height: 1;
padding-top: 2.5rem;
padding-bottom: 2rem;
}
#topPage #firstView h1 span {
font-family: "Source Serif 4",'Spectral SC', serif;
font-size: 1.8rem;
padding-top: 1rem;
}
#topPage #firstView .wrap-b {
position: relative;
width: 100%; background-color: #4A4DFE;
justify-content: start; }
.deco {
padding-top: 37px;
background-color: #F0F0F0 !important;
@media screen and (max-width:767px) {
padding-top: 24px;
padding-bottom: 24px;
}
}
#topPage #topics {
margin-top: 0;
.deco {
padding-top: 37px;
background-size: 16px 16px;
background-color: #1EF1C4;
background-repeat: repeat;
background-position: center top;
display: grid;
place-items: center;
@media screen and (max-width:767px) {
border-top: 2px solid #000;
} }
} @media screen and (max-width: 959px) {
#topPage #firstView .wrap-a {
padding: 0;
}
}
#topPage #firstView .wrap-b img {
width: 100%;
border-radius: 10px;
}
@media screen and (max-width: 959px) {
#topPage #firstView .wrap-b img {
border-radius: 0;
}
}
#topPage #firstView .snsIcons {
display: none;
}
@media screen and (max-width: 959px) {
#topPage #firstView .snsIcons {
display: -webkit-box;
display: -ms-flexbox;
display: none;
position: relative;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
#topPage #firstView .snsIcons .snsIcon {
margin-left: 1rem;
margin-right: 1rem;
}
}
@media screen and (max-width:1280px) {
#topPage #topics .wrap-b {
flex-direction: column;
}
#topPage #topics .acv_list {
border: none;
}
}
@media screen and (max-width: 767px) {
#topPage #firstView .snsIcons {
display: -webkit-box;
display: -ms-flexbox;
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 1);
bottom: 0;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
#topPage #topics {
margin-top: 278px !important;
}
#topPage #topics .acv_list {
border: none;
}
.record_area {
border-top: 2px solid #000;
position: absolute;
width: 100%;
flex-direction: row;
height: 280px;
top: calc(100%);
border-radius: 0;
}
.music_list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 600px) {
.music_list {
grid-template-columns: repeat(1, 1fr);
}
#topPage #topics {
margin-top: 278px !important;
}
#topPage #firstView .snsIcons {
padding-bottom: 1rem;
}
#topPage #firstView .snsIcons .snsIcon {
margin-top: 1rem;
}
}
section h2 {
font-family:"Source Serif 4", 'Spectral SC', serif;
font-size: 2.8rem;
padding-bottom: 37px;
text-align: center; }
section h2 span {
font-family: initial;
font-size: 1.5rem;
padding-top: 1.8rem;
}
#topics h2.deco {
width: 100%;
max-width: 2000px;
margin-left: auto;
margin-right: auto; background-position: bottom right;
background-repeat: no-repeat;
}
@media screen and (max-width: 959px) {
#topics h2.deco {
background-position: 50vw bottom;
}
}
#topics .bg {
width: 100%;
max-width: 2000px;
margin-left: auto;
margin-right: auto;  background-position: top center;
background-repeat: no-repeat;
} #topics article h3.tytle {
font-size: 2.4rem;
font-family:"noto sans jp", "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.3;
}
#topics article .text p {
line-height: 1.5;
}
#topics article .text .bottom {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding-top: 1rem;
}
@media screen and (max-width: 767px) {
#topics article h3.tytle {
font-size: 3.1vw;
}
}
@media screen and (max-width: 767px) and (max-width: 567px) {
#topics article h3.tytle {
font-size: 4.7vw;
}
}
@media screen and (max-width: 767px) {
#topics article .date {
font-size: 2.1vw;
}
#topics article .text .bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding-top: 1.3vw;
}
#topics article .text .bottom .date {
font-size: 2.1vw;
}
}
#topics article.single .date {
margin-top: 1.6rem;
}
#topics article.single .postBody {
margin-top: 46px;
}
#schedule {
.deco {
background-color: #1EF1C4;
}
margin-top: 0;
.wrap-a {
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 20px 20px;  padding: 0;
.wrap-b {
flex-direction: column;
width: 1000px;
max-width: 100%;
margin: 0 auto;
.acv_list {
border-radius: 0;
background-color: transparent;
border: none;
}
}
.btn-a {
margin: 0px auto 32px;
}
}
}
#schedule h2.deco {
width: 100%;
max-width: 2000px;
margin-left: auto;
margin-right: auto;
padding-top: 37px; }
@media screen and (max-width: 959px) {
#schedule h2.deco {
background-position: calc(50vw - 800px) bottom;
}
}
@media screen and (max-width: 959px) {
#schedule::after {
background-position: 50vw top;
}
}
#schedule.sub::after {
display: none;
}
#schedule .bg {
width: 100%;
max-width: 2000px;
margin-left: auto;
margin-right: auto;  background-position: top center;
background-repeat: no-repeat;
}
#schedule article {
display: flex;
margin: 0 auto;
width: fit-content;
background-color: #fff;
padding: 24px;
border-radius: 16px;
}
#schedule .btn-a {
margin: 32px 0 0 auto;
}
@media screen and (max-width:768px) {
#schedule article {
flex-direction: column;
gap: 12px;
}
}
#schedule article .month {
font-size: 2.4rem;
font-family: "noto sans jp","游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
#schedule article .body {
font-size: 1.6rem;
line-height: 1.5;
margin-top: 1.6rem;
}
#schedule article .bottom {
width: 100%;
margin-top: 6rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media screen and (max-width: 767px) and (max-width: 567px) {
#schedule article .month {
font-size: 4.7vw;
}
}
@media screen and (max-width: 767px) {
#schedule article .body {
font-size: 2.1vw;
margin-top: 2.1vw;
}
}
@media screen and (max-width: 767px) and (max-width: 567px) {
#schedule article .body {
font-size: 3.1vw;
}
}
@media screen and (max-width: 767px) {
#schedule article .bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
#schedule article.single .postBody {
margin-top: 46px;
}
#discography article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#discography article img {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 350px;
margin-right: 58px;
}
#discography article .text {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
line-height: 1.6;
}
#discography article .text h3 {
font-size: 2.8rem;
line-height: 1.36;
font-family: 'noto sans jp',"游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
#discography article .text p {
margin-top: 21px;
font-size: 1.6rem;
line-height: 1.6;
}
#discography article .text .bottom {
margin-top: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
@media screen and (max-width: 959px) {
#discography article {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
#discography article img {
margin-right: 0;
margin-bottom: 25px;
height: auto;
}
#discography article .text {
padding-left: 34px;
padding-right: 34px;
}
}
#discography .grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(250px, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
#discography .grid .gridItem {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#discography .grid .gridItem .discoLinks {
margin-top: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#discography .grid .gridItem .discoLinks .btn-a {
width: 47%;
}
@media screen and (min-width: 0\0) and (-webkit-min-device-pixel-ratio: 0.75),
screen and (min-width: 0\0) and (min-resolution: 72dpi) {
#discography .grid .gridItem img {
max-width: 280px;
}
#discography .grid .gridItem:nth-child(3n -2) {
-ms-grid-column: 1;
}
#discography .grid .gridItem:nth-child(3n -1) {
-ms-grid-column: 2;
}
#discography .grid .gridItem:nth-child(3n) {
-ms-grid-column: 3;
}
#discography .grid .gridItem:nth-child(1),
#discography .grid .gridItem:nth-child(2),
#discography .grid .gridItem:nth-child(3) {
-ms-grid-row: 1;
}
#discography .grid .gridItem:nth-child(4),
#discography .grid .gridItem:nth-child(5),
#discography .grid .gridItem:nth-child(6) {
-ms-grid-row: 2;
}
#discography .grid .gridItem:nth-child(7),
#discography .grid .gridItem:nth-child(8),
#discography .grid .gridItem:nth-child(9) {
-ms-grid-row: 3;
}
#discography .grid .gridItem:nth-child(10),
#discography .grid .gridItem:nth-child(11),
#discography .grid .gridItem:nth-child(12) {
-ms-grid-row: 4;
}
#discography .grid .gridItem:nth-child(13),
#discography .grid .gridItem:nth-child(14),
#discography .grid .gridItem:nth-child(15) {
-ms-grid-row: 5;
}
#discography .grid .gridItem:nth-child(16),
#discography .grid .gridItem:nth-child(17),
#discography .grid .gridItem:nth-child(18) {
-ms-grid-row: 6;
}
#discography .grid .gridItem:nth-child(19),
#discography .grid .gridItem:nth-child(20),
#discography .grid .gridItem:nth-child(21) {
-ms-grid-row: 7;
}
#discography .grid .gridItem:nth-child(22),
#discography .grid .gridItem:nth-child(23),
#discography .grid .gridItem:nth-child(24) {
-ms-grid-row: 8;
}
#discography .grid .gridItem:nth-child(25),
#discography .grid .gridItem:nth-child(26),
#discography .grid .gridItem:nth-child(27) {
-ms-grid-row: 9;
}
}
#discography .grid img {
width: 100%;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 20px 20px; }
#biography {
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 20px 20px; }
@media screen and (max-width:959px) {
.wrap-a {
padding-top: 32px;
}
}
#discography .grid p {
margin-top: 10px;
}
#discography .btn-b {
border: solid 1px #000;
}
#biography.sub {
margin-top: 104px;
}
#biography article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#biography article img {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 350px;
margin-left: 58px;
}
#biography article .text {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
line-height: 1.6;
padding-left: 32px;
padding-top: 32px;
padding-bottom: 32px;
}
#biography article .text h3 {
width: fit-content;
font-size: 2.8rem;
line-height: 1.36;
font-family: 'noto sans jp',"游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
span:nth-child(1) {
font-size: 2.8rem;
}
}
#biography article .text h3 span {
font-size: 1.8rem;
line-height: 2rem;
}
#biography article .text p {
margin-top: 21px;
font-size: 1.6rem;
line-height: 1.6;
}
#biography article .text .bottom {
margin-top: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media screen and (max-width: 959px) {
#biography article {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
#biography article img {
margin-left: 0;
margin-bottom: 25px;
height: auto;
}
#biography article .text {
padding-left: 34px;
padding-right: 34px;
}
}
#contact span.req {
color: #B00707;
}
#contact section {
margin-top: 0px;
}
#contact .topMsg {
line-height: 1.6;
margin-bottom: 60px;
}
.contactForm {
width: 769px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.contactForm .req dt::after {
content: "※";
margin-right: 0.8rem;
color: #B00707;
}
.contactForm input[type="text"],
.contactForm input[type="email"],
.contactForm textarea {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: solid 1px #A0A0A0;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.8rem;
}
.contactForm .formButtons {
margin-left: 166px;
}
@media screen and (max-width: 769px) {
.contactForm .formButtons {
margin-left: 0;
}
}
.contactForm input[type="submit"],
.contactForm input[type="button"] {
background-color: #000;
color: #fff;
border: none;
border-radius: 5px;
width: 150px;
max-width: 45%;
padding: 15px 0;
font-size: 1.6rem;
line-height: 1;
margin-right: 1.6rem;
cursor: pointer;
}
.contactForm input[type="submit"]:hover,
.contactForm input[type="button"]:hover {
opacity: 0.6;
}
.contactForm dl {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 40px;
}
@media screen and (max-width: 769px) {
.contactForm dl {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.contactForm dl dt {
margin-bottom: 1rem;
}
}
.contactForm dl dt {
width: 166px;
max-width: 100%;
}
.contactForm dl dd {
max-width: 100%;
}
.contactForm dl dd input {
width: 500px;
max-width: 100%;
height: 60px;
}
.contactForm dl dd textarea {
font-family: "noto sans jp","游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
width: 600px;
max-width: 100%;
height: 300px;
padding-top: 1rem;
line-height: 1.6;
}
.contactForm dl.textarea {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.contactForm dl.textarea dt {
padding-top: 1.6rem;
}
@media screen and (max-width: 769px) {
.contactForm dl.textarea dt {
padding-top: 0;
}
}
.contactForm .wpcf7c-conf {
background-color: #E8F0FE;
}
.postBody {
font-size: 2rem;
word-break: normal;
line-break: strict;
word-wrap: break-word;
overflow-wrap: break-word;
}
.postBody p {
word-break: normal;
line-break: strict;
word-wrap: break-word;
overflow-wrap: break-word;
}
@media screen and (max-width: 767px) {
.postBody {
font-size: 2.6vw;
}
}
@media screen and (max-width: 567px) {
.postBody {
font-size: 3.9vw;
}
}
.postBody img {
width: auto;
max-width: 100%;
height: auto;
}
.postBody strong {
font-weight: bold;
}
.postBody em {
font-style: italic;
}
.postBody ol {
list-style-type: decimal;
}
.postBody ul {
list-style-type: disc;
}
.postBody h1,
.postBody h2,
.postBody h3,
.postBody h4,
.postBody h5,
.postBody h6 {
display: block;
-webkit-margin-start: 0px;
margin-inline-start: 0px;
-webkit-margin-end: 0px;
margin-inline-end: 0px;
margin: 0;
padding: 0;
text-align: left;
font-family: "noto sans jp","游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}
.postBody sup {
vertical-align: super;
font-size: smaller;
}
.postBody sub {
vertical-align: sub;
font-size: smaller;
}
.postBody del {
text-decoration: line-through;
}
.postBody .fontsize_large_3,
.postBody h1 {
font-size: 2.8rem;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.postBody .fontsize_large_3,
.postBody h1 {
font-size: 3.6vw;
}
}
@media screen and (max-width: 567px) {
.postBody .fontsize_large_3,
.postBody h1 {
font-size: 5.5vw;
}
}
.postBody .fontsize_large_2,
.postBody h2 {
font-size: 2.4rem;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.postBody .fontsize_large_2,
.postBody h2 {
font-size: 3.1vw;
}
}
@media screen and (max-width: 567px) {
.postBody .fontsize_large_2,
.postBody h2 {
font-size: 4.7vw;
}
}
.postBody .fontsize_large_1,
.postBody h3 {
font-size: 2.2rem;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.postBody .fontsize_large_1,
.postBody h3 {
font-size: 2.9vw;
}
}
@media screen and (max-width: 567px) {
.postBody .fontsize_large_1,
.postBody h3 {
font-size: 4.3vw;
}
}
.postBody h4 {
font-size: 2rem;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.postBody h4 {
font-size: 2.6vw;
}
}
@media screen and (max-width: 567px) {
.postBody h4 {
font-size: 3.9vw;
}
}
.postBody .fontsize_small_1,
.postBody h5 {
font-size: 1.8rem;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.postBody .fontsize_small_1,
.postBody h5 {
font-size: 2.3vw;
}
}
@media screen and (max-width: 567px) {
.postBody .fontsize_small_1,
.postBody h5 {
font-size: 3.5vw;
}
}
.postBody .fontsize_small_2,
.postBody h6 {
font-size: 1.6rem;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.postBody .fontsize_small_2,
.postBody h6 {
font-size: 2.1vw;
}
}
@media screen and (max-width: 567px) {
.postBody .fontsize_small_2,
.postBody h6 {
font-size: 3.1vw;
}
}
.banner {
padding: 32px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
@media screen and (max-width: 767px) {
padding:0;
margin-bottom: -4px;
}
}
.banner a:hover {
opacity: 0.7;
}  .schedule_list {
display: flex;
flex-direction: column;
gap: 1.6em;
align-items: flex-start;
width: 75%;
}
.schedule_list .schedule_item {
padding-left: 1em;
text-indent: -1em;
}
.schedule_list .schedule_item a {
color: #000;
} .flex {
display: flex;
align-items: flex-start;
justify-content: center;
column-gap: 40px;
}
.wrap-c {
width: 768px;
padding: 64px 32px;
max-width: 90%;
}
.wrap-d {
width: 998px;
padding: 64px 32px;
max-width: 90%;
}
.side {
margin: 64px 0;
background-color: #fff;
padding: 24px;
}
.side_list {
display: flex;
flex-direction: column;
gap: 24px;
}
.side_item a {
text-decoration: none;
display: flex;
align-items: center;
transition: all 0.3s;
color: #000;
}
.side_item a:hover {
opacity: 0.8;
}
.side_item a.now {
font-weight: 600;
}
.schedule_wrap {
border-radius: 8px;
background-color: #fff;
padding: 32px 24px;
}
.schedule_year:not(:first-of-type) {
margin-top: 48px;
}
.schedule_year {
font-size: 22px;
font-weight: 500;
padding-bottom: 0;
text-align: left;
margin-bottom: 24px;
border-left: #df1f7c 5px solid;
padding: 4px;
padding-top: 6px;
padding-left: 24px;
background-color: #fff;
letter-spacing: 0.05em;
}
.schedule_month {
font-size: 22px;
font-weight: 500;
padding-bottom: 0;
text-align: left;
margin-bottom: 24px;
margin-top: 24px;
}
.schedule_item {
width: 100%;
}
.schedule_item a {
transition: all 0.2s;
line-height: 1.5;
}
.schedule_item a:hover {
opacity: 0.8;
}
@media screen and (max-width:960px) {
.schedule_list {
width: 100%;
}
.flex {
flex-direction: column-reverse;
align-items: center;
padding-bottom: 32px;
}
.side {
margin: 32px auto;
}
.blog_side {
padding-top: 0;
margin-top: 0;
}
.side_list {
display: flex;
flex-direction: row;
gap: 24px;
}
.wrap-c {
padding: 0;
}
.wrap-d {
padding: 0;
}
}
.blog_side .side_list .now {
font-weight: bold;
}
.nav-links {
margin-top: 48px;
margin-bottom: 32px;
position: relative;
}
.nav-links a {
color: #000;
font-size: 18px;
}
.nav-links .fa-chevron-circle-right {
margin-left: 6px;
}
.nav-links .fa-chevron-circle-left {
margin-right: 6px;
}
.prev-post {
position: absolute;
left: 50%;
transform: translateX(-200%);
top: 0;
}
.next-post {
position: absolute;
right: 50%;
transform: translateX(200%);
top: 0;
} .blog_list { columns: 3 250px;
padding-top: 72px;
@media screen and (max-width:767px) {
padding-top: 56px;
}
}
.blog_item {
position: relative;
break-inside: avoid;
margin-bottom: 16px; background-color: #fff;
overflow: hidden;
}
.blog_item a {
color: #000;
}
.blog_item h2 {
font-family: 'noto san jp';
font-size: 20px;
padding-bottom: 10px !important;
text-align: left;
}
.blog_item img {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 10px;
}
.blog_date {
position: absolute;
right: 0;
top: 0;
padding: 0.75rem;
color: #fff;
background-color: #4A4DFE; font-size: 14px;
}
.blog_text_area {
padding: 0 10px 16px;
}
.entry-content {
line-height: 1.5;
} @media screen and (max-width: 959px) {
#blog h2.deco {
background-position: calc(50vw - 800px) bottom;
}
}
@media screen and (max-width: 959px) {
#blog::after {
background-position: 50vw top;
}
}
#blog.sub::after {
display: none;
}
#blog .bg {
width: 100%;
max-width: 2000px;
margin-left: auto;
margin-right: auto;  background-position: top center;
background-repeat: no-repeat;
}
#blog .wrap-a {
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
padding-bottom: 56px;
@media screen and (max-width: 767px) {
padding-bottom: 40px;
}
}
#blog article {
display: flex;
margin: 0 auto;
width: fit-content;
padding: 24px;
border-radius: 16px;
padding-top: 0 !important;
}
#blog .acv_list {
margin-top: 0 !important;
}
#blog .btn-a {
margin: 32px 0 0 auto;
}
@media screen and (max-width:768px) {
#blog article {
flex-direction: column;
gap: 12px;
}
}
#blog article .month {
font-size: 2.4rem;
font-family:"noto sans jp", "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
#blog article .body {
font-size: 1.6rem;
line-height: 1.5;
margin-top: 1.6rem;
}
#blog article .bottom {
width: 100%;
margin-top: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media screen and (max-width: 767px) and (max-width: 567px) {
#blog article .month {
font-size: 4.7vw;
}
}
@media screen and (max-width: 767px) {
#blog article .body {
font-size: 2.1vw;
margin-top: 2.1vw;
}
}
@media screen and (max-width: 767px) and (max-width: 567px) {
#blog article .body {
font-size: 3.1vw;
}
}
@media screen and (max-width: 767px) {
#blog article .bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
#blog article.single .postBody {
margin-top: 46px;
display: flex;
gap: 3.2rem;
justify-content: center;
position: relative;
}
#blog .postBody img {
width: 40% !important;
object-fit: contain;
}
#blog .single .date {
position: absolute;
left: 0;
top: -40px;
color: #000;
width: fit-content;
display: grid;
place-items: center;
font-size: 14px;
border-radius: 3px;
}
#blog .single_blog_title {
padding-left: 0.5em;
border-left: #000 5px solid;
margin-bottom: 2rem !important;
}
#blog .content_wrap {
position: relative;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
#blog article.single .postBody {
flex-direction: column;
align-items: center;
}
#blog .postBody img {
width: 100% !important;
object-fit: contain;
}
#blog .content_wrap {
position: relative;
width: 100% !important;
}
}
.red {
color: #B00707;
} .post-type-archive-topics {
.acv_list {
border: none;
max-width: 1000px;
margin: 0 auto;
}
#topics {
margin-top: 76px;
@media screen and (max-width:1160px) {
margin-top: 70px;
}
.wrap-a {
border-top: none;
display: flex;
flex-direction: column;
}
}
}
.post-type-archive-schedule {
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
#schedule {
margin-top: 76px;
.side {
padding: 0;
background-color: transparent;
}
.side_list a {
background-color: #fff;
padding: 8px 12px 6px;
}
.schedule_wrap {
padding: 0;
background-color: transparent;
}
@media screen and (max-width:1160px) {
margin-top: 70px;
}
}
}
.post-type-archive-blog {
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
#blog {
margin-top: 76px;
.blog_list {
padding-top: 0;
}
.side {
@media screen and (max-width:1160px) {
padding: 0;
margin-top: 32px;
background-color: transparent;
}
.side_list {
@media screen and (max-width:1160px) {
flex-direction: row;
}
}
.side_list a {
background-color: #fff;
@media screen and (max-width:1160px) {
padding: 8px 12px 6px;
}
}
}
.side {
padding: 0;
background-color: transparent;
}
.side_list a {
background-color: #fff;
padding: 8px 12px 6px;
}
.flex {
@media screen and (max-width:1160px) {
flex-direction: column-reverse;
align-items: center;
}
}
@media screen and (max-width:1160px) {
margin-top: 70px;
.wrap-d {
padding: 0;
}
}
}
}
.page-template-page-biography {
#biography {
margin-top: 76px;
@media screen and (max-width:1160px) {
margin-top: 70px;
}
}
}
.archive .deco {
border-bottom: 2px solid #000;
}
.page-template-page-contact {
#contact {
margin-top: 76px;
@media screen and (max-width:1160px) {
margin-top: 70px;
}
}
.wrap-a {
border: none;
}
} .single-schedule {
#schedule {
.wrap-a {
padding-bottom: 48px;
}
.acv_list {
background-color: transparent;
}
margin-top: 76px;
@media screen and (max-width:1160px) {
margin-top: 70px;
}
}
}
.single-topics {
#topics {
margin-top: 76px;
.wrap-a {
padding-bottom: 48px;
}
@media screen and (max-width:1160px) {
margin-top: 70px;
}
}
}
.single-blog {
#blog {
margin-top: 76px;
@media screen and (max-width:1160px) {
margin-top: 70px;
}
}
}
.jobs-inner{
max-width: 1000px;
margin: 0 auto;
padding: 3rem;
line-height: 2;
}
#jobs {
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 20px 20px; }
@media screen and (max-width:959px) {
.wrap-a {
padding-top: 32px;
}
}
#discography .grid p {
margin-top: 10px;
}
#discography .btn-b {
border: solid 1px #000;
}
#jobs.sub {
margin-top: 104px;
}
#jobs article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#jobs article img {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 350px;
margin-left: 58px;
}
#jobs article .text {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
line-height: 1.6;
padding-left: 32px;
padding-top: 32px;
padding-bottom: 32px;
}
#jobs article .text h3 {
width: fit-content;
font-size: 2.8rem;
line-height: 1.36;
font-family: 'noto sans jp',"游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
span:nth-child(1) {
font-size: 2.8rem;
}
}
#jobs article .text h3 span {
font-size: 1.8rem;
line-height: 2rem;
}
#jobs article .text p {
margin-top: 21px;
font-size: 1.6rem;
line-height: 1.6;
}
#jobs article .text .bottom {
margin-top: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media screen and (max-width: 959px) {
#jobs article {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
#jobs article img {
margin-left: 0;
margin-bottom: 25px;
height: auto;
}
#jobs article .text {
padding-left: 34px;
padding-right: 34px;
}
}