@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Bad+Script|Lancelot|Life+Savers:400,700|Mystery+Quest|Parisienne');
/*
font-family: 'Bad Script', cursive;
font-family: 'Lancelot', cursive;
font-family: 'Life Savers', cursive;
font-family: 'Mystery Quest', cursive;
font-family: 'Parisienne', cursive;
*/

@font-face {
  font-family: "myFont";
  src: url("../fonts/SnellBT-Regular.eot?")  format('eot'),
       url("../fonts/SnellBT-Regular.woff2") format('woff2'),
       url("../fonts/SnellBT-Regular.woff")  format('woff');
}
.myFontClass {
  font-family: "myFont";
  
}

@font-face {
  font-family: "myFont2";
  src: url("../fonts/palatino.eot?")  format('eot'),
       url("../fonts/palatino.woff2") format('woff2'),
       url("../fonts/palatino.woff")  format('woff');
}
.myFontClass {
  font-family: "myFont2";
}
/*              fadein                         */ 

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*              clearfix                         */ 

.clearfix:after {
  content: ".";  
  display: block; 
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}



body, html {
	width: 100%;
	height: 100%;
	min-width: 320px;
	margin:0;
	padding: 0;
	font-family: 'Noto Sans Japanese','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック';	line-height: 1.8em;
	font-weight: 100;
}

#wrapper {
	margin: auto;
}

header {
	background: #d3d3d3;
}

h1 {
	margin: 0 10px;
	text-align: right;
	font-size: 12px;
	font-weight: 100;
	padding: 0;
}


#header, #header2 {
	background: url(../images/head_image.png) no-repeat #f5f5f3;
	background-size: cover;
	max-width: 1000px;
	margin: auto;
}

#header2 {	min-height: 200px;}

@media (min-width: 759px) {
	#header {	min-height: 400px;}
	.sitename, .sitename2 {	font-size: 36px;}
}
@media (max-width: 758px) {#header {	min-height: 300px;}	.sitename, .sitename2 {	font-size: 26px;}}
@media (max-width: 590px) {.mask {height: 300px;  background: rgba(255,255,255,0.5);}}
@media (max-width: 466px) {#header {	min-height: 200px;}	.mask {height: 200px;  background: rgba(255,255,255,0.5);}}


.sitename {
	font-family: 'myFont';
	font-weight: 200;
	text-align: left;
	line-height: 40px;
	text-align: right;
	width: 380px;
	float: right;
	padding-right: 5%;
	padding-top: 10%;
}

.sitename2 {
	font-family: 'myFont2';;
	font-weight: 200;
	text-align: left;
	line-height: 40px;
	text-align: right;
	width: 420px;
	float: right;
	padding-right: 5%;
	padding-top: 20px;
}

.sitename a, .sitename2 a{
	text-shadow: #000 2px 3px 5px;
	color: #fff;
	text-decoration: none;
}

.sitename2 a:hover {color:#00486a; 	text-shadow: #fff 2px 3px 5px;
}

.site-caption {
	font-family: 'Bad Script', cursive;
	text-align: right;
	font-size: 16px;
}

.insta a{ 
	font-size: 13px;
	text-decoration: none;
	text-shadow: none;
	line-height: 24px;
	vertical-align: middle;
	font-weight: 600px;
	color: #222;
}

.insta a, .insta a img{ 
	vertical-align: middle;
}
.slicknav_menu {	display:none;}


@media (max-width: 758px) {
	nav {	display:none;}
	.slicknav_menu {	display:block;}
}

@media (min-width: 759px) {
nav ul {
	display: flex;
	justify-content: space-between;
}


nav ul li a {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	text-decoration: none;
	color: #555;
	font-weight: lighter;
	text-align: center;
	padding-left: 30px;
}

nav ul li a:hover { background: url(../images/camera.png) no-repeat; background-size: contain; padding-left: 30px; }



}


nav, #container {
	padding-top: 15px;
	max-width: 1000px;
	margin: auto;
}


nav ul li a span.en{ display:inline; }
nav ul li a:hover span.en{ display:none; }
nav ul li a span.jp{ display:none; }
nav ul li a:hover span.jp{ display:inline; background:linear-gradient(transparent 60%, #ffbfe9 60%); }

.slide {
	padding-top: 20px;
}

.slide, .slide img {
	max-height: 600px;
	text-align: center;
	margin: auto;
	max-width: 100%;
}


/*             Pagetop                        */ 

#pagetop {
	width: 60px;
    position: fixed;
    bottom: 2%;
    right: 4%;
    padding: 10px;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}



footer {
	text-align: center;
	padding: 10px;
	margin-top: 20px;
}

/*              container                         */ 

#container {
	max-width: 1000px;
	margin: auto;
}

.explain { 
	text-align: center;
	margin: 25px auto;
}

.photographer {
	background:url(../../gallery/user/img/file_1_1_8.jpg) center top no-repeat;
	background-size: cover;
	min-height: 500px;
}
.model {
	background:url(../../gallery/user/img/file_1_1_9.jpg) center top no-repeat;
	background-size: cover;
	min-height: 500px;
}

.mask2 {
	padding: 10px 5%;
	width: 100%;
	box-sizing: border-box;
	margin-top: 25px;
	background-color: rgba(255,255,255,0.7);
	height: 100%;
	min-height: 500px;
}



.mask2 section {
	box-sizing: border-box;
	text-shadow: 0 0 2px #fff;
	font-weight: 200;
}

@media (min-width: 768px){
.mask2 {
	display: flex;
	justify-content: space-between;
}
.s-l { width: 40%;}
.s-r { width: 58%;}
}
@media (max-width: 769px){
.mask2 section {	width: 96%;}
}

.mask2 section p { text-align: left;}

.photographer ul{
	padding: 1em;
}

#container h2 {
	margin-bottom: 20px;
	border-left: 15px solid #cf83bc;
	padding: 8px 10px;
	font-size: 15px;
}

