@charset "UTF-8";

/*-----------------------------------------
  基本
-----------------------------------------*/
* { margin: 0; padding: 0; }
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
.dspnone { display: none; }
.img_c { display: block; margin-left: auto; margin-right: auto; max-width: 100%; }
a:hover img {
  opacity:0.8;
  filter:alpha(opacity=80);
  -ms-filter: “alpha( opacity=80 )”;
}

img{
  max-width: 100%;
  height: auto;
  width /***/:auto;
}
ul li {list-style:none; }
.fl { float: left; margin: 0 1.5rem 1rem 0; }
.fr,.fr2 { float: right; margin: 0 0 1rem 1rem;}

body, html, main {
    /* important */
    height: 100%;
}
  

@media screen and (max-width: 640px)
{
.fl,.fr {
	width:90%;
  float: left;
  margin: 0 5% 1rem 5%!important;
}
	
}
/*-----------------------------------------
  body
-----------------------------------------*/
body {margin-top:0!important;
  font-size: 18px;
  font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', メイリオ,Meiryo,'MS PGothic','MS UI Gothic',Helvetica,Arial,sans-serif;  
  color: #666;
  line-height: 1.8;
}
@media screen and (max-width: 768px)
{body {	font-size: 1.1em;}}

::selection
{
    background: #a1eaff;
}

/* for Firefox */
::-moz-selection
{
    background: #a1eaff;
}

/*-----------------------------------------
  共通で使える
-----------------------------------------*/
#container {
	width: 100%;
	text-align: center;
	position: relative;
}

.w1000 {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
p {margin-bottom: 1.0em;}
.text {
  text-align: left; 
}
@media screen and (max-width: 999px){
	.w1000 {  width: 95%; margin: 0 auto;padding: 0;}
}

@media screen and (max-width: 640px) {
    .br-pc { display:none; }
}
@media screen and (min-width: 641px) {
    .br-sp { display:none; }
}

/*-----------------------------------------
  wrapper
-----------------------------------------*/
#wrapper {
  width: 100%;
  position: relative;
  height: auto;
}
/*-----------------------------------------
  ヘッダー
-----------------------------------------*/
.header {width:100%; height:150px; margin: 0; position:relative; text-align: center; border-bottom: solid 1px #ccc; }

.head-content { max-width: 1000px;	margin: 0 auto; position: relative;}
.header .head-content .header_logo {width:100%; float: left; display: block;text-align: center;}
.header .head-content .header_logo img {width:405px; margin: 30px auto 10px;}

@media screen and (max-width: 999px)
{
	.header .head-content .header_logo {margin-left: 20px;}
	}

@media screen and (max-width: 768px)
{
.header {height: 82px;}
.splogo {width:100%; float: left; margin: 0; text-align: center;padding: 5px; display: block; z-index: 50; position: relative; }
.splogo img {width:40%;}
}
@media screen and (max-width: 640px)
{.header {height: 70px;}}
@media screen and (max-width: 491px)
{   .header_access_mini img { max-width: 50%;}
	.header_access_sp{display: none;}
	.header_access{display: none;}	
}
@media screen and (max-width: 460px){.splogo img {width:60%;}}
@media screen and (min-width: 492px){.header_access_mini{display: none;}}

/*-----------------------------------------
  グローバルナビゲーション
-----------------------------------------*/
.global-navi-sp { padding: 10px; z-index: 110; position: absolute; top:60px; right:20px;}
	#nav-drawer {  position: relative;}

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

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

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 30px;/*長さ*/
  border-radius: 3px;
  background: #666;
  display: block;
  content: '';
  cursor: pointer;
	z-index: 110;
}
#nav-open span:before {
  bottom: -10px;
}
#nav-open span:after {
  bottom: -20px;
}

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

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 500px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}
#nav-content li { width:100%; display: block; padding: 25px 0 20px 80px; border-bottom: #b7b7b7 1px solid; text-align: left;}
	#nav-content li a {color: #000; text-decoration: none;}
	#nav-content li a:hover{color: #666;}
	li.global-navi00 { z-index: 1;}
	li.global-navi01 { z-index: 1;}
	li.global-navi02 { z-index: 1;}
	li.global-navi03 { z-index: 1;}
	li.global-navi04 { z-index: 1;}

