/*
Theme Name: original
Author: yamada_ayumi
Version: 1.0
*/
/* この下に通常のcssを書いていく */
body {
	width: 100%;

	
}

.font-courier {
	font-family: "Courier Prime", serif;	
}

.bg-paper{
	background: url("/wp-content/images/img_bg_paper.png") repeat-y;
	background-size: cover;
	background-position: center top;
}
.bg-craftPaper{
	background: url("/wp-content/images/img_bg_craftpaper.png") repeat-y;
	background-size: cover;
	background-position: center top;
}
.bg-yellowPaper{
	background: url("/wp-content/images/img_bg_yellowpaper.png") repeat-y;
	background-size: cover;
	background-position: center top;
}
.bg-graph:before{
	content: "";
	position: absolute;
	top: 1em;
	left: 1em;
	width : calc( 100% - 2em );
	height: calc( 100% - 2em );
	background: url("/wp-content/images/img_bg_graph.png") repeat;
}



/* .fp-scrollable{ 
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.fp-scrollable::-webkit-scrollbar{
	display: none;
}
.fp-tableCell{ 
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.fp-tableCell::-webkit-scrollbar{
	display: none;
} */
/* .iScrollIndicator{ display: none!important;} */

/* header */
header{ height: 3.5em; position: fixed; width: 100%; top: 0; background: #FFF; z-index: 999;}
header .headerInner{ height: 100%;}
header h1{ font-size: 100%;}
.headerTop{ margin-left: 1em;}
.headerTop span{ background: #FFF500; padding: 0.2em; font-weight: bold; font-size: 137.5%; }

.headerMenu { width:60%; padding-top: 0.5em;}
.headerMenu ul{ height: 100%;}
.headerMenu li{ width: 32%; cursor: pointer; position: relative;}
.headerMenu li#aboutMenu::before{
	content: '';
	width: 100%;
	height: 100%;
	background: url("/wp-content/images/img_menu01_normal.png") no-repeat;
	background-size: cover;
	background-position: center top;
	position: absolute;
    z-index: -1;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
.headerMenu li#worksMenu::before{
	content: '';
	width: 100%;
	height: 100%;
	background: url("/wp-content/images/img_menu02_normal.png") no-repeat;
	background-size: cover;
	background-position: center top;
	position: absolute;
    z-index: -1;
	top: 0;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
.headerMenu li#contactMenu::before{
	content: '';
	width: 100%;
	height: 100%;
	background: url("/wp-content/images/img_menu03_normal.png") no-repeat;
	background-size: cover;
	background-position: center top;
	position: absolute;
    z-index: -1;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
.headerMenu li#aboutMenu:hover::before{ 
	background: url("/wp-content/images/img_menu01_normal_on.png") no-repeat;
	background-size: cover;
	background-position: center top;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
.headerMenu li#worksMenu:hover::before{ 
	background: url("/wp-content/images/img_menu02_normal_on.png") no-repeat;
	background-size: cover;
	background-position: center top;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
.headerMenu li#contactMenu:hover::before{ 
	background: url("/wp-content/images/img_menu03_normal_on.png") no-repeat;
	background-size: cover;
	background-position: center top;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
.headerMenu li#aboutMenu.current::before{ content: normal;}
.headerMenu li#worksMenu.current::before{ content: normal;}
.headerMenu li#contactMenu.current::before{ content: normal;}
.headerMenu li#aboutMenu.current:hover::before{ content: normal;}
.headerMenu li#worksMenu.current:hover::before{ content: normal;}
.headerMenu li#contactMenu.current:hover::before{ content: normal;}
.headerMenu li#aboutMenu.current::after{
	content: '';
	width: 100%;
	height: 140%;
	background: url("/wp-content/images/img_menu01_current.png") no-repeat;
	background-size: cover;
	background-position: center top;
	position: absolute;
    z-index: -1;
	-webkit-transition: 1.0s;
	-o-transition: 1.0s;
	transition: 1.0s;
	top: 0;
}
.headerMenu li#worksMenu.current::after{
	content: '';
	width: 100%;
	height: 140%;
	background: url("/wp-content/images/img_menu02_current.png") no-repeat;
	background-size: cover;
	background-position: center top;
	position: absolute;
    z-index: -1;
	-webkit-transition: 1.0s;
	-o-transition: 1.0s;
	transition: 1.0s;
	top: 0;
}
.headerMenu li#contactMenu.current::after{
	content: '';
	width: 100%;
	height: 140%;
	background: url("/wp-content/images/img_menu03_current.png") no-repeat;
	background-size: cover;
	background-position: center top;
	position: absolute;
    z-index: -1;
	-webkit-transition: 1.0s;
	-o-transition: 1.0s;
	transition: 1.0s;
	top: 0;
}


