@charset "UTF-8";
/* CSS Document */

/*リンクの位置調整*/
 span.link-t-a {
 position: relative;
 top: -100px;/*左の数値を変えると、上下に調整します*/
 display: block;
 }
span.link-t-b {
 position: relative;
 top: -100px;/*左の数値を変えると、上下に調整します*/
 display: block;
 }

/*nav固定用*/
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
background-color: rgba(255,254,254,0.73);
}


/*フロート解除用のハック*/
/*clearfix*/
.clearfix:after{  
visibility:hidden;
height:0;
display: block;
font-size: 0;  
content: " ";  
clear: both;  
} 
* html .clearfix             { zoom: 1; } 
*:first-child+html .clearfix { zoom: 1; } 

html{
	font-size:62.5%;
}


body {
margin: 0;
padding: 0;
text-align: center;
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','M PLUS 1p','Hiragino Sans','ヒラギノ角ゴシック','Yu Gothic','メイリオ','ＭＳ Ｐゴシック','MS PGothic';
font-size: 1.5em;
letter-spacing: 0.1em;
line-height: 1.7;
min-width: 300px;    /* 最小幅指定箇所 */
}


.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }




h1 {
display: none;
}
h2 {
	font-size: 2.5em;
}
h3 {
	font-size: 2em;
	font-family: "Sawarabi Gothic";
}                                             /* 検証箇所　*/

p {font-size: 0.8;
	font-family: "Sawarabi Gothic";
}

/* side MENU */

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}

/* MENU ボタン 装飾箇所 */

    .btn{
  	position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 0.1em 0.5em;
    text-decoration: none;
    border-bottom: solid 2px #777;
    opacity: 0.7;
    color: #777;           /*綺麗な青色は 　#668ad8　（page topと揃える）*/
    transition: .4s;
    }

#nav-open span{
		position: fixed; 
    display: block;
    content: '';
    cursor: pointer;
		margin-top: 20px;
		left: 20px;
	  z-index: 999;
		font-size: 1.7em;
		opacity: 0.7;
		color: #777;
		}

/*#nav-open span, #nav-open span:before, #nav-open span:after {
    position: fixed; 
    height: 3px;
    width: 25px;/
    border-radius: 3px;
    background: #555;
    display: block;
    content: '';
    cursor: pointer;
		margin-top: 10px;
		left: 20px;
	  z-index: 999;
	
}

#nav-open span:before {
    bottom: -8px;
		left:0px;
}
#nav-open span:after {
    bottom: -16px;
		left: 0px;
}*/                                                 /* 検証箇所　*/



/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*side MENU中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 60%;/*右側に隙間を作る*/
    max-width: 330px;/*最大幅*/
    height: 100%;
    background: #fff;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
		padding-top: 40px;
}

#nav-content p {
	margin-top: 30px;
	font-size: 2.5em;
}

#nav-content li{
	list-style: none;
	font-size: 1.5em;
	padding-bottom: 10px;
}

#nav-content .min_info{
	margin-top: 15px;
	font-size: 0.2em;
}

#nav-content iframe {
	margin-top: 30px;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


/*body装飾*/
#main img {
  width: 100%;
	margin-top:50px;
	margin-bottom: 200px;
  }

/*navigation装飾*/                              
#nav {
position: relative;
  margin-top: 0;
  list-style: none;
overflow: hidden;
font-size: 1.5em;
}

#nav li {
display: inline;
padding: 10px 50px;
}

#nav li a {
  text-decoration: none;
color: #383838;
}


/*about us装飾*/

/*about us2 670px以下に表示*/
.aboutus2 {
  position: relative;
	margin-top: 30px;
} 

.aboutus2 h3 {
	position: absolute;
  top: 15%;
  left: 50%;
	letter-spacing: 0.3em;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
  font-size: 50px;
  text-align:center;
	text-shadow: 1px 2px 3px #111;
}

.aboutus2 p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
  font-size: 50px;
  text-align:center;
	text-shadow: 1px 2px 3px #111;
  width:100%;
}

