/*header*/

/*@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
html{-webkit-scroll-behavior:smooth; scroll-behavior:smooth;}
body{font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; font-size: 13px;}*/

body{background-color:#f9f9f9; font-family: 'Zen Kaku Gothic New', sans-serif;}
h2{font-weight:normal; padding:2rem 0; display: flex; align-items: center; color:#000000;}
h2:before{border-top: 1px solid #afafaf; content: ""; width: 3em; margin-right:1rem;}

h3{font-weight:normal; padding:5rem 0 2rem 0; display: flex; align-items: center; color:#000000;}
h3:before{border-top: 1px solid #afafaf; content: ""; width: 3em; margin-right:1rem;}


header{padding:0.5rem 1rem 0.5rem 2rem; display: flex; justify-content: space-between; align-items: center; /*border-bottom:1px solid #afafaf;*/ position: fixed; z-index: 999; width: 100%; box-sizing: border-box; background-color: #ffffffb0;}

.botton{padding:2rem 0;}
.botton a{display:block; width:90%; margin:0 auto; color:#000000; text-align:center; border:1px solid #000000; padding:1rem 0; border-radius:100px; background-color:#ffffff;}
.drawer_hidden {display: none;}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 1px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 1;
  background: #fff;
  opacity: 0.8;
  transition: .5s;
}
.name{z-index: 99;}
.sns{display:flex; justify-content: space-around; margin-top:2rem;}
.sns p{width:46%;}
.sns p a{color:#000000; display:block;padding:0.8rem 0; text-align:center; border:1px solid #000000; box-sizing: border-box;}
/* メニュー黒ポチを消す */
.nav_list {
	padding-top:4.8rem;
	list-style: none;
}
.nav_list li{border-bottom:1px solid #333333;}
.nav_list li:first-child{border-top:1px solid #333333;}
.nav_list li a{display:block; padding:2rem; color:#000000; font-weight:500;}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}

#pagewrap{height:600px; border-radius: 10px; width:90%; margin:0 auto;}
#pagewrap .top{background-image: url("../images/main.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; height:100%; position:relative;}
#pagewrap .movie{width:60%; position: absolute; bottom:5%; left:5%;}
#pagewrap .movie iframe{aspect-ratio: 16 / 9; width: 100%; height: auto;}

#voice-contents{display:flex; justify-content: space-evenly; padding-bottom:2rem; font-size:90%;}
#voice-contents .left-box{width:48%; background-image: url("../images/white.jpg"); background-position: center center; background-repeat: no-repeat;background-size: cover; height:635px;}
#voice-contents .right-box{margin-top:75px; width:48%; background-image: url("../images/black.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; height:635px; color:#ffffff;}

#voice-contents .left-box{display:flex; align-items: flex-end;}
#voice-contents .right-box{display:flex; align-items: flex-end;}
#voice-contents .left-box>ul,#voice-contents .right-box>ul{width:100%;}
#voice-contents li>dl>dt{font-size:13px; margin:0 0 0.3rem 0; display: flex; align-items: center; padding-left:1rem;}
#voice-contents li>dl>dd{width: 85%; margin: 0 auto; height: 30px;}
/*#voice-contents .left-box>ul li>dl>dt:before{border-top: 1px solid #333333; content: ""; width: 1em; margin-right:0.5rem;}
#voice-contents .right-box>ul li>dl>dt:before{border-top: 1px solid #f9f9f9; content: ""; width: 1em; margin-right:0.5rem;}*/
#voice-contents li>dl>dd audio{width:100%; height:100%;}

#voice-contents li>dl>dd ul{display:flex; justify-content:flex-end;}
#voice-contents li>dl>dd ul li{margin-right:0.3rem;}

/*/*/

#voice-contents .mediPlayer{display:flex; align-items: center; justify-content: space-between; padding:0.5rem;}
#voice-contents .mediPlayer p{width:70%;}
#voice-contents .left-box>ul li{background-color:#ffffff91; margin-bottom:1px;}
#voice-contents .right-box>ul li{background-color:#0000001f; margin-bottom:1px;}
#voice-contents .left-box>ul li:last-child,#voice-contents .right-box>ul li:last-child{margin-bottom:0;}
/*#voice-contents .left-box>ul li,#voice-contents .right-box>ul li{margin-bottom:2rem;}*/
#voice-contents .mediPlayer a{display:block; order: 2; color:#009ef8; padding-left:3%;}
#voice-contents .mediPlayer a span.material-symbols-outlined {
color:#009ef8; font-variation-settings: 'wght' 400, 'GRAD' 0, 'opsz' 24;}
#works-contents{background-color:#f3f3f3; padding:3rem 1rem;}
#works-contents>dl{margin-bottom:2rem;}
#works-contents>dl>dt{font-weight:500; font-size:106%;}
#works-contents>dl>dd>dl>dt span{display:block; font-size:98%; font-weight:normal; color:#000000;}
#works-contents>dl>dd{padding:1.5rem 0; border-bottom:1px dotted #cbcbcb;}
#works-contents>dl>dd>dl>dt{display:flex; justify-content: space-between; color:#3c9bd1; font-weight:500;}
#works-contents>dl>dd>dl>dt a{color:#3c9bd1;}
#works-contents>dl>dd>dl>dd{display:flex; justify-content: flex-end;}
#works-contents>dl>dd>dl>dd span{background-color:#e9e9e9; padding: 0.1rem; border-radius: 100px; width: 40%; text-align: center; color: #000000; margin-top: 0.3rem; font-size:95%;}
#works-contents>dl:last-child{margin-bottom:0;}
#works-contents>dl:last-child dd{border-bottom:none;}


#profile-contents{padding:2rem;}
#profile-contents p{width:100%; margin:0 auto; padding-bottom:1rem;}
#profile-contents p img{width:100%;}
footer{background-color:#333333; padding:2rem 0 !important;}

#contact-contents{padding:2rem 1rem 5rem 1rem;}


/*#play, #stop {display: inline-block; width: 30px; cursor: pointer;}
#play:hover, #stop:hover {background: #eee;}*/
}
/* fadeUp */

.box-01{font-size:17px;}
.box-02{font-size:13px;}
.fadeUp-01{animation-name:fadeUpAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
.fadeUp-02{animation-name:fadeUpAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{from{opacity: 0; transform: translateY(50px);}
  to { opacity: 1; transform: translateY(0);}}
.fadeUpTrigger-01,.fadeUpTrigger-02{opacity: 0;}



/*////////////スマホ////////////*/
@media screen and (max-width:782px){
#pagewrap{}

}

/*////////////PCのみ////////////*/

@media screen and (min-width: 768px){
#pagewrap{height:100vh;}
#pagewrap .top{background-position: top 20% center;}
.box-01{font-size:23px;}
.box-02{font-size:20px;}
.drawer_open span, .drawer_open span:before, .drawer_open span:after{width:45px;}
.drawer_open span:before{bottom:13px;}
.drawer_open span:after{top:13px;}
.botton a:hover{background-color:#3c9bd1; color:#ffffff; -webkit-transition: all .1s; transition: all 0.5s;}
#voice-contents .left-box{width:48%; background-position: top center; height:745px;}
#voice-contents .right-box{width:48%; background-position: top center; height:745px;}
h2{font-size:27px;}
h3{font-size:27px; padding:7rem 0 2rem 0;}
#works-contents>dl>dt{font-size:27px;}
#works-contents>dl>dd>dl>dt{font-size:27px;}
#works-contents{padding:3rem 5rem;}
#works-contents>dl>dd>dl>dd span{width:18%; padding:0.6rem;}
.nav_content {width:30%;}
#drawer_input:checked ~ .nav_content{left:70%;}
#voice-contents .right-box>ul li{background-color:#00000045;}
#voice-contents .mediPlayer{font-size:18px;}
#voice-contents{width:100%;}
#pagewrap .movie{width:33%; position: absolute; bottom:5%; left:5%;}

}