@charset "UTF-8";
/* CSS Document */
 @import url("https://use.typekit.net/cap8pti.css");/*--- Top title ---*/
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600&display=swap');/*--- sub font ---*/
@import url('https://fonts.googleapis.com/css?family=Lusitana&display=swap');/* ---main Title font ---*/

body{
	margin: 0;
	font-family: 'Josefin Sans', sans-serif;	
	min-width: 100%;	
}

#page {
	position: relative;
	width: 100%;
}

@media(max-width:480px){
	#page{overflow: hidden}
}

#gnav {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0;
  z-index: 999
}
#gnav li {
  display: block;
  align-items: center;
  margin-left: 2em
}
#gnav li a {
  display: inline-block;
  text-decoration: none;
  color: #333
	
}
#gnav li a:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #FF0004;
  border-radius: 50%;
  margin-right: 1em
}

.line{
	display: block;
	border-left: solid 1.8px #FF0004;
	height: 4em;
	margin-left: .45em;
	margin-top: -1em
}

	
#header #gnav li a.current {
	color: #FF0004;
}
#contents {
	position: relative;
	width: 100%;
}


@media(max-width:480px){
	#gnav{display: none!important}
}
.main_title{
	font-family: 'Times New Roman','Lusitana', serif;
	font-size: 4.1em;
	color:#b5b5b6;
	font-weight: normal
}

.ml12 .letter {
  display: inline-block;
  line-height: 1em;
}

@media(min-width:1500px) and (max-width:2560px){
	.lg_size{display: block!important}
	.md_size{display: none!important}
}
@media(max-width:1499px){
	.md_size{display: block!important}
	.lg_size{display: none!important}
}

/*----------------------------------
// top
----------------------------------*/
#top{
	position: relative
}

.top{
	background: rgb(255,255,255);
	background: radial-gradient(rgba(255,255,255,1) 52%, rgba(228,228,228,1) 82%, rgba(203,203,203,1) 100%);
	background-size: cover;
	width: 100%;
	min-height: 100vh;
	z-index: 0;
}

.block {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position:sticky!important;
  top: 0;
}

.top_title{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	position: absolute;
	right: 0;
	top:10.5em
}
.top_title h1{
	font-family: 'arno-pro-display', serif;
	font-weight: 300;
	font-style: normal;
	font-size: 8em;
	color: rgba(181,182,188,0.6);
	margin: 0;
	border-bottom: solid 0.36px #71767e;
	line-height: 0.8em
}

.top_title p{
	font-family: "kozuka-mincho-pro","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", "serif";
	font-weight: 200;
	font-style: normal;
	letter-spacing: 1.35em;
	margin: 0;
	font-size: 1.8em;
	color: #71767e
}

.top_a{
	padding-left: 0.1em
}
.top_k{
	padding-right: 8.5em
}
@media(max-width:1640px){
	.top_k{padding-right: 5em}
}
@media(max-width:1120px){
	.top_title p{letter-spacing: 1em;font-size: 1.3em}
	.top_k{padding-right: 5em}
	.top_title h1{font-size: 6.5em}
}
@media(max-width:1024px){
	.top_title p{letter-spacing: 1em}
	.top_k{padding-right: 3em}
}
@media(max-width:768px){
	.top_title h1{font-size: 5em}
	.top_title p {font-size: 1em}
	.top_k{padding-right: 5em}
}
@media(max-width:680px){
	.top_title h1{font-size: 3.8em}
	.top_title p {font-size: 1em}
	.top_k{padding-right: 4.5em}
}
@media(max-width:480px){
	.top_title h1{font-size: 3em}
	.top_title p {font-size: .8em;letter-spacing: .5em}
	.top_k{padding-right: 4em}
}
@media(max-width:320px){
	.top_title h1{font-size: 2em}
	.top_title p{letter-spacing: .5em}
}

.logo_out{
	position: absolute;
	top:85%;
	width: 100%;
}

.logo {
	display: block;
	width: 25%;
	margin: 0 auto
}

@media(max-width:480px){
	.logo{width: 50%;top:80%}
}

.next_page{
	z-index: 300;
	background: #fff
}

.block_2 {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position:sticky;
  top: 0;
}

/*----------------------------------
// what is
----------------------------------*/

.what_in{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
	width: 70%;
	margin: 0 auto;
	padding: 25% 0;
	color: #727171
}


.what_in div h1{
	text-align: center;
	padding-top: 1em;
	padding: 0;	
	padding-left: 1.4em
}

.what_in div{
	width: 50%;
	border-left: solid .8px #F7500F;
	box-sizing: border-box;
}
.what_in dl{
	line-height: 1.8em;
	font-size: 1.1em;
	margin: 2em 0
}

.what_in dt{
	margin-bottom: .5em
}

.what_in dd{
	font-weight: lighter;
	margin-left: .6em;
	line-height: 1.2em
}

.what2{
	font-size: .82em
}

.what_r{
	padding-left: 5em
}
@media(max-width:1024px){
	.what_in div h1{padding-left: 0em}
}

@media(max-width:768px){
	.what_in{width: 90%}
}
@media(max-width:480px){
	.what_in{display: block;width: 95%;margin-right: 0;text-align: left;}
	.what_in div h1,.what_in div{width: 95%;text-align: left}
	.what_in div{padding-left: 1em;margin-left: .5em;font-size: .9em}
	.what_r{padding-left: 2em!important}
}

/*----------------------------------
// works
----------------------------------*/

 .works_title{
	text-align: center;
}

.works_title h1{
	display: inline-block;
	vertical-align: baseline
}

.works_title span.sub_title{
	font-size: 1.5em;
	vertical-align: baseline;
}

