@charset "utf-8";

:root{    scroll-behavior: smooth;}

body#artist {
	background:#fff;
	color:#231815;
}
.headtelimg{
	max-width:400px;
	height:auto;
	width: 100%;
}
#artist .head-right h1{
	color: #727171;
}
#artist #pc-nav ul li a{
	border-right:solid 1px #727171;
	color:#727171;

}
#artist #pc-nav ul li.first a{
	border-left:solid 1px #727171;
}
#artist #pc-nav ul li a:hover {
	color:#ccc;
}
#artist .foot-list2 li a{
	color: #727171;
	border-right:solid 1px #727171;
}
#artist .foot-list2 li:last-child a{
	border-right: none;	
}
#artist .foot-list2 li a:hover {
	color:#ccc;
}
.question{padding:40px 0 0px 0px; margin:0; border-bottom: 1px dashed #ccc; list-style: circle; font-weight: bold;line-height: 1.8em;}
.answer{padding:10px 0px; margin:0; line-height: 1.8em;}
.sign{ padding:20px 0px;text-align: right;}
.answer a:link{color: #B29262;}
.answer a:hover{color: #FF9900;}
.answer a:visited{color: #B29262;}

.h-style03{
	position: relative;
	border-bottom: solid 1px #231815;
	font-size:180%;
	color:#231815;
}
.h-style03 span{
	position: absolute;
	right: -3px;
	bottom: 6px;
	font-size: 30px;
	letter-spacing: 1px;
}
.h-style04{
	font-size:150%;
	color: #727171;	
}
.dlstyle01 dt{
	clear: both;
	float: left;
	width: 100px;
}
.dlstyle01 dd{
	margin-left: 100px;
}
.dlstyle02 dt{
	clear: both;
	float: left;
	width: 150px;
}
.dlstyle02 dd{
	margin-left: 150px;
}
.ulstyle01 li{
	font-size:120%;
	line-height: 1.6;
}
.bor02{
	padding-bottom: 30px;
	border-bottom: solid 1px #231815;
}
#gallery-box li{
	float: left;
	width: 23%;
	margin-right: 2.5%;
	margin-bottom: 20px;
	text-align: center;
	line-height: 1.4;
}
#gallery-box li img{
	max-width: 100%;
	height: auto;
}
#gallery-box li.g-right{
	margin-right: 0;	
}
#gallery-box li.g-left{
	clear: both;
}
#gallery-box li.wide-big{
    width: calc(23% * 2);
}
#gallery-box li.wide-big img{
    width: 100%;
}
#artist .writer{
	background: #dadbdb;
}

.contact li{
	width: 50%;
	float: left;
}
.contact li.conleft{
	background:#b29262;
	text-align: center;
	color: #fff;
	border: solid 4px #b29262;
	height: 120px;
	padding: 20px;
	font-size:120%;
	line-height: 1.6;
}
.contact li.conright a{
	display: block;
	width: 100%;
	text-align: center;
	color:#b29262;
	border: solid 4px #b29262;
	height: 120px;
	padding: 20px;
	font-size:22px;
	line-height: 1.6;
	text-decoration: none;
	background: #fff;
}
.contact li.conright a:hover{
	background:#bc9f79;
	color: #fff;	
}

.shopbox{
	width: 80%;
	margin: 20px auto;
}
#gallery_ul{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
#gallery_ul li{
	width: calc(90% / 5);
	margin-bottom: 1.5em;
}
#gallery_ul.boxw03{
	align-items: flex-end;
}
#gallery_ul.boxw03 li{
	width: calc(95% / 3);
	margin-bottom: 1.5em;
}
#gallery_ul.boxw02 li{
	width: calc(70% / 2);
	margin-bottom: 1.5em;
    font-size: 90%;
}
#gallery_ul.boxw02 li .orbtn{
	width: 70%;
    margin: 0 auto;
    text-align: center;
}

#gallery_ul li p{
	line-height: 1.6em;
	text-align: center;
}
.youtube{
	position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.youtube iframe{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	height: 100%;
}

.blog-img{width: 100%;text-align: center;margin: 2em auto;}
.blog-img img{width: 100%;}

header #pc-nav ul,footer #pc-nav ul{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
header #pc-nav ul > li{
    float: none;
    width: calc(100% / 4);
}
footer #pc-nav ul > li{
    float: none;
    width: calc(100% / 5);
}
#pc-nav ul > li a{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
nav .small{
    font-size: 85%;
    margin-top: 0.5em;
    line-height: 1.2;
    display: block;
    text-align: center;
}
footer nav .small{
    display: none;
}



/*collection*/
.c_slider_box{
    width: 80%;
    margin: 0 auto;
}
.c_slider_box .bx-wrapper img{
    padding: 0;
    transition: 0.3s;
    width: 100%;
}


/*collection個別*/