.aboutus2 img {
  width: 100%;
	opacity: 1;
}


/*about us 基本表示*/
.aboutus {
  position: relative;
	margin-top: 300px;
} 

.aboutus h3 {
	position: absolute;
  top: 20%;
  left: 50%;
	letter-spacing: 0.3em;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
  font-size: 25px;
  text-align:center;
  text-shadow: 1px 2px 3px #111;
}

.aboutus p {
  position: absolute;
  top: 60%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
  font-size: 15px;
  text-align:center;
	text-shadow: 1px 2px 3px #111;
  width:auto;
}

.aboutus img {
  width: 100%;
	opacity: 1;
}


/*tatooer装飾*/

#tatooer {
	margin-top: 200px;
	margin-bottom: 200px;
	width: 100%;
	overflow: auto;
	background-color :#fff;
}

#tatooer h2 {
	padding-top: 100px;
	padding-bottom: 100px;
}


.tatooerinfo {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	overflow: auto;
	text-align: center;
}

/*hiroyuki*/


.tatooer1 {
	width: 95%;
  margin: 5%;
	overflow: auto;
}

.tatooer1 img {
  margin-left: 10%;
	width: 40%;
  max-width: 500px;
  float: left;
}
	
.prof {
	text-align: left;
  width: 40%;
  float: left;
	margin-left :8%;
}

.prof h3 {
	text-align: center;
	margin-top: 40%;
	margin-bottom: 20%;
	font-size:1.8em;
}
.prof p {
	margin:0 auto;
	text-align: left;
}
.mob {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20%;
	width: 90%;
}


.prof3 {
	margin-top: 20px;
	text-align: left;
}
.prof3 h3 {
	text-align: left;
	margin-bottom: 5%;
	font-size:1.8em;
}
.prof3 p {
	margin:10 auto;
	text-align: left;
}

.prof4 {
	margin-top: 20px;
	text-align: left;
}
.prof4 h3 {
	text-align: left;
	margin-bottom: 5%;
	font-size:1.8em;
}
.prof4 p {
	margin:0 auto;
	text-align: left;
  
}


.tatooer2 {
	width: 95%;
  margin: 20% 5% 5% 5%;
	overflow: auto;
}

.tatooer2 img {
  margin-right: 10%;
	width: 40%;
  max-width: 500px;
  float: right;
}
	
.prof2 {
	text-align: left;
  width: 40%;
  float: right;
	margin-right :8%;
}

.prof2 h3 {
	text-align: center;
	margin-top: 40%;
	margin-bottom: 20%;
	font-size:1.8em;
}
.prof2 p {
	margin:0 auto;
	text-align: left;  
}


/*gallery装飾用*/


#contents h2 {
	
	padding-top: 100px;
	padding-bottom: 70px;
}

#contents {
	margin-bottom: 200px;
	overflow: auto;
}

.gallery {
  max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding:50%;
}



.image {
	position: relative;
	width:90%;
  list-style: none;
}

.image ul {
	width:100%;
	height:auto;
	margin:0px auto;
}

.image li {
display: inline-block;	
padding: 10px 10px;
}

                                    /*検証箇所*/
section#contents ul {
	display: flex;
  justify-content: center;
  flex-wrap: wrap;
	max-width:2000px;
	min-width: 300px;
	height:auto;
	margin:0 auto;
}

section#contents ul li{
	float:left;
	margin-top:15px 0 15px 15px;
}


/*access装飾*/
.access {
	position: relative;
}

.access h2 {
	margin-bottom: 100px;
}

.access ul {
	margin: 40px;
}

.access li {
	margin-top: 2em;
}



/*footer装飾*/
.foot {
	margin-top: 100px;
  position:relative;
  top: 50%;
  bottom: 0;
}

.foot img {
	width:100%;
}

.foot .logo {
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
 	transform: translate(-50%,-50%);
	max-width: 100px;
}

.foot p {
	position: absolute;	
	top: 60%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
	color: #fff;
	text-shadow: 1px 2px 3px #111; 
	font-size: 1em;
}


