/******************
共通
******************/
* { vertical-align: baseline; }
html, body { min-height: 100%; width: 100vw; margin: 0; padding: 0; }
body { background-color: rgb(255, 251, 244); color: rgba(67,64,61,1); font-family: 'Open Sans', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
a { text-decoration: none; }
p { margin: 0; }
table th { font-weight: 300; }
table td { font-weight: 400; }
/* .showpc { display: block; } */
/* .showsp { display: none; } */
.fade-in { opacity: 0; transition: all .5s ease-in; transform: translateY(25px); }
.fade-in.appear { opacity: 1; transform: translateY(0); }
.nowrap { white-space: nowrap; }

/******************
HEADER
******************/
.header { position: fixed; width: 100%; height: 140px; z-index: 999; }
.header .our-millennial-fair, .header .navigation { margin: 15px auto 0 auto; width: 90%; max-width: 450px; }
.header .our-millennial-fair a img { filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); transform: translateZ(0); cursor: pointer; }
.header .navigation a { filter: drop-shadow(0 0 4px rgb(99, 54, 17)) drop-shadow(0 0 2px rgb(185,180,176)); }
.header .our-millennial-fair a img { margin: 0 auto; display: block; }
.navigation { display: flex; justify-content: space-evenly; }
.header .navigation a { font-size: 25px; font-weight: 600; text-decoration: none; color: white; transition: all .1s; transform: translateZ(0); }
.header .navigation a img { margin-top: 5px; height: 25px; width: 25px; display: inline-block; position: relative; }
.header .navigation a img.size-adjustment { height: 30px; width: 30px; margin-top: 3px; }
/*
.header .navigation a:hover, .header .navigation a.active { color: rgba(177,166,162,1); }
*/
.header .our-millennial-fair a img:hover, .header .navigation a:hover, .header .navigation a.active { filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); }
/* ABOUT PAGE */
.header.about-page-header { background-image: url(/resources/mitsuda-home-page.jpg); background-position: top center; }
.header.about-page-header .navigation-border { bottom: 0; position: absolute; z-index: 999; height: 5px; width: 100%; background-image: linear-gradient(to right,rgba(113,107,105,1),rgba(169, 140, 122, 0.495)); }
.header-about-page-buffer { height: 145px; width: 100%; }
@media only screen and (max-width: 850px) {
    .header { height: 110px; }
    .header .our-millennial-fair, .header .navigation { margin: 15px auto 0 auto; width: 90%; max-width: 300px; }
    .header .our-millennial-fair a img { width: 100%; }
    .header .navigation a { font-size: 18px; }
    .header .navigation a img { margin-top: 3px; height: 20px; width: 20px; }
    .header .navigation a img.size-adjustment { height: 25px; width: 25px; margin-top: 1px; }
}

/******************
HOME
******************/
/*　セクション設定 */
section { height: 100vh; width: 100%; background-size: cover; position: relative; }
section a { height: 100%; width: 100%; }
section a .container { box-sizing: border-box; height: 100%; padding: 140px 0 40px 0; display: flex; align-items: center; justify-content: space-evenly; }
section a .container img { height: 100%; filter: drop-shadow(0 0 4px black); }
section a .container .text { text-align: center; }
/* スクロール指摘グラフィック*/
.scrollindicator { position: absolute; bottom: 5%; right: 4%; transform: translate(-50%,-50%); cursor: pointer; }
.scrollindicator span { display: block; width: 40px; height: 40px; border-bottom: 3px solid rgba(255, 251, 244,1); border-right: 3px solid rgba(255, 251, 2446,1); transform: rotate(45deg); margin: -10px; animation: animate 2s infinite; filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); }
.scrollindicator span:nth-child(2) { animation-delay: -0.2s; }
@keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } }
/* スマホ調整　*/
@media only screen and (max-width: 1200px) {
    section a .container { padding: 120px 0 40px 0; }
    section a .container img { height: 80%; }
    .scrollindicator { right: 5%; }
    .scrollindicator span { width: 30px; height: 30px; }
    @keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-10px,-10px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(15px,15px); } }
}
@media only screen and (max-width: 850px) {
    section a .container { display: block; }
    section a .container img { height: auto; width: 80%; max-width: 310px; margin: 0 auto 25px auto; display: block; }
    .scrollindicator { right: 7%; }
    .scrollindicator span { width: 20px; height: 20px; }
    @keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-10px,-10px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(10px,10px); } }
}

/************************
画像＆テキスト　設定　START
************************/
section a .text p { opacity:.5; font-size:10px; }
section { background-image: url(/resources/mitsuda-home-page.jpg); background-position: top; }
section .text { position: relative; height: 100%; width: 100%; }
section .text h1, section .text h2 { position: absolute; margin: 0; padding: 0; color: white; filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); letter-spacing: 5px; }
section .text h1, section .text h2 { left: 7%; }

section .text .new-releases { position: absolute; right: 2%; bottom: 7%; }
section .text h3 { margin: 0 0 5px 0; padding: 0; color: white; filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); letter-spacing: 5px; text-align: center; transform: translateZ(0); }

section .text .slide-section { width: 316px; display: flex; }
section .text .slide-section .slides { width: 236px; height: 236px; }
section .text .slide-section a.arrow { align-content: center; width: 40px; height: 236px; font-size: 20px; text-align: center; z-index: 2; }
section .text .slide-section a span { display: block; transition: all .3s; transform: translateZ(0); color: white; filter: drop-shadow(0 0 2px black) drop-shadow(0 0 1px black); }
section .text .slide-section a#left.arrow:hover span { transform: translateX(-5px); }
section .text .slide-section a#right.arrow:hover span { transform: translateX(5px); }


