@charset "utf-8";

*, ::before, ::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}



img {
	vertical-align: bottom;
	max-width: 100%;
}

html {
	font-size: 62.5%;
	scroll-padding-top: 66px;
	scroll-behavior: smooth;
}

body {
	font-family: Sawarabi Gothic;
	line-height: 1.8;
	font-size: 1.4rem;
	color: #544739;
}

.sawarabi-gothic-regular {
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

a {
	text-decoration: none;
}


ul {
	list-style-type: none;
}

.text-small {
	font-size: 1.8rem;
	color: #859A93;
	letter-spacing: 0.5rem;
}

.container {
	margin: 0 auto;
	padding-top: 66px;
	max-width: 100rem;
	text-align: center;
}
.nav  {
	position: absolute;
	top: 50px;
	left: 50px;
	color: #859A93;
}
.nav ul li a {
	color: #859A93;
	line-height: 4rem;
	letter-spacing: 0.8rem;
	font-size: 1.6rem;
}
.nav ul li a:hover {
	color: #544739;
}

.mv-name {
	width: 26rem;
	height: 14rem;
	text-align: center;
	font-size: 1.8rem;
	line-height: 1.4;
	position: absolute;
	top: 2rem;
	left: calc(50% - 13rem);
	bottom: 3rem;
	letter-spacing: 1.15rem;
}


h2 {
	color: #859A93;
	font-size: 3.2rem;
	text-align: center;
	font-weight: normal;
	margin: 0 auto;
	letter-spacing: 1.1rem;
}
.subtext {
	color: #544739;
	font-size: 1.4rem;
	text-align: center;
	width: 100%;
	margin-top: -1rem;
}
.senn {
	width: 40%;
	height: 0.3rem;
	margin-top: 3rem;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]margin-bottom: 1rem; */
	background-color: #859A93;
}
.work-flexbox {
	display: flex;
	justify-content: space-between;
	margin: 10rem auto;
}
.workbox {
	margin: 0 2rem;
	width: 100%;
	justify-content: center;
	height: auto;
}

.work-name {
	text-align: center;
	font-size: 2.4rem;
}
.work-type {
	font-size: 1.2rem;
	background-color: #A8BEB7;
	padding: 0.6rem 0.5rem;
	border-radius: 0.3rem;
	margin: 0 auto;
	width: 13rem;
	text-align: left;
}
.worktitle {
	text-align: center;
}


@keyframes updown1 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(25px);
}
100% {
transform: translateY(0);
}}
.buttun {
	width: 16rem;
	height: 4rem;
	margin: -5rem auto 5rem;
	border: 0.2rem solid #859A93;
	padding: 1.2rem 0;
	align-items: center;
}	
.buttun:hover {
	border-color: #BAA983;
}
.buttun-p {
	text-align: center;
	font-size: 1.4rem;
	color: #859A93;
	line-height: 1;
	width: 100%;
	letter-spacing: 0.5rem;
}
.pagetop {
	position: fixed;
	right: 1rem;
	bottom: 6rem;
	z-index: 1;
}
.footer-flex {
	display: flex;
	justify-content: space-between;
}

footer {
	width: 100%;
	height: 16rem;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-color: #A8BEB7;
}

.footer-nav {
	display: flex;
	width: 50rem;
	justify-content: space-between;
	margin-left: 5rem;
	position: absolute;
	left: 5rem;
	bottom: 5rem;
}
.footer-nav a {
	color: #FFFCF7;
	letter-spacing: 0.3rem;
}
.footer-nav a:hover {
	color: #544739;
}

.copyright {
	color: #FFFCF7;
	font-size: 1.2rem;
	position: absolute;
	right: 5rem;
	bottom: 2rem;
}
.mv-copy-res {
	text-align: center;
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	right: 2rem;
	font-size: 1.2rem;
	color: #859A93;
	display: none
}
.mv-copy-res p span {
	font-size: 2rem;
	color: #544739;
	
}
.works-works {
	margin: 10rem 0 0;
}


.work-name {
	font-size: 1.4rem;
	width: 100rem;
}
.item {
	margin: 0 auto;
	width: 100rem;
	text-align: center;
	height: 200rem;
}

.work1-name{
	text-align: center;
	font-size: 2rem;
	margin-top: 2rem;
            }

.kannpu{
	margin: 5rem auto;
	padding: 5rem 3rem;
	background-color: #F7F6F6;
	max-width: 100%;
}
h3 {
	text-align: center;
	font-size: 2rem;
	color: #859A93;
	font-weight: normal;
}
.work-table {
	width: 80%;
	/* [disabled]height: auto; */
	text-align: left;
	margin: 0 auto 3rem;
	border-collapse: separate;
	background-color: #F7F6F6;
}
.work-senn {
	border-top: 0.2rem solid #859A93;
	margin: 0 auto;
	width: 80%;
}

