@charset "utf-8";

html {
font-size:medium !important;
}

body{
	width: 100%;
	font-family: sans-serif;
	color: #666666;
	position: absolute;
	background: #f2f2f2;
}

html, body, div, span, object, iframe,
ul,dl,ol,li,dl,img,
h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

ul{
	list-style: none;
}

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

.fwBold{
	font-weight: bold;
}

span.marker{
	display: inline-block;
	font-weight: bold;
	color: #333;
	background: #ffe58a;
}

.brSp{
	display: none;
}

/*---------------------------------------------
								サイドナビ固定
---------------------------------------------*/
header{
	width: 20%;
	max-width: 384px;
	height: 100%;
	overflow: hidden;
	background: #fff;
	position: fixed;
}

#headerInner{
	width: 75%;
	overflow: hidden;
	padding: 40px 12.5% 12.5%;
}

h1{
	margin: 0 0 10%;
	font-size: 1.6vw;
	color: #444444;
}
h1 a:hover{
	opacity: 0.6;
}

h1 a img{
	width: 100%;
	height: 100%;
}

#language{
	margin: 7% 0;
}

#language a{
	display: inline-block;
	padding: 0 10px;
	font-size: 0.85vw;
	border: 1px solid #666666;
	cursor: pointer;
}
/*Safari表示用*/
_::-webkit-full-page-media, _:future, :root #language a {
	padding: 2px 10px 4px;
}

.langbuttons a.on {
	background: #666;
	color: #fff;
	font-size: 0.8vw;
}

.ja,.en{   
	display: block;
    text-align: justify;
}

#menuSp{
	display: none;
}

nav{
	font-size: 0.9vw;
}
#navSp{
	display: none;
}

nav ul li{
	margin: 0 0 5%;
}
/*Safari表示用*/
_::-webkit-full-page-media, _:future, :root nav ul li{
	margin: 0 0 5%;
}

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

li[class*=current_01],
#about nav ul li:nth-child(2),
#news nav ul li:nth-child(3),
#publication nav ul li:nth-child(4),
#press nav ul li:nth-child(5),
#shop nav ul li:nth-child(6),
#contact nav ul li:nth-child(7){
	padding: 0 0 1.5% 2.5%;
	color: #555555;
	font-size: 1vw;
	font-weight: bold;
	border-left: 4px solid #666666;
	border-bottom: 1px solid #666666;
}

#subNav li.current{
	font-weight: bold;
}

/*----------  instagaram ----------*/
#instagaram{
	margin: 15% 0 5%;
}

#instagaram .icoInsta{
	width: 15%;
	height: auto;
	display: inline-block;
	vertical-align: top;
}
#instagaram .icoInsta img{
	width: 100%;
	height: auto;
}

#instagaram .instaTxt{
	display: inline-block;
	vertical-align: -webkit-baseline-middle;
	font-size: 1.05vw;
}
/*Safari表示用*/
_::-webkit-full-page-media, _:future, :root .instaTxt {
	margin-top: 2%;
}

#insta{
    height: 0;
    clear: both;
    overflow: auto;
    margin: 5% 0 0;
	padding: 0 0 101.5%;
    background: #fff;
}

#insta iframe{
	margin: 0 0 -107.5%;
}

#insta iframe .widget-container{
	overflow: scroll;
	height: 155px;
}

/*----------  /instagaram ----------*/

iframe{
	width: 100%;
	overflow: hidden;
	border: none;
}

#sns{
	width: 100%;
	overflow hidden;
	margin: 0 0 4.5%;
}

#sns li{
	display: inline-block;
	width: 14%;
	max-width: 40px;
	margin: 0 0 0 8px;
}
#sns li img{
	width: 100%;
	height: auto; 
}
#sns li:first-child{
	margin-left: 0px;
}

#instagaram a img:hover,
#instagaram instagaram:hover,
#sns li:hover{
	opacity: 0.6;
}

.copyRight{
	font-size: 0.75vw;
	color: #444444;
}

#sns iframe ._51m-{
	display: none !important;
}

/*---------------------------------------------
								mainコンテンツ
---------------------------------------------*/
main{
	width: 80%;
	position: absolute;
	top: 0;
	left: 20%;
}

#subNav{
	width: 97.5%;
	overflow: hidden;
    margin: 40px auto 2.6%;
    padding: 10px 0;
    text-align: center;
    font-size: 1vw;
    background: #e8e8e8;
}

#subNav li{
	width: 20%;
	float: left;
}
#subNav li:hover{
	text-decoration: underline;
}

main article{
	width: 94.25%;
	overflow: hidden;
	padding: 0 2.875% 3.5%;
}

