@charset "utf-8";

#mainVisual {width: 100%;height: 100vh;position: relative;background: url(../images/mainVisual.png) no-repeat center bottom / 60% #c30d23;}
#mainVisual #catch {width: 80%;max-width: 1000px;position: absolute;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
#mainVisual #catch h1 {margin: 0 auto 3%;text-align: center;color: #000;font-size: 5rem;line-height: 1.5;}
#mainVisual #catch h1 span {font-weight: 800;}
#mainVisual #catch h1::first-letter {color: #c30d23;font-size: 8rem;}
#mainVisual #catch p {padding: 0 20%;color: #222;font-size: 1.6rem;font-weight: 600;}
@media only screen and (max-width: 896px) {
#mainVisual {height: 60vh;}
#mainVisual #catch h1 {font-size: 4rem;}
#mainVisual #catch p {padding: 0 15%;}
}
@media only screen and (max-width: 568px) {
#mainVisual {height: 80vh;background: url(../images/mainVisual_sp.png) no-repeat center bottom / 70% auto #fff;}
#mainVisual #catch {width: 90%;top: 40%;}
#mainVisual #catch h1 {margin: 0 auto 8%;font-size: 3.6rem;line-height: 1.2;}
#mainVisual #catch h1::first-letter {font-size: 5rem;color: #000;}
#mainVisual #catch p {padding: 0;font-size: 1.4rem;}
}

#philosophy {width: 100%;margin: auto;padding: 1.5% 0 2%;background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #c30d23), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #c30d23), color-stop(0.75, #c30d23), color-stop(0.75, transparent), to(transparent));-webkit-background-size: 100px 100px;background-color:  #c30d23;color: #fff;justify-content: center;align-items: center;line-height: 5.5em;}
#philosophy h2 {margin: -5% 0 0;font-size: 1.8rem;}
#philosophy h3 {width: 100%;text-align: center;font-size: 2rem;font-weight: 600;line-height: 0;}
#philosophy p {margin: 0 0 2%;color: #fff;font-size: 10rem;font-weight: 600;}
@media only screen and (max-width: 896px) {
#philosophy {padding: 1% 0 3%;}
#philosophy p {font-size: 8rem;}
}
@media only screen and (max-width: 568px) {
#philosophy {padding: 4% 0 6%;}
#philosophy {text-align: center;line-height: 4em;}
#philosophy h2 {width: 100%;margin: 0 0 2%;font-size: 1.4rem;line-height: 1;}
#philosophy h3 {font-size: 1.2rem;}
#philosophy p {width: 100%;margin: 0 0 6%;font-size: 5rem;}
}

