@charset "UTF-8";
/* CSS Document */

html {
	height: 100%;
	width: 100%;
	max-width: 100% !important;
}
@media (max-width: 599px){
	html {
	font-size: calc(14 / 16 * 1rem);
}
}
/*タブレットサイズに適用*/
@media (max-width:1023px) and (min-width:600px){
		html {
	font-size: calc(15 / 16 * 1rem);
}
}


body {
	font-family: 'Noto Sans JP', sans-serif;
	color: #001C31;
	font-size: calc(16 / 16 * 1rem);
	line-height: 1.8;
	font-weight: 400;
	height: 100%;
	max-width: 100%;
	overflow-x:hidden;
}
.en { 
	font-family: "Jost", sans-serif;
		font-style: normal;
	font-weight:500;
}

@media (max-width: 599px){
	.try_btn a {
	bottom: 10px;
		right: 10px;
	width: 90px;
	height: 90px;
		top:auto;
	}
}

.btn a:hover {
	color: #fff;
	background-color:#FFB100;
}

p {
	margin-bottom: 20px;
}


a:hover, li:hover {
	color: #FF9D00;
}
.center {
	width: 100%;
	text-align: center;
}



#wrapper {
	width: 100%;
	  min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
    position: relative;/* ←相対位置 */
    padding-bottom: 201px; /* ←フッターの高さを指定 */
    box-sizing: border-box;
    /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}
@media (max-width: 845px){
	#wrapper {
    padding-bottom: 270px; /* ←フッターの高さを指定 */
}
}

header {
	background: #FFF url("../img/main.jpg") no-repeat bottom center;
	background-size: 100%;
	height: 100vh;
	padding: 30px;
}
h1 {
	  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
	font-style: normal;
	font-weight:500;
	line-height: 1;
    margin-bottom: 5px;
}
header p {
	line-height: 1.5;
}
header .content {
	width: 100%;
	justify-content: flex-start;
}
header .content .logo {
	margin-right: 40px;
}
	header .main  {
		width: 260px;
		margin: 25vh auto 0;
}


@media (max-width: 845px){
	header {
	background-size: 300%;
}
		header .main  {
		width: 50%;
			margin: 20vh auto 0;
}
			header .main img {
		width: 100%;
}

}


	#about {
	background: #F2F2F2 url("../img/about_bg.svg") no-repeat left top;
		padding: 100px 0;
}
	#works {
	padding: 100px 0 0 ;
	background: url("../img/works_bg.svg") no-repeat right top;
}
	#price {
	padding: 0 0 120px;
	background: url("../img/price_bg.svg") no-repeat right top;
}
	#contact {
	padding: 100px 0;
	background: #F2F2F2 url("../img/contact_bg.svg") no-repeat right top;
}


@media (min-width: 1200px){
.content {
	width: 1100px;
	margin: 0 auto;
}
}
@media (max-width: 1199px){
.content {
	width: 90%;
	margin: 0 auto;
}
}
.content {
	display: flex;
	justify-content: space-between;
}
#contact .content {
    flex-direction: column;
}
.content .left, .content .right {
 width: 45%;
}
#about .content .left {
 width: 35%;
}
#about .content .right {
 width: 65%;
}
#about .content .left img {
	width: 100%;
	height: auto;
}
@media (max-width: 845px){
	.content {
	flex-direction: column;
}
	.content .left, .content .right, #about .content .left, #about .content .right {
 width: 100%;
}
	#about, #works, #price, #contact {
			padding: 50px 0;
	}
	#about .content .left img {
	width: 80%;
	height: auto;
		padding-left: 20%;
}
}
h2 {
		font-size: calc(50 / 16 * 1rem);
	font-weight: 400;
	text-align: center;
	margin-bottom: 50px;
}
@media (max-width: 845px){
h2 {
		font-size: calc(40 / 16 * 1rem);
	margin-bottom: 10px;
}
}

h3 {
	 font-family: "Jost", sans-serif;
  font-weight: 500;
  font-style: normal;
	font-size: calc(30 / 16 * 1rem);
	margin: 20px 0;
}


