/*--list--*/
body{background:#fff;}
.gallery{padding:.5em 1em; position:relative; margin:0 auto 2em;background:#fff;font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;}
.gallery h2{font-size:2.52em;  font-weight: bold; margin:.5em auto 1em;width:90%; letter-spacing:.1em;}
.gallery section h2{background:#000; color:#FFF; padding:.5em 1em; border-left:10px /*#2b4b64*/#775277 solid; font-weight:bold; font-size:1.2em; width:90%; margin:2em  auto}

p.w85{width:85%; margin:0 auto}

.galink{width:90%; margin:0 auto 1em; letter-spacing:-.4em}
.galink > li{/*display:inline-block;width:50%;*/display:block; margin:0; letter-spacing:normal; overflow:hidden; vertical-align:top;/* padding-left:2%;border-left:1px #ccc solid*/border-bottom:1em #ccc solid}
.galink > li:first-child{/*margin-right:4%;padding-right:2%;padding-left:0;border-left:none*/}
.galink li h3{ margin:1em auto; font-size:1.2em;font-weight:bold;padding-left:.5em}
.galink li h3:before{content:"\25a0";color:#2b4b64; margin-right:.5em;font-size:.8em}
.galink li h4{margin:1em auto; padding:.2em 0; border:1px #000 solid; display:block;text-align:center}
.galink li h5{font-size:1em; color:#9d4209;line-height:1.4em; margin:0 auto 1em;padding-left:.5em}

.galink li h5.brown,.txtarea h5.brown,.txtarea h4.brown{color:#9d4209;font-weight:bold;}
.galink li h5.blue,.txtarea h5.blue,.txtarea h4.blue{color:#325982;font-weight:bold;}
.galink li h5.red,.txtarea h5.red,.txtarea h4.red{color:#AD3140;font-weight:bold;}

.galink li > p ,.galink .keyw p{color:#000; font-size:.9em; line-height:1.4em}
.galink li > p span,.galink .keyw p span{display:block;}
/*.galink p{line-height:1.6em; margin:1em auto 2em;font-weight:bold;padding-left:.5em}
.galink p span{display:block; font-size:.9em}*/

.galink .box{display:inline-block;width:48%}
.galink figure.box{width:50%;}

/*--bbtn--*/
.bbtn{margin-left:0;line-height:1.6em;text-align:center}
.bbtn a{border:1px #000 solid; padding:0 1em; width:80%; display:block; margin:1em auto; position:relative}
.bbtn img{-webkit-filter: invert(100%);filter: invert(100%);position:absolute;left:1em;top:4px;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
.bbtn a:hover{background:#ad3140; color:#FFF; border-color:#ad3140} 
.bbtn a:hover img{-webkit-filter: invert(0%);filter: invert(0%);left:1.3em;}

/*--keyword--*/
.keyw{margin:0 auto 1em; overflow:hidden;}
.keyw .f_l{margin-right:1em}
.keyw a{display:block; padding:0; overflow:hidden}
.keyw a:hover{background:rgba(173,49,64,.2)}

.flex{width:90%;
display: -webkit-flex; /* Safari */display: flex;
-webkit-flex-wrap: wrap;/* Safari */flex-wrap:wrap;
/*-webkit-justify-content: space-between; /* Safari *//*justify-content:space-between;*/
margin:0 auto}

.flexs{
width:100%;
display: -webkit-flex; /* Safari */display: flex;
-webkit-flex-wrap: wrap;/* Safari */flex-wrap:wrap;
-webkit-justify-content: space-between; /* Safari */justify-content:space-between;*/
}

.tube.flex{margin:1em auto; letter-spacing:-.4em;width:100%}
.tube li{letter-spacing:normal;width:100%}

.tube_b a,.tube_s a{display:block;}
.tube_b figure,.tube_s figure{position:relative;}
.tube_b{margin:0 auto 1em;}
.tube_b li{width:/*30%*/46%; position:relative;margin:1em}
.tube_b h3{ margin:1em auto; font-weight:bold;font-size:1.1em; padding-left:.5em}
.flex a{color:#000;}
.tube_b li p{line-height:1.4em; padding-left:.5em;font-weight:bold; margin-bottom:1em}
.tube_b li p span{font-size:.9em; display:block;}

.tube_s.flex{-webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start; margin-bottom:2em; padding-top:3em;border-top:1px #ccc solid}
.tube_s li{width:/*20% 25% */23%; margin-left:/*5%*/2%; position:relative}
.tube_s li:first-child,.tube_s li:nth-of-type(4n+1){margin-left:0}
.tube_s p{line-height:1.6em; padding:.5em}

/*.tube_b figure:before,.tube_s figure:before{content:url(../img/gallery/tube.png); position:absolute; display:block; top:20%;left:0;right:0;margin:auto;width:99px;height:99px;z-index:10}
.tube_s figure:before{top:10%;}*/
.tube_b li:hover,.tube_s li:hover,ul.hor li a:hover,li.details ul li a:hover{background:rgba(173,49,64,.2)} 
.flex a:hover img{opacity:1}

.tube li iframe{width:100%;height:250px;}
.tube_b li iframe{width:442px;height:236px;}
.tube_s li iframe{width:/*192px 240px*/221px;height:162px;}

/*--gallery--*/

figure.w90{width:90%; margin:0 auto 1em;position:relative;}
figure.w90 figcaption{position:absolute; top:35%; left:5%;}
figure.w90 p{padding:.2em 2em; display:inline-block; border:1px #000 solid;}
figure.w90 h3{font-size:1.2em; margin:1.5em auto; font-weight:bold}
figure.w90 h3 b{font-size:1.3em;font-weight:bold}

.txtarea{width:85%; margin:3em auto; overflow:hidden; line-height:2em}
.txtarea .f_r{margin-left:2em; text-align:center; width:38%}
.txtarea h4{font-size:2em; margin:2em auto 0;line-height:1.6em;}

dl.qanda{margin-bottom:2em;}
dl.qanda dt,dl.qanda dd{padding-left:15%;line-height:2em;}
dl.qanda dt{background:url(../img/gallery/q.gif) 8% 2em no-repeat; color:#aa2c3e; min-height:5em; border-top:1px #ccc dotted; padding-top:2em}
dl.qanda dd{background:url(../img/gallery/a.gif) 8% 1.5em no-repeat; padding-top:1.5em; padding-bottom:2em;}

ul.atte{width:90%; margin:0 auto;padding:.5em 1em;border: 1px #000 solid; line-height:1.8em}

ul.hor{ /*letter-spacing:-.4em;line-height:1em*/;margin:1em auto; font-size:.9em;/*border-left:1px #8a2733 solid;*/}
ul.hor li{display: inline-block;/* border-right:1px #8a2733 solid;*/ letter-spacing:normal;width:30%;margin-right:3%}
ul.hor li:last-child{margin-right:0;}
ul.hor li a{display:block; text-align:center; padding:.2em 0;border:1px #8a2733 solid;}

li.details{padding:.5em; border:2px #8a2733 dashed; border-radius:10px;}
li.details > ul{list-style:outside; margin:1em auto;line-height:1.6em; padding-left:.5em}
li.details ul li{width:auto; display:block;}
li.details ul li a{display:block;}
li.details ul li a:before{content:"\25cb"}

dl.reslink{ border:1px #000 solid; display:inline-block; font-size:1em;letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */; margin:2em 0 2em 15%;overflow: hidden;}
.reslink a{color:#ad3140;}
.reslink a:hover{color:#fff;background:#ad3140;}
.reslink dt{ padding:.5em 1em;}
.reslink dd a{display:block; padding:.5em .8em .5em 0;}
.reslink dd a:before{content:"";width:0;height:0; border-left:1px #000 solid; margin-right:.8em}
.reslink dt+dd a:before{border:none}
.reslink dt{display:inline-block; color:#FFF;background:#000; letter-spacing:normal}
.reslink dd{display:inline-block;background:#FFF; letter-spacing:normal}


@media screen and (max-width: 480px){ 
.gallery h2{font-size:1.5em; width:100%;letter-spacing:0;margin:1em auto}
.gallery section h2{width:100%; margin:2em auto 1em}

.bbtn a{width:auto;}

p.w85{width:95%; margin:0 auto}
.galink{width:95%;}
.galink li{width:100%; border:none; padding:0}
.galink li:first-child{margin-right:0;}
.galink li h3,.galink li h4{font-size:1.2em;margin:.5em auto;}
.galink p{line-height:1.4em; margin:.5em auto 1em;}

.flex{width:100%;}
.tube_b{margin:0 auto 2em;}
.tube_s.flex{-webkit-justify-content: space-between; /* Safari */justify-content:space-between;}
.tube_b li,.tube_s li{width:48%; margin:1em auto }
.tube li iframe,.tube_b li iframe,.tube_s li iframe{width:100%; height:auto;}
/*--gallery--*/
figure.w90{width:100%;}
figure.w90 h3{font-size:.9em; margin:3em auto 0;}

.txtarea{width:95%; margin:2em auto; overflow:hidden; line-height:1.6em}
.txtarea .f_r{margin-left:0; text-align:center; width:100%; margin-bottom:1em}
.txtarea h4{font-size:1.5em; margin:1em auto 0;line-height:1.6em;}

dl.qanda dt,dl.qanda dd{padding-left:1em;line-height:1.6em; padding-top:50px;}
dl.qanda dt{background:url(../img/gallery/q.gif) left 5px no-repeat;min-height:auto; margin-bottom:.5em}
dl.qanda dd{background:url(../img/gallery/a.gif) left 5px no-repeat; padding-bottom:1em;}

.reslink{width:100%; margin:1em 0}
.reslink dt{display:block;}
.reslink dd{display:block; border-top:1px #999 dotted;}
.reslink dt+dd{border:none;}

.galink .box{display:block;width:100%}
.galink figure.box{width:100%;}
}

.flex.col3{justify-content:space-evenly}
.col3 li{width:32%}
@media screen and (max-width: 480px){
.col3 li{width:49%}
}