#mainManu {width: 100%;padding: 10vh 0 0;text-align: center;background: #fff}
#mainManu h2 {margin: 0 0 2%;text-align: center;font-size: 4.5rem;font-weight: 600;line-height: 1.2;}
#mainManu h2 small {margin: 0 0 -40px;display: block;color: #c30d23;font-size: 2rem;letter-spacing: 0.2em;}
#mainManu h2 span {font-size: 8rem;font-weight: 600;}
#mainManu h2 + p {margin: 0 0 5%;padding: 0 5%;}
#mainManu ul {text-align: center;justify-content: space-between;}
#mainManu ul li {width : calc(100% / 3);padding: 3% 0 8%;position: relative;overflow: hidden;}
#mainManu ul li figure {width: 50%;margin: 0 auto 1%;text-align: center;}
#mainManu ul li h3 {margin: 0 auto 3%;font-size: 2.4rem;font-weight: 600;line-height: 1.3;}
#mainManu ul li h3 small {display: block;color: #c30d23;font-size: 1.4rem;letter-spacing: 0.2em}
#mainManu ul li p {margin: 0 auto 3%;padding: 0;font-size: 1.2rem;line-height: 1.8;}
#mainManu ul li a {display: block;}
#mainManu ul li a button {width: 70%;padding: 4% 20% 4% 15%;position: absolute;bottom: 10px;left: 50%;display: block;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);border: 1px solid #000;font-size: 2rem;font-weight: 600;}
#mainManu ul li a button::before {content: "";width: 20px;height: 20px;position: absolute;right: 5%;top: 30%;display: inline-block;border: 1px solid #000;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%}
#mainManu ul li a button::after {content: "";width: 5px;height: 5px;position: absolute;right: 8%;top: 42%;display: inline-block;border: 1px solid;border-color: #000 #000 transparent transparent;transform: rotate(45deg)}
#mainManu ul li:nth-child(odd) {background: #f2f2f2;}
#mainManu ul li:nth-child(even) {background: #fff;}
@media only screen and (max-width: 896px) {
#mainManu {padding: 6vh 0 0}
#mainManu h2 {font-size: 4rem;}
#mainManu h2 small {margin: 0 0 -30px;}
#mainManu h2 span {font-size: 7rem;}
#mainManu ul li {width : calc(100% / 2);padding: 3% 0 10%;}
#mainManu ul li:nth-child(1), #mainManu ul li:nth-child(4) {background: #f2f2f2;}
#mainManu ul li:nth-child(2), #mainManu ul li:nth-child(3) {background: #fff;}
#mainManu ul li h3 small {margin: 0;}
#mainManu ul li a button {bottom: 0;}
#mainManu ul li a button::before {top: 25%;}
#mainManu ul li a button::after {top: 40%;}
}
#mainManu ul li a button:hover{
    background: #c30d23;
    color: #fff;
    opacity: 1;
}
#mainManu ul li a button:hover::after{
    border-color: #fff #fff transparent transparent;
}
#mainManu ul li a button:hover::before{
    border: 1px solid #fff;
}
#mainManu ul li a:hover{
    opacity: 1;
}
@media only screen and (max-width: 568px) {
#mainManu h2 {margin: 0 0 5%;font-size: 2.4rem;}
#mainManu h2 small {margin: 0 0 -20px;font-size: 1.2rem;}
#mainManu h2 span {font-size: 5rem;}
#mainManu h2 + p {font-size: 1.4rem;}
#mainManu ul li {padding: 5% 0 15%;}
#mainManu ul li h3 {font-size: 1.6rem;}
#mainManu ul li p {font-size: 1rem;}
#mainManu ul li figure {width: 60%;margin: 0 auto 3%;}
#mainManu ul li a button {width: 80%;padding: 5% 15% 5% 10%;font-size: 1.4rem;}
#mainManu ul li a button::before {top: 20%;}
#mainManu ul li a button::after {right: 12%;top: 40%;}
}

#works_blog {padding: 8% 0 5%;justify-content: center;}
#works_blog h2 {margin: 0 0 2%;text-align: center;font-size: 3rem;font-weight: 600;line-height: 1.5;}
#works_blog h2 small {margin: 0 0 -30px 3%;display: block;color: #c30d23;font-size: 1.6rem;}
#works_blog h2 span {font-size: 5rem;font-weight: 600;}
#works_blog ul + p {width: 60%;position: absolute;bottom: 0;left: 50%;display: block;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;}
#works_blog ul + p a {padding: 2% 0;display: block;background: #888;color: #fff}
#works_blog ul + p a:hover{
    background: #c30d23;
    opacity: 1;
}
#works {width: 45%;margin: 0 2%;padding: 0 0 10%;position: relative;}
#works ul {margin: auto;justify-content: space-between;text-align: center;line-height: 1;}
#works ul li {width: 48%;margin: 0 0 1.5%;}
#works ul li a {display: block;background: #fff;color: #333;}
#works ul li a figure {}
#works ul li a figure img {width: 100%;height: 170px;object-fit: cover;}
#works ul li a figure figcaption {padding: 5% 0;font-weight: 600;}
#works ul li{
    position: relative;
}
#works ul li a{
    position:relative;
	background: transparent;
	display:block;
	position: relative;
	transition:all 0.3s ease-in-out;
}
#works ul li a:hover{
    opacity: 1;
}
#works ul li a:before,
#works ul li a:after {
	content: '';
	width: 18px;
	height: 18px;
	border-color: #c30d23;
	box-sizing: border-box;
	border-style :solid;
	display: block;
	position: absolute;
	transition: all 0.3s ease-in-out;
}
#works ul li a:before {
	top: 0;
	left: 0;
	border-width: 2px 0 0 2px;
	z-index: 5;
}
#works ul li a:after {
	bottom: 0;
	right: 0;
	border-width: 0 2px 2px 0;
}
#works ul li a:hover:before,
#works ul li a:hover:after {
	width: calc(100%);
	height: calc(100%);
	border-color: #c30d23;
}