/*チェックが入ったらもろもろ表示*/
#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);
}
@media screen and (max-width: 768px)
{
.global-navi-sp { padding: 10px; z-index: 110; top:10px; right: 10px;}
}
/*-----------------------------------------
  トップページ
-----------------------------------------*/
.viewer {
	margin: 20px auto;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.profile {margin: 60px 0; width:100%; position: relative; text-align: center;}
.profile .title {font-size: 1.1em; line-height: 1.3em; color: #202020; margin-bottom: 30px;}
.profile p {width:80%; margin:10px 10%; text-align: center;}
.profile p a {color: #333;}
.profile p .f80 {font-size: 14px;}
@media screen and (max-width: 768px)
{
.profile p {width:100%; margin:10px 0; font-size: 90%;}
.profile p .f80 {font-size: 12px;}
}
@media screen and (max-width: 376px)
{
.profile p {width:94%; margin:10px 3%; font-size: 80%;}
}


/*---------------------------------------
  common-footer
-----------------------------------------*/
.footer{width:100%; margin-top:80px; border-top:solid 1px #ccc; padding-top:30px; }
.insta {width:40px; margin:0 auto;}
.insta img {width:100%;}
.footer_in {max-width:1000px; margin: 0 auto; }
.footer_menu{width:100%;float:left; margin: 20px 0 30px;display: inline-block;}
.footer_menu ul{width:100%;display: block;float:left;}
.footer_menu ul li {
	display: inline-block;
	margin:0 10px;
	font-size: 0.8em;
}
.footer_menu a {  text-decoration: none; color: #666;}
.footer_menu a:hover {  color: #595959;  text-decoration: underline;}
#topBtn {position: fixed!important;bottom: 20px;right: 20px; z-index: 2;}
#go-pagetop {position: fixed!important;	bottom: 40px;right: 30px; z-index: 2;}
.copy {	width:100%;	margin-top:0; padding:5px; text-align: center; font-size: 0.7em; letter-spacing: 1px; }

@media screen and (max-width: 999px)
{
.footer_in { width: 94%; }
}
@media screen and (min-width: 769px)
{	.only_sp{display: none;}}
@media screen and (max-width: 768px)
{
.footer {width:100%; margin-top: 0; }
.insta {width:12%;}
.footer_in { width: 100%; position: relative; overflow: hidden;}
.only_pc{display: none;}
.footer_menu{ width:100%; margin: 3% 0; text-align: center;}
.footer_menu ul li_q{
	width: 40%;
	margin: 3% 2%;
	padding: 15px 13px;
	border: #ccc 1px solid;
	display:inline-block;	
	text-align: left;
	font-size: 0.7em;
	}
.footer_menu ul li{
	width: 40%;
	margin: 3% 2%;
	padding: 5px;
	display:inline-block;	
	text-align: center;
	font-size: 0.7em;
	}
.footer_menu ul li a {  display: block; line-height: 1.6em;color:#959595;}
.footer_menu ul li a:hover { text-decoration: none;}
.copy {  padding:10px; font-size: 0.6em; color:#959595; }
#go-pagetop {position: fixed!important;	bottom: 20px;right: 10px; z-index: 2; }
	#go-pagetop img {width:80%;}
}
/*---------------------------------------
  clearfix
-----------------------------------------*/
.clearfix:after {
  content: "."; 
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
.clear {
  clear: both;
}
.inline_block {  
  display: inline-block;  
  *display: inline;  
  *zoom: 1;  
}


.title,.title2 { margin:50px 0; font-size: 0.9em; font-weight: bold; text-align: center; padding:0 0 20px 0; clear: both;}
.title a,.title2 a {color:#7b7b7b; text-decoration: none;}
.title a:hover,.title2 a:hover {color:#666;}
@media screen and (max-width: 768px)
{
	.title { margin:20px 0;font-size: 0.78em; padding:0}
	.title2 { margin:20px 0;font-size: 0.6em; padding:0}
}
/*作品ハコ*/
/* .slideShow
------------------------- */
.slideShow {
	width:100%;
    margin: 0 auto 60px;
    text-align: left;
	display: flex; 
	justify-content:space-between;
}
 
/* .mainView
------------------------- */
.slideShow .mainView {
    width: 60%!important;
    position: relative;
	text-align: center!important;
}
.slideShow .mainView ul {
    width: 88%!important;
	margin:0 auto;
    position: relative;
}
.slideShow .mainView ul li {
    width: 100%!important;
	position: absolute;
}
.slideShow .mainView ul li img {
    width: 100%; margin:0 !important;
}
.slideShow .mainView ul li .caption {font-size: 0.7em; color: #666; margin:0 auto 40px;}
.slideShow .mainView ul li .caption span {font-size: 0.85em!important; margin-left: 10px;}
 
/* .thumbNail
------------------------- */
.slideShow .thumbNail {
    width: 38%;
	margin-left:2%;
	position: relative;
    overflow: hidden;
	display: inline-block;
}
 
.slideShow .thumbNail ul {
    width: 100%;
}
 
.slideShow .thumbNail ul li {
    float: left;
	width:16%!important;
	margin-left:4%;
	margin-bottom:3%;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}
 
.slideShow .thumbNail ul li img {
    width:100%;
}
 
.slideShow .thumbNail ul li.active {
    filter: alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
 
/* sideNavi
------------------------- */
.slideShow .mainView .btnPrev,
.slideShow .mainView .btnNext {
    top: calc(50% - 15px);
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 100;
}
.slideShow .mainView .btnPrev {
    left: 0;
    background: url(../img/gallery1/pre.png) no-repeat center center;background-size: 50%;
}
.slideShow .mainView .btnNext {
    right: 0;
    background: url(../img/gallery1/next.png) no-repeat center center;background-size: 50%;
}

 
/* =======================================
    ClearFixElements
======================================= */
.slideShow ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.slideShow ul {
    display: inline-block;
}

@media screen and (max-width: 768px)
{
.slideShow {flex-direction: column;margin: 0 auto 20px;}
.slideShow .mainView {width:95%!important; margin: 0 auto 30px; height: 80%!important;}
.slideShow .mainView ul {width: 80%!important;}
.slideShow .thumbNail {width:80%; margin: 30px auto 20px;}
.slideShow .thumbNail ul li { width:16%!important;margin:1% 2%;}
.slideShow .mainView ul li .caption {margin:0 auto 30px;font-size: 0.5em!important;line-height: 1.5em!important;}
.slideShow .mainView ul li .caption span {font-size: 0.75em!important; margin-left: -3px!important;}
}

/*問い合わせ*/
.mailad {margin:100px 0 150px 0;}

@media screen and (max-width: 768px)
{
	.mailad img {width:80%;}
}

/*テーブル*/
table, th, td {
    border: none!important;
	border-spacing:0!important;
}




/*---------------------------------------
  profile
-----------------------------------------*/

/*テーブル*/

.com_table {
table-layout:fixed;
width:100%;
  margin: 1.5em auto 3em;
  text-align: left;
}
.com_table a{color: #01b87e;}
.com_table tr:nth-child(even){
background:#f2f2f2;
}
.com_table th{
	width:23%;
  padding: 8px;
	font-weight: bold;
	line-height: 1.5;
}
.com_table td{
  padding: 8px;
  line-height: 1.5;
}
@media screen and (max-width: 768px)
{
	.com_table {font-size:0.8em!important;}
}