tbody tr td {
	border: none;
	padding: 0.5rem 2rem;
}
.work-haikei-text {
	height: auto;
	margin: 0 auto;
	text-align: center;
	max-width: 100%;
}
section {
	margin: 1rem 3rem 8rem;
}
.color-box {
	margin: 1rem;
	width: 25%;
	text-align: center;
}
.color-img {
	background-color: #ea9a95;
	width: 100%;
	margin: 2rem auto;
	height: 50%;
}

.color-img2 {
	background-color: #eaddc8;
	margin: 2rem auto;
	width: 100%;
	height: 50%;
}
.color-img3 {
	background-color: #345475;
	margin: 2rem auto;
	width: 100%;
	height: 50%;
}
.senn-2 {
	width: 100%;
	height: 1px;
	margin-right: auto;
	margin-left: auto;
	background-color: #859A93;
}
.color-flex {
	display: flex;
	width: 70%;
	margin: 0 auto 5rem;
	justify-content: space-between;
}


.color-box p {
	font-size: 1.2rem;
	color: #544739;
	line-height: 2rem;
}
h4 {
	color: #859A93;
	font-size: 1.8rem;
	margin: 2rem auto;
	font-weight: normal;
}
.kadai-list {
	padding: 0 auto;
	text-align: center;
}
.yajirushi {
	font-size: 4rem;
	color: #859A93;
}
.secin-box {
	margin-top: 5rem;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]margin-bottom: 5rem; */
	max-width: 95%;
}

.soft-flex {
	display: flex;
	width: 65%;
	margin: 5rem auto;
	height: auto;
	padding-left: 3rem;
	padding-right: 3rem;
}
.soft-box p {
	margin-bottom: 0px;
	margin-top: 3rem;
}
.soft-box {
	width: 25rem;
	margin: 1rem;
	height: auto;
}
tbody tr th {
	background-color: #C8E0D8;
	margin-left: 0px;
	padding-left: 1rem;
	font-weight: normal;
}
.kannpu img {
	min-width: 70%;
}


.show{
  opacity: 0;										
  transform: translateY(100px);	
}

.show.fade-in {
  opacity: 1;										
  transform: translateY(0);			
  transition: 1s;								
}

.contact-bg {

	margin: 20px auto 0;
}

.contact-message {
    text-align: center;
    font-size: 14px;
    line-height: 2;
    margin-bottom: 50px;
}

.message-notice {
    color: #c10811;
    font-size: 14px;
}

.essential {
    background: #c10811;
    color: #fafafa;
    font-size: 12px;
    padding: 0 10px;
    font-weight: normal;
    margin-left: 10px;
}

.contact-area {
    background: #fafafa;
    padding: 90px;
    margin: 100px auto;
    width: 1000px;
}

.contact-table {
    width: 100%;
}

.table-list {
    display: flex;
    justify-content: space-between;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
    width: 100%;
    margin-bottom: 40px;
}

.table-list th {
    font-size: 13px;
    font-weight: bold;
    width: 250px;
    text-align: left;
}

.table-list-address {
    flex-wrap: wrap;
}

.table-list-address .input-area {
    margin-bottom: 10px;
}

.input-area {
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
    padding: 0 10px;
    border: none;
    width: 550px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #c4c4c4;
}

.table-list td {
    font-size: 13px;
    width: calc(100% - 250px);
}

input::placeholder {
    color: #bfbfbf;
    font-size: 12px;
    font-weight: bold;
}

textarea {
    border: none;
    width: 550px;
    height: 200px;
    padding: 0;
    border: 1px solid #c4c4c4;
    resize: vertical; /* 横方向のみサイズを固定する */
}

textarea::placeholder {
    color: #bfbfbf;
    font-size: 12px;
}