.collection_flex{
    display: flex;
    gap:1em;
    margin: 5em auto 2em;
    align-items: center;
}
.c_flex_left,
.c_flex_right{
    flex-shrink: 0;
}

.c_flex_left{
    width: 25%;
}
.c_flex_right{
    width: calc(100% - 25% - 1em);
}

.collection_slider_item{
    padding: 0;
    display: flex;
    width: 100%;
    align-items: center;
    gap:2em;
}
.collection_slider_item figure{
    width: 50%;
}
.collection_slider_item figure img{
    padding: 0;
    pointer-events: none;
}
.collection_slider_item .collection_info{
    width: calc(100% - 50% - 2em);
    flex-shrink: 0;
}

.collection_info p{
    margin: 0;
}
.c-name{
    font-size: 140%;
    text-align: center;
}
.c-name .small{
    display: block;
    font-size: 0.8em;
    text-align: center;
}

.collection_info{
    font-size: 18px;
}
.collection_info p{
    padding: 0.5em 0;
}
.collection_info h3{
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 1em;
}
.collection_info h3 .en{
    font-size: 90%;
    font-weight: normal;
}
.c-contact a{
    background: #b29262;
    padding: 0.5em;
    display: block;
    text-align: center;
    transition: 0.3s;
    border: 2px solid #b29262;
    text-decoration: none;
    border-radius: 0.3em;
}
.c-contact span{
    display: block;
    font-size: 90%;
    text-align: center;
}

.c-contact a:hover{
    background:#231815;
}
p + h3{
    margin-top: 2em;
}
.c-f-caution{
    color: #FFD600;
    padding: 1em;
    margin: 1em auto;
    border: 2px solid #ffd600;
    font-weight: bold;
    text-align: center;
    width: fit-content;
}


/*collection問合せフォーム*/
.c-form-box{
    border: 2px solid #b29262;
    padding: 1em;
}
#c-form{
    width: 100%;
}
#c-form tr{
    display: flex;
    width: 100%;
    gap:0.5em;
    margin: 0.7em 0;
}
#c-form th,
#c-form td{
    padding: 0.5em 1em;
}
#c-form th{
    font-size: 95%;
    width: 30%;
    background: #333;
}
#c-form td{
    width: calc(100% - 30% - 0.5em);
}

#c-form input[type="text"],
#c-form textarea{
    padding: 0.3em 0.5em;
    width: 100%;
    border-radius: 0.3em;
    outline: 2px solid transparent;
}
#c-form input[type="text"]:focus,
#c-form textarea:focus{
    outline: 2px solid #b29262;
}
#c-form th label{
    display: block;
    cursor: pointer;
}

.c-f-thumbnail{
    display: flex;
    gap:3em;
    position: relative;
}
.c-f-thumbnail img{
    pointer-events: none;
}
.c-f-thumbnail input[type="radio"]{
    appearance:none;
    position: absolute;
}
.c-f-thumbnail input[type="radio"] + label{
    padding: 0.5em;
    border: 3px solid transparent;
    width: calc((100% - 3em) / 2);
    text-align: center;
    position: relative;
    cursor: pointer;
}
.c-f-thumbnail input[type="radio"]:checked + label{
    border-color: red;
    background: rgba(255,255,255,0.1);
}
.c-f-thumbnail input[type="radio"]:checked + label::before{
    position: absolute;
    content: '選択中';
    font-size: 85%;
    font-weight: bold;
    padding: 0.1em 0.3em;
    background: red;
    color: #fff;
    top: 0;
    left: 0;
}

.view{
    display: flex;
    align-items: center;
    padding: 1em;
    margin-bottom: 1em;
    background: #b29262;
    color: #231815;
    font-weight: bold;
    gap:0.5em;
    cursor: pointer;
    transition: 0.3s;
}
.view:hover{
    opacity: 0.8;
}
.view p{
    margin: 0;
    padding: 0;
}
.viewcheck{
    appearance:none;
    border: 1px solid #000;
    height: 1.5em;
    width: 1.5em;
    background: #fff;
    padding:0.2em;
    border-radius: 0.3em;
    position: relative;
}
.viewcheck:checked{
    background: #231815;
}
.viewcheck:checked::before{
    content: '';
    display: block;
    height: 0.5em;
    width: 0.8em;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    position: absolute;
    top: 35%;
    left: 50%;
    translate:-50% -50%;
    rotate:-45deg;
}
.view-date{
    display: flex;
    gap:0.5em;
    align-items: center;
}
.view-date p{
    width: 30%;
    padding: 0;
    margin: 0;
    font-size: 85%;
}
.view-date + .view-date{
    margin-top: 1em;
}

.submitbtn{
    display: block;
    width: fit-content;
    padding: 0.3em 4em;
    background: #b29262;
    color:#231815;
    margin: 1em auto;
    cursor: pointer;
    border: 1px solid #b29262;
    font-size: 110%;
    letter-spacing: 0.1em;
    font-weight: bold;
    transition: 0.3s;
}
.submitbtn:hover{
    background:#231815;
    color:#b29262;
}



