@charset "UTF-8";
/*---------------------------------
	
	basic
	
---------------------------------*/
html, body { height: 100%; }

body {
	font-family: 'Lato', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;	width: 100%;
    padding: 0;
}
a{
	cursor: pointer;
}

img{
	width: 100%;
	float: left;
}

.head .fb_iframe_widget > span {
  vertical-align: baseline !important;
}
.col100{
	width: 100%;
	position: relative;
	float: left;
}
video{
	width: 100%;
	float: left;
}

.sp-hidden{
	display: none !important;
}
.socialbtn{
	width: 80%;
	position: absolute;
	bottom: 30px;
	left: 50%;
	margin-left: -30%;
	margin-bottom: 48px;
}
.socialbtn .fb-like{
	float: left;
	
}
.socialbtn .tweetBtn{
	float: left;
	padding-top: 5px;
	
}

.notice-txt{
	width: 100%;
	float: left;
}

/*--------------------------------------
----------------------------------------

header

----------------------------------------	
--------------------------------------*/
.header-sp{
	position: fixed;
	top: 0px;
	right: 0px;
	z-index: 999;
	border: none;
	
}
button#trigger-overlay{
	border: none!important;
	background-color: none!important;
	padding: 0 0 0 0!important;
	cursor: pointer;
	outline: none;
	position: fixed;
	top: 24px;
	right: 24px;
	width: 48px;
	background: transparent;

}
button#trigger-overlay img{
	width: 100%;
	float: left;
}
button#trigger-overlay:active{
	border: none!important;
}


a.logo.pc-hidden {
	display: block;
	color: #000;
	font-size: 20px;
	text-decoration: none;
	letter-spacing: 2px;
	float: left;
	margin-left: 32px;
	margin-top: 40px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

.scrolltop{
	display: none!important;
}
/*--------------------------------------
----------------------------------------

menu

----------------------------------------	
--------------------------------------*/

/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #fff;
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url(../img/cross.svg)no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
	cursor: pointer;
}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 40%;
	height: 60%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	display: inline-block;
	height: 100%;
	position: relative;
	width: 80%;
	top: 60%;
	margin-top: -100px;
}

.overlay ul li {
	width: 100%;
	display: block;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	text-decoration: none;
	margin-bottom: 36px;
	float: left;
	text-align: center;
}
li.f-righ{
	float: right;
}
.overlay ul li span{
	padding-left: 5px;
}
.overlay ul li br{
	display: none;
}


.overlay ul li a {
	font-size: 32px;
	display: block;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	letter-spacing: 1px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #f0f0f0;
}

/* Effects */
.overlay-scale {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}

.overlay-scale.open {
	z-index: 99999;
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);	
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	transition: transform 0.2s, opacity 0.6s;
}

@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}




/*---------------------------------
	
	main
	
---------------------------------*/
.main{
    position: relative;
    float: left;
    background-image: linear-gradient(0deg, #FFAFBD 0%, #FFC3A0 99%, #FFC3A0 100%);
/*     height: 700px; */
}

.main .inner{
	width: 80%;
	margin: 0 auto;
}

.main .inner .intro-txt{
	position: absolute;
	height: 265px;
	top: 50%;
	margin-top: -90.5px;
}

.main .inner .intro-txt h3{
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 3px;
	color: #fff;
	float: left;
	font-weight: 600;
	margin-bottom: 8px;
}

.main .inner .intro-txt h2{
	font-family: 'Montserrat', sans-serif;
	font-size: 64px;
	line-height: 64px;
	letter-spacing: 4px;
	color: #fff;
	border-bottom: 2px solid #fff;
	position: 32px;
	display: inline;
	float: left;
	font-weight: 600;
}

.main .inner .intro-txt h4{
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: 3px;
	color: #fff;
	padding-top: 24px;
	float: left;
	font-weight: 600;
}

.string1 span.typed-cursor{
	float: left;
	color: #fff;
	width: 6px;
	height: 16px;
	background-color: #fff;
	overflow: hidden;
	text-indent: -99px;
	margin-left: 15px;
}

.string2 span.typed-cursor{
	float: left;
	color: #fff;
	display: none;
	color: #fff;
	width: 6px;
	height: 64px;
	background-color: #fff;
	overflow: hidden;
	text-indent: -99px;
	margin-left: 15px;
}

.string3 span.typed-cursor{
	float: left;
	color: #fff;
	display: none;
	width: 6px;
	height: 20px;
	background-color: #fff;
	overflow: hidden;
	text-indent: -99px;
	margin-left: 15px;
	margin-top: 24px;
}


#header{
	margin-top: 37px;
}

