@charset "UTF-8";




body {
  width: 100% ;
  height: auto;
  text-align: left;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:16px;
  background-color:#fff;
  text-decoration:none;
  /*background: linear-gradient(#05FBFF, #1E00FF);*/
}

#wrapper{
  width:100%;
  height: 100%;
  margin: 0 auto;/*中央寄せ用*/
}

header{
  /*position:fixed; /*固定用 */
  /*top:0;
  left:0;*/
  width: 100%;
  box-sizing: border-box;
}


.profile_area{
  max-width: 960px;
  margin:0 auto;
}

.logo{
  max-width: 240px;
  margin:0;
  display:flex;
  flex: 100%;
}

.logo a img{
}


.profile{
  width: 100%;
  margin:-120px 0 0 0;
}



.profile h1{
  margin-left: 24px;
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  font-feature-settings : "palt";

}
.profile  p{
  /*writing-mode:vertical-rl;*/
  margin-left: 24px;
  font-size: 12px;
  line-height: 2;
  font-feature-settings : "palt";
}

/*.space{
min-width:px;
}*/

#contents{
  max-width:960px;
  padding: 0 12px 0 12px;
  display:flex;
  /*padding-top: 240px; /* 打ち消し用のパディング */
  flex:100%;
  margin:0 auto;
}


#caption h1{
  margin: 0;
  font-weight:500;
  font-size: 24px;
  /*color: rgba(0,0,0,0.8);
  text-shadow: -0.03em 0 0 red,
  0.03em 0 0 cyan; 文字がズレて色がつく*/
  font-feature-settings : "palt"; /* 文字詰め */
}


#caption h2 {
  font-size: 12px;
  font-weight:normal;
  margin-top: 24px;
  color: #111111;
  line-height: 1.8;
  font-feature-settings : "palt";
}
#caption p {
  max-width: 480px;
  margin: 12px 0 24px 0;
  font-size: 12px;
  color: #111111;
  line-height: 1.8;
  font-feature-settings : "palt";

}



.work img{
  width:100%;
  vertical-align: bottom; /*謎の余白けし */
  z-index: 0;
}

.thumb{
  width:100%;
  margin-bottom:40px;
  padding:0;
  position: relative;
}

.work a:hover .thumb{
  background-color: #fff;
}


.work a img{
  transition: 0.5s;

}
.work a:hover img{

  opacity: 0.5;
}

.thumb .caption{
  font-feature-settings : "palt";
  position:	absolute;
  left: 12px;
  top: 0;
  margin: 20px;
  font-size:	24px;
  text-align: left;
  color: #111111;
  opacity: 0;
  transition: 1s;
  -webkit-touch-callout:none;
　-webkit-tap-highlight-color:(0,0,0,0);

}

.thumb:hover .caption{
  opacity: 3;
  transition: 1s;
}

.product img{
  margin-bottom: 48px;
}

.product p{
  max-width: 720px;
  margin: -24px 0 24px 0;
  font-size: 12px;
  color: #111111;
  line-height: 1.8;
  font-feature-settings : "palt";
}

.product a:link{
  color: #111111;
}

.product a:visited {
  color: #111111;
}


/*.thumb {
overflow:		hidden;
position:		relative;	/* 相対位置指定 */

/*.thumb .caption {
font-size:		130%;
text-align: 		center;
padding-top:		80px;
color:			black;
}
.thumb .mask {
width:			100%;
height:			100%;
position:		absolute;	/* 絶対位置指定 */
/*	top:			0;
left:			0;
opacity:		0;	/* マスクを表示しない */
/*	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
/*	-webkit-transition:	all 0.2s ease;
transition:		all 0.2s ease;
}
.thumb :hover .mask {
opacity:		1;	/* マスクを表示する */
/*}*/





footer{
  max-width:1000px;
  margin: 120px auto 120px auto;
}

.other{
  margin: 0;
  padding: 0;
  display:flex;
  flex-wrap: wrap;   /*折り返し用*/
}

.other li{
  width: 160px;
  height: 160px;
  position: relative;
  overflow: hidden;
  margin: 20px;
}

/*liタグの始点のマージン、n番目のマージン設定用
.other li:first-of-type{
margin-left: 0;
margin-bottom: 20px;
}
.other li:nth-of-type(6){
margin-left: 0;
margin-bottom: 20px;
}*/

.other li a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1000%;
  height: 100%;/* 縦は用途応じて改変 */
  line-height: 2000px;
  margin:-1000px 0 0 -500%;
  text-align: center;
}
.other li a img{
  min-height: 10px;
  min-width: 10%;

  vertical-align: middle;
}


.other a:hover {
  background-color: #ffffff;
}

.other a img{
  transition: 0.5s;
}

.other a:hover img {
  opacity: 0.5;
}







.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 40px;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}



@media screen and (max-width:640px) {
    /*　画面サイズが640pxからはここを読み込む　*/
    #contents{
      padding: 0 6px 0 6px;
    }



    #caption h1
    {
      font-size: 20px;
    }

    #caption h2{
      font-size: 12px;
      line-height: 2;
    }

    #caption p{
      font-size: 12px;
      line-height: 2;
    }

    .other li{
      width: 100px;
      height: 100px;
      margin: 12px;
    }



    .other li a img{
      width:10%;
    }

    .profile h1{
      font-size: 20px;
      margin-left: 12px;
    }

    .profile  p{
      font-size: 12px;
        margin-left: 12px;
    }

}