.headerMenu li a{ width: 100%; display: block; height: 100%;}
.headerMenu li a:link,
.headerMenu li a:hover{ text-decoration: none;}
.headerMenu li a div{ height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.headerMenu li span { color: #FFF; font-weight: bold; font-size: 150%; margin-bottom: -0.2em;}



.frontPage section{}



/* TOP */
#front{ padding-top: 3.5em;}
#front .fp-scroller{ height: 100%;}
#front .fp-scrollable{ margin-top: -1em;}
/* .frontPage { width: 100%; height: 100svh;} */
/* .frontPage .fp-scroller{ height: 100%;}  */
.frontPage .mainSection{
	/* height: calc( 100svh - 3.5em); */
	/* position: relative; */
	/* margin-top: 3.5em; */
}
.frontPage .mainSection .sectionInner{ width: 100%; height: 100%;}
.frontPage .layoutArea{  width: 100%; height: 100%;}
.frontPage .abuBox{ max-width: 1500px; position: relative; height: 100%; width: calc( 100% - 2em ); height: calc( 100% - 2em ); margin: 0 auto;}
.frontPage .abuBox .titleArea{ height: 80%;}
.layoutArea .titleBox{ 
	/* position: absolute;
	top: 5vh;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%); */
	width: 100%;

}
.layoutArea .titleBox .boxInner{
	margin: 0 auto;
	width: 90%;
}
.layoutArea .titleBox h2{ position: relative;}
.layoutArea .titleBox h2:after{ 
	content: "";
	width: 30%;
	height: 80%;
	background: url("/wp-content/images/img_top_line.png") no-repeat;
	background-size: cover;
	background-position: center top;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	right: -20%;
}

.layoutArea .topImgBox{ width: 25%; padding: 2% 0 0;}
.layoutArea .topImgBox > p a { display: inline-block;}
.layoutArea .topImgBox > p a:hover{ -webkit-transition: .2s; -o-transition: .2s; transition: .2s; -webkit-transform:rotate(-5deg); -ms-transform:rotate(-5deg); transform:rotate(-5deg);}
.layoutArea .topImgBox > p#topImgContact a:hover{ -webkit-transform:rotate(5deg); -ms-transform:rotate(5deg); transform:rotate(5deg);}
.layoutArea .topImgBox > p#topImgWorks a:hover{ -webkit-transform:rotate(5deg); -ms-transform:rotate(5deg); transform:rotate(5deg);}

.layoutArea .topImgBox > * {}
.layoutArea #topImgWelcome{ width: 40%; display: block; margin-bottom: 3%;}
.layoutArea h2{ width: 65%; max-width: 800px;}
.layoutArea #topImgCamera{width: 23%; }
.layoutArea #topImgPhoto{ width: 12%; top: 17vh;}
.layoutArea #topImgHaniwa{ width: 17%; bottom: 22vh; left: 1vw;}
.layoutArea #topImgThanks{ width: 30%; bottom: 4vh; left: 5vw;}
.layoutArea #topImgChou{ width: 13%; right: 22vw; top: 4vh;}
.layoutArea #topImgMoai{ width: 18%; right: 2vw; top: 1vh;}
.layoutArea #topImgTent{ width: 20%; right: 0; bottom: 33vh;}
.layoutArea .topImgType{ right: 10%; bottom: 3%; position: absolute;}
/* .layoutArea .topImgType > * { position: absolute;} */
.layoutArea #topImgTypePepar{}
.layoutArea #topImgTomato{ right: 0; bottom: 22vh; width: 30%;}
.layoutArea #topImgCycle{ right: 0; bottom: 0; width: 45%;}

.layoutArea #topImgAbout{  text-align:center;}
.layoutArea #topImgWorks{ text-align:center;}
.layoutArea #topImgContact{  text-align:center;}

.layoutArea #topImgAbout{
	-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
			order: 1;
}
.layoutArea #topImgWorks{
	-webkit-box-ordinal-group: 4;
		-ms-flex-order: 3;
			order: 3;
}
.layoutArea #topImgContact{
	-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
			order: 2;
}