#header ul{
	float: right;
}

#header ul li{
	float: left;
}

#header ul li a{
	color: #fff;
	text-decoration: none;
	margin-left: 32px;
	font-size: 16px;
	letter-spacing: 3px;
}

#header_show .inner{
	width: 80%;
	margin: 0 auto;
	padding: 0 0 0 0;
	border-bottom: 1px #F5F5F5 solid;
	padding-bottom: 24px;
}

#header_show{
	background-color: #fff;
	padding: 24px 0 0 0;
	position: fixed;
	top: -94px;
	left: 0px;
	z-index: 99;
}

#header_show.page{
	background-color: #fff;
	padding: 24px 0 0 0;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 99;
}

#header_show ul{
	padding-top: 8px;
	float: right;
}

#header_show ul li{
	float: left;
	margin-left: 32px;
}

#header_show ul li a{
	color: #000;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 1px;
	font-family: 'Montserrat', sans-serif;
}

#header_show a.logo{
	display: block;
	color: #000;
	font-size: 24px;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	letter-spacing: 2px;
	float: left;
}
/*---------------------------------
	
	inner
	
---------------------------------*/
.main .inner {
	padding: 0 0 0 0;
}
.inner{
    width: 85%;
    margin: 0 auto;
    padding: 48px 0 48px 0;
}
.inner h2.title{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 32px;
	letter-spacing: 3px;
	margin-bottom: 40px;
}

.youtube iframe{
  width: 100%;
}

.youtube{
	margin-bottom: 24px;
	float: left;
	width: 100%;
}


/*---------------------------------
	
	color
	
---------------------------------*/
.pink{
	color: #E383A5;
}

.chai{
	color: #C58836;
}

.chai2{
	color: #BEA666;
}

.blue{
	color: #183B7E;
}

.yellow{
	color: #EBB844;
}

/*---------------------------------
	
	index_section1
	
---------------------------------*/
#section1 .intro-txt h3,#section1 h3.intro-txt{
	text-align: center;
	font-weight: bold;
	font-size: 13px;
	padding: 0 32px 24px 32px;
	box-sizing: border-box;
	line-height: 24px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

#section1 h3 span.simble1{
	position: absolute;
	top: 8px;
	left: 0px;
	padding-right: 12px;
}

#section1 h3 span.simble2{
	position: absolute;
	top: 8px;
	right: 0px;
}

#section1 h3 span img{
	width: 16px;	
	float: left;
}

#section1 h4{
	width: 100%;
	margin: 0 auto;
	font-size: 12px;
	line-height: 180%;
	margin-bottom: 32px;
}

#section1 .btn{
	width: 200px;
	height: 56px;
	margin: 0 auto;
	background-image: linear-gradient(90deg, #FFAFBD 0%, #FFC3A0 99%, #FFC3A0 100%);
	border-radius: 28px;
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
}

#section1 .btn a{
	display: block;
	color: #fff;
	text-align: center;
	line-height: 56px;
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 1px;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	
}

#section1 .btn a span{
	padding-right:12px;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
}

/*---------------------------------
	
	index_section2
	
---------------------------------*/
#index #section2 .inner{
	padding: 48px 0 0 0 ;
}

.gr-bg{
	background-color: #FAFAFA;
}

