/* CSS Document */

.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }
.wf-notosansjapanese { font-family: "Noto Sans JP"; }

.row::after {
  content: "";
  display: block;
  clear: both;
}

.center {
  text-align: center;
}

body {
  font-family: "Noto Sans JP";
  font-size: 0.875rem;
}

.wrap {
  width: 855px;
  margin: 0 auto;
}
.inner {
  width: 640px;
  margin: 0 auto;
}
.small {
  width: 475px;
  margin: 0 auto;
}
.small p {
  font-size: 1rem;
  letter-spacing: 0.2em;
  line-height: 1.6;
}
.section {
  padding-top: 2em;
  padding-bottom: 2em;
}

h1 {
  text-align: center;
}

#mainvisual {
  width: 100%;
  position: relative;
}
#mainvisual img {
  width: 100%;
  height: auto;
}
#mainvisual div.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

#mainvisual div.copy {
  position: absolute;
  top: 10%;
  left: 10%;
}
#mainvisual div.copy img {
  width: auto;
  max-height: 85vw;
}
p.text1 {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  line-height: 2.4;
}
p.text2 {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  line-height: 2;
}
#tab {

}
#tab ul {
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
#tab ul li {
  width: 33%;
  margin: 0;
  padding: 0;
  display: inline-block;
  margin-left: 0;
}
#tab ul li img {
  margin-left: 0;
}

h2 span.hblack {
  display: block;
  padding: 1em;
  text-align: center;
  background-color: #231815;
}
h2 span.none {
  display: block;
  padding: 1.5em 1em 1em 1em;
  text-align: center;
}
h2 span.kome {
  display: block;
  font-size: 0.5rem;
  padding: 0 0 1em 0;
  text-align: center;
}
span.hborder {
  display: block;
  padding: 1em;
  text-align: center;
  border-top: 2px solid #231815;
  border-bottom: 2px solid #231815;
}
span.hborder2 {
  display: block;
  padding: 1em;
  text-align: center;
  border-bottom: 2px solid #231815;
}
span.none {
  display: block;
  padding: 1em;
  text-align: center;
}
.craftsman {
  padding-bottom: 4em;
}
.craftsman h4 {
  padding-bottom: 1em;
}

h3 span.none {
  display: block;
  padding: 2em 1em 1em 1em;
  text-align: center;
}
h4 span.name {
  display: block;
  text-align: center;
}
h4 span.romaji {
  display: block;
  text-align: center;
}
.comingsoon {
  position: relative;
  height: 370px;
  background-color: #c9caca;
  margin-bottom: 2em;
}
.comingsoon .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
.image {
  margin-bottom: 20px;
}
.profile {
  padding: 1em 0;
}
.profile .photo {
  width: 228px;
  float: left;
}
.profile .text {
  width: 400px;
  float: right;
}
.profile .text p {
  /*.font-size: 0.785rem;*/
  font-size: 0.875rem;
  line-height: 2;
  margin-top: 0;
}
.profile .text .name {
  font-size: 1.125rem;
}
.profile .text .romaji {
  padding-left: 1em;
  font-size: 0.875rem;
}

.works {
  padding: 1em 0;
}
.hborder3 {
  display: block;
  padding: 1em;
  text-align: center;
  border-top: 1px solid #231815;
  border-bottom: 1px solid #231815;
}
.works ul {
  padding: 0;
  margin: 0;
  text-align: center;
}
.col3 {
  vertical-align: top;
  padding: 0;
  margin: 0;
  width: 32.5%;
  display: inline-block;
}
.col3 p {
  text-align: left;
  padding: 0;
  margin: 0 auto;
  width: 90%;

  font-size: 0.75rem;
}

#designer .profile {

}
#designer .profile .photo {
  width: 162px;
  float: left;
}
#designer .profile .name {

}
#designer .profile .text {
  width: 460px;
  float: right;
}
#designer .profile ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#designer p {
  font-size: 0.875rem;
  line-height: 2;
}

#designer .works {

}
#designer .works .left {
  float: left;
  width: 276px;
}

#designer h2 span.hborder2,#members h3 span.hborder2{
  padding-top: 2em;
  padding-bottom: 2em;
}

.img1 {
  width: 135px;
  float: left;
}
.img2 {
  width: 129px;
  float: right;
}
.img3 {
  padding-top: 8px;
  width: 276px;
  clear: both;
}
.img4 {
  width: 355px;
  float: right;
}

.img1 img,
.img2 img,
.img3 img,
.img4 img {
  width: 100%;
}