/*Topに戻るボタン*/
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  opacity: 0.7;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
	font-weight: bold;
  text-decoration: none;
}
#page_top a:before{
  font-family: FontAwesome;
  content: '\f102';
  font-size: 25px;
  color: #777;               /*色指定箇所*/
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #777;
}






	
/*ギャラリー設定　触らない　ここの場所も動かさない　*/
/* ▼閲覧領域の横幅が1280px以上の場合に適用 　　　　　　　　　　マージン確認する〜！！　　　　　　*/
@media screen and (max-width:1280px){	
section#contents ul line{
	display: flex;
  justify-content: center;
	width:312px;
	height:auto;
	margin:0 auto;
}

section#contents ul li a img{
	width:100%;
	height:100%;
}

section#contents ul li{
	width:150px;               /*ここで画像の大きさ設定*/
	height:150px;
	padding: 2px;
}

section#contents ul li first-of-type{
	margin-left:0;
}

section#contents div{
	width:100%;
	margin:0 auto;
	padding:200px 0 100px;
}
}


/*ギャラリー設定　触らない　ここの場所も動かさない　*/
/* ▼閲覧領域の横幅が870px以上の場合に適用 */
@media screen and (max-width:870px){
body { 
	width: 100%; 
	font-size: 0.8em; 
	margin-left: auto;
	margin-right: auto;
}

	h2 {font-size:3em}
	h3 {font-size:1.8em}
	#nav {font-size: 2.0em; }
	#nav li {padding: 10px 20px;}
.aboutus p {font-size:1em;}
.aboutus h3 {font-size:2em;}
	
.image {
	position: relative;
	width:100%;
  list-style: none;
}

section#contents ul line{
	display: flex;
  justify-content: center;
	width:100%;
	height:auto;
	margin:0 auto;
}

section#contents ul li a img{
	width:100%;
	height:100%;
}

section#contents ul li{
	width:80px;               /*ここで画像の大きさ設定*/
	height:80px;
	padding: 2px;
}

section#contents ul li first-of-type{
	margin-left:0;
}

section#contents div{
	width:100%;
	margin:0 auto;
	padding:0px 0 100px;
}
}


/* ▼閲覧領域の横幅が671px以下の場合に適用 */
@media screen and (min-width:671px){
	#nav-open {
    display:none;
  }
	.aboutus2 {
		display: none;
	}
	
	.phone {
		display: none;
	}

	.mob {
		display: none;
	}
	
}


/*PCとphone設定　触らない　ここの場所も動かさない　*/
/* ▼閲覧領域の横幅が670px以上の場合に適用 */
@media screen and (max-width:670px){
	.aboutus{
		display: none;
	}
	.phone{
		float: clear;
	}
	
	.forpc{
		display: none;	
	}
	
	#nav{
		display: none;
	}
}

/*ギャラリー設定　触らない　ここの場所も動かさない　*/
/* ▼閲覧領域の横幅が600px以上の場合に適用 */
@media screen and (max-width:600px){	
	.image {
	position: relative;
	width:100%;
  list-style: none;
}	
	
section#contents ul line{
	display: flex;
  justify-content: center;
	width:100%;
	height:auto;
	margin:0 auto;
}

section#contents ul li a img{
	width:100%;
	height:100%;
}

section#contents ul li{
	width:60px;               /*ここで画像の大きさ設定*/
	height:60px;
	padding: 2px;
}

section#contents ul li first-of-type{
	margin-left:0;
}

section#contents div{
	width:100%;
	margin:0 auto;
	padding:0px 0 100px;
}
}

/*  */
@media screen and (max-width:320px){
	body { 
			width: 100%; 
			font-size: 0.8em; 
			margin-left: auto;
			margin-right: auto;
	}

	h2 {font-size:2em}
	h3 {font-size:2em}
	#nav {font-size: 10.0em; }
	#nav li {padding: 10px 20px; }}

.aboutus2 p {
	margin-top: 20px;
	
	font-size:0.7em;}
.aboutus2 h3 {
	font-size:2em;
	font-weight: bold;
}