/* .layoutArea #topImgAbout .hoverOn img{ -webkit-transform:rotate(5deg); -ms-transform:rotate(5deg); transform:rotate(5deg); } */

.layoutArea .topImgNext{
	/* width: 30%;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%); */
	margin:2% auto 0;
	position: relative;
	width: 100%;
	height: 18%;
}
.layoutArea .topImgNext #topImgScroll{
	width: 1.5em;
	margin: 0 auto 1%;
	position: relative;
}
.layoutArea .topImgNext #topImgScroll:after{
	content: "";
	width: 150px;
	height: 90px;
	background: url("/wp-content/images/img_top_contents17.png") no-repeat;
	background-size: cover;
	background-position: center top;
	position: absolute;
	top: 50%;
	left: -180px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
/* .layoutArea .topImgNext #topImgNextpage{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
} */


/*アニメーション用CSS*/
.updown{
	/* アニメーションの名前 */
	-webkit-animation-name:UpDown;
	        animation-name:UpDown;
	/* アニメーションの１回分の長さ */
	-webkit-animation-duration: 1.5s;
	        animation-duration: 1.5s;
	/* アニメーションの回数 */
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	/* アニメーションの進行具合 */
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	/* アニメーション再生の向き */
	-webkit-animation-direction: alternate;
	        animation-direction: alternate;
	}
	/* アニメーションの設定 */
	@-webkit-keyframes UpDown{
	/* 開始地点 */
	0%{
	/* Y軸0px */
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	}
	/* 終了地点 */
	100%{
	/* Y軸20px */
	-webkit-transform: translateY(20px);
	        transform: translateY(20px);
	}
	}
	@keyframes UpDown{
	/* 開始地点 */
	0%{
	/* Y軸0px */
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	}
	/* 終了地点 */
	100%{
	/* Y軸20px */
	-webkit-transform: translateY(20px);
	        transform: translateY(20px);
	}
	}

@media screen and (min-width:1500px){
	.layoutArea .topImgNext{ }
	
	
} 

@media screen and ( max-width:1080px) {
	.layoutArea .topImgType{}
	.layoutArea #topImgTypePepar{ text-align:center; width: 50%; margin: 3% auto;}
	.layoutArea .titleBox .boxInner{ -ms-flex-wrap:wrap; flex-wrap:wrap;}
	.layoutArea .titleBox h2:after{ content: normal;}
	.layoutArea .titleBox h2{ margin: 5% auto 0; width: 75%;}
	.layoutArea .topImgBox{
		width: 95%;
		margin: 0 auto;
		-webkit-box-orient: unset;
		-webkit-box-direction: unset;
		    -ms-flex-direction: unset;
		        flex-direction: unset;
	}

}