#container h3 {
	margin-bottom: 20px;
	padding: 5px 15px;
	width: 90%;
	background: #e0f3f1;
	margin: 10px 0;
	border-radius: 7px;
}

.to-contact a{
	background: url(../images/allow.svg) no-repeat;
	background-size: contain; 
	padding: 0 2em;
	letter-spacing: -1px;
	text-decoration: none;
	color: #003a57;
}

.to-contact a:hover{color: #ff0080;}


.about p{text-align: center;}
.about ul, .workshop ul{ width: 350px; margin: auto;}

.w-price { max-width: 250px; margin: auto; text-align: center;}

.about img { width: 100%;}
.pict {
	width: 80%;
	margin: auto;

}
.pict img{	box-shadow: 5px 5px 7px #aaa;}

/*              contact                         */ 

.contact {
	max-width: 1000px;
	margin: auto;
	}

.contact table { width: 100%;}

.contact th { min-width: 200px; width: 20%}

.contact th, .contact td {
	padding: 20px 0 5px 0;
	vertical-align: top;
	border-bottom: dashed 1px #a7a7a7;
}

@media (max-width: 500px){
.contact { padding: 5px;}

.contact th, .contact td {display: block; width: 100%; padding: 2%;}
}
.contact input, .contact textarea, .contact select {
	border-radius: 6px;
}

.contact input, .contact textarea { width: 90%;}
.contact textarea { height: 4em;}

.submit { text-align: center;}

.submit input[type="submit"], .submit input[type="reset"], .submit input[type="button"] {
	padding: 10px 0;
	font-size: 16px;
	border-radius: 20px;
	margin: 25px auto;
	width: 180px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	color: #fff;
	margin: 10px;
}

.submit input[type="submit"] {background: #b74f8a;}
.submit input[type="reset"] {background: #666;}
.submit input[type="button"] {background: #666;}

.submit input[type="submit"]:hover, .submit input[type="reset"]:hover, .submit input[type="button"]  {
	background: #aaa;
}



/*          tab                        */ 
.tabrow {
		    text-align: center;
		    list-style: none;
		    padding: 15px 0 0 0;
		    line-height: 24px;
		    height: 26px;
		    overflow: hidden;
		    font-size: 12px;
		    font-family: verdana;
		    position: relative;
		}
.tabrow li {
		    border: 1px solid #AAA;
		    background: #D1D1D1;
		    background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    display: inline-block;
		    position: relative;
		    border-top-left-radius: 6px;
		    border-top-right-radius: 6px;
		    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
		    text-shadow: 0 1px #FFF;
		    margin: 0 -5px;
		    padding: 0 20px;
						z-index: 0;

		}
		.tabrow a {
			  color: #555;
			  text-decoration: none;
		}
		.tabrow a:hover { color:#0000a0;}
		
		.tabrow li.selected {
		    background: #FFF;
		    color: #333;
		    border-bottom-color: #FFF;
						z-index: 2;

		}
		
		.tabrow a img{ width: 20px;}
		
		
		.tabrow:before {
		    position: absolute;
		    content: " ";
		    width: 100%;
		    bottom: 0;
		    left: 0;
		    border-bottom: 1px solid #AAA;
						z-index: 1;

		}
		.tabrow li:before,
		.tabrow li:after {
		    border: 1px solid #AAA;
		    position: absolute;
		    bottom: -1px;
		    width: 5px;
		    height: 5px;
		    content: " ";
		}
		.tabrow li:before {
		    left: -6px;
		    border-bottom-right-radius: 6px;
		    border-width: 0 1px 1px 0;
		    box-shadow: 2px 2px 0 #D1D1D1;
		}
		.tabrow li:after {
		    right: -6px;
		    border-bottom-left-radius: 6px;
		    border-width: 0 0 1px 1px;
		    box-shadow: -2px 2px 0 #D1D1D1;
		}
		.tabrow li.selected:before {
		    box-shadow: 2px 2px 0 #FFF;
		}
		.tabrow li.selected:after {
		    box-shadow: -2px 2px 0 #FFF;
		}
@media screen and (max-width: 420px) { .tabrow li { padding:0 10px}}

.tab  {
	border-bottom: 1px solid #aaa;
	margin-bottom: 25px;
}
ul.tabrow1 {
	list-style: none;
	margin:auto;
	width: 340px;
}
.tabrow1 li a {
	border-radius: 7px 7px 0 0 / 7px 7px 0 0;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
	border-top: solid 1px #aaa;
	float: left;
	padding: 2px 8px;
	text-decoration: none;
	margin-right: 2px;
	font-size: 13px;
	color: #666;
	background: 
	background:-moz-linear-gradient(top, #f7f7f7, #d7d7d7);
	background:-webkit-linear-gradient(top, #f7f7f7, #d7d7d7);
	background:-ms-linear-gradient(top, #f7f7f7, #d7d7d7);
	background: linear-gradient(top, #f7f7f7, #d7d7d7);
}

.tabrow1 li a:hover {
	background:-moz-linear-gradient(top, #fefcef, #fdf8d5);
	background:-webkit-linear-gradient(top, #fefcef, #fdf8d5);
	background:-ms-linear-gradient(top, #fefcef, #fdf8d5);
	background: linear-gradient(top, #fefcef, #fdf8d5);
}

.tabrow1 li.selected a, .tabrow1 li.selected a:hover {
	background:-moz-linear-gradient(top, #fdfdfd, #ffd3ec);
	background:-webkit-linear-gradient(top, #fdfdfd, #ffd3ec);
	background:-ms-linear-gradient(top, #fdfdfd, #ffd3ec);
	background: linear-gradient(top, #fdfdfd, #ffd3ec);
	color: #000;
	}



/*          database                        */ 

.db-navi {
	margin: 25px auto 50px auto;
	text-align: center;
}
.linklist strong{ border: solid 1px #aaa;	padding:5px;}

.linklist a, a.bn{
	text-decoration: none;
	color: #fff;
}

.linklist a{
	background: #aaa;
	padding:5px;
	border: none;
}

a.bn {
	text-align: center;
	background: #c10061;
	border-radius: 7px;
	padding:5px 10px;
	margin: 5px;
	color: #fff;
}
a.bn:hover, .linklist a:hover { background: #3a6c87;}