#section2 .works-box .inner{
	width: 80%;
    margin: 0 auto;
    padding: 48px 0 48px 0!important;
}

#section2 .works-box{
	width: 100%;
	float: left;
}

#section2 .works-box .works-img{
	width: 100%;
	float: left;
	margin-bottom:32px;
}

#section2 .works-box .works-img img{
	float:left;
	width: 100%;
}

#section2 .works-box .works-txt{
	float: left;
	width: 100%;
	
}

#section2 .works-box .works-txt p.number{
	font-size: 10px;
	letter-spacing: 1px;
	margin-bottom: 4px;
	line-height: 10px;
	font-weight: bold;
}

#section2 .works-box .works-txt h2.works-title{
	font-size: 16px;
	text-align: left;
	margin-bottom: 8px;
	line-height: 150%;
	font-weight: bold;
	letter-spacing: 2px;
}

#section2 .works-box.works1 .works-txt h2.works-title{
	color: #9E99EE;
}

#section2 .works-box .works-txt a.link{
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #B2B2B2;
	display: block;
	margin-bottom: 16px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-top: 0px;
}

#section2 .works-box .works-txt h3.description{
	font-size: 12px;
	line-height: 180%;
	margin-bottom: 24px;
}

#section2 .works-box .works-txt .btn{
	margin: 0 auto;
	width: 200px;
	height: 56px;
	border-radius: 28px;
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
}

#section2 .works-box .works-txt .btn a{
	display: block;
	color: #fff;
	text-align: center;
	line-height: 56px;
	text-decoration: none;
	font-size: 12px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	letter-spacing: 1px;
}

#section2 .works-box .works-txt .btn a span{
	padding-right:12px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

#section2 .works-box.works1 .works-txt .btn{
	background-image: linear-gradient(90deg, #9795F0 0%, #FBC8D4 99%, #FBC8D4 100%);
}

#section2 .works-box.works2 .works-txt .btn{
	background-image: linear-gradient(90deg, #E383A5 0%, #FF9A9E 99%, #FF9A9E 100%);
}

#section2 .works-box.works3 .works-txt .btn{
	background-image: linear-gradient(90deg, #91590C 0%, #CF8B2F 99%, #CF8B2F 100%);
}

#section2 .works-box.works4 .works-txt .btn{
	background-image: linear-gradient(90deg, #0C2758 0%, #183B7E 99%, #183B7E 100%);
}

#section2 .works-box.works5 .works-txt .btn{
	background-image: linear-gradient(90deg, #F5B013 0%, #FFCC43 99%, #FFCC43 100%);
}
#section2 .works-list .btn{
	width: 200px;
	height: 56px;
	margin: 0 auto;
	background-image: linear-gradient(90deg, #FFAFBD 0%, #FFC3A0 99%, #FFC3A0 100%);
	border-radius: 28px;
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
}

#section2 .works-list .btn a{
	display: block;
	color: #fff;
	text-align: center;
	line-height: 56px;
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 1px;
	
}

#section2 .works-list .btn a span{
	padding-right:12px;
}


/*---------------------------------
	
	footer copyright
	
---------------------------------*/
#footer{
/* 	padding-top: 72px; */
}

#footer .inner{
	padding: 32px 0 32px 0;
}

#footer p.copyright{
	font-size: 10px;
	letter-spacing: 1px;
	text-align: center;
}


/*---------------------------------
	
	about
	
---------------------------------*/

#about h2{
	padding-top: 32px;
}

#about .intro-txt{
	margin-bottom: 16px;
}

#about .intro-txt .photo{
	width: 120px;
	height: 120px;
	margin: 0 auto;
}

#about .intro-txt .photo img{
	width: 100%;
	float: left;
}

#about .intro-txt h3{
	width: 100%;
	margin: 0 auto;
	margin-top: 32px;
	padding-bottom: 0px;
}

#about  h4{
	width: 100%;
	margin: 0 auto;
	letter-spacing: 1px;
}

#about h5{
	font-size: 24px;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	margin-bottom: 32px;
	font-weight: bold;
}