/* タブレット */
@media screen and ( max-width:949px) {
	.layoutArea .topImgType{
		position: relative;
		right: unset;
		bottom: unset;
		width: 50%;
		margin: 0 auto;
	}
	.layoutArea #topImgTypePepar{ text-align:center;}

	/* .layoutArea #topImgAbout{
		left: unset;
		bottom: unset;
		position: relative;
		width: 33%;
		margin: -13% 0 0;
		-webkit-box-ordinal-group: 2;
		    -ms-flex-order: 1;
		        order: 1;
	}
	.layoutArea #topImgWorks{
		right: unset;
		bottom: unset;
		width: 33%;
		text-align: center;
		position: relative;
		-webkit-box-ordinal-group: 4;
		    -ms-flex-order: 3;
		        order: 3;
	}
	.layoutArea #topImgContact{
		left: unset;
		bottom: unset;
		width: 33%;
		position: relative;
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	} */
	.frontPage .abuBox{ height: calc( 100% - 5em );}

}

/* SP */
@media screen and ( max-width:500px) {
	.layoutArea .titleBox{ padding-top: 5%; height: 100%;}
	.layoutArea .titleBox .boxInner{ width: 50vh; height: 90%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
	.layoutArea .titleBox h2{ width: 90%;}
	.layoutArea .topImgNext #topImgNextpage{
		width: 36%;
		left: 0;
		transform: translateX 0;
		-webkit-transform: translateX 0;
		-ms-transform: translateX 0;}

	.layoutArea .topImgNext #topImgScroll:after{
		content: "";
		width: 8em;
		height: 4.8em;
		background: url("/wp-content/images/img_top_contents17.png") no-repeat;
		background-size: cover;
		background-position: center top;
		position: absolute;
		top: 50%;
		left: -9em;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}
}



/* ABOUT */
#about{ padding-top: 3.5em;}
#about .sectionInner{ max-width: calc( 1050px + 2em); width: 90%; margin: 0 auto 5%;}
#about .slide{ padding: 0 1em;}
#about .sectionHeadArea{  padding: 7% 0 2%; margin: 0 1em;}
#about h2{ }
#about h2 span.font-courier{ font-size: 312.5%; font-weight: bold; color: #57BFD7; margin-right: 0.5em;}
#about h2 span.subTxt{ font-weight: normal; font-size: 67%;  }

#about nav{ margin: 3% 0;}
#about nav li{display: inline-block;  position: relative; margin-right: 1em;}
#about nav li:after{
	content: "";
	width : 1px;
	height: 1.2em;
	-webkit-transform:rotate(45deg);
	    -ms-transform:rotate(45deg);
	        transform:rotate(45deg);
	background-color: #4C4C4C ;
	display: inline-block;
    vertical-align: middle;
    margin-left: 1em;
	margin-bottom: 0.3em;
}
#about nav li:last-child::after{
	content: normal;
}
#about nav li a{ font-size: 125%; padding: 0.2em;}
#about nav li a:link,
#about nav li a:visited{ color: #545454; text-decoration: none; }
#about nav li a:hover{ background: #FFF500; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;}
#about .childSection{  position: relative;  margin: 8% 1em 8%; background-color: #FFF; border-radius: 2vh; padding: 5%; -webkit-box-shadow: 5px 5px 15px #91919178; box-shadow: 5px 5px 15px #91919178;}
#about .childSection > .sectionInner{ width: auto; margin: 6% 0 0%; }
#about h3{ 
	position: absolute;
	/* left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%); */
	top: -2em;
	height: 3em;
	width: 15em;
	background: url("/wp-content/images/img_about_contents01.png") no-repeat;
	background-size: cover;
	background-position: center top;
	text-align:center;
}
#about h3 span.font-courier{ color: #FFF; font-size: 150%; line-height: 2.4em;}
#about h3 span.subTxt::before{
	content: '';
	position: absolute;
	top: -1.5em;
	margin-left: -2em;
	/* left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%); */
	width: 2em;
	height: 2em;
	background: url("/wp-content/images/img_about_contents02.png") no-repeat;
	background-size: cover;
	background-position: center top;
	right: 4em
}
#about h3 span.subTxt{
	position: absolute;
	top: 5em;
	/* left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%); */
	margin-left: 3em;
	font-weight: normal;
	font-size: 75%;
	right: 0;
}