#portfolio > li > h2{
	width: 97.5%;
	margin: 3.85% auto 2.6%;
	padding: 5px 0;
	text-align: center;
	font-size: 116%;
    background: none;
}

main h2{
	width: 97.5%;
	margin: 3.85% auto 2.6%;
	padding: 5px 0;
	text-align: center;
	font-size: 1.5vw;
    background: #e8e8e8;
}

main ul.pfNavi {
	width: 98.5%;
	overflow: hidden;
	margin: 1.5% auto;
}

main ul.pfNavi li{
	float: left;
	width: 25%;
}

ul.itemList{
	width: 100%;
	overflow: hidden;
	margin: 0 auto 3%;
	display: flex;
	flex-wrap: wrap;
}

ul.itemList li.itemBox{
	width: 22.5%;
	margin: 0 1.25% 2.2%;
	padding: 0;
	background: #fff;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,.1);
}

ul.itemList li.itemBox a{
  transition: 0.2s ease-in-out;
}

ul.itemList li.itemBox a:hover{
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	transition: 0.2s ease-in-out;
}

ul.itemList li.itemBox .item{
	width: 100%;
}

ul.itemList li.itemBox .item img{
	width: 100%;
	height: auto;
	display: block;
}

ul.itemList li.itemBox .item .itemInner{
	width: 90%;
	padding: 0 5% 3.5%;
}

ul.itemList li.itemBox .item .itemTtl{
    height: 2em;
    margin: 3% 0 4.5%;
    line-height: 1.1;
    font-size: 1vw;
    font-weight: bold;
    text-align: justify;
}
ul.itemList li.itemBox .item .itemTtlSmall{
    font-size: 0.8vw;
}

ul.itemList li.itemBox .item .tag01{
	width: 4em;
	display: inline-block;
	margin: 0 0 2%;
	padding: 0 5px;
    text-align: center;
	font-size: 0.75vw;
	border: 1px solid #c5c5c5;
}
ul.itemList li.itemBox .item .tag02{
	width: 8em;
	display: inline-block;
	margin: 0 0 2%;
	padding: 0 5px;
    text-align: center;
	font-size: 0.75vw;
	border: 1px solid #c5c5c5;
}
/*---------- ↑ボタン ----------*/
#returnTop{
	display: none; 
}
#returnTop .arrow{
	width: 25px;
	background: #fff;
	border-radius: 50px;
	border: 20px solid #fff;
	position: fixed;
	right: 1.5%;
	bottom: 2.5%;
	opacity: 1;
}
#returnTop .arrow:hover{
	opacity: 0.6;
}
#returnTop .arrow span{
	display: block;
	width: 20px;
	height: 20px;
	border-top: 4px solid #0f3775;
	border-right: 4px solid #0f3775;
	transform: rotate(-45deg);
}
#returnTop .arrow span:after {
	content: " ";
	display: block;
	width: 4px;
	height: 29px;
	margin: -5px auto 0;
	background: #0f3775;
	transform: rotate(45deg);
}

footer{
	display: none;
}

/*---------------------------------------------
										詳細ページ
---------------------------------------------*/

.ttl{
	margin: 2.6% auto 1.3%;
}

.sortTtl{
	text-align: center;
	font-size: 1.1vw;
	font-weight: bold;
}

.note{
	width: 72%;
	max-width: 980px;
	margin: 2.5% auto 2.5%;
    line-height: 1.7;
	font-size: 92%;
}

.note a:hover{
	text-decoration: underline;
}

.note span:nth-child(1){
	display: block;
	margin: 0 0 2.5%;
	padding: 0 0 2.5%;
	border-bottom: 1px solid #cccccc;
}

.linkBtn{
	width: 72%;
	max-width: 980px;
	margin: 0 auto 2.5%;
}

.linkBtn a{
	display: block;
	width: 15%;
	padding: 1.2% 5%;
	text-align: center;
	color: #fff;
	background: #666;
}
.linkBtn a:before{
	content:"";    display: inline-block;
   margin: 0 5% 0 0;
	border-style: solid;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #ffffff;
}
.linkBtn a:hover{
	display: block;
	width: 15%;
	padding: 1.2% 5%;
	text-align: center;
	color: #fff;
	background: #333;
}

.photoImg,
.photoImg_mb{
	display: block;
	width: 72%;
	max-width: 980px;
	height: auto;
	margin: 0 auto;
}
.photoImg_mb{
	margin-bottom: 3.5%;
}
.photoImg img,
.photoImg_mb img{
	width: 100%;
	height: auto;
}

iframe{
	display: block;
	width: 72%;
	max-width: 980px;
	margin: 0 auto 3.5%;
}