#blog {width: 45%;margin: 0 2%;padding: 0 0 10%;position: relative;}
#blog ul {margin: auto;justify-content: space-between}
#blog ul li {width: 48%;margin: 0 0 3%;background: #fff;}
#blog ul li a {color: #212121;}
#blog ul li a figure {width: 100%;margin: 0 auto 2%;}
#blog ul li a figure img {width: 100%;height: 150px;object-fit: cover;}
#blog ul li a figure figcaption {width: 90%;margin: 10px auto 0;}
#blog ul li a figure figcaption .date {color: #c30d23;line-height: 1.5;}
#blog ul li a figure figcaption .blog-tit {width: 100%;font-weight: 600;line-height: 1.5;}
#blog ul li a figure figcaption ul.category {margin: 0 0 0 2%;padding: 0;justify-content: flex-start;font-size: 1.2rem;line-height: 1;}
#blog ul li a figure figcaption ul.category li {width: auto;margin: 0 5px 0 0;padding: 3px 5px;display: inline-block;border: 1px solid #000;}
#blog ul li a p {width: 90%;margin: 0 auto;text-align: left;font-size: 1.4rem;line-height: 1.7;}
@media only screen and (max-width: 896px) {
#works_blog ul + p {width: 80%;margin: 10px auto 0;}
#works {width: 90%;margin: 0 auto 40px;}
#blog {width: 90%;margin: 0 auto;}
#works_blog ul + p {width: 40%;}
#works_blog ul + p a {padding: 2%;}
}
@media only screen and (max-width: 568px) {
#works_blog {padding: 12% 0 8%;}
#works_blog h2 {margin: 0 0 5%;font-size: 2.6rem;}
#works_blog h2 small {margin: 0 0 -20px;font-size: 1.2rem;}
#works_blog h2 span {font-size: 4rem;}
#works_blog ul + p {width: 100%;}
#works_blog ul + p a {padding: 3% 0;font-size: 1.6rem;}
#works {padding: 0 0 20%;}
#works ul li a {font-size: 1.4rem;}
#works ul li a figure img {height: 100px;}
#blog {padding: 0 0 20%;}
#blog ul li {width: 100%;margin: 0 0 5%;}
#blog ul li a figure figcaption .blog-tit {font-size: 1.6rem;}
#blog ul li a p {font-size: 1.2rem;line-height: 1.5;}
}
#blog ul li{
    position: relative;
}
#blog ul li a{
    padding: 0 0 3%;
    position:relative;
	background: transparent;
	display:block;
	position: relative;
	transition:all 0.3s ease-in-out;
    box-sizing: border-box;
    height: 100%;
}
#blog ul li a:hover{
    opacity: 1;
}
#blog ul li a:before,
#blog ul li a:after {
	content: '';
	width: 18px;
	height: 18px;
	border-color: #c30d23;
	box-sizing: border-box;
	border-style :solid;
	display: block;
	position: absolute;
	transition: all 0.3s ease-in-out;
}
#blog ul li a:before {
	top: 0;
	left: 0;
	border-width: 2px 0 0 2px;
	z-index: 5;
}
#blog ul li a:after {
	bottom: 0;
	right: 0;
	border-width: 0 2px 2px 0;
}
#blog ul li a:hover:before,
#blog ul li a:hover:after {
	width: calc(100%);
	height: calc(100%);
	border-color: #c30d23;
}