.sub_title{
	font-size: .5em;
	font-family: 'Josefin Sans', sans-serif;
	display: inline-block;
	margin: 0 2em;
	vertical-align: middle;
	font-weight: 300;
	color: #727171
}

.sub_title:before{
	content: "";
	display: inline-block;
	width: .7em;
	height: 1px;
	background: #F7500F;
	vertical-align: middle;
	margin-right: .5em
}

@media(max-width:480px){
	.works_title{display: block;width: 95%;margin-right: 0;margin-left: auto;text-align: left;}
	.works_title h1{display: block;text-align: left;width: 95%;padding-left: .5em}
	.works_title span.sub_title{font-size: 1em;text-align: left;margin: -5.8em 0 0 1.2em;padding-left: .7em}
}
.photo_box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0;
	padding: 0
}

.photo_box div{
	width: 25%;
	height: 85%;
	overflow: hidden;
	margin: 0;
	padding: 0
}

@media(max-width:768px){
	.photo_box div{width: 50%}
}
@media(max-width:480px){
	.photo_box div{width: 50%;height: 200px}
}
.photo_in {
	width: 100%;
	height: 23em;
	position: relative;
	overflow: hidden;
	transition-duration: 0.5s; /*変化の時間*/;
	margin: 0;
}

@media(max-width:1440px){
	.photo_in{height: 16em}
}

.photo_in img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hover-mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background:rgba(35,27,31,0.85);
	opacity: 1;
	color: #fff;
	text-align: left;
	padding: 5em;
	transition:all 0.6s ease;
	transform: rotateX(-90deg) rotateY(-90deg);
}
.photo_in:hover .hover-mask {
	opacity: 1;
	transform: rotateX(0) rotateY(0);
}
.photo_in:hover{
	transform: scale(1.2,1.2); /*画像の拡大*/
　cursor: pointer; /*カーソルをポインターにする*/
}

.hover-mask h5{
	font-size: 2em;
	display: block;
	margin-bottom: .5em;
	margin-top: 0;
	font-weight: lighter
}

.hover-mask span{
	width: 10%;
	height: 2px;
	background: #fff;
	display: block
}

.hover-mask p{
	margin-top: 1em;
	display: block;
	font-size: 1em;
	font-weight: lighter;
}

@media(max-width:480px){
	.hover-mask{font-size: 80%;padding: 2.3em}
	.hover-mask h5{margin-top: .8em}
}

/*----------------------------------
// contact
----------------------------------*/

.contact_in{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	width: 70%;
	margin: 0 auto;
	padding: 25% 0 10%;
	align-items: center
}

.contact_in h1{
	text-align:right;
	padding-top: 1em;
	padding: 0;
	padding-left: 1.6em;
}

.contact_in div{
	width: 50%;
	border-left: solid .5px #F7500F;
	box-sizing: border-box;
	padding-left: 4em;
	padding-right: 4em
}

.contact_in ul{
	line-height: 3em;
	padding: 0;
	margin: 1em 0
}

.contact_in ul li{
	font-size: 1.2em;
	display: block;	
	margin: 0
}

.contact_in p{
	font-weight: lighter;
	line-height: 1.5em;
	color: #727171
}
@media(max-width:1024px){
	.contact_in h1{padding-left: 0}
}
@media(max-width:768px){
	.contact_in{width: 90%}
}
@media(max-width:480px){
	.contact_in{display: block;width: 95%;margin-right: 0;text-align: left;}
	.contact_in h1,.contact_in div{width: 95%;text-align: left}
	.contact_in div{padding-left: 2em}
}

@media(max-width:480px){
	.what_in{display: block;width: 95%;margin-right: 0;text-align: left;}
	.what_in div h1,.what_in div{width: 95%;text-align: left}
	.what_in div{padding-left: 1em;margin-left: .5em;font-size: .9em}
}
/*----------------------------------
// footer
----------------------------------*/

footer{
	text-align: center;
	margin-top: 10em
}

.foot_logo{
	width: 20%
}

.copy{
	font-size:.8em;
	margin: 10em auto;
	color: #333;
	font-weight: lighter
}

@media(max-width:768px){
	.foot_logo{width: 30%}
}
@media(max-width:480px){
	.foot_logo{width: 50%}
}


/*----------------------------------
// thanks
----------------------------------*/

#thanks{
	text-align: center;
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 73%, rgba(131,131,131,1) 100%);
	background-size: cover;
}

.thanks_hd{
	width: 100%;
	padding: 3em 0;
}

.thanks_in{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 3em;
	background: rgba(255,255,255,0.6)
}

.thanks_in h1{
	font-family: 'Times New Roman','Lusitana', serif;
	font-weight: normal;
	display: inline-block;
	padding: 3em 1em .5em;
	border-bottom: solid 1px #F7500F
	
}
.thanks_in p{
	margin-top: 2em;
	font-size: 1.2em;
	margin-bottom: 5em;
	line-height: 1.2em;
	font-weight: lighter
}

#thanks a{
	cursor: pointer;
	background: #F7500F;
	padding: .8em 3em;
	border-radius: 2em;
	color: #fff;
	vertical-align: middle;
	line-height: 1;
	font-size: 100%;
	border: none;
	font-family: 'Josefin Sans', sans-serif;
	border: solid 2px #F7500F;
	text-decoration: none;
	text-align: left;
}

#thanks a:hover{
	cursor: pointer;
	background:#fff;
	border: solid 2px #F7500F;
	color: #F7500F;
	box-sizing: border-box
}

#thanks_footer footer{
	margin-top: 6em
}

#thanks_footer footer p.copy{
	font-size: 0.8em!important
}

.thanks_foot_logo{width: 20%!important}

@media(max-width:480px){
	.thanks_in{
		width: 95%;margin: 1em auto;height: 95vh
	}
	.thanks_foot_logo{width: 40%!important}
}
	

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}