/*---------------------------------------------
									aboutページ
---------------------------------------------*/

#about article .inner{
	width: 97.5%;
	margin: 0 auto;
}

#about .name{
	margin: 2.5% 0 0 2%;
	font-size: 108%;
}

#about .occupation{
	margin: 1.5% 0 1.5% 2%;
	font-size: 84%;
}

#about .profileImgSp{
	display: none;
}
#about .profileImgPc{
	width: 30%;
	margin: 0 0 2.5% 2%;
}
#about .profileImgPc img{
	width: 100%;
	height: auto;
}

#about .profile{
    width: 48%;
	margin: 0 0 2% 2%;
    padding: 0 0 0.5%;
    font-weight: bold;
    border-bottom: 1px dotted #666;
}

#about .aboutNote{
    width: 48%;
    margin: 0 0 2% 2%;
    line-height: 1.8;
    font-size: 92%;
}
#about .aboutNote span:nth-child(1) {
    display: block;
    margin: 0 0 2.5%;
}

#about .career{
	width: 48%;
	overflow: hidden;
	margin: 0 0 4.5% 2%;
    padding: 2% 0;
    font-size: 84%;
    border-top: 1px dotted #666;
    border-bottom: 1px dotted #666;
}

#about dl.career dt{
	width: 5%;
	float: left;
	clear: left;
	margin: 0 0 1%;
}

#about dl.career dd{
	width: 70%;
	float: left;
	margin: 0 0 1% 10%;
}

/*---------------------------------------------
					news・press ページ
---------------------------------------------*/

#news .newsList,
#press .pressList{
	width: 97.5%;
	margin: 2.5% auto 0;
	font-size: 84%;
	color: #666;
}

#news .newsList a,
#press .pressList a{
	text-decoration: underline;
}
#news .newsList a:hover,
#press .pressList a:hover{
	text-decoration: none;
}


#news .newsList li,
#press .pressList li{
	margin: 0 0 2.5%;
	padding: 0 2.5% 2.5%;
	border-bottom: 1px dotted #666;
}

#news .newsList .date,
#press .pressList .date{
    margin: 0 0 1%;
}

#news .newsList li:nth-child(1).date:before,
#press .pressList li:nth-child(1) .date:before{
	content: "New";
	display: inline-block;
	vertical-align: middle;
	margin: 0 1.5% 0 0;
	padding: 0 1%;
	color: #fff;
	background: #ff941c;
}

#news .newsList li:first-child .date span,
#press .pressList li:first-child .date span{
	display: inline-block;
	vertical-align: middle;
}

#news .newsList .newsTtl,
#press .pressList .pressTtl{
    margin: 0 0 1%;
	font-weight: bold;
	font-size: 108%;
}

#press .pressList #pressBtn a{
	display: block;
    width: 15%;
    margin: 1% 0 1%;
    padding: 1.2% 5%;
    text-align: center;
    color: #fff;
    background: #666;
    text-decoration: none;
}
#press .pressList #pressBtn a:hover{
	display: block;
	width: 15%;
	padding: 1.2% 5%;
	text-align: center;
	color: #fff;
	background: #333;
}

#press .pressList .pressNote{
	margin: 0 0 2.5%;
	font-size: 84%;
}

#press .attention{
	font-size: 76%;
}

/*---------------------------------------------
							publicationページ
---------------------------------------------*/

#publication .inner{
	width: 97.5%;
	margin: 2.5% auto 0;
	font-size: 84%;
	color: #666;
}

#publication .inner .publicationList{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 0 2.5%;
}

#publication .inner .publicationList li{
	width: 23.125%;
	margin: 0 0 2.5% 2.5%;
	text-align: center;
}
#publication .inner .publicationList li:nth-child(4n-3){
	margin-left: 0 !important;
}
#publication .inner .publicationList li img{
	width: 85%;
	height: auto;
}

#publication .inner .publicationList li a:hover{
	opacity: 0.6;
}

#publication .inner .publicationList li .publicationDate{
	width: 85%;
	margin: 2.5% auto 2%;
	text-align: left;
}

#publication .inner .publicationList li:nth-child(1) .publicationDate:before,
#publication .inner .publicationList li:nth-child(2) .publicationDate:before{
	content: "New";
	display: inline-block;
	vertical-align: middle;
	margin: 0 3% 0 0;
	padding: 0 2%;
	font-size: 0.8vw;
   font-weight: bold;
	color: #fff;
	background: #ff941c;
}
#publication .inner .publicationList li:nth-child(1) .publicationDate span,
#publication .inner .publicationList li:nth-child(2) .publicationDate span{
	display: inline-block;
	vertical-align: middle;
}