#about #profile .photoArea{ width: 37%; margin-right: 3%; }
#about #profile .txtArea{ width: 60%;}
#about #profile .profileNameBox{ margin-bottom: 8%;}
#about #profile .profileNameTxt{ font-size: 162.5%;}
#about #profile .profileYomiTxt{ font-size: 112.5%; color: #989898;}

#about #skills { margin-top: 10%;}
#about #skills > div > div{ margin:0 0 5%; border-bottom: 1px dotted #9e9e9e; padding-bottom: 5%;}
#about #skills > div > div:last-child{ margin: 0; border-bottom: none; padding: 0;}
#about #skills .photoArea{ width: 30%; margin-right: 3%;}
#about #skills .txtArea{ width: 67%;}
#about #skills .txtArea h4{ font-size: 162.5%; margin-bottom: 3%; font-weight: 500; color: #3f9eb3;}
#about #skills .txtArea h4::before{
	content: '';
	display: inline-block;
	width: 0.3em;
	height: 0.3em;
	background-color: #7c7c7c;
	margin-right: 0.5em;
	vertical-align: middle;
}
#about #skills .txtArea p { margin: 0.5em 0 0;}
#about #skills .txtArea p span{color: #989898;}

#about .topImgNext{
	margin:0 auto;
	position: relative;
	width: 100%;
}
#about .topImgNext #topImgScroll{
	width: 1.5em;
	margin: 0 auto;
	padding-bottom: 5%;
}
#about .topImgNext #topImgNextpage{
	position: absolute;
	top: 50%;
	left: calc( 50% - 12em );
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	padding-bottom: 5%;
}

/* タブレット */
@media screen and ( max-width:750px) {
	#about #profile .photoArea{ width: 100%; text-align:center; margin-right: 0; margin-bottom: 5%;}
	#about #profile .txtArea{ width: 100%;}
	#about #skills .photoArea{ width: 100%; margin-right: 0; margin-bottom: 8%;}
	#about #skills .txtArea{ width: 100%;}
	#about .childSection{ margin: 15% 0; padding: 8% 5% 5%;}
	#about #skills{ margin-top: 20%;}
	#about #skills > div > div{ margin: 0 0 8%; padding-bottom: 8%;}
}

/* SP */
@media screen and ( max-width:500px) {
	#about .slide{ padding: 0;}
	#about .sectionInner{     margin: 0 auto 20%; }
	#about h2 span.subTxt{ display: block;}
	#about .childSection{ padding: 12% 5% 5%; }
	#about h3{
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	#about .topImgNext #topImgNextpage {
        width: 36%;
        left: 0;
        transform: translateX 0;
        -webkit-transform: translateX 0;
        -ms-transform: translateX 0;
	}
	

}


/* works */
#works{ padding-top: 3.5em;}
#works .sectionInner{ max-width: calc( 1050px + 2em); width: 90%; margin: 0 auto 5%; }
#works .sectionHeadArea{ padding: 7% 0 2%; margin: 0 1em;}
#works h2{}
#works h2 span.font-courier{ font-size: 312.5%; font-weight: bold; color: #4EC44B; margin-right: 0.5em;}
#works h2 span.subTxt{ font-weight: normal; font-size: 67%;  }

#works nav{ margin: 3% 0;}
#works nav li{display: inline-block;  position: relative; margin-right: 2em;}

#works nav .worksTypeCheck {cursor: pointer;}
#works nav .checkTxt { font-size: 137.5%;}
#works nav .inactive .checkTxt::before {
	content: "";
	background: url("/wp-content/images/img_works_check01.png")no-repeat;
	background-size: cover;
	background-position: center top;
	height: 1em;
	position: relative;
	width: 1em;
	margin-bottom: 0.4em;
	margin-right: 0.3em;
}
#works nav .active .checkTxt::before {
	content: "";
	background-image: url("/wp-content/images/img_works_check02.png");
	background-size: cover;
	background-position: center top;
	height: 1em;
	position: relative;
	width: 1em;
	margin-bottom: 0.4em;
	margin-right: 0.3em;
}








