@charset "UTF-8";

html{}
body{
	width: 100%;
	margin: 0;
	padding: 0;
	font-family:"Noto Sans Japanese";
	background-color: rgba(255,255,255,1.00);
}
p{
	line-height: 175%;
}

/*----------header----------*/
header{
	width: 100%;
	padding: 50px 0 30px;
	background-image: url(https://www.webbird.net/img/bgimg2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
header div{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
header div a{
	width: 40%;
	max-width: 400px;
	display: block;
}
header div a h1{
	margin: 0;
	padding: 0;
}
header div a img{
	width: 100%;
}
header div ul{
	width: 65%;
	margin: 50px 0;
	padding: 0 0 0 10px;
	list-style-type: none;
}
header div ul li{
	margin: 15px 0;
}
header div ul li a{
	color: rgba(65,65,65,1.00);
	font-size: 1.1em;
	text-decoration: none;
	transition: 0.3s;
}
header div ul li a:hover{
	color: rgba(150,150,150,1.00);
	transition: 0.3s;
}
.newtab:hover{
	color: rgba(247,181,44,1.00);
	transition: 0.3s;
}
header div p{
	font-size: 1.1em;
	color: rgba(65,65,65,1.00);
}
header h2{
	color: rgba(190,190,190,1.00);
	font-size: 4em;
	transform: rotate(-90deg);
	position: absolute;
	top: 190px;
	right: -230px;
}



/*----------common----------*/
main{
	width: 100%;
}
.contentswrap_b{
	padding: 75px 0 100px;
	background-color: rgba(252,252,252,1.00);
	border-top: 3px solid rgba(247,181,44,0.50);
	box-sizing: border-box;
}
.contentswrap_w{
	padding: 75px 0 100px;
	background-color: rgba(255,255,255,1.00);
	border-top: 3px solid rgba(247,181,44,0.50);
	box-sizing: border-box;
}
.contentsbox_b{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	color: rgba(75,75,75,1.00);
}
.contentsbox_w{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	color: rgba(65,65,65,1.00);
}
.contentsbox_b h3, .contentsbox_w h3{
	margin: 35px 0;
	padding: 0;
	font-size: 2.6em;
	position: relative;
}
.contentsbox_b h3::before, .contentsbox_w h3::before{
	content: "";
	width: 65px;
	height: 5px;
	background-color: rgba(247,181,44,1.00);
	position: absolute;
	top: -10px;
	left: 0;
}
.toptext{
	margin: 0 0 50px;
	padding: 0;
	display: block;
}
.toptext a{
	color: rgba(60,135,233,1.00);
	text-decoration: none;
}
.toptext a:hover{
	color: rgba(65,65,65,1.00);
}
.more{
	width: 30%;
	margin: 0 auto;
	padding: 5px 0;
	color: rgba(60,135,233,1.00);
	font-size: 0.8em;
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	border: 2px solid rgba(60,135,233,1.00);
	display: block;
	box-sizing: border-box;
	cursor: pointer;
	transition: 0.3s;
}
.more:hover{
	color: rgba(255,255,255,1.00);
	background-color: rgba(100,100,100,1.00);
	border: 2px solid rgba(100,100,100,1.00);
	transition: 0.3s;
}
.toggle{
	display: none;
}



/*----------webbird----------*/
.webbirdup .toptext:last-child{
	margin: 0;
}



/*----------works----------*/
.worksbox{
	width: 100%;
	margin: 0 auto 150px;
}
.worksimglink{
	width: 60%;
	margin: 0 auto;
	color: rgba(65,65,65,1.00);
	text-decoration: none;
	display: block;
	transition: 0.3s;
}
.worksimglink:hover{
	opacity: 0.8;
	transition: 0.3s;
}
.worksimglink img{
	width: 100%;
}
.worksimglink h4{
	margin: 40px 0 20px;
	font-size: 1.4em;
	text-align: center;
}
.workstextbox{
	width: 90%;
	margin: 0 auto 10px;
	padding: 0;
	border-top: 1px solid rgba(65,65,65,1.00);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
.workstextbox p{
	width: 67%;
}
.workstextbox ul{
	width: 23%;
}
.workstextbox ul li{
	list-style-type: square;
}
.works_a{
	width: 20%;
	margin: 0 auto;
	padding: 6px 0;
	color: rgba(65,65,65,1.00);
	font-size: 0.8em;
	text-align: center;
	text-decoration: none;
	border: 2px solid rgba(65,65,65,1.00);
	border-radius: 30px;
	display: block;
	transition: 0.3s;
}
.works_a:hover{
	color: rgba(255,255,255,1.00);
	background-color: rgba(65,65,65,1.00);
	transition: 0.3s;
}
.workscardbox{
	color: rgba(65,65,65,1.00);
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
}
.workscard{
	width: 21%;
	margin: 0 2% 40px;
	padding: 15px;
	border: 1px solid rgba(200,200,200,1.00);
	box-sizing: border-box;
}
.workscard div{
	width: 100%;
	height: 165px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.workscard p{
	margin: 15px 0 0 0;
	padding: 15px 0 0 0;
	font-size: 0.9em;
	border-top: 3px solid rgba(247,181,44,1.00);
}
#wc01{background-image: url(https://www.webbird.net/img/wc01.jpg);}
#wc02{background-image: url(https://www.webbird.net/img/wc02.jpg);}
#wc03{background-image: url(https://www.webbird.net/img/wc03.png);}
#wc04{background-image: url(https://www.webbird.net/img/wc04.jpg);}
#wc05{background-image: url(https://www.webbird.net/img/wc05.jpg);}
#wc06{background-image: url(https://www.webbird.net/img/wc06.jpg);}
#wc07{background-image: url(https://www.webbird.net/img/wc07.jpg);}



/*----------flow----------*/
.flowbox{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
}
.flowcontents{
	width: 40%;
	margin: 0 5% 50px;
	padding: 10px 20px;
	background-color: rgba(255,255,255,1.00);
	border: 3px solid rgba(200,200,200,1.00);
	border-right: 6px solid rgba(200,200,200,1.00);
	border-bottom: 6px solid rgba(200,200,200,1.00);
	box-sizing: border-box;
	position: relative;
}
.flowcontents::after{
	width: 35px;
	height: 3px;
	background-color: rgba(247,181,44,1.00);
	transform: rotate(-45deg);
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
}
.number{
	width: 32px;
	height: 32px;
	padding: 2.5px 0 0;
	font-size: 1.2em;
	font-weight: 600;
	color: rgba(65,65,65,1.00);
	text-align: center;
	background-color: rgba(247,181,44,1.00);
	border-radius: 0%;
	box-sizing: border-box;
	position: absolute;
	top: -18px;
	left: -35px;
}
.flowcontents h4{
	margin: 10px 0 10px;
	font-size: 1.3em;
}
.flowcontents p{
	font-size: 0.9em;
	line-height: 175%;
}
.flowcontents p a{
	color: rgba(60,135,233,1.00);
	text-decoration: none;
}
.flowcontents p a:hover{
	color: rgba(65,65,65,1.00);
}



/*----------price----------*/
.pricebox{
	margin: 0 0 100px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-around;
}
.pricebox div{
	width: 40%;
	padding: 10px 20px;
	background-image: url(https://www.webbird.net/img/bgimg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid rgba(150,150,150,1.00);
	box-sizing: border-box;
}
.pricebox div img{
	width: 50%;
	margin: 0 auto;
	display: block;
}
.pricebox div h4{
	margin: 10px 0 5px;
	font-size: 1.4em;
	text-align: center;
}
.pricebox div h5{
	margin: 0 0 15px;
	font-size: 1em;
	text-align: center;
}
.pricebox div p{
	margin: 0 0 20px;
	padding: 15px 0 0;
	font-size: 0.9em;
	border-top: 1px solid rgba(65,65,65,1.00);
}
.pricebox div ul{
	margin: 0 0 20px;
	padding: 0;
	font-size: 0.9em;
}
.pricebox div ul li{
	margin: 0 0 5px;
	text-align: center;
	list-style-type: none;
}
.optionlist{
	width: 90%;
	margin: 0 auto 50px;
}
.optionlist h5{
	margin: 0;
	font-size: 1.5em;
}
.optionlist table{
	width: 100%;
	margin: 0 auto 20px;
	font-size: 0.9em;
}
.optionlist table tr{}
.optionlist table tr:nth-child(odd){
	background-color: rgba(230,230,230,1.00);
}
.optionlist table tr:first-child{
	background-color: rgba(200,200,200,1.00);
}
.optionlist table th{
	padding: 10px 0 10px 10px;
	text-align: left;
}
.optionlist table td{
	width: 30%;
	padding: 10px 0;
	text-align: center;
}
.optionlist p{
	margin: 0;
	color: rgba(100,100,100,1.00);
	font-size: 0.8em;
}



/*----------contact----------*/
.contactbox{
	padding: 0 0 40px;
}
.contactbox div{
	margin: 0 0 20px;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
}
.contactbox div p{
	width: 20%;
	margin: 0;
	padding: 2px 0 0;
	color: rgba(65,65,65,1.00);
}
.input{
	width: 80%;
	padding: 5px 0 5px 5px;
	font-size: 0.9em;
	border: 1px solid rgba(200,200,200,1.00);
	box-sizing: border-box;
	resize: none;
	-webkit-appearance: none;
}
.submitbutton{
	width: 35%;
	margin: 50px auto 0 auto;
	padding: 7.5px 0;
	color: rgba(65,65,65,1.00);
	font-size: 0.8em;
	background-color: rgba(255,255,255,1.00);
	border: 2px solid rgba(65,65,65,1.00);
	box-sizing: border-box;
	display: block;
	cursor: pointer;
	-webkit-appearance: none;
	transition: 0.3s;
}
.submitbutton:hover{
	color: rgba(255,255,255,1.00);
	background-color: rgba(247,181,44,1.00);
	border: 2px solid rgba(247,181,44,1.00);
	transition: 0.3s;
}



/*----------about----------*/
.aboutbox{
	width: 80%;
	margin: 0 auto;
	border-spacing: 0;
}
.aboutbox tr{}
.aboutbox tr td{
	margin: 0;
	padding: 15px 0 15px 10px;
	font-size: 0.9em;
	border-bottom: 1px solid rgba(200,200,200,1.00);
}



/*----------footer----------*/
footer{
	width: 100%;
	margin: 50px 0 0;
	padding: 40px 0;
	background-color: rgba(65,65,65,1.00);
}
.footer_wrap{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
.totop{
	width: 50px;
	height: 40px;
	margin: -65px auto 50px;
	background-color: rgba(65,65,65,1.00);
	display: block;
	position: relative;
}
.totop::before{
	width: 20px;
	height: 5px;
	background-color: rgba(255,255,255,1.00);
	transform: rotate(-40deg);
	content: "";
	position: absolute;
	top: 14px;
	left: 9px;
}
.totop::after{
	width: 20px;
	height: 5px;
	background-color: rgba(255,255,255,1.00);
	transform: rotate(40deg);
	content: "";
	position: absolute;
	top: 14px;
	right: 9px;
}
.footer_logo{
	width: 35%;
	margin: 0 auto 35px;
	display: block;
}
.footer_logo img{
	width: 100%;
}
.cr{
	margin: 0 auto;
	padding: 0;
	color: rgba(250,250,250,1.00);
	text-align: center;
}



/*----------animation----------*/
.fadeinanimation {
 	animation-fill-mode:both;
 	animation-duration:1.6s;
 	animation-name: fadeinanimation;
 	visibility: visible !important;
}
@keyframes fadeinanimation {
 0% { opacity: 0;}
 100% { opacity: 1;}
}

.fadeinanimationUp00, .fadeinanimationUp1, .fadeinanimationUp2, .fadeinanimationUp3, .fadeinanimationUp4, .fadeinanimationUp5, .fadeinanimationUp6, .fadeinanimationUp7, .fadeinanimationUp8, .fadeinanimationUp9{
	animation-fill-mode:both;
 	animation-name: fadeinanimationUp;
 	visibility: visible !important;
}
.fadeinanimationUp00 {
 	animation-duration:1.2s;
}
.fadeinanimationUp1 {
 	animation-duration:1.4s;
}
.fadeinanimationUp2 {
 	animation-duration:1.6s;
}
.fadeinanimationUp3 {
 	animation-duration:1.8s;
}
.fadeinanimationUp4 {
 	animation-duration:2s;
}
.fadeinanimationUp5 {
 	animation-duration:2.2s;
}
.fadeinanimationUp6 {
 	animation-duration:2.4s;
}
.fadeinanimationUp7 {
 	animation-duration:2.6s;
}
.fadeinanimationUp8 {
 	animation-duration:2.8s;
}
.fadeinanimationUp9 {
 	animation-duration:2.5s;
}
@keyframes fadeinanimationUp {
 0% { opacity: 0; transform: translateY(50px);}
 100% { opacity: 1; transform: translateY(0);}
}

.fadeinanimationUp{
	nimation-fill-mode:both;
 	animation-duration:0.8s;
 	animation-name: fadeinanimationUp;
 	visibility: visible !important;
}



/*----------contactForm----------*/
.contents_contactform{
	width: 100%;
	margin: 0 0 100px 0;
	padding: 100px 0 0;
	overflow: hidden;
}
.topbox_contactform{
	width: 80%;
	max-width: 1000px;
	margin: 0 auto 25px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.quotation{
	width: 100%;
	margin: 85px auto 0;
}
.quotationtable{
	width: 100%;
}
.quotationtable tr{}
.quotationtable th{
	width: 25%;
	padding: 10px 0 10px 5px;
	text-align: left;
	border-left: 1px solid rgba(200,200,200,1.00);
	border-bottom: 1px solid rgba(200,200,200,1.00);
}
.quotationtable td{
	padding: 10px 0 10px 5px;
	border-left: 1px solid rgba(200,200,200,1.00);
	border-bottom: 1px solid rgba(200,200,200,1.00);
}
.errormsg{
	width: 100%;
}
.quotation form{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}
.tobutton{
	width: 20%;
	margin: 75px 5%;
	padding: 10px 0;
	font-size: 1em;
	color: rgba(51,51,51,1.00);
	background-color: rgba(255,255,255,1.00);
	border: 2px solid rgba(75,75,75,1.00);
	cursor: pointer;
	transition: 0.3s;
	-webkit-appearance: none;
}
.tobutton:hover{
	color: rgba(247,247,247,1.00);
	background-color: rgba(75,75,75,1.00);
	transition: 0.3s;
}
.contactform_submit:hover{
	color: rgba(247,247,247,1.00);
	background-color: rgba(247,181,44,1.00);
	border: 2px solid rgba(247,181,44,1.00);
	transition: 0.3s;
}









@media only screen and ( max-width : 1024px ) {
	body{font-size: 0.9em;}
	header h2{top: 190px; right: -210px;}
	.number{padding: 3px 0 0; top: -16px;}
}

@media screen and ( max-width : 768px ){
	header div ul{width: 80%;}
	.workstextbox p{width: 65%; font-size: 0.9em;}
	.workstextbox ul{width: 25%; font-size: 0.9em;}
	.workscard{width: 30%; margin: 0 1.65% 30px; padding: 10px;}
	.workscard div{height: 130px;}
	.pricebox div p{font-size: 0.8em;}
	.pricebox div ul{font-size: 0.8em;}
	.optionlist table{font-size: 0.8em;}
	.optionlist p{font-size: 0.7em;}
}

@media only screen and ( max-width : 736px ){
	body{font-size: 0.8em;}
	header{padding: 30px 0 0;}
	header div ul{margin: 20px 0;}
	header div ul li{margin: 12px 0;}
	header h2{font-size: 3.5em; top: 120px; right: -160px;}
	.contentswrap_b, .contentswrap_w{padding: 30px 0 75px;}
	.toptext{margin: 0 0 35px;}
	.worksbox{margin: 0 auto 100px;}
	.worksimglink{width: 50%;}
	.worksimglink h4{margin: 20px 0 10px; font-size: 1.4em;}
	.workscard p{margin: 10px 0 0 0; padding: 10px 0 0 0;}
	.flowcontents{margin: 0 5% 40px;}
	.flowcontents::after{display: none;}
	.number{width: 25px; height: 25px; top: -15px; left: -28px;}
	.pricebox{margin: 0 0 50px;}
	.pricebox div img{width: 80%;}
	.optionlist{margin: 0 auto 25px;}
	.contactbox{padding: 0 0 20px;}
	footer{margin: 50px 0 0; padding: 20px 0 30px;}
	.totop{width: 50px; height: 40px; margin: -50px auto 30px;}
	.contents_contactform{margin: 0 0 50px 0; padding: 25px 0 0; font-size: 0.9em;}
	.quotation{margin: 30px auto 0;}
	.quotationtable{font-size: 0.9em;}
	.tobutton{width: 30%; margin: 40px 5%;}
}

@media only screen and ( max-width : 667px ){
	header div ul{margin: 15px 0;}
	header div ul li{margin: 10px 0;}
	.contentsbox_b h3, .contentsbox_w h3{margin: 25px 0;}
	.worksimglink{width: 65%;}
	.workstextbox p{width: 65%;}
	.workstextbox ul{width: 27%;}
	.workscard div{height: 120px;}
	footer{margin: 30px 0 0; padding: 20px 0 30px;}
	.totop{width: 50px; height: 40px; margin: -50px auto 30px;}
}

@media only screen and ( max-width : 568px ){
	header div ul{width: 90%; margin: 20px 0; padding: 0 0 0 30px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;}
	header div ul li{width: 33%; margin: 12px 0;}
	header div ul li:last-child{width: 60%;}
	header div ul li a{width: 100%;}
	header h2{font-size: 3em; top: 85px; right: -135px;}
	.contentswrap_b, .contentswrap_w{padding: 30px 0 60px;}
	.more{width: 40%;}
	.workstextbox{width: 100%;}
	.works_a{width: 30%;}
	.flowbox{display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center;}
	.flowcontents{width: 90%; margin: 0 0 25px;}
	.number{width: 32px; height: 32px; padding: 5.5px 0 0; border-radius: 100%; top: 4px; left: -18px;}
	.pricebox{justify-content: space-between;}
	.pricebox div{width: 49%;}
	.optionlist{width: 100%;}
	.optionlist table th{padding: 10px 0 10px 5px;}
	.submitbutton{width: 40%;}
	.aboutbox{width: 90%;}
	.footer_logo{width: 40%; margin: 0 auto 25px;}
}

@media only screen and ( max-width : 480px ){
	.workstextbox{display: flex; flex-wrap: nowrap; flex-direction: column; align-items: center; justify-content: center;}
	.workstextbox p{width: 100%;}
	.workstextbox ul{width: 100%; margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;}
	.workstextbox ul li{width: 50%;}
	.works_li_longtext{width: 100% !important;}
	.workscard{width: 45%; margin: 0 2.5% 30px;}
	.pricebox div{padding: 10px 10px;}
	.optionlist table td{width: 25%;}
	.contactbox div p{width: 25%;}
	.input{width: 75%;}
	.aboutbox{width: 100%;}
}

@media only screen and ( max-width : 414px ){
	header{background-position: 70% top;}
	header div a{width: 65%;}
	header div ul{width: 60%; margin: 60px 0; padding: 0 0 0 35px; display: block;}
	header div ul li{width: auto; margin: 25px 0;}
	header div ul li:last-child{width: auto;}
	header h2{font-size: 3.5em; top: 130px; right: -160px;}
	header div p{padding: 0 0 15px;}
	.contentswrap_b, .contentswrap_w{padding: 50px 0 75px;}
	.worksimglink{width: 100%;}
	.workstextbox ul{margin: 10px 0 20px;}
	.works_a{width: 50%;}
	.more{width: 70%;}
	.flowcontents{width: 100%; border: 2px solid rgba(200,200,200,1.00); border-right: 4px solid rgba(200,200,200,1.00); border-bottom: 4px solid rgba(200,200,200,1.00);}
	.number{padding: 6px 0 0; top: -23px; left: -10px;}
	.pricebox{display: flex; flex-wrap: nowrap; flex-direction: column; align-items: center; justify-content: center;}
	.pricebox div{width: 100%; margin: 0 0 30px; padding: 10px 20px;}
	.pricebox div img{width: 60%;}
	.pricebox div h4{font-size: 1.5em;}
	.pricebox div h5{font-size: 1.1em;}
	.pricebox div p{font-size: 1em;}
	.pricebox div ul{font-size: 1em;}
	.optionlist table{font-size: 0.9em;}
	.optionlist table tr{padding: 18px 0; border-top: 1px solid rgba(165,165,165,1.00); display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start;}
	.optionlist table tr:first-child{background-color: rgba(180,180,180,1.00);}
	.optionlist table th{width: 100%; padding: 0 0 10px; text-align: center;}
	.optionlist table td{width: 50%; padding: 0;}
	.optionlist table tr:first-child th{display: none;}
	.optionlist table tr:nth-child(5) td, .optionlist table tr:nth-child(6) td{width: 100%;}
	.contactbox div{width: 100%; margin: 0 auto 20px auto; display: flex; flex-wrap: nowrap; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
	.contactbox div p{width: 100%; padding: 0;}
	.input{width: 100%;}
	.submitbutton{width: 70%;}
	.aboutbox tr td:first-child{width: 30%;}
	.footer_logo{width: 60%;}
	.topbox_contactform{width: 90%;}
	.tobutton{width: 40%;}
}

@media only screen and ( max-width : 375px ){
	header div ul{margin: 50px 0; padding: 0 0 0 30px;}
	.workstextbox ul{width: 98%;}
}

@media only screen and ( max-width : 320px ){
	header div ul{margin: 30px 0; padding: 0 0 0 25px;}
	.workstextbox ul{width: 88%; padding: 0;}
	.workstextbox ul li{width: 100%;}
	.works_li_longtext{width: 100% !important;}
	.workscard{width: 90%; margin: 0 auto 30px;}
	.aboutbox tr td:first-child{width: 35%;}
}