/*==================================================
スライダーのためのcss
===================================*/
img{
  width: 100%;
  height: auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}
rt{font-weight:normal;}
h6{     line-height: 1.3;
    margin: 0px auto;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;}
* {
    padding: 0;
    margin: 0;
}

*, ::before, ::after {
    background-repeat: no-repeat;
    box-sizing: inherit;
}
.piecelatter p2 {    font-weight: normal;
    font-size: 13px;
    text-align: center;}
.detailslatter{    padding-top: 30px;}
.detailslatter,.otherdetailpages,.otherdetails{      background-color: #f8f9fb;}
.otherdetailpages{    display: flex;margin: 0px auto;max-width: 1000px; margin: 0 auto;
width: 90%;}
.otherdetailpages{
    padding-bottom: 15px;}
.otherdetailpages img{    border-radius: 45px;    margin: 0 5px;
    width: 75px;}
.backtoworks{    text-align: center;}
.piecepic2{margin: 0 auto;
    position: relative;
    width: 90%;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}
.piecepic2 img {
    border-radius: 5px;}

.width1000{    max-width: 1000px;margin: 0 auto;}
.piecetitle{      text-align: center;  width: 70%;    padding: 30px 0px;
    margin: 0px auto 10px auto;
    position: relative;
    z-index: 10;}
.piecetitle p{ line-height: 1.3;
    font-size: 14px;  position: relative;
    z-index: 20;}
.piecebox{margin: 0px auto;background-color: #f8f9fb;
}
.piecebox img{width: 100%;}
.piecepic{}
.gallery{ margin:0 0 5px 0;}
.piecelatter {background-color: #f1f1f1;
    padding-bottom: 20px;
    padding-top: 20px;
    position: relative;
    margin: 6px auto 0px auto;
    /* width: 500px; */
    /* border-radius: 10px; 
    background-color: #e7e7e7;*/}
.piecelatter p,.otherdetails p{    margin-bottom: 6px;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
}

.piecedetails,.piecedetails th,.piecedetails td{      padding: 8px;
    font-weight: 500;
    border-bottom: 1px solid #f8f9fb;}
.piecedetails{     border-radius: 7px;
    background-color: white;  margin: 0px auto;   width:500px; border-collapse: collapse;}
.piecedetails th{     vertical-align: top;   width: 80px;}
.piecedetails td{text-align: left;padding-right: 8px;}
.gallery{
	margin:0 0 5px 0;
}

.gallery li{
list-style:none;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 110%; /*42%*/
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 12px;/*25px*/
    width: 12px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:42%; /*2.5%*/
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:42%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.choice-btn li{
 cursor: pointer;
  outline: none;
  background:#f8f9fb;
  width:20%!important;
}

.choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}
/*
.choice-btn .slick-track {
	transform: unset !important;画面幅サイズ変更に伴うサムネイル固定*/
ul{
  margin:0;
  padding: 0;
  list-style: none;
}
a{
  color: #333;
}

a:hover,
a:active{
  text-decoration: none;
}
/*波*/
.wave{  position: relative;
    height: 120px;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f8f9fb;
}
canvas{
position: absolute;
    bottom: -70px;
left:0;
/*width: 100%;*/
}
/*水滴*/
#wrapper{
   height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f8f9fb;
}

a{
	color: #333;
}

/*背景の動き*/
.fluid {
    top: -15px;
    position: absolute;
    z-index: 1;
    width: 13vh;
    height: 13vh;
    background: #ff000059;
    animation: fluidrotate 30s ease 0s infinite;
}
/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}
/*全サムネイルのコンテナー*/
#thumbs {
    overflow: hidden;
}
/*サムネイルの幅、ポインターを手のひら*/
#thumbs label img {
padding: 1.5px;
    border-radius: 5px;
    float: left;
    text-align: center;
    width: 19.5%;
    cursor: pointer;
    margin-top: 5px;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8, #r9, #r10, #r11, #r12, #r13, #r14, #r15, #r16, #r17, #r18, #r19, #r20,
#r21, #r22, #r23, #r24, #r25, #r26, #r27, #r28, #r29, #r30, #r31, #r32, #r33, #r34, #r35, #r36, #r37, #r38, #r39, #r40,  
#r41, #r42, #r43, #r44, #r45, #r46, #r47, #r48, #r49, #r50, #r51, #r52, #r53, #r54, #r55, #r56, #r57, #r58, #r59, #r60
   {
	display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
.photo {
	position: absolute;
	left: 0;
	top: 0;
}
.photo img {
	width:100%;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1 img, #r2:checked ~ #photo2 img, #r3:checked ~ #photo3 img, #r4:checked ~ #photo4 img, #r5:checked ~ #photo5 img,  
#r6:checked ~ #photo6 img, #r7:checked ~ #photo7 img, #r8:checked ~ #photo8 img, #r9:checked ~ #photo9 img, #r10:checked ~ #photo10 img,
#r11:checked ~ #photo11 img, #r12:checked ~ #photo12 img, #r13:checked ~ #photo13 img, #r14:checked ~ #photo14 img, #r15:checked ~ #photo15 img,  
#r16:checked ~ #photo16 img, #r17:checked ~ #photo17 img, #r18:checked ~ #photo18 img, #r19:checked ~ #photo19 img, #r20:checked ~ #photo20 img,
#r21:checked ~ #photo21 img, #r22:checked ~ #photo22 img, #r23:checked ~ #photo23 img, #r24:checked ~ #photo24 img, #r25:checked ~ #photo25 img,  
#r26:checked ~ #photo26 img, #r27:checked ~ #photo27 img, #r28:checked ~ #photo28 img, #r29:checked ~ #photo29 img, #r30:checked ~ #photo30 img, 
#r31:checked ~ #photo31 img, #r32:checked ~ #photo32 img, #r33:checked ~ #photo33 img, #r34:checked ~ #photo34 img, #r35:checked ~ #photo35 img,  
#r36:checked ~ #photo36 img, #r37:checked ~ #photo37 img, #r38:checked ~ #photo38 img, #r39:checked ~ #photo39 img, #r40:checked ~ #photo40 img,
#r41:checked ~ #photo41 img, #r42:checked ~ #photo42 img, #r43:checked ~ #photo43 img, #r44:checked ~ #photo44 img, #r45:checked ~ #photo45 img,  
#r46:checked ~ #photo46 img, #r47:checked ~ #photo47 img, #r48:checked ~ #photo48 img, #r49:checked ~ #photo49 img, #r50:checked ~ #photo50 img,
#r51:checked ~ #photo51 img, #r52:checked ~ #photo52 img, #r53:checked ~ #photo53 img, #r54:checked ~ #photo54 img, #r55:checked ~ #photo55 img,  
#r56:checked ~ #photo56 img, #r57:checked ~ #photo57 img, #r58:checked ~ #photo58 img, #r59:checked ~ #photo59 img, #r60:checked ~ #photo60 img
{	opacity: 1;
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}
@media screen and (max-width:840px){	

}
@media screen and (max-width:600px){
canvas {
    bottom: -30px;	}
.slick-next {
    right: 35%;}
.slick-prev{left: 35%;}

.piecedetails {width: 90%}
.piecetitle {    text-align: left;
        width: 80%;}

.otherdetailpages, .otherdetails {
width: 90%;
}

}
@media screen and (max-width:480px){	
.fluid {
    width: 12vh;
    height: 12vh;}
.piecedetails th {
    width: 50px;
}

.piecedetails{  
}
.slick-prev, .slick-next { 
    height: 12px;
    width: 12px;
}



}