input[type="text"] {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.contact-area .text {
    font-size: 13px;
    text-align: center;
    margin-bottom: 100px;
}

.contact-area .text a {
    color: #000;
    border-bottom: 1px solid #000;
    transition: all .3s;
    text-decoration: none;
}

.contact-area .text a:hover {
    border-bottom: 1px solid #777;
    padding-bottom: 5px;
    color: #777;
}

.submit-button {
    box-sizing: border-box;
    position: relative;
    display: block;
    margin: 30px auto 0;
    background-color: #e4eeef;
    cursor: pointer;
    border: 1px solid #e4eeef;
    color: #000;
    text-align: center;
    text-decoration: none;
    line-height: 1.5;
    outline: none;
    -webkit-transition: all .3s;
    transition: all .5s;
    padding: 20px 100px;
}

.submit-button:hover {
    background: #cae1e3;
    color: #000;
    border: 1px solid #cae1e3;
}


@media(max-width:1200px) {
    .contact-area {
        width: 80%;
        padding: 60px;
    }
}

@media(max-width:1024px) {
    .contact-area {
        padding: 50px 15px;
    }

    .table-list th {
        width: 180px;
    }

    .table-list td {
        width: 100%;
    }

    .input-area {
        width: 500px;
        height: 40px;
    }

    textarea {
        width: 500px;
        height: 200px;
    }

    .contact-message {
        margin-bottom: 30px;
    }

    .contact-area .text {
        margin-bottom: 30px;
    }
}


@media(max-width:834px) {
    .contact-bg {
        margin: 50px auto 0;
        padding: 50px 0;
    }

    .contact-area {
        margin: 50px auto;
        padding: 50px 20px;
    }

    .check-box label {
        width: 100%;
    }

    .input-area {
        width: 100%;
        height: 30px;
    }

    textarea {
        width: 100%;
        height: 200px;
    }

    .table-list {
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .table-list th {
        font-size: 12px;
        width: 200px;
        margin-bottom: 10px;
    }

    .table-list td {
        font-size: 12px;
    }

    .table-list td {
        width: 100%;
    }

    .contact-message {
        font-size: 13px;
    }

    .contact-area .text {
        font-size: 13px;
    }
}

@media (max-width:640px) {
    .contact-message {
        text-align: left;
    }

    .contact-area .text {
        text-align: left;
    }
}

@media(max-width:320px) {
    .input-area {
        width: 100%;
    }

    textarea {
        width: 100%;
    }
}


@media (max-width:1000px){

	
.nav-button {
	width: 40px;
	height: 40px;
	margin-left: auto;
	position: relative;
	z-index: 10;
	/* [disabled]opacity: 1; */
	/* [disabled]top: 2rem; */
	/* [disabled]right: 2rem; */
}	
	
.nav-button span {
	width: 20px;
	height: 2px;
	background-color: #544739;
	position: absolute;
	left: 8px;
}	
	
	
.nav-button span:nth-child(1) {
  top: 9px;
}	
	
	
.nav-button span:nth-child(2) {
  top: 17px;
}	
	
	
	
.nav-button span:nth-child(3) {
  top: 25px;
}
	
nav {
	width: 100%;
	position: relative;
	/* [disabled]left: 0rem; */
	padding: 0;
	/* [disabled]top: 0rem; */
}
	
	
nav ul {
	max-width: 1000px;
	margin: 0 auto;
	font-size: 24px;
	width: 100%;
	position: absolute;
	top: -5rem;
	left: -5rem;
	text-align: center;
	padding: 5rem 0;
	color: #FFFFFF;
	background-color: #FFFCF7;
	z-index: 5;
}	

	
nav {
	opacity: 0;
	visibility: hidden;
}	
	
.menu-open nav {
  opacity: 1;
  visibility: visible;
}	
	
	
.menu-open .nav-button span:nth-child(1) {
  top: 17px;
  transform: rotate(315deg);
}	
	
	
.menu-open .nav-button span:nth-child(2) {
  width: 0;
  left: 50%;
}
	
	
.menu-open .nav-button span:nth-child(3) {
  top: 17px;
  transform: rotate(-315deg);
}	

}	


@media (max-width:800px){
	
.mv-copy {
   display: none;
}	
	
.mv-copy-res {
  display:inline;	
 }
	
  tbody tr td {
  font-size: 1.4rem;
}
	
 .work-haikei-text {
  font-size: 1.4rem;
}	

	
	
	

	
	
	

@media (max-width:640px){


	
.mv-name {
	width: 23rem;
	height: 12rem;
    font-size: 2rem;
	left: calc(50% - 11rem);
}
	
.work-name {
	font-size: 1.2rem;	
}
	
.footer-nav {
    width:38rem;
	margin:0 2rem -4rem;
	display: block;
}	
	
.footer-nav a {
    font-size: 1.4rem;
	letter-spacing: 0rem;
	line-height: 1.5rem;
	
}
	
	
	
	.color-box p {
	font-size: 1.2rem;
    line-height: 1.8rem;
}
	
		
    .work-table th, .work-table td {
	display: block;
	text-align: center;
}
	
h2 {
	font-size: 2rem;	
}	
	
.work1-name{
	font-size: 1.5rem;
	margin-top: 2rem;
            }	
	
.mv-name {
font-size: 1.2rem;
bottom: 1rem;	

}
	
.text-small {
	font-size: 1.2rem;
}
	
.pagetop {
	width:2rem;
	height: auto;
}	
	
}