#about p{
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 1px;
}

#about .story-block li.story-box{
	float: left;
	margin-bottom: 64px;
	width: 100%;
}

#about .story-block .story-box .time-line{
	width: 32px;
	height: 4px;
	background-image: linear-gradient(90deg, #FFAFBD 0%, #FFC3A0 99%, #FFC3A0 100%);
	float: left;
	margin-top: 3px;
}


#about .story-block li.story-box .time{
	float: left;
}


#about .story-block li.story-box .time p.age{
	float: left;
	font-size: 14px;
	line-height: 14px;
	margin-left: 16px;
	font-weight: bold;
}


#about .story-block li:last-child{
	margin-bottom: 0px;
}

#about .story-block li.story-box .story-txt{
	float: left;
	width: 100%;
	margin-top: 24px;
	
}

#about .story-block li.story-box .story-txt h6{
	margin-top: -6px;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 16px;
	line-height: 28px;
}

#about .pdf-block ul li{
	float: left;	
	margin-right: 1%;
	width: 48%;
}

#about .pdf-block ul li{
	float: left;	
	margin-right: 1%;
	width: 32%;
}

#about .pdf-block ul li:nth-child(3n){
	margin-right: 0px;
}

#about .pdf-block .pdf-img{
	width: 70px;
	margin: 0 auto;
	margin-bottom: 16px;
}

#about .pdf-block .pdf-img img{
	width: 100%;
	float: left;
}

#about .pdf-block p,#about .pdf-block a{
	text-align: center;
	text-decoration: none;
	color: #000;
	letter-spacing: 2px;
	width: 100%;
	float: left;
	font-size: 12px;
	font-weight: bold;
}

#about .skill-block{
	float: left;
	margin-bottom: 40px;
}

#about .skill-block h6{
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 8px;
}



#about .skill-block{
	float: left;
	margin-bottom: 24px;
	width:100%;
}

#about .skill-block:last-child{
	margin-bottom: 0px;
}

#about .skill-block ul li{
	font-size: 12px;
	margin-bottom: 8px;
	border-bottom: 1px solid #DCDDDD;
	padding-bottom: 8px;
/* 	list-style:circle; */
	float: left;
	width: 100%;
}

#about .skill-block ul li span{
	margin-right: 16px;
	font-weight: bold;
	color: #3E3A39;
	width: 20%;
	float: left;
}

span.mark{
	background-color: #FAEA70;
	padding: 2px 4px 2px 4px;
	font-weight: bold;
}

.link{
	margin-top: 16px;
	
}

.link a{
	color: #595757;
	font-size: 12px;
	margin-bottom: 8px;
	text-decoration: none!important;
}

.link a span{
	padding-right: 8px;
	font-weight: bold;
	text-decoration: none;
}

.link a:hover{
	text-decoration: underline!important;
}

.story-txt a{
	color: #000;
	text-decoration: underline;
}

/*---------------------------------
	
	works
	
---------------------------------*/
#works h2{
	padding-top: 32px;
}

#works .category ul{
	width: 100%;
	margin: 0 auto;
	margin-bottom: 32px;
}

#works .category ul li{
	float: left;
	width: 31%;
	height: 40px;
	border: 1px solid #000;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	text-align: center;
	font-size: 10px;
	letter-spacing: 1px;
	margin-right: 3%;
	box-sizing: border-box;
}

#works .category ul li:last-child{
	margin-right: 0px;
}

#works .category ul li a{
	text-align: center;
	line-height: 40px;
	color: #000;
	text-decoration: none;
	display: block;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

#works .category ul li.active{
	background-color: #000;
	color: #fff;
}

#works .category ul li.active a{
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

#works .works-box ul li{
	width:100%;
	float: left;
	margin-bottom: 40px;
}

#works .works-box ul li:nth-child(2n){
	margin-right: 0px;
}

#works .works-box ul li .works-img{
	border: 1px solid #E6E6E6;
	float: left;
	margin-bottom: 16px;
}

