@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,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%;outline: 0;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul,li{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}

body{color:#000;}
img{ width: 100%;}
.pc{ display:block;}
.sp{ display:none;}
@media screen and (max-width:768px){
.pc{ display:none;}
.sp{ display:block;}}



a{text-decoration: none; color: #000;}



.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf{*zoom: 1;}

.mt15{margin-top: 15px!important;}
.mt40{margin-top: 40px!important;}
.mt50{margin-top: 50px!important;}
.mr10{margin-right: 10px!important;}
.mr2p{margin-right: 2%!important;}
.ml2p{margin-left: 2%!important;}
.mr30{margin-right: 30px!important;}
.mr40{margin-right: 40px!important;}
.mr50{margin-right: 50px!important;}
.mr60{margin-right: 60px!important;}
.mb10{margin-bottom: 10px!important;}
.mb40{margin-bottom: 40px!important; }
.mb50{margin-bottom: 50px!important;}
.txt_c{text-align: center;}


.en_ExLight{font-family: "din-2014",sans-serif; font-weight: 200;}
.en_Light{font-family: "din-2014",sans-serif; font-weight: 300;}
.en_Regular{font-family: "din-2014",sans-serif; font-weight: 400;}
.en_Demi{font-family: "din-2014",sans-serif; font-weight: 600;}
.en_Bold{font-family: "din-2014",sans-serif; font-weight: 700;}
.en_ExBold{font-family: "din-2014",sans-serif; font-weight: 800;}
.yellow{color:#ffd900; }

.top-blank{ margin-top: 100vh;}




body{font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#wrapper{width: 100%;background: #fff;}
#content{width: 90%;margin: 0 auto;  max-width:1100px; padding-bottom: 80px; background: #fff;}



#side-bar{border-top: 1px solid #eee;}
#side-bar .copy{font-size: 9px;letter-spacing: 0.1em; padding: 20px; text-align: center;}


#head-logo{ width:90px; margin: 0 auto 0 auto; padding: 20px;}
.nav {width: 100%; background:rgba(255,255,255,0.8);}
.nav ul{ max-width: 1300px; margin:0 auto; text-align: center; padding: 20px 0; position: relative;}
.nav li{ font-size:18px; margin: 0 5px; letter-spacing: 1em; display: inline-block;}
.nav li a:hover{ opacity: 0.8;border-bottom: 1px solid #9AB5AB;}
.nav ul .logo{ display: none;}
body.is-fixed .header {margin-bottom: 130px;}
body.is-fixed .nav--typeA {position: fixed;top: 0;left: 0; z-index: 100;}
body.is-fixed .nav ul .logo{ width: 70px; display: block; position:absolute; left: 0; top: 14px;}
.nav li p{width: 30px; display: inline-block;}
.nav li.non{letter-spacing: 0;}
.nav li p a:hover{border-bottom: none;}


#top-hero{ width: 100%; height: 100vh; position: fixed;  top: 0; left: 0; z-index: -10; display: flex;justify-content: center;align-items: center;}
#top-hero .main-logo{width:200px; padding-bottom: 70px;}
#top-hero .main-logo img{width: 100%;}
#top-hero .left{ width: 50%; float: left; position: relative; height: 100vh; margin-left: -60px; }
#top-hero .photo_box{ width: 50%; float: left; margin-right: 60px; }
#top-hero .hero00{ background: url(../images/top/hero00.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .hero01{ background: url(../images/top/hero01.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .hero02{ background: url(../images/top/hero02.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .hero03{ background: url(../images/top/hero03.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .hero04{ background: url(../images/top/hero04.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .hero05{ background: url(../images/top/hero05.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .hero06{ background: url(../images/top/hero06.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .hero07{ background: url(../images/top/hero07.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .hero08{ background: url(../images/top/hero08.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .hero09{ background: url(../images/top/hero09.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .c_hero00{ background: url(../images/top2/hero00.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .c_hero01{ background: url(../images/top2/hero01.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .c_hero02{ background: url(../images/top2/hero02.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .c_hero03{ background: url(../images/top2/hero03.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .c_hero04{ background: url(../images/top2/hero04.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .c_hero05{ background: url(../images/top2/hero05.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .c_hero06{ background: url(../images/top2/hero06.jpg) no-repeat top center; background-size:cover; height: 100vh;}
#top-hero .box{ height: 380px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
#top-hero .box .logo{ width: 120px; margin: 0 auto;}
#top-hero .box ul{ width: 180px; margin: 100px auto 0 auto;}
#top-hero .box li{ letter-spacing: 1em; margin-top: 10px; font-size: 18px;}
#top-hero .box li a:hover{opacity: 0.8; border-bottom: 1px solid #9AB5AB;}
@media screen and (max-width:768px){
.top-blank{ margin-top: 0;}
#top-hero{ display: none;}
#head-logo{ width:60px;padding: 20px 20px 0 20px;}
.nav {width: 100%; background:rgba(255,255,255,0.8);}
.nav ul{padding: 10px 0; }
.nav li{ font-size:13px; margin: 0 2px; letter-spacing: 0.2em; display: inline-block;}
.nav li a:hover{ opacity: 0.8;border-bottom: 1px solid #9AB5AB;}
.nav ul .logo{ display: none;}
.nav li p{margin-top: 10px; font-size: 15px;}
body.is-fixed .header {margin-bottom: 70px;}
body.is-fixed .nav--typeA {position: fixed;top: 0;left: 0; z-index: 100;}
body.is-fixed .nav{ background:#fff; border-bottom: 1px solid #B9B9BA;}
body.is-fixed .nav ul{padding: 5px 0 10px 0; }
body.is-fixed .nav ul .logo{ width: 30px; position:relative; left:auto; top:2px; display: inline-block; margin-right: 10px; }
body.is-fixed .nav li:first-child{ margin-left: 20px;}
}

#top-artist{width: 100%; margin: 40px auto;}
#top-artist .tit{margin: 120px auto 40px auto;  text-align: center;letter-spacing: 1em;transition:all 0.5s;font-size: 20px; }
#top-artist img{ width:100%; vertical-align: bottom;}
#top-artist .list { width: 100%; font-size: 0; letter-spacing: 0; }
#top-artist .list li { width:31.333333%;display: inline-block;position: relative; margin: 1%;}
#top-artist .list li .name{ display: none;}
#top-artist .over{ height: 100%; width: 100%; position: absolute; top: 0; left: 0; display: block;transition:all 0.5s;}
#top-artist .over .name_box{ display: none;}
#top-artist .over:hover {box-shadow: inset 0 0 0 15px #9AB5AB; background:rgba(0,0,0,0.5);} 
#top-artist .over:hover .name_box{ display: block; text-align: center; margin-top: 40%; color: #fff;}
#top-artist .over:hover h3{ font-size: 16px; letter-spacing: 0.5em;font-family: "din-2014",sans-serif; font-weight: 300; padding: 0 20px;}
#top-artist .over:hover p{ font-size: 14px; letter-spacing: 0.5em;font-family: "din-2014",sans-serif; font-weight: 200; margin-top: 20px; padding: 0 20px;}
#top-artist .navi { letter-spacing: 1em;text-align: center; line-height: 30px; margin: 3% auto 40px auto;;width: 100%;}
#top-artist .navi li{ display: inline-block;}
#top-artist .navi li a{ font-size: 16px;}
#top-artist .navi li a:hover{ opacity: 0.8; border-bottom: 1px solid #9AB5AB;}
#top-artist .list li:last-child{display: none;}
#top-artist .list.on li:last-child{display:inline-block;}
@media screen and (max-width:768px){
#top-artist{margin: 20px auto;}
#top-artist .tit{ margin: 60px auto 20px auto; text-align: center;letter-spacing: 1em;transition:all 0.5s;font-size: 17px;}
#top-artist .list { text-align: center;}
#top-artist .list li { width:47%;float: none; position: relative; margin: 1% 1% 20px 1%; display: inline-block; vertical-align: top;}
#top-artist .navi li a{ font-size: 13px;letter-spacing: 0.2em;}
#top-artist .over:hover{ display: none; }
#top-artist .list li .name{ display: block;font-size: 12px; letter-spacing: 0.1em;font-family: "din-2014",sans-serif; font-weight: 300; text-align: center; margin-top: 10px;}
#top-artist .list li:last-child{display:inline-block;}
}


#top-topics{width: 100%; margin: 40px auto;}
#top-topics .tit{margin: 120px auto 40px auto;  text-align: center;letter-spacing: 1em;transition:all 0.5s;font-size: 20px;}
#top-topics ul{max-width: 800px; margin: 0 auto;}
#top-topics li{display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px;}
#top-topics li time{font-size: 14px; letter-spacing: 0.1em; font-family: "din-2014",sans-serif; font-weight: 300; margin-right: 50px;line-height: 1.8}
#top-topics li h3{font-size: 12px; font-weight: normal;letter-spacing: 0.1em; line-height: 1.8;}
#top-topics li h3 a{text-decoration: underline;}
#top-topics li h3 a:hover{opacity: 0.8;}

@media screen and (max-width:768px){
#top-topics{margin: 20px auto;}
#top-topics .tit{ margin: 60px auto 20px auto; text-align: center;letter-spacing: 1em;transition:all 0.5s; font-size: 17px; }
#top-topics li{display: block;}
#top-topics li time{font-size: 12px; margin-right: 0;line-height: 1.8}
#top-topics li h3{font-size: 11px;}


}

#top-news2{width: 100%; margin: 40px auto;}
#top-news2 .tit{margin: 120px auto 40px auto;  text-align: center;letter-spacing: 1em;transition:all 0.5s;font-size: 20px;}
#top-news2 img{ width:100%; vertical-align: bottom;}
#top-news2 .list { width: 100%; font-size: 0; letter-spacing: 0;}
#top-news2 .list li { width:31.333333%; display: inline-block;position: relative; margin: 1%;}
#top-news2 .list li .name{ display: none;}
#top-news2 .over{ height: 100%; width: 100%; position: absolute; top: 0; left: 0; display: block;transition:all 0.5s; }
#top-news2 .over .name_box{ display: none;}
#top-news2 .over:hover {box-shadow: inset 0 0 0 15px #9AB5AB; background:rgba(0,0,0,0.5);} 
#top-news2 .over:hover .name_box{ display: block; text-align: center; margin-top: 40%; color: #fff;}
#top-news2 .over:hover h3{ font-size: 16px; letter-spacing: 0.2em;font-family: "din-2014",sans-serif; font-weight: 300; padding: 0 20px;}
#top-news2 .over:hover p{ font-size: 14px; letter-spacing: 0.5em;font-family: "din-2014",sans-serif; font-weight: 200; margin-top: 10px; padding: 0 20px;}
#top-news2 .navi { letter-spacing: 1em;text-align: center; line-height: 30px; margin: 3% auto 40px auto;;width: 100%;}
#top-news2 .navi li{ display: inline-block;}
#top-news2 .navi li a{ font-size: 16px;}
#top-news2 .navi li a:hover{ opacity: 0.8; border-bottom: 1px solid #9AB5AB;}
@media screen and (max-width:768px){
#top-news2{margin: 20px auto;}
#top-news2 .tit{ margin: 60px auto 20px auto; text-align: center;letter-spacing: 1em;transition:all 0.5s; font-size: 17px; }
#top-news2 .list { text-align: center;}
#top-news2 .list li { width:47%;float: none; position: relative; margin: 1% 1% 20px 1%; display: inline-block; vertical-align: top;}
#top-news2 .navi li a{ font-size: 13px;letter-spacing: 0.2em;}
#top-news2 .over:hover{ display: none; }
#top-news2 .list li .name{ display: block;font-size: 12px; letter-spacing: 0.1em;font-family: "din-2014",sans-serif; font-weight: 300; text-align: center; margin-top: 10px;}
}

#top-news{width: 100%; margin: 40px auto 0 auto;}
#top-news .tit{ margin: 80px auto 40px auto; text-align: center;letter-spacing: 1em;transition:all 0.5s; }
#top-news .bold{font-weight: bold;}
#top-news .box{width: 100%;}
#top-news  img:hover{opacity: 0.8;}
#top-news .box .left{width: 48%; float: left; margin-right: 4%;}
#top-news .box .right{width: 48%; float: left;}
#top-news .box .photo{width: 48%;float: left; margin-right: 4%;overflow: hidden;/* トリミングしたい枠の幅 */height: 270px;/* トリミングしたい枠の高さ */position: relative;}
#top-news .box .photo img{width:100%;}
#top-news .box .txt_box{width: 48%;float: left;}
#top-news .box .news_tit{font-size: 16px; margin-bottom: 20px;}
#top-news .box .container {}
#top-news .box .txt{font-size: 14px; font-weight: normal;line-height:30px;}
#top-news .box .date{color:#595858;font-size: 12px;line-height:25px;font-weight: normal;text-transform: uppercase;}

#top-news li {width: 32%; float: left;  background:#F6F8F7; margin: 0 2% 0 auto; padding: 20px 0 5px 0;}
#top-news li:nth-child(3n){ margin-right: 0;}
#top-news li .trim{width: 85%;text-align: center; margin: 0 auto;overflow: hidden;/* トリミングしたい枠の幅 */height: 200px;/* トリミングしたい枠の高さ */position: relative;}
#top-news li .trim img{width:100%;} 
#top-news li .txt_box{width: 85%; height: 120px; position: relative;margin: 0 auto;}
#top-news li .news_tit{font-size: 14px; margin: 10px auto 0 auto;}
#top-news li .date{color:#595858;font-size: 12px;line-height:25px;font-weight: normal;position:absolute;bottom: 0;text-transform: uppercase;}
#top-news li.tw_box{width:32%; float: left;margin: 0 auto 0 auto;  padding: 0 0 5px 0;box-sizing: border-box; background: #fff;}
#top-news li.tw_box .pt{ padding:0 10px;height:315px;overflow-y: scroll;}
#top-news li.tw_box .tit2{margin: 0 auto 10px auto; text-align: center;letter-spacing: 1em; padding-left: 4%;}
@media screen and (max-width:768px){
#top-news{width: 100%; margin: 0 auto 0 auto;}
#top-news .tit{ margin: 40px auto 20px auto; text-align: center;letter-spacing: 0.5em;transition:all 0.5s;  }
#top-news li {width: 100%; float: none;  background:#F6F8F7; margin: 0 0 20px 0; padding: 20px 0 5px 0;}
#top-news li .txt_box{width: 85%; height: 120px; position: relative;margin: 0 auto;}
#top-news li .news_tit{font-size: 13px; margin: 10px auto 0 auto;}
}


#top-insta{width: 100%; margin: 40px auto 0 auto;}
#top-insta .tit{ margin: 80px auto 60px auto; text-align: center;letter-spacing: 1em;transition:all 0.5s; padding-left: 4%; }
#instafeed { text-align:center; margin-top:35px;}
#instafeed li{ float: left; width:20%;}
#instafeed li img{ vertical-align:bottom; width:100%;}
#instafeed li img:hover{opacity: 0.8;filter: alpha(opacity=80);-moz-opacity:0.8;}

@media screen and (max-width:768px){
#top-insta{width: 100%; margin: 0 auto 0 auto;}
#top-insta .tit{ margin: 40px auto 20px auto; text-align: center;letter-spacing: 0.5em;transition:all 0.5s; padding-left: 3%; }
#instafeed li{ width:33.33333%;}
}




#artist {width: 100%; margin: 80px auto 0 auto; text-align: center;}
#artist .tit{ margin: 0 auto 80px auto; text-align: center;letter-spacing: 1em;transition:all 0.5s;font-size: 20px;}
#artist .profile_box {width: 100%;}
#artist .detail_box { width:50%; float: left; margin:120px auto 0 auto; }
#artist .name { font-size: 20px; margin: 20px  auto; text-align: center; letter-spacing: 1em;}
#artist .name span{ font-size:15px; font-family: "din-2014",sans-serif; font-weight: 300;letter-spacing: 0.5em;}
#artist .job { font-size: 15px;margin:30px auto 60px  auto; text-align: center; letter-spacing: 1em;}
.balloon1 a{position: relative;
  display: block;
  margin: 0 auto 40px auto;
  padding: 10px 0;
  width: 200px;
  color: #000;
  font-size: 11px;
  font-family: "din-2014",sans-serif; font-weight: 200;
	letter-spacing: 0.1em;
  border: solid 1px #DFE0E0;
  box-sizing: border-box;}
.balloon1 a:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon1 a:after{
  content: "";
  position: absolute;
  bottom: -26px;
  left: 50%;
  margin-left: -16px;
  border: 13px solid transparent;
  border-top: 13px solid #DFE0E0;
  z-index: 1;
}

.balloon1 a:hover{border: solid 1px #9AB5AB;}
.balloon1 a:hover:after{border-top: 13px solid #9AB5AB;}

.balloon1 a p {margin: 0;padding: 0;} 

.balloon2 a{position: relative;
  display: block;
  margin: 0 auto 40px auto;
  padding: 10px 0;
  width: 200px;
  color: #000;
  font-size: 11px;
  font-family: "din-2014",sans-serif; font-weight: 200;
	letter-spacing: 0.1em;
  border: solid 1px #6C6C6C;
  box-sizing: border-box;}
.balloon2 a:hover{border: solid 1px #9AB5AB;}
.balloon2 p {margin: 0;padding: 0;color: #6C6C6C;} 

#artist ul { width: 100%; text-align: center; margin-top:25px; }
#artist li { display: inline-block; font-size: 20px; margin: 0 18px; }
#artist .photo {  width:50%; float: left;}
#artist img{width:100%;} 
#artist a{color: #000; text-decoration: none;} 
#artist a:hover{ opacity: 0.5;}
#artist .txt_box{width: 100%; max-width: 800px; margin: 80px auto 40px auto; font-size:13px; line-height: 200%; }
#artist .txt_box a{text-decoration: underline;}
#artist .jp{width: 100%; float: left; text-align: left; color: #333;}
#artist .eg{width: 100%; float: left; text-align: left; color: #333;}

@media screen and (max-width:768px){
#artist {width: 100%; margin: 0 auto 0 auto; }
#artist .tit{ margin: 40px auto 20px auto;font-size: 17px; }
#artist .detail_box { width:100%; float: none; margin:0 auto 0 auto; }
#artist .name { font-size: 16px; margin: 10px  auto; letter-spacing: 0.3em;}
#artist .name span{font-size: 12px; }
#artist .job{margin:  20px auto 20px auto;}
#artist .photo {  width:100%; float: none;}
#artist .txt_box{ margin: 20px auto 20px auto}
#artist .jp{width: 100%; float:none;}
#artist .eg{width: 100%; float:none; margin-top: 20px;}
}


#about {width: 100%; margin: 0 auto; text-align: center;}
#about img{width:100%;} 
#about .tit{ margin: 80px auto 60px auto; text-align: center;letter-spacing: 1em;font-size: 20px;}
#about .about_box {width: 100%; margin: 0 auto 40px auto;}
#about .about_box .logo_box{}
#about .about_box .logo{width: 30%;  margin:30px auto 90px auto; text-align: center; }
#about .about_box .txt{width: 100%; max-width: 800px; margin: 0 auto;text-align: left; font-size: 13px; line-height: 200%; color: #333;}
#about .member{margin: 100px auto -80px auto;}
#about .member img{ vertical-align: bottom;}
@media screen and (max-width:768px){
#about .tit{ margin: 40px auto 20px auto; letter-spacing: 1em; font-size: 17px;}
#about .about_box {width: 100%; margin: 30px auto 40px auto;}
#about .about_box .logo_box{width: 100%; margin: 30px auto 50px auto; float:none; }
#about .about_box .logo{width: 40%;  margin: 0 auto 0 auto; text-align: center; }
#about .about_box .txt{width: 100%; float:none; text-align: left;}
#about .member{margin: 40px auto -20px auto;}
}

#news {width: 100%; margin: 0 auto;}
#news .tit{ margin: 80px auto 60px auto; text-align: center;letter-spacing: 1em;transition:all 0.5s; font-size: 20px; }
#news .bold{font-weight: bold;}
#news .box{width: 100%;}
#news  img:hover{opacity: 0.8;}
#news .box .left{width: 48%; float: left; margin-right: 4%;}
#news .box .right{width: 48%; float: left;}
#news .box .photo{width: 48%;float: left; margin-right: 4%;overflow: hidden;/* トリミングしたい枠の幅 */height: 270px;  /* トリミングしたい枠の高さ */position: relative;}
#news .box .photo img{width:100%;}
#news .box .txt_box{width: 48%;float: left;}
#news .box .news_tit{font-size: 14px; margin-bottom: 20px;}
#news .box .container {}
#news .box .txt{font-size: 14px; font-weight: normal;line-height:30px;}
#news .box .date{color:#595858;font-size: 12px;line-height:25px;font-weight: normal;text-transform: uppercase;}

#news li {width: 32%; float: left;  background:#F6F8F7; margin: 0 2% 40px auto; padding: 20px 0 5px 0;}
#news li .trim{width: 85%;text-align: center; margin: 0 auto;overflow: hidden;/* トリミングしたい枠の幅 */height: 200px;/* トリミングしたい枠の高さ */position: relative;}
#news li .trim img{width:100%;} 
#news li .txt_box{width: 85%; height: 120px; position: relative;margin: 0 auto;}
#news li .news_tit{font-size: 16px; margin: 10px auto 0 auto;}
#news li .date{color:#595858;font-size: 12px;line-height:25px;font-weight: normal;position:absolute;bottom: 0;}
#news li:nth-child(3n){ margin-right: 0;}
#news .tw_box{width:32%; float: left;margin: 0 0 40px auto; box-sizing: border-box; background: #fff;}
#news .tw_box .pt{ padding:0 10px;height:315px;overflow-y: scroll;}
#news .tw_box .tit2{margin: 0 auto 10px auto; text-align: center;letter-spacing: 1em; padding-left: 4%;}
@media screen and (max-width:768px){
#news .tit{ margin: 40px auto 20px auto; text-align: center; font-size: 17px;}
#news li {width: 100%; float: none;  background:#F6F8F7; margin: 0 0 20px auto; padding: 20px 0 5px 0;}
#news li .news_tit{font-size: 13px; }
}

#news_detail {width: 100%; margin: 0 auto; text-align: center;}
#news_detail a img:hover{opacity: 0.8;}
#news_detail .detail_box {width: 68%; margin-right: 4%; float: left;}
#news_detail .detail_box .tit{text-align: center;letter-spacing: 1em;margin: 80px auto 50px auto; font-size: 20px;}
#news_detail .detail_box .photo {width: 100%;}
#news_detail .detail_box .txt_box{width: 100%; text-align: left; margin: 10px auto 0 auto;}
#news_detail .detail_box .news_tit{font-size: 18px; margin:20px 0;}
#news_detail .detail_box .txt{font-size: 13px; font-weight: normal; line-height: 180%; color: #333;}
#news_detail .detail_box .date{color:#595858;font-size: 10px;line-height:25px;font-weight: normal;text-transform: uppercase;}
#news_detail .detail_box .txt a{text-decoration: underline;}

#news_detail .other_box {width: 28%; float: left;}
#news_detail .tw_box{width:100%;margin:0 auto 57px auto; box-sizing: border-box;}
#news_detail .tw_box .pt{ padding:0 10px;height:600px;overflow-y: scroll;}
#news_detail .tw_box .tit{margin: 80px auto 50px auto;text-align: center;letter-spacing: 1em;}
#news_detail .update_box {width:100%;margin:0 auto;}
#news_detail article {margin: 0 auto 20px auto; width: 100%;}
#news_detail .update_box .tit{margin: 80px auto 50px auto; text-align: center;letter-spacing: 1em;font-size: 20px;}
#news_detail .update_box .photo{width: 35%;display: inline-block; margin-right: 2%;}
#news_detail .update_box .txt_box{width: 60%;display: inline-block; vertical-align: top;}
#news_detail .update_box .txt_box.w100{width: 100%;}
#news_detail .update_box .news_tit{font-size: 13px; margin-bottom: 10px; color:#403D3C; text-align: left;}
#news_detail .update_box .date{color:#595858;font-size: 10px;font-weight: normal;text-align: left;text-transform: uppercase;}
#news_detail article a:hover{opacity: 0.8;}
@media screen and (max-width:768px){
#news_detail .detail_box {width: 100%; margin-right: 0; float:none;}
#news_detail .detail_box .tit{margin: 40px auto 20px auto;font-size: 17px;}
#news_detail .other_box {width: 100%; float: none;}
#news_detail .update_box .tit{margin: 40px auto 20px auto;font-size: 17px;}
#news_detail .detail_box .news_tit{font-size: 16px;}
}

#contact {width: 100%; margin: 0 auto; text-align: center;}
#contact img{width:100%;} 
#contact .tit{ margin: 80px auto 60px auto; text-align: center;letter-spacing: 1em;  font-size: 20px;}
#contact .contact_box .txt{width: 100%; margin: 0 auto 60px; font-size: 13px; line-height: 200%;}
#contact .member{margin: 100px auto -80px auto;}
#contact .member img{ vertical-align: bottom;}
@media screen and (max-width:768px){
#contact .tit{ margin: 40px auto 20px auto; letter-spacing: 1em; font-size: 17px;}
#contact .contact_box .txt{ margin: 50px auto; font-size: 13px; line-height: 200%;}
#contact .member{margin: 65px auto -20px auto;}
}






/*---------------------------
bxslider
---------------------------*/
.bx-wrapper .bx-viewport{-webkit-transform:translatez(0); -moz-transform:translatez(0); -ms-transform:translatez(0); -o-transform:translatez(0); transform:translatez(0);}
.bx-wrapper .bx-pager{text-align:center; font-size:.85em; font-weight:bold; color:#f7c846; z-index:4444; position:absolute; bottom:100px; width:100%;}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item{display:inline-block; *zoom:1; *display:inline;}
.bx-wrapper .bx-pager.bx-default-pager a{background:#eee; text-indent:-9999px; display:block; width:10px; height:10px; margin:0 5px; outline:0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{background:#f7c846;}
.bx-wrapper .bx-prev {left: 10px;background:url(../images/common/btn_prev.png) no-repeat}
.bx-wrapper .bx-next {right: 10px;background: url(../images/common/btn_next.png) no-repeat}
.bx-wrapper .bx-controls-direction a {position: absolute;top: 35%;margin-top: -16px;outline: 0;width: 34px;height: 64px;text-indent: -9999px;z-index: 9999;}
.bx-wrapper .bx-controls-direction a.disabled {display: none;}
.bx-pager{ text-align: center; margin-top: 10px;}
.bx-pager a {display:inline-block;width: 15%;}
.bx-pager a img {  opacity: 0.5;  filter: alpha(opacity=50);width: 100%; margin-bottom: 5px;}  
.bx-pager a.active img {  opacity: 1;  filter: alpha(opacity=100);  }



.view-more{max-width:300px; width: 90%; margin: 40px auto 0px;}
.view-more a{ width: 100%; display: block; border: 1px solid #ccc; padding: 13px; color: #000; text-align: center; box-sizing: border-box; font-size: 13px; position: relative; letter-spacing: 0.5em;}
.view-more a::after{position: absolute; right: 15px;top: 15px;content: "\f105";font-family: 'FontAwesome'; color: #999;font-weight: bold;}
.view-more a:hover{opacity: 0.7;}


.body-copy{text-align: center; font-size: 13px; color: #333; line-height: 190%; margin-bottom: 30px; padding: 0;}

.body-copy-box{display: flex; margin-bottom: 30px;align-items: center;}

.body-copy-box .logo-a{width: 20%; margin-right: 5%;}
.body-copy-box .txt{width: 75%; font-size: 13px; color: #333; line-height: 190%; }

.company{padding-top:30px; border-top: 1px solid #eee; margin-top: 50px;}
.company dl{font-size: 0;letter-spacing: 0; max-width: 800px; margin: 0 auto; text-align: left;color: #333;}
.company dt{width: 20%; display: inline-block; vertical-align: top; font-size:13px;margin-top: 25px;letter-spacing: 0.1em;}
.company dd{width: 80%; display: inline-block; vertical-align: top; font-size:13px;margin-top: 25px;letter-spacing: 0.1em; line-height: 190%;}


@media screen and (max-width:768px){
.view-more{max-width: 280px; margin: 0 auto 0px;}
.view-more a{ padding: 10px;}
.view-more a::after{ top: 11px;}
.body-copy{text-align: left;font-size: 12px;}

.company dt{width: 100%;font-weight: bold;}
.company dd{width: 100%;margin-top: 0;}

.body-copy-box{display: block; margin-bottom: 30px;}

.body-copy-box .logo-a{width: 40%; margin:50px auto;}
.body-copy-box .txt{width: 100%; font-size: 13px; color: #333; line-height: 190%; }
}


#top-hero a {
  display: inline-block;
  position: absolute;
  right: 30px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 110px;
  overflow: hidden;
  color: #666;
  font-size: 13px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}
#top-hero a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #666;
}


#top-hero a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background:rgba(102,102,102,0.4);
}
#top-hero a::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}



#wrap_all path {
        fill: #111;
        stroke: #111;
        stroke-width: 2px;
        animation: svg 5s ease-in both infinite;
      }
      @keyframes svg {
        0% {
          fill: transparent;
          stroke-dasharray: 2000px;
          stroke-dashoffset: 2000px;
        }
        20%{
          stroke-dashoffset: 0;
        }
        30%{
          fill: transparent;
        }
        50%{
          fill: #111;
        }
      }




.sideboder {
      display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}

.sideboder:before, .sideboder:after {
  border-top: 1px solid #333;
  content: "";
  width: 3em; /* 線の長さ */
}
.sideboder:before {
  margin-right: 1em; /* 文字の右隣 */
}