.worksCardArea{ margin: 5% 0;}

.worksCardArea .cardBox{ position: relative; width: 47%; background: #FFF; margin: 0 0 8%; -webkit-box-shadow: 5px 5px 15px #91919178; box-shadow: 5px 5px 15px #91919178;}
.worksCardArea .cardBox:after{
	content: "";
	position: absolute;
	top: -3.5vw;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 7vw;
	height: 7vw;
	background: url("/wp-content/images/img_works_tape.png") no-repeat;
	background-size: cover;
	background-position: center top;

}
.worksCardArea .cardBox > a{ display: block; width: 100%; height: 100%; padding: 5%; }
.worksCardArea .cardBox > a:link,
.worksCardArea .cardBox > a:visited{ text-decoration: none;}

.worksCardArea .cardBox dl{position: relative; width: 100%; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.worksCardArea .cardTitle{ line-height: 1.5em; width: 100%; font-size: 137.5%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-bottom: calc( 2em + 5% );}
.worksCardArea .cardTitle span{ color: #b2b2b2; font-size: 60%; line-height: 1.5em; font-weight: normal; display: block;}
.worksCardArea .cardImg{
	width: 100%;
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
	margin-bottom: 5%;
}
.worksCardArea .cardTag{ 
	width: 100%;
	-webkit-box-ordinal-group: 4;
	-ms-flex-order: 3;
	order: 3;
	position: absolute;
	bottom: 0;
	left: 0;
}
.worksCardArea .cardTag li{ display: inline-block; font-size: 87.5%; color: #3b9f39;}
.worksCardArea .cardTag li:after { 
	content: "／";
	display: inline-block;
	margin: 0 0.2em;
}
.worksCardArea .cardTag li:last-child:after{ content: normal;}

#works .topImgNext{
	margin:0 auto;
	position: relative;
	width: 100%;
}
#works .topImgNext #topImgScroll{
	width: 1.5em;
	margin: 0 auto;
	padding-bottom: 5%;
}
#works .topImgNext #topImgNextpage{
	position: absolute;
	top: 50%;
	left: calc( 50% - 12em );
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	padding-bottom: 5%;
}

#works .noChoice{ display: none; min-height: 800px;}
#works .noChoice div > div { margin-top: 5%;}
.cotTxt{ margin-right: 4%;}
.cotTxt span{
	background: #4EC44B;
    padding: 0.3em 1em;
    border-radius: 10px;
    color: #FFF;
    font-weight: bold;
    font-size: 137.5%;
}

/* SP */
@media screen and ( max-width:500px) {
	#works .slide{ padding: 0;}
	#works .sectionInner{     margin: 0 auto 20%; }
	#works h2 span.subTxt{ display: block;}
	#works nav li{ display: block; margin: 0.8em 0;}
	.worksCardArea .cardBox{ width: 100%; margin: 0 0 15%;}
	#works nav .worksTypeCheck input{ display: block;}

	#works .topImgNext #topImgNextpage {
        width: 36%;
        left: 0;
        transform: translateX 0;
        -webkit-transform: translateX 0;
        -ms-transform: translateX 0;
	}
	.cotTxt{ margin-right: 0%; width: 100%;}
	#works .sectionHeadArea > div { margin: 5% 0;}
}







/* works下層 */
#worksUnder{padding-top: 3.5em;}
#worksUnder .sectionInner{ max-width: calc( 1050px + 2em); width: 90%; margin: 0 auto; padding: 0 1em 8%;}
#worksUnder .sectionHeadArea{ padding: 7% 0 2%; margin: 0 auto;}
#worksUnder h2{}
#worksUnder h2 span.font-courier{ font-size: 312.5%; font-weight: bold; color: #4EC44B; margin-right: 0.5em;}
#worksUnder h2 span.subTxt{ font-weight: normal; font-size: 67%;  }