#works .splide .splide__slide img {
	width: 100%;
}
h4 {
	font-size: calc(18 / 16 * 1rem);
	margin-bottom: 20px;
	font-weight: 500;
}
#price .a_right {
	text-align: right;
	font-family: "Jost", sans-serif;
  font-weight: 500;
  font-style: normal;
	font-size: calc(22 / 16 * 1rem);
}
#price .yen {
	font-size: calc(14 / 16 * 1rem);
	padding-left: 5px;
}
#price .left p.a_right, #price table td {
	border-bottom: solid thin #001C31;
	padding-bottom: 10px;
}
#price table {
	width: 100%;
	    border-spacing: 0;
}
#price table td {
	padding-top: 20px;
}
#contact h2 {
	margin-bottom: 30px;
}

#contact .content .line {
	margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: solid 1px;
}
#contact table {
	margin: 0 auto;
}

#contact table th {
	padding: 10px;
	width: 150px;
	font-weight: normal;
	text-align: left;
}
#contact table td input {
	background: #fff;
	border: solid thin #001C31;
	padding: 8px;
    width: 400px;
    margin: 15px 0;
}
#contact table td textarea {
		background: #fff;
	border: solid thin #001C31;
	padding: 8px;
    width: 400px;
    margin: 15px 0;
	height: 200px;
}

.btn {
	font-weight: 400;
	text-align: center;
	align-items: center;
	background-color: #001C31;
	color: #fff;
	font-size: calc(22 / 16 * 1rem);
	padding: 10px 100px;
	margin: 50px auto;
}
.btn:hover { background-color: #FF9D00;
	transition : 1s;
}
#submit {
    text-align: center;
    width: 100%;
}
@media (max-width: 845px){
#contact table th {
	padding:10px 0;
	width: 20%;
}
#contact table td input {
    width: 100%;
}
#contact table td textarea {
    width: 100%;
	height: 200px;
}
}

footer {
	background-color: #001C31;
	padding: 40px 40px 5px;
}
footer .content {
	width: 100%;
	padding-bottom: 40px;
}
footer .content .f_logo {
	width: 100px;
}
footer li {display: inline;
    vertical-align: top;
    padding-left: 40px;
	font-family: "Jost", sans-serif;
		font-style: normal;
	font-weight:500;
	line-height: 1;
	padding-bottom: 20px;
}
footer li a img {
	padding:10px;
}
footer li a {
	color: #fff;
}
footer p {
	color: #fff;
	    font-size: 13px;
    text-align: center;
}



@media (max-width: 845px){
	footer li {display:block;
	}
	footer .content {
		flex-direction: row;
		    justify-content: flex-start;
}
}
#mail header, #thanks header {
background: none;
	height: auto;
}
#mail header .main, #thanks header .main {
    width: 160px;
    margin: 50px auto;
}
#mail header .main img, #thanks header .main img {
    width: 100%;
}
.formTable {
	width: 400px;
    margin: 50px auto;
    text-align: left;
}
@media (max-width: 450px){
.formTable {
	width: 100%;
	font-size: calc(18 / 16 * 1rem);
}
	#mail header .main, #thanks header .main {
    width: 100px;
    margin: 50px auto 30px;
}
}
.formTable th {
	font-weight: normal;
    padding: 10px;
}
#formWrap {
	padding: 0 5%;
}
#mail .btn {
	padding: 10px 50px;
    margin: 20px;
}
#mail .btn_r {
	background: #797979;
}#mail .btn_r:hover {
	background: #3B3B3B;
}
#mail footer {
	margin-top: 100px;
}
#thanks #contents {
 padding: 5%;
	    width: 90%;
    text-align: center;
}
footer{
    position: absolute;/* ←絶対位置 */
    bottom: 0;
	width: 100%;
}#thanks .btn {
	display:inline-block;
}
#thanks .btn a {
	color: #fff;
}
@media (max-width: 450px){
	#thanks .btn {
	padding: 10px 20px;
}
}