.eventlist {
  margin: 0;
  padding: 0;
  line-height: 2;
}
.eventlist dt {
  margin: 0;
  padding: 0;
  float: left;
  width: 5em;
}
.eventlist dd {
  margin: 0;
  padding: 0 0 0 5.5em;
}
.maru {
  margin: 0;
  padding: 0;
}
.maru dt {
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
  display: block;
}
.maru dd {
  margin: 0;
  padding: 0 0 0 1em;
}
ul.maru  {
  list-style: none;
}
ul.maru  li {
  text-indent: -1em;
  padding-left: 1em;
}

#event .row {
  padding: 0;
  margin: 1em 0 1em -1.5em;
  text-align: center;
}
#event .row .col3 {
  vertical-align: top;
  padding: 0;
  margin: 0;
  width: 32.5%;
  text-indent: 0;
  display: inline-block;
}
#event .row .col3 img {
	margin: 0;
	padding: 0;
	max-width: 95%;
}
#event .row .col3 p {
  text-align: left;
  padding: 0;
  margin: 0 auto;
  width: 90%;

  font-size: 0.75rem;
}

#event .inner {
	padding: 2em 0 0 0;
}

.youtubeWrap {
	margin: 3em 0;
}
.youtubeinner {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtubeinner iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.coronaWrap {
  padding: 1em;
  border: 2px solid #b60005;
  margin: 2em 0;
}
.coronaWrap p {
  margin: 0;
  padding: 0;
  color: #b60005;
}

.wakuWrap {
  padding: 1em;
  border: 2px solid #231815;
  margin: 2em 0;
}

.wakuWrap p {
  margin: 0;
  padding: 0;
  color: #231815;
}

.mapWrap {
  margin: 2em 0;
}
.flexwap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flexwap .col-3 {
  flex-basis: 175px;
  text-align: center;
  margin-bottom: 2em;
}
.flexwap .col-3 p {
  margin: 0;
  padding: 0;
  text-align: left;
}

#present {
  line-height: 2;
}
#present .left {
  width: 300px;
  float: left;
}
#present .right {
  width: 320px;
  float: right;
}
#present .kome {
	padding: 0 0 2em 0;
}
.copyright {
  text-align: center;
  padding: 0.5em;
  font-family: 'Arimo', sans-serif;
}
#footer {
  padding-top: 2em;
  padding-bottom: 0.5em;
}
#footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#footer .row .hkdLogo {
  flex-basis: 20%;
}
#footer .row .copyright {
  flex-basis: 70%;
}

.pivot {
  position: relative;
}
#pagetop  {
  width: 100%;
  bottom: 30px;
  position: fixed;
}
#pagetop .wrap {
  text-align: right;
  position: relative;
}
#pagetop a {
  position: absolute;
  bottom: 50%;
  left: calc(50% + 500px );
  transform: translate(-50%, -50%);
  display: inline-block;
  margin-right: 0;
}
.pt30{padding-top: 30px;}
.pt50{padding-top: 50px;}

#shop h3 {
margin-bottom: 2em;
}
#shop p.border{
border-bottom: 1px solid #231815;
margin-bottom: 0;
padding-bottom: 0.5em;
}

#shop p.border + p{
padding-top: 0.5em;
margin-top: 0;
}


#members h4{
  padding-top: 4em;
  padding-bottom: 1em;
}

#members h4:first-child{
  padding-top: 2em;
}


@media screen and (max-width: 768px) {

  img {
    max-width: 100%;
    height: auto;
  }
  .wrap {
    max-width: 100%;
  }
  .inner {
    max-width: 95%;
  }
  .small {
    max-width: 95%;
  }

  h1 {
    text-align: center;
  }
  h1 img {
    max-width: 90%;
  }

  #mainvisual div.center {
    width: 90%;
  }
  p.text1 {
    line-height: 2;
    letter-spacing: 0;
  }



}


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

  #tab ul li {
    width: 48%;
    /*width: 30%;*/
  }

  #designer .profile .photo {
    width: auto;
    float: none;
    text-align: center;
  }
  #designer .profile .text {
    width: auto;
    float: none;
  }

  #designer .works .left {
    float: none;
    width: 276px;
    margin: 0 auto;
  }
  .img4 {
    width: 355px;
    float: none;
    margin: 0 auto;
  }

  .flexwap .col-3 {
    flex-basis: 48%;
  }
  .flexwap .col-3 p {
    max-width: 200px;
    margin: 0 auto;
  }
	#present .left {
		width: 100%;
		float: none;
	}
	#present .right {
		width: 100%;
		float: none;
		text-align: center;
	}

  .hkdLogo {
  	padding: 1em;
  }
  #pagetop a {
    margin-right: 1em;
  }

}