#publication .inner .publicationList li .publicationNote{
	width: 85%;
	margin: 2.5% auto 0;
	text-align: justify;
	line-height: 1.5;
	font-size: 0.8vw;
}

/*---------------------------------------------
									shopページ
---------------------------------------------*/

#shop .shopList{
	width: 97.5%;
	margin: 2.5% auto 0;
	font-size: 84%;
	color: #666;
}

#shop .shopList li{
	margin: 2.5% 0 0;
	padding: 0 2.5% 2.5%;
	border-bottom: 1px dotted #666;
}

#shop .shopList li .shopName{
	margin: 0 0 1%;
	font-weight: bold;
	font-size: 108%;
}

#shop .shopList li .shopLink a{
	text-decoration: underline;
}
#shop .shopList li .shopLink a:hover{
	text-decoration: none;
}

/*---------------  パンくず ---------------*/

ol.pankuzu{
	width: 92.5%;
	overflow: hidden;
	margin: 2.5% auto 0;
	font-size: 0.8vw;
}
ol.pankuzu li{
	float: left;
	display: table;
}

ol.pankuzu li a{
	text-decoration: none;
	color: #888888;
}

ol.pankuzu li:last-child a{
	color: #333;
}

ol.pankuzu li:before{
	content: " > ";
	display: table-cell;
	vertical-align: middle;
	font-size: 9px;
	color: #999999;
}
ol.pankuzu li:first-child:before{
	content: "";
}

ol.pankuzu li a:hover{
	text-decoration: underline;
}

/*----------------------------------------
								contact
----------------------------------------*/

input,textarea{
	-webkit-appearance: none;
	border: 1px solid #bbb;
}

#formWrap {
	font-size:90%;
}

#formWrap .note{
	text-align: center;
	margin-bottom: 3.5%;
}

#formWrap .formInner{
	width:825px;
	margin:0 auto;
	padding: 2.5% 0 7%;
}

table.formTable{
	width:100%;
	margin:0 auto 0.5%;
	border-collapse:collapse;
}

table.formTable td,
table.formTable th{
	padding:15px 20px;
	background: #fff;
}
table.formTable th{
	width:200px;
	text-align:left;
	font-weight:normal;
	background:#e8e8e8;
	border:1px solid #f2f2f2;
}
table.formTable td{
	border:1px solid #e8e8e8;
}

.foreurrope{
	text-align: center;
	margin: 16px 0 0;
}
.foreurrope a{
	text-decoration: underline;
}
.foreurrope a:hover{
	text-decoration: none;
}

.checkBtn{
	-webkit-appearance: none;
    width: 175px;
    margin: 15px 0;
    padding: 8px 0 5px;
    color: #fff;
    font-size: 14px;
    border: none;
    background: #666;
    cursor: pointer;
}

.en_note{
	margin: 2.5% 0;
}

.coment{
	width: 97.5%;
	max-width: 825px;
	margin: 0 auto 0;
	font-size: 80%;
}

.form_note{
	width: 97.5%;
	max-width: 825px;
	overflow: hidden;
	margin: 0.5% auto 0.5%;
	padding: 0;
    line-height: 1.6;
	font-size: 80%;
}
.form_note dt{
	width: 10%;
	float: left;
	clear: left;
	margin: 0;
	padding: 0;
	font-weight: bold;
}
.form_note dd{
	width: 90%;
	float: left;
	margin: 0;
	padding: 0;
}

.form_note a:hover{
	text-decoration: underline;
}

.form_note span:nth-child(1){
	display: block;
	margin: 0 0 1.5%;
	padding: 0 0 1.5%;
	border-bottom: 1px solid #cccccc;
}

/*----------------------------------------
								check
----------------------------------------*/

#check .checkTtl{
    text-align: center;
    margin: 5% 0;
}

#check form{
	width: 825px;
	margin: 0 auto;
}

#check .checkTable{
	margin: 5% 0 !important;
}

#check .checkTable th{
	width: 200px;
}

/*----------------------------------------
								thanks
----------------------------------------*/

#thanksWrap .thanksTxt{
    margin: 20% 0 0;
	text-align: center;
	color: #666;
	font-size: 15px;
}

#thanksWrap .returnTop a{
	display: block;
	width: 100px;
    margin: 5% auto 15%;
    padding: 1%;
    text-align: center;
    border: 1px solid #ccc;
	color: #666;
	text-decoration: none;
}
#thanksWrap .returnTop a:hover{
	display: block;
    width: 100px;
    margin: 5% auto 15%;
    padding: 1%;
    text-align: center;
    background: #ffe58a;
    color: #666;
    text-decoration: none;
    border: 1px solid #ffe58a;
}