#worksUnder .breadcrumbsList{ margin-top: 5%;}
#worksUnder .breadcrumbsList li{ display: inline-block; position: relative; margin-right: 2em;}
#worksUnder .breadcrumbsList li:after,
#worksUnder .breadcrumbsList li:before{
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	right: -1.25em;
	width: 0.5em;
	height: 2px;
	background-color: #BABABA;
	-webkit-transform-origin: calc(100% - 1px) 50%;
	    -ms-transform-origin: calc(100% - 1px) 50%;
	        transform-origin: calc(100% - 1px) 50%;
}
#worksUnder .breadcrumbsList li::before {
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}
#worksUnder .breadcrumbsList li::after {
	-webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
#worksUnder .breadcrumbsList li:last-child{ margin-right: 0;}
#worksUnder .breadcrumbsList li:last-child:after,
#worksUnder .breadcrumbsList li:last-child:before{ content: normal;}
#worksUnder .breadcrumbsList .breadcrumbsAll{ font-size: 112.5%;}
#worksUnder .breadcrumbsList .breadcrumbsTag{ font-size: 112.5%;}
#worksUnder .breadcrumbsList .breadcrumbsTag div{ display: inline-block;}
#worksUnder .breadcrumbsList .breadcrumbsTag div:after{
	content: "／";
	display: inline-block;
	margin: 0 0.5em;
}
#worksUnder .breadcrumbsList .breadcrumbsTag div:last-child:after{ content: normal;}
#worksUnder .breadcrumbsList .breadcrumbsTile{ font-size: 87.5%; line-height: 2.5em;}