.pc { display: block; }
.sp { display: none; }


@media screen and (max-width: 480px) {

.pc { display: none; }
.sp { display: block; }


  #tab ul li {
    width: 48%;

  }

  .flexwap .col-3 {
    flex-basis: 48%;
  }

  .profile .photo {
    text-align: center;
    width: auto;
    float: none;
  }
  .profile .text {
    width: auto;
    float: none;
  }

  .col3 p {
      font-size: 0.785rem;
  }

  #designer .profile .text {
    width: auto;
    float: none;
  }

  .img1 {
    width: auto;
  }
  .img2 {
    width: auto;
  }
  .img3 {
    padding-top: 0;
    width: auto;
    float: none;
  }
  .img4 {
    width: auto;
    float: none;
    margin: 0 auto;
    text-align: center;
  }
  #designer .works .left {
    width: calc( 100vw * (355 / 380) );
    float: none;
    margin: 0 auto;
  }
  .img1 img {
    width: calc( 100vw * (135 / 295) );
  }
  .img2 img {
    width: calc( 100vw * (129 / 295) );
  }
  .img3 img {
    width: calc( 100vw * (276 / 295) );
  }
  .img4 img {
    width: calc( 100vw * (355 / 380) );
  }

  .eventlist dt {
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
  }
  .eventlist dd {
    margin: 0;
    padding: 0 0 1em 1em;
  }

	#event .row {
	  padding: 0;
	  text-align: center;
	}
	#event .row p {
		line-height: 1.6;
	}
  #footer .row .hkdLogo {
  flex-basis: 20%;
  }
  #footer .row .copyright {
  flex-basis: 65%;
  }
  #pagetop  {
    bottom: 60px;
  }
  #pagetop a {
    max-width: 20%;
	position: static;
	bottom: auto;
	left: auto;
	transform: translate(0, 0);
    
  }

}

.flex {
	display: flex;
}
.iflex {
	display: inline-flex;
}
.rreverse {
  flex-direction: row-reverse;
}
.creverse {
  flex-direction: column-reverse;
}
.fwrap {
  flex-wrap: wrap;
}
.fwrapreverse {
  flex-wrap: wrap-reverse;
}
/* 水平 */
.fend {
  justify-content: flex-end;
}
.fcenter {
  justify-content: center;
}
.fbetween {
  justify-content: space-between;
}
.faround {
  justify-content: space-around;
}
/* 垂直 */
.fastart {
  align-items: flex-start;
}
.faend {
  align-items: flex-end;
}
.facenter {
  align-items: center;
}

.fistart {
  align-self: flex-start;
}
.fiend {
  align-self: flex-end;
}
.ficenter {
  align-self: center;
}


ul.dot {
  text-align: left;
  font-size: 1rem;
}
ul.dot li {
  list-style: none;
  text-indent: -1.2rem;
  padding-left: 1rem;
  letter-spacing: 0.2em;
  line-height: 1.6;
}
ul.dot li::before {
  content: '・';
}

.ref span.none {
  display: block;
  padding: 2em 1em 1em 1em;
  text-align: center;
}
.url {
  font-size: 1.5rem;
}
.url span.hborder {
  padding: 0.2em 0.5em 0.4em 0.5em;
}
.url a {
  text-decoration: none;
  color: #333;
}
.url a img {
  vertical-align: middle;
}

.caption {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: normal;
}
.kome {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: normal;
}
.mtb1em {
  margin: 1em 0;  
}
@media screen and (max-width: 640px) {
  #eventphoto1 div {
    width: 32%;
  }
  #eventphoto2 {
    width: 100%;
    justify-content: space-between;
    text-indent: 0;
    padding: 0;
  }
  #eventphoto2 div {
    width: 48%;
  }
}

.jis2004font {
	font-family:'源ノ角ゴシック JP Normal','源ノ角ゴシック JP','Source Han Sans Normal','Source Han Sans','NotoSansJP-DemiLight','Noto Sans CJK JP DemiLight','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'新ゴ Pr6N R','A-OTF 新ゴ Pr6N R','小塚ゴシック Pr6N M','IPAexゴシック','Takaoゴシック','XANO明朝U32','XANO明朝','和田研中丸ゴシック2004絵文字','和田研中丸ゴシック2004ARIB','和田研中丸ゴシック2004P4','和田研細丸ゴシック2004絵文字','和田研細丸ゴシック2004ARIB','和田研細丸ゴシック2004P4','和田研細丸ゴシックProN',YOzFont04,'IPA Pゴシック','Yu Gothic UI','Meiryo UI','ＭＳ Ｐゴシック';
	font-feature-settings:'jp04' 1;
}