/*Theme Name: 伝統芸能保存会*/
@charset "utf-8";

@media screen and (min-width:751px),print{
/*-------------------------------------------
all
-------------------------------------------*/
body {
  font-family: "Hannari",游明朝,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
  margin: 0 auto;
  letter-spacing: 3px;
  overflow: hidden;
  color: #fff;
  font-size: 1.1em;
  background: #004077;
}

a{
  text-decoration: none;
  display: block;
  color: #fff;
}

a:hover{
  opacity: .7;
}

.imgleft{
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  margin-bottom: 50px;
  justify-content: space-between;
}

.imgright{
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  margin-bottom: 50px;
  justify-content: space-between;
}

.imgleft > div:last-child{
 margin-left: 70px;
}

.imgright > div:last-child{
 margin-right: 70px;
}

.imgleft p,
.imgright p{
  margin-bottom: 20px;
}

.imgleft p:last-child,
.imgright p:last-child{
  margin-bottom: 0;
}

/*---------------
header
---------------*/

.wrap{
  width: 1200px;
  margin:0 auto;
  display: flex;;
}

header {
  width: 300px;
  position: fixed;
  background: #004077;
  top: 0;
}


h1 {
  text-align: center;
  padding: 0 40px 20px;
}

h1 a span{
  writing-mode: verticaSl-rl;
  writing-mode: vertical-rl;
  font-size: 1.2em;
  font-weight: bold;
}

nav ul li{
  margin-bottom:10px;
}

nav ul li a{
  font-size: .9em;
}

nav ul li a:hover{
  text-decoration: underline;
}

/*---------------
main
---------------*/

main{
  width: 900px;
  margin-right:70px;
  margin-left: 300px;
}


h2{
  font-size: 1.5em;
  margin:50px 0;
}

h2::first-letter{
  font-size: 1.8em;
  color: #dee446;
}


h3{
  display: flex;  /* 横並びにする */
  align-items: center;  /* 垂直方向に中央 */
  text-align: center;  /* 文字のセンタリング(複数行になったとき用) */
  font-size:1.5em;
  margin:0 80px;
  margin:70px;
}


/* 共通部分はまとめる */
h3::before,
h3::after{
  content:"";
  flex-grow: 1;  /* 線の伸び率 */
  border-bottom: 1px solid #fff;
}

/* 左側の線 */
h3::before{
  margin-right: 10px;  /* 線と文字の間のスペース */
  padding-left: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
}

/* 右側の線 */
h3::after{
  margin-left: 10px;  /* 線と文字の間のスペース */
  padding-right: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
}

#about ul li{
  margin-bottom: 100px;
}

#about .blc p{
  margin-bottom:20px;
}

#about li .txt{
  font-weight: bold;
  margin: 60px auto;
  background: #fff;
  color: #004077;
  padding: 20px;
}

#keep .txt{
  margin: 60px auto;
}

#keep .left{
  display: flex;
}

#keep .left li{
  margin-right: 40px;
}

#keep .left li p{
  text-align: center;
  font-size: 1.5em;
}

#keep .left li img{
  margin-bottom: 20px;
}

#keep .all{
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}

#keep .all li p{
  text-align: center;
  font-size: 1.5em;
}

#keep .all li img{
  margin-bottom: 20px;
}

#keep .center{
  display: flex;
  justify-content: space-between;
  width: 550px;
  margin:0 auto;
}

#keep .center li p{
  text-align: center;
  font-size: 1.5em;
}

#keep .center li img{
  margin-bottom: 20px;
}

#music .img{
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}

h4{
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 70px;
}

h5{
  margin: 20px 0;
}

.txtbox{
  display: flex;
  margin-left: 30px;
}

table{
  border:2px solid #707070;
  font-size: 0.7em;
  letter-spacing: 0;
}

th{
  text-align: center;
  padding:20px;
  font-size:1.5em;
  background: #dee446;
  color: #004077;
}

td{
  padding:20px 5px;
}

th,td{
  border:2px solid #707070;
}

#works .center{
  text-align: center;
  font-size: 1.3em;
}

#move ul,
#photo ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#move ul li,
#photo ul li{
  margin-bottom: 50px;
}

#news h3{
  text-align: left;
  font-size: 1em;
  margin:0;
}

#news h3::before,
#news h3:after{
  display: none;
}

#news li{
  width: 250px;
  margin-bottom: 50px;
}

#news li a{
  text-decoration: underline;
}

#news ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

time{
  display: block;
  margin:20px 0;
}

#backsupport li{
  width: 32%;
}

#contact p{
  margin-bottom: 20px;
}

#contact a{
  text-decoration: underline;
}

small{
  display: block;
  text-align: center;
  padding:10px;
}

footer{
  padding:20px;
  margin-top:100px;
  border-top:1px solid #fff;
}

/*---------------
other
---------------*/
.smonly{
  display: none;
}

}