#contact {padding: 0 0 5%;background: #fff;}
#contact h2 {margin: 5% 0 2%;text-align: center;font-size: 4.5rem;font-weight: 600;line-height: 1.2;}
#contact h2 small {margin: 0 0 -40px;display: block;color: #c30d23;font-size: 2rem;letter-spacing: 0.2em;}
#contact h2 span {font-size: 8rem;font-weight: 600;}
#contact .lead{
    text-align: center;
    margin: 0 0 3%;
}
#contact h3 {margin: 0 auto 2%;padding: 2% 8%;display: table;text-align: center;background: #c30d23;color: #fff;font-size: 1.8rem;}
#contact h3 + p {text-align: center;line-height: 2;}
#contact .req {color: #c30d23;}
#contact form {text-align: center;}
#contact form dl {max-width: 1000px;margin: 5% auto 0;text-align: left;background: #fff;border-top: 5px solid #fff1eb;border-bottom: 5px solid #fff1eb;}
#contact form dl dt {width: 30%;padding: 2% 5%;}
#contact form dl dt:nth-of-type(even) {background: #fff1eb;}
#contact form label span {padding: 0 0 0 5%;position:relative;cursor: pointer;}
#contact form label span::before {content: "";width: 20px;height: 20px;display: block;position: absolute;top: 0;left: 0;border: 1px solid #eee;background: #fff;border-radius: 5px;}
#contact form .check:checked + span {color: #d01137;}
#contact form .check:checked + span::after {content: "";width: 10px;height: 18px;display: block;position: absolute;top: -3px;left: 5px;transform: rotate(40deg);border-bottom: 3px solid #c30d23;border-right: 3px solid #c30d23;}
#contact form .check {display: none;}
#contact form dl dd {width: 70%;padding: 2% 5%;}
#contact form dl dd:nth-of-type(even) {background: #fff1eb;}
#contact form dl dd label {display: block;line-height: 1.5;}
#contact form dl dd input[type="text"], #contact form dl dd input[type="tel"], #contact form dl dd input[type="email"] {width: 100%;padding: 2%;border: 1px solid #eee;font-family: 'Noto Sans JP', sans-serif;}
#contact form dl dd textarea {width: 100%!important;height: 200px!important;padding: 5px 10px;border: 1px solid #eee;font-family: 'Noto Sans JP', sans-serif;}
#contact form dl dd ::placeholder {color: #ccc;}
#contact form input[type="submit"] {margin: 3% auto 0;padding: 2% 10% 2%;display: table;background: #c30d23;color: #fff;border: 0 none;cursor: pointer;border-radius: 0;font-size: 2rem;font-family: 'Noto Sans JP', sans-serif;}
@media only screen and (max-width: 896px) {
#contact h2 {font-size: 4rem;}
#contact h2 small {margin: 0 0 -30px;}
#contact h2 span {font-size: 7rem;}
#contact form dl dd label {line-height: 2;}
}
@media only screen and (max-width: 568px) {
#contact {padding: 12% 0 8%;}
#contact h2 {margin: 0 0 5%;font-size: 2.4rem;}
#contact h2 small {margin: 0 0 -30px;font-size: 1.2rem;}
#contact h2 span {font-size: 5rem;}
#contact h3 {margin: 0 auto 5%;padding: 3% 8%;font-size: 1.4rem;line-height: 1.5;}
#contact h3 + p {font-size: 1.2rem;line-height: 1.5;}
#contact form dl dt {width: 100%;padding: 2% 3% 0;}
#contact form dl dd {width: 100%;padding: 1% 3% 2%;}
#contact form label span {padding: 0 0 0 10%;}
#contact form input[type="submit"] {margin: 5% auto 0;font-size: 1.6rem;}
}

.mw_wp_form .horizontal-item + .horizontal-item {margin-left: 0!important;}


/*制作事例カルーセル*/
.result_list{width: 100%;padding: 10vh 0 0;text-align: center;background: #fff}
.result_list h2 {margin: 0 0 2%;text-align: center;font-size: 3rem;font-weight: 600;line-height: 1.5;}
.result_list h2 small {margin: 0 0 -30px 3%;display: block;color: #c30d23;font-size: 1.6rem;}
.result_list h2 span {font-size: 5rem;font-weight: 600;}
.result_list .slick-slide{
    margin: 0 10px;
    background: #f2f2f2;
}
.result_list ul li a {display: block;background: #f2f2f2;color: #333; text-align: center;}
.result_list ul li a figure {margin: 0;}
.result_list ul li a figure img {width: 100%;height: 170px;object-fit: cover;}
.result_list ul li a figure figcaption {padding: 5% 0;font-weight: 600; line-height: 1.2;}

.result_list .slick-slide{
    position: relative;
}
.result_list .slick-slide a{
    position:relative;
	background: transparent;
	display:block;
	position: relative;
	transition:all 0.3s ease-in-out;
}
.result_list .slick-slide a:hover{
    opacity: 1;
}
.result_list .slick-slide a:before,
.result_list .slick-slide a:after {
	content: '';
	width: 18px;
	height: 18px;
	border-color: #c30d23;
	box-sizing: border-box;
	border-style :solid;
	display: block;
	position: absolute;
	transition: all 0.3s ease-in-out;
}
.result_list .slick-slide a:before {
	top: 0;
	left: 0;
	border-width: 2px 0 0 2px;
	z-index: 5;
}
.result_list .slick-slide a:after {
	bottom: 0;
	right: 0;
	border-width: 0 2px 2px 0;
}
.result_list .slick-slide a:hover:before,
.result_list .slick-slide a:hover:after {
	width: calc(100%);
	height: calc(100%);
	border-color: #c30d23;
}