/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
↑pcサイズ
----------------------------------
↓タブレットサイズ
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
@media (max-width: 980px){
.headtelimg{
	max-width:300px;
	height:auto;
	width: 100%;
}
.contact li.conright a{
	font-size: 20px;
	}

    header #pc-nav ul > li{
        width: calc(100% / 2);
    }
    footer #pc-nav ul > li{
        width: calc(100% / 3);
    }
    footer #pc-nav ul > li:nth-child(n+4){
        width: calc(100% / 2);
    }
    #sp-nav li a{display: flex;gap:0.5em;}
    #sp-nav li a br{display:none;}
    header .head-left a > div{/*text-align: center;*/}
    footer nav .small{display: block;}
}


@media (min-width: 640px) and (max-width: 979px) {


}

/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
↑タブレットサイズ
----------------------------------
↓spサイズ
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/

@media (max-width: 639px) {
.head-right h1,.head-right p{
	text-align: center;
}
#artist footer #pc-nav,.foot-list2{
		background: #fff;
	}
#artist footer #pc-nav li:nth-child(1),
#artist footer #pc-nav li:nth-child(2),
#artist .foot-list2 li:nth-child(1),
#artist .foot-list2 li:nth-child(2){
		border-top:solid 1px #231815;		
	}
#artist footer #pc-nav li:nth-child(3),
#artist footer #pc-nav li:nth-child(5),
#artist .foot-list2 li:nth-child(1),
#artist .foot-list2 li:nth-child(3){
		border-left:solid 1px #231815;		
	}
	
#artist footer #pc-nav li:nth-child(1),
#artist footer #pc-nav li:nth-child(3),
#artist footer #pc-nav li:nth-child(5),
#artist .foot-list2 li:nth-child(1),
#artist .foot-list2 li:nth-child(3){
		border-right:none;
	}
#artist footer #pc-nav li:nth-child(5),
#artist footer #pc-nav li:nth-child(6),
#artist .foot-list2 li:nth-child(3),
#artist .foot-list2 li:nth-child(4){
		border-bottom:solid 1px #231815;		
	}
#artist .foot-list2 li:nth-child(4){
	border-right:solid 1px #231815;		
	}
    
header #pc-nav ul li,
footer #pc-nav ul li{
    width: 100%;
    }
    footer #pc-nav ul > li{
        width: 100%;
        border: none;
    }
    footer #pc-nav ul > li:nth-child(n+4){
        height: 35px;
    }

    
.h-style03{
	font-size:200%;
	line-height: 1.6;
	text-align: center;
}
.h-style03 span{
	position:static;
	display: block;
	font-size: 80%;
	text-align: center;
}
.h-style04{
	font-size:160%;
}

	.content{
		padding:0 10px;
	}
.dlstyle02 dt{
	width: 100px;
}
.dlstyle02 dd{
	margin-left: 100px;
}
#gallery-box li{
	width: 50%;
	margin-right: 0%;
	padding: 10px;
    min-height: auto;
}
#gallery-box li.g-left{
	clear:inherit;
}
#gallery-box li:nth-child(odd){
	clear: both;		
	}
.contact li{
	width: 100%;
	float: none
}
.contact li.conleft{
	height: auto;
	padding: 10px;
}
.contact li.conright a{
	height: auto;
	padding: 10px;
	font-size:120%;
}
#artist .writer{
	padding-bottom:0;		
	}
.ulstyle01 li{
	font-size:120%;
	line-height: 1.6;
	margin-bottom: 10px;
}

.shopbox{
	width: 90%;
	margin: 20px auto;
}
#gallery_ul{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
#gallery_ul li{
	width: calc(90% / 2);
	margin-bottom: 1.5em;
}
#gallery_ul li p{
	font-size: 11pt;
	line-height: 1.6em;
	text-align: center;
}

    #gallery_ul.boxw02 li{
        width: calc(85% / 2);
    }
    #gallery_ul.boxw02 li .orbtn{
        width: 100%;
    }
    
    .blog-img{
        width: 85%;
    }
    
    
    /*collection*/
    
    .collection_flex{
        flex-direction: column;
        width: 95%;
    }
    .c_flex_right,
    .c_flex_left{
        width: 100%;
    }
    .c_flex_left{
        border-bottom: 1px solid #463f3b;
        padding-bottom: 1em;
    }
    .c_slider_box{
        width: 100%;
    }
    .collection_slider_item{
        flex-direction: column;
    }
    .collection_slider_item .collection_info{
        width: 100%;
    }
    
    #c-form tr{
        flex-direction: column;
        gap:0;
    }
    #c-form td{
        background: #444;
    }
    #c-form th,
    #c-form td{
        width: 100%;
    }
        
}