#works .works-box ul li img{
	width: 100%;
	float: left;
}

#works .works-box ul li p.numb{
	font-size: 10px;
	letter-spacing: 1px;
	color: #BABABA;
	text-align: left;
	line-height: 10px;
	margin-bottom: 10px;
	font-weight: bold;
}

#works .works-box ul li a.title{
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: bold;
	line-height: 14px;
	margin-bottom: 1px;
	text-align: left;
	width: 100%;
	float: left;
	color: #000;
	text-decoration: none;
}

#works .works-box ul li a.url{
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: normal;
	text-align: left;
	text-decoration: none;
	color: #000;
}

p.notice{
	font-size: 10px;
	line-height: 200%;
	letter-spacing: 1px;
	color: #5D5D5D;
	text-align: left;
}

/*---------------------------------
	
	works-page
	
---------------------------------*/
#works-page h2{
	padding-top: 32px;
}

#works-page p.numb{
	font-size: 10px;
	line-height: 12px;
	letter-spacing: 1px;
	font-weight: bold;
	margin-bottom: 4px;
	font-weight: bold;
}

#works-page h3.title{
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	font-weight: bold;
	margin-bottom: 4px;
	
}

#works-page a.url{
	font-size: 12px;
	color: #B2B2B2;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 1px;
	display: block;
	margin-bottom: 16px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#works-page p.position{
	font-size: 11px;
	line-height: 200%;
/* 	letter-spacing: 1px; */
}
#works-page p.ward{
	font-size: 12px;
	color: #FF466A;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 16px;
	line-height: 180%;
}

#works-page p.description a{
	font-size: 14px;
	color: #000;
	text-decoration: underline;
	line-height: 180%;
}


#works-page p.description{
	font-size: 12px;
	line-height: 24px;
	width: 100%;
	margin-bottom: 24px;
	
}

#works-page .works-txt-lead{
	margin-bottom: 32px;
}

#works-page .works-img{
	width: 100%;
	float: left;
	margin-bottom: 16px;
}

#works-page .works-img img{
	float: left;
	width: 100%;
	margin-bottom: 8px;
}

#works-page .works-section{
	margin-bottom: 32px;
}

#works-page h5{
	font-size: 18px;
	margin-bottom: 8px;
	letter-spacing: 1px;
	font-weight: bold;
}

#works-page .btn{
	width: 200px;
	height: 56px;
	margin: 0 auto;
	background-image: linear-gradient(90deg, #FFAFBD 0%, #FFC3A0 99%, #FFC3A0 100%);
	border-radius: 28px;
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
}

#works-page .btn a{
	display: block;
	color: #fff;
	text-align: center;
	line-height: 56px;
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 1px;
	
}

#works-page .btn a span{
	padding-right:12px;
}

#works-page p.date{
	font-size: 10px;
	letter-spacing: 1px;
	margin-bottom: 4px;
}

/*---------------------------------
	
	contact
---------------------------------*/
#contact h2{
	padding-top: 54px;
	padding-bottom: 32px;
}

#contact .email-block{
	width: 100%;
	margin: 0 auto;
	background-image: linear-gradient(90deg, #FFAFBD 0%, #FFC3A0 99%, #FFC3A0 100%);
	height: 64px;
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	margin-bottom: 24px;
}

#contact .email-block p{
	color: #fff;
/* 	letter-spacing: 1px; */
	font-size: 14px;
	text-align: center;
	line-height: 64px;
	font-family: 'Montserrat', sans-serif;
}

#contact .email-block p span{
	margin-right: 4px;
}

#contact .email-block p a{
	color: #fff;
	text-decoration: none;
}


#contact .sns-block{
	width: 100%;
	float: left;
}

#contact .sns-block ul li{
	float: left;
	width: 100%;
	text-align: center;
	margin-bottom: 16px;
}

#contact .sns-block ul li a{
	color: #4A4A4A;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 1px;
	text-align: center;
	
}