section .text .slides a { position: absolute; width: 236px; height: 236px; filter: drop-shadow(0 0 2px black) drop-shadow(0 0 1px black); transition: all .3s; z-index: 3; }
section .text .slides a.left-position { opacity: 0; transform: translateX(-5px); z-index: 1; }
section .text .slides a.right-position { opacity: 0; transform: translateX(5px); z-index: 1; }
section .text .slides a img { width: 236px; }


section .text h1 { font-size: 42px; font-weight: 900; bottom: 17%; border-bottom: 2px solid white; }
section .text h2 { font-size: 25px; font-weight: 400; bottom: 12%; }
section .text h3 { font-size: 25px; font-weight: 400; }

@media only screen and (max-width: 850px) {
    section .text h1 { font-size: 25px; }
    section .text h2 { font-size: 20px; bottom: 12.5%; letter-spacing: 3px; }
}
@media only screen and (max-width: 900px) {
    section .text .new-releases { display: none; }
}

/************************
画像＆テキスト　設定　END
************************/
/************************
クリスマス　START
************************/
/* 表示切り替え */
#snowCanvas, #merry-christmas { display: none; }
#snowCanvas.active, #merry-christmas.active { display: block; }
/*　表示設定　*/
#merry-christmas { height: 100vh; width: 100%; background-size: cover; position: relative; }
#merry-christmas { background-image: url(/resources/merry-christmas-sp.jpg); background-position: center; }
@media only screen and (min-width: 600px) {
    #merry-christmas { background-image: url(/resources/merry-christmas-pc.jpg); }
}
#merry-christmas #m { z-index: 10; position: absolute; bottom: 50px; left: 50px;  width: 107px; height: 100px; background: rgba(255, 251, 244,1); border-radius: 50px; transition: width .3s ease; overflow: hidden; display: flex; align-items: center; }
#merry-christmas #m #yb, #merry-christmas #m #eb { height: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0 9px; cursor: pointer; filter: invert(15%) sepia(13%) saturate(2772%) hue-rotate(201deg) brightness(91%) contrast(123%); }
#merry-christmas #m #eb { display: none; }
#merry-christmas #m img { height: 90%; }
#merry-christmas #m #tx { font-size: 14px; color: rgba(8,29,89,1); text-align: center; margin-left: 25px; opacity: 0; transition: opacity 1.5s ease; }
#merry-christmas #m #tx span { font-weight: 900; }
/************************
クリスマス　END
************************/

/******************
ABOUT
******************/
/* A写 */
.about-page .photograph { width: 90%; max-width: 700px; margin: 50px auto; display: block; position: relative;}
.about-page .photograph img { width: 100%; }
.about-page .photograph h1 { position: absolute; top: 27%; right: 10%; color: white; filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); letter-spacing: 12px; font-size: 42px; }
.about-page .photograph h2 { position: absolute; top: 45%; right: 11.5%; color: white; filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); font-size: 25px; font-weight: 400; }
/* プロフィール */
.about-page .profile { width: 90%; max-width: 700px; margin: 0 auto; }
.about-page .profile h1 { text-align: center; font-size: 25px; margin: 0 0 50px 0; }
.about-page .profile p { margin: 0 0 25px 0; }
.about-page .profile p.katagaki { margin: 0 0 5px 0; font-size: 15px; opacity: .7; }
.about-page .profile p.daihyousaku { margin: 0 0 25px 0; font-size: 15px; opacity: .7; }
/* リンク */
.about-page .links { width: 90%; max-width: 700px; margin: 50px auto 0 auto; }
.about-page .links a { width: 100%; height: 200px; margin: 25px auto; background-size: 100%; background-position: center; display: flex; justify-content: center; align-items: center; transition: all .3s ease; border-radius: 20px; }
.about-page .links a:hover { background-size: 110%; }
.about-page .links a:nth-child(1) { background-image: url(/resources/about-page-links-discography.jpg); }
.about-page .links a:nth-child(2) { background-image: url(/resources/about-page-links-works-list.jpg); }
.about-page .links a:nth-child(3) { background-image: url(/resources/about-page-links-copyright.jpg); }
.about-page .links a:nth-child(4) { background-image: url(/resources/about-page-links-contact.jpg); }
.about-page .links a p { color: white; filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); font-size: 30px; letter-spacing: 5px; }
@media only screen and (max-width: 850px) {
    .about-page .photograph h1 { top: 18%; right: 2%; letter-spacing: 7px; font-size: 30px; }
    .about-page .photograph h2 { top: 43%; right: 4.5%; font-size: 17px; }
}

/******************
[FOOTER] 
******************/
.footer { height: 50vh; width: 100%; background-image: url(/resources/footer.jpg); background-size: cover; background-position: top; color: white; }
.footer.about { margin: 70px 0 0 0; }
.footer .date-container { height: 90%; width: 100%; display: flex; justify-content: center; align-items: center; }
.footer .date-container img { filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); display: block; margin: 10px auto; }
.footer .copyright p { height: 10%; text-align: center; font-size: 12px; font-weight: 300; filter: drop-shadow(0 0 4px black) drop-shadow(0 0 2px black); }
@media only screen and (max-width: 850px) {
    .footer .date-container img { max-width: 305px; }
}