#worksUnder .worksContentsArea{ margin-top: 5%; background-color: #FFF; position: relative; border-radius: 2vh; padding: 5%; -webkit-box-shadow: 5px 5px 15px #91919178; box-shadow: 5px 5px 15px #91919178;}
#worksUnder .worksContentsArea:after{
	content: "";
	position: absolute;
	top: -5vw;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 10vw;
	height: 10vw;
	background: url("/wp-content/images/img_works_tape.png") no-repeat;
	background-size: cover;
	background-position: center top;

}
#worksUnder .worksContentsArea h3{
	font-size: 175%;
	margin: 3% 0 5%;
}
#worksUnder .worksContentsArea h3 span{
	display: inline-block;
	margin-bottom: 0.5em;
	background: -o-linear-gradient(transparent 95%, #4EC44B 5%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(95%, transparent), color-stop(5%, #4EC44B));
	background: linear-gradient(transparent 95%, #4EC44B 5%);
	padding-bottom: 0.2em;
}
.worksDetailBox > div{ width: 50%;}
.worksDetailBox > div:first-child{ border-right: 1px solid #999999; padding-right: 3%;}
.worksDetailBox > div:last-child{ padding-left: 3%;}


.worksDetailBox{ margin: 5% 0;}
.worksDetailBox dl{ margin: 0 0 5%;}
.worksDetailBox dt{ font-size: 112.5%; font-weight: 500;}
.worksDetailBox dt::before{
	content: '⚫︎';
	display: inline-block;
	color:#4EC44B;
	font-size: 75%;
	vertical-align: middle;
	margin-right: 0.5em;
}
.worksDetailBox dd{ word-break: break-all;}
.works-charge li { display: inline-block;}
.works-charge li:after { 
	content: "／";
	display: inline-block;
	margin: 0 0.5em;
}
.works-charge li:last-child:after{ content: normal;}
.works-url a:hover span{ color: #4EC44B;}
.works-url span:after{
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	vertical-align: middle;
	background: url("/wp-content/images/img_works_linkicon.png") no-repeat;
	background-size: cover;
	background-position: center top;
	margin: 0 0 0.1em 0.5em;
}
.worksAddBox{ background: #F7F7F7; padding: 8% 5%; margin-top: 5%;}
.works-summary dd{ white-space: pre-wrap;}
.addContentsbox{ margin: 0 0 5%; padding-bottom: 5%;  border-bottom: 1px solid #ccc;}
.addContentsbox p{ margin: 0 0 5%;}
.addContentsbox:last-child{ border: none; margin: 0; padding-bottom: 0; }
.addContentsbox .overFlow{ max-height: 600px; overflow-y: scroll;}
.addContentsbox .dm img{ width: 60%;}

#worksUnder .Btn a{ -webkit-transition: .5s; -o-transition: .5s; transition: .5s; padding: 0.8em 0; font-size: 120%; border-radius: 100vh; margin: 7% auto 0; display: block; width: 60%; background: #FFF; border: 1px solid #333333;}
#worksUnder .Btn a:link,
#worksUnder .Btn a:visited{ text-decoration: none; color: #333333;}
#worksUnder .Btn a:hover{background: #333333; color: #FFF; -webkit-transition: .5s; -o-transition: .5s; transition: .5s;  }


/* タブレット */
@media screen and ( max-width:800px) {
	.worksDetailBox > div{ width: 100%;}
	.worksDetailBox > div:first-child{ border: none; padding-right: 0;}
	.worksDetailBox > div:last-child{ padding-left: 0;}
	.addContentsbox .overFlow{ max-height: 350px;}
	
}

/* SP */
@media screen and ( max-width:500px) {
	#worksUnder .slide{ padding: 0;}
	#worksUnder .sectionInner{ padding: 8% 0em;}
	#worksUnder h2 span.subTxt{ display: block;}
	#worksUnder nav li{ display: block;}
	#worksUnder .Btn a{ width: 90%;}
}


/* contact */
#contact{ padding-top: 3.5em;}
#contact .fp-tableCell{ vertical-align: top;}
#contact .sectionInner{ max-width: calc( 1050px + 2em); width: 90%; margin: 0 auto; }
#contact .sectionHeadArea{ padding: 7% 0 2%; margin: 0 1em;}
#contact h2{}
#contact h2 span.font-courier{ font-size: 312.5%; font-weight: bold; color: #E2507D; margin-right: 0.5em;}
#contact h2 span.subTxt{ font-weight: normal; font-size: 67%;  }
.contactBox{ margin: 8% 0;}
.contactBox a{ -webkit-transition: .5s; -o-transition: .5s; transition: .5s; padding: 0.8em 0; font-size: 120%; border-radius: 100vh; margin: 7% auto; display: block; width: 60%; background: #FFF; border: 1px solid #333333;}
.contactBox a:link,
.contactBox a:visited{ text-decoration: none; color: #333333;}
.contactBox a:hover{background: #333333; color: #FFF; -webkit-transition: .5s; -o-transition: .5s; transition: .5s;  }


/* タブレット */
@media screen and ( max-width:800px) {

	
}

/* SP */
@media screen and ( max-width:500px) {
	#contact .slide{ padding: 0;}
	#contact .sectionInner{ margin: 10% auto 0;}
	#contact h2 span.subTxt{ display: block;}
	.contactBox a{ width: 90%;}

}

/* footer */
footer{ background: #000;}
footer p{ color: #FFF; font-size: 87.5%; padding: 0; margin: 0;}




/* タブレット */
@media screen and ( max-width:800px) {
	header{ height: 5.5em;}
	header .headerInner{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
	.headerTop{ width: 100%; margin: 1% auto; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
	.headerMenu{ width: 80%;}
	.headerMenu li a div{ }
	#front,
	#about,
	#works,
	#worksUnder,
	#contact{ padding-top: 5.5em;}

	
}
/* SP */
@media screen and ( max-width:500px) {
	header{ height: 4.5em;}
	.headerMenu li span{ font-size: 120%;}
	.headerMenu li a div{ }
	#front,
	#about,
	#works,
	#worksUnder,
	#contact{ padding-top: 4.5em;}
	.headerTop span{ padding: 0 0.2em;}
	#about h2 span.font-courier,
	#works h2 span.font-courier,
	#worksUnder h2 span.font-courier,
	#contact h2 span.font-courier{ font-size: 250%; }


	
}