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

/*勉強中なので単位が入り混じっててごめんなさい。なおせたらなおしてください。*/


html{
/*全体へのレイアウト指定*/
	/*rem指定の為の仮フォントサイズ*/
	font-size: 100px;
	background: #f5f6fa;
}
*,
	/*------初期設定のマージン・テキストスタイルの消去とボックスサイジングへの変更-----------*/
::before,
::after{
	padding:0;
	margin:0;
	box-sizing: border-box;
}img{
	max-width: 100%
}
ul{
	list-style:none;
}
a{
	color: inherit;
	text-decoration: none;
}
	/*全体のフォント指定*/
body{
	font-family: "YuGothic" , "Yu Gothic medium", "Hiragino Sans", "Meiryo", "sans-serif";
	font-size:0.16rem;
	color:#1F1F1F;
	line-height:1;
	margin: 0;
}


/*-------------ここから個別の指定-----------------*/

.header-inner{
	max-width: 12rem;
	height:120px;
	display:flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	margin-bottom:5px;
}
/*ナビゲーションメニュー*/
.menu-button{ /*スマホ用ハンバーガーメニュー*/
	display: none;
}
.menu{
	display:flex;
	flex-direction: column;
	height:1.20rem;
	justify-content: space-between;
	margin-left: auto;
    margin-right: auto;
	flex-grow: 1;
}
.header-logo{
	display: inline-block;
	width:1.40rem;
	align-self: center;
}
/*
スカーレットの店舗サイトへ紐づける為のボタン
*/
.href-scar{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
    max-width: 1.70rem;
    min-width: 1.50rem;
    min-height: 0.32rem;
    padding: 0.05rem;
    border: 0.01rem solid grey;
    border-radius: 0.18rem;
    background-color: rgba(0,0,0,0);
    position: relative;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    color: #222;
	margin:0 0 0 auto;
	box-shadow: 1px 2px 3px 1px rgba(6,0,1,0.1);
	transition:all 0.2s;
	}
.href-scar:hover{
	box-shadow: 1px 2px 10px 2px rgba(6,0,1,0.2);
	boeder-color: transparent;
}
.href-scar a{
	font-size:0.14rem
}
.href-scar::after{
	content:"";
	width:0;
	height:0;
	border: 6px solid;
	border-color:transparent transparent transparent #030303;
	position:absolute;
	right:30px
}

/*ここからナビゲーションメニュー*/
.nav-menu ul{
	display:flex;
	justify-content: space-around;
	align-self: flex-end;
	margin-left: auto;
	margin-right:auto;
	font-weight: bold;
	position: relative;
}
.nav-menu li{
	white-space:nowrap;
	font-size:0.21rem;
	margin:18px 15px 4px 15px; 
	display:inline-block;	
	padding:2px 20px; /*ホバー時のボタン大きくしたいがためのパディング*/
	transition:0.3s ease-in-out;
	
}

.nav-menu li:active{/*クリックでへこむ*/
	box-shadow: inset 3px 3px 3px 2px rgba(0, 0, 0, 0.3),
				inset -3px -3px 2px 2px #FFFFFF;
}
/*ここからファーストビュー*/
.first-view{
	height:70vh;
	background-image: url("../image/first-view.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/*ここから各項目名と枠
お問い合わせだけ文字数が多いので枠のサイズを変えるため別のclassで指定している
*/
h1{
	margin-top: 0.2rem;
	padding-top:0.23rem;
	text-align: center;
	font-size: 0.32rem;
}
/*項目名お問い合わせの位置の調整*/
.h-con{
	padding-top:0.33rem;
}
/*お問い合わせ以外の項目名の枠*/
.h-wrapper{
	border-radius: 0.1rem;
	margin:0 auto 0.5rem auto;
	padding: auto;
	width: 2.4rem;
	height: 1rem;
	box-shadow: inset 6px 6px 8px 0 rgba(0, 0, 0, 0.3),
				inset -7px -7px 8px 0 #FFFFFF;
}
/*お問い合わせの項目名の枠*/
.h-wrapper2{
	border:none;
	border-radius: 0.1rem;
	margin:0 auto 0.5rem auto;
	width: 300px;
	height: 120px;
	box-shadow: inset 6px 6px 5px 0 rgba(0, 0, 0, 0.3),
				inset -7px -7px 4px 0 #FFFFFF;
}
/*会社概要とファーストビューの間のマージン*/
h1.company{
	margin:0.5rem auto 0.5rem auto;
}
/*お問い合わせ以外の各項目名の下に引く黄色い下線*/
main h1::after{
	content:"";
	margin:0.1rem auto 0 auto;
	display: block;
	width:1.3rem;
	height: 8px;
	border-radius:4px;
	background: #FFCE00
}
/*お問い合わせの項目名の下にひく黄色い下線*/
main h1.h-con::after{
	content:"";
	margin:0.1rem auto 0 auto;
	display: block;
	width:2rem;
	height: 8px;
	border-radius:4px;
	background: #FFCE00
}

/*-----会社概要のテーブル---------*/
table.info {
	width:50vw;
	margin-left: auto;
	margin-right: auto;
	border-collapse:collapse;
	border:#707070 solid 3px;
	white-space: nowrap;
}
table th,table td{
	border: 2px solid #707070;
	padding:0.3rem 0.2rem;
}
table th{
	background-color: #FFEDA1;
}

/*------事業内容--------*/
#works{
	margin:1rem  8vw;
}
.contain{
	display:flex;
}
.works-left{
	position:relative;
	margin-left:4vw;
}
.works-right{
	margin-bottom:40px;
	text-align: center;
	display:flex;
	flex-direction:column;
}
.scarlet-icon{
	background:#f5f6fa;
	width:8vw;
	position:absolute;
	border-radius:8vw;
	box-shadow: 0.3vw 0.3vw 0.3vw 0 rgba(0, 0, 0, 0.4),
				-0.3vw -0.3vw 0.4vw 0.3vw #FFFFFF;
	top: -4vw;
	left:-4vw;
}
.scarlet-pic{
	border-radius: 6px;
	width:80vw;
}
.scarlet-title{
	margin-top:2vw;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	border-bottom: 1px solid #707070;
}
.scarlet-descrip{
	margin:0.2rem;
	margin-bottom:30px;
	text-align: left;
}
.btn-wrapper{
	margin-top:auto;/*ボタンの下揃え*/
}
.scarlet-button{ /*店舗ページへのジャンプボタン*/
	display: inline-block;
	font-weight: bold; 
	padding:0.1rem 0.4rem;
	box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3),
				-5px -5px 3px 2px #FFFFFF;
	background:linear-gradient(to right, #FFBA5A 0%,#ffde00 51%,#ff4485 100%);/*通常時とホバー時に変わる色のグラデーション*/
	background-size:200%;/*背景を二倍のサイズで作る*/
	transition:0.3s ease-in-out;
}

.scarlet-button::after{/*三角作りたい*/
	content:"";
	background-color: #030303;/*clip-pathでクリッピングするための背景のはずが三角の右の先っぽの部分だけ担当*/
 	clip-path: polygon(0 25%, 0% 75%, 100% 50%);/*背景をクリッピング*/
	border: 3px solid;/*三角の左端の部分だけ*/
	border-color:transparent transparent transparent #030303;/*上の行と二つで三角の一部*/
	
}
.scarlet-button:hover{/*マウスのホバーで色を変える*/
	background-position:right center;/*隠れていた右端のグラデーションを表示*/
}
.scarlet-button:active{
	box-shadow:inset 2px 2px 4px 2px rgba(0, 0, 0, 0.3),
				inset -2px -2px 3px 0px #FFFFFF;
}

/*-----アクセス-------*/
#access{
	margin:1rem auto;
}
.acc-contain{/*これがアクセス全体を囲むdiv*/
	display:flex;
	justify-content:center;
	margin:0 auto;
}
/*google mapのレイアウトに試行錯誤したので色々おかしいかもしれない*/
.acc-left{
	width: 45%;/*中のmapの為の領域作り？これがないと表示されない*/
	margin-left:25%;
}
.google-map{
	position:relative;
	width:100%;
	height:0px;
	padding-top:75%;/*4:3の縦横比にするための指定。縦の比÷横の比x100*/
}
.google-map iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.acc-right{
	width:45%;
	margin-right:10%;
}
.address{/*これ効いてる?*/
	display: flex;
	/*display:inline-block;*/
	padding:10px;
	flex-direction:column;
	height:100%;
	width:70%;
}
.second-p{
	margin-top:0.16rem;
}
.diamond{
	display:inline-block;
	background:#2F2F2F;
	width:0.12rem;
	height:0.12rem;
	transform:rotate(45deg);
}
.stations{
	display:inline-block;
}
.mapbtn-wrap{
	text-align: left;
	margin-top: auto;
}
.map-btn{
	white-space: nowrap;
	display:inline-block;
	margin-top: auto;
	margin:0.3rem;
	align-items:flex-end;
	font-weight: bold; 
	padding:0.1rem 0.4rem;
	box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3),
				-5px -5px 3px 2px #FFFFFF;
	background:linear-gradient(to right,#a7e4e5 0%,#a7b0e5 51%,#d0a7e5 100%);/*通常時とホバー時に変わる色のグラデーション*/
	background-size:200%;/*背景を二倍のサイズで作る*/
	transition:0.3s ease-in-out;
}
.map-btn::after{/*三角作りたい*/
	content:"";
	background-color: #030303;/*clip-pathでクリッピングするための背景のはずが三角の右の先っぽの部分だけ担当*/
 	clip-path: polygon(0 25%, 0% 75%, 100% 50%);/*背景をクリッピング*/
	border: 3px solid;/*三角の左端の部分だけ*/
	border-color:transparent transparent transparent #030303;/*上の行と二つで三角の一部*/
}
.map-btn:hover{/*マウスのホバーで色を変える*/
	background-position:right center;/*隠れていた右端のグラデーションを表示*/
}
.map-btn:active{
	box-shadow:inset 2px 2px 4px 2px rgba(0, 0, 0, 0.3),
				inset -2px -2px 3px 0px #FFFFFF;
}

/*----------お問い合わせフォームコピペ-------------*/

.Form {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

@media screen and (max-width: 480px) {
  .Form {
    margin-top: 40px;
  }
}
.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #FFCE00;
  color: #232323;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 200px;
  display: block;
  letter-spacing: 0.05em;
  background: #FFCE00;
  color: #232323;
  font-weight: bold;
  font-size: 20px;
  border-style: none;
	box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3),
				-5px -5px 3px 2px #FFFFFF;
}
.Form-Btn:active{
	box-shadow:inset 2px 2px 2px 0px rgba(0, 0, 0, 0.3),
				inset -1px -1px 2px 2px #FFFFFF;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}
/*------------ここまでコピペ---------------*/

#contact{
	margin:1rem auto;
}

/*-----------ここからフッター-----------------*/
.page-top{
	text-align: right;
	margin-right:5%;
	font-weight:600;
}
.up{
	width:18px;
}
footer{
	background-color: #FFCE00;
	padding-top:0.30rem;
	padding-bottom: 0.15rem;
	haight:266px;
}
.ft-contain{
	display:flex;
	justify-content: center;
}
.ft-left{
	display:flex;
	width:50%;
	align-items:center;
	
}
.footer-logo{
	width:2rem;
}
.left-name{
	height:1rem;
	text-align: center;
}
.com-name{
	font-size:3vw;
	text-align: left;
}
.ft-right{
	display:flex;
	flex-direction: column;	
	justify-content: space-around;
	margin:60px 0;
	font-weight: 600;
}

.copy{
	text-align:center;
}

/*------ここからメディアクエリ--------*/
@media(max-width: 960px){ /*スマホ向け */

	.nav-menu ul{
	display: block;
	text-align: center;
	}
	.nav-menu li{
		margin-top:20px;
	}
	.header{
		position:fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	header{
		position:fixed;
		top:0;
		left:0;
		right:0;
		background-color:#f5f6fa;
		height:50px;
		z-index: 10;
		box-shadow:0 3px 6px rgba(0,0,0,0.2);
	}
	.header-inner{
		padding-left:20px;
		padding-right:20px;
		height:100%;
		position:relative;
	}
	.header-logo{
		margin-left:10%;
		width:50px;
	}
	.nav-menu{
		position:absolute;
		top:100%;
		left:0;
		right:0;
		color:#262626;
		background-color:#FFCE00;
		padding-top:30px;
		padding-bottom:50px;
		display:none;
		transform: translateY(100vh);
		transition:all .3s linear;
	}
	.nav-menu.is-show{
		display:block;
		transform:translateY(0)
	}
	.href-scar{
		display:none;
	}
	.menu-button{
		display:block;
		width:40px;
		height: 34px;
		background-image:url("../image/menu-btn.png");
		background-size:70% ;
		background-position: center;
		background-repeat:no-repeat;
		background-color:transparent;
		border:none;
		border-radius:0;
		outline:none;
		position: absolute;
		bottom:6px;
		right:10%;
	}
	.nav-menu li:active{/*クリックでへこむ*/
	box-shadow: inset 3px 3px 3px 2px rgba(167, 94, 0, 0.3),
				inset -3px -3px 2px 2px #FFE163;
	}
	
	.first-view{
		height: calc(70vh - 50px);
		background-image: url("../image/first-view-phone.png");
		align-items: flex-start;
		margin-top: 50px;
	}
	.h-wrapper{
		width:190px;
		height:90px;
	}
	.h-wrapper2{
		width:210px;
		height:90px;
		margin: auto;
		padding-bottom:1.05rem;
	}
	main h1.h-con::after{
	content:"";
	width:1.8rem;
}
	h1{
		font-size:27px;
	}
	table th,table td{
		padding:0.1rem 0.2rem;
	}
	.contain{
		display:block;
		}
	.acc-contain{
		display:block;
	}
	.first-p{
		width:290px;
		margin:0 auto;
	}
	.second-p{
		margin-top:30px;
		display:flex;
		justify-content:center;
	}
	.diamond{
		margin-right:5px;
	}

	.acc-left{
		width:80%;
		margin:0 auto;
	}
	.acc-right{
		width:80%;
		margin:0 auto;
	}
	.address{
		display:block;
		width:100%;
		margin:20px auto 0 auto;
		align-items:center;
	}
	.mapbtn-wrap{
		text-align:center;
	}
	.map-btn{
		align-items: center;
		padding:0.1rem 0.2rem;
	}
	.ft-contain{
		display:block;
}
	.ft-right p{
		display:block;
		font-size:16px;
		width:57%;
		margin-left: auto;
		margin-right: auto;
		padding-left:8px; 
	}
	.ft-left{
		margin:0 5% 0 15%;
		width:80%;
		display:flex;
		flex-direction: row;
		align-items:center;
		justify-content:center;
	}
	.footer-logo{
		width:100%;
	}
	.left-name{
		width:260%;
		margin-left: 10px;
		margin-right: auto;
		
	}
	.left-name h1{
		font-size:40px;
		margin-top:-10px;
}
	.inc{
		font-size:0.28rem;
	}
	.inc::after{
		content: "\A" ;
		white-space: pre;
	}
	.calet{
		font-size:0.4rem;
	}
	
	
	
	
	
}
@media(min-width: 750px){ /*PC向け */
	
.nav-menu li:hover{
	margin:18px 15px 0px 15px; 
	padding:2px 20px;
	border-radius:3px;
	box-shadow: 3px 3px 3px 2px rgba(0, 0, 0, 0.3),/*ホバー時のシャドウ*/
				 -2px -2px 1px 1px #FFFFFF;/*ホバー時の光彩*/
}




















/*ーーーーーーーーここからメディアクエリーーーーーーーーーーーーー*/
/*@media(max-width: 960px){ /* PC向け */
/*	html{
		fontsize:60px
	}
	body{
		font-size:calc((0.16rem*100/50)*0.9)
	}
	h1{
		font-size:calc((0.3rem*100/50)*0.66)
	}
	body{ /*上のフォントサイズの試験的な修正*/
	/*	font-size:16px;
	}
	.contents{
		padding-top:50px;
	}
	.header-inner{
		background: #ffffff;
		height:50px;
		position:relative;
		top: 0;
		left: 0;
		right: 0;
		x-index:10;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
		padding-left: 20px;
		padding-right: 20px;
	}
	.header-logo{
		width:60px;
		margin-left:40px;
	}
	.nav-menu{
		position: absolute;
		top:100%;
		left: 0%;
		right: 0%;
		color:#1E1E1E;
		background-color:#FFCE00;
		padding:20px 0 40px 0;
		display:none;
}
	.header-site-menu.is-show{
		display:block;
	}
	.nav-menu ul{
		display:block;
		text-align: center;
	}
	.menu-button{
		display:block;
		width:40px;
		height: 34px;
		background-image:url("../image/menu-btn.png");
		background-size:70% ;
		background-position: center;
		background-repeat:no-repeat;
		background-color:transparent;
		border:none;
		border-radius:0;
		outline:none;
		position: absolute;
		bottom:6px;
		right:60px;
	}
	.href-scar{
		display:none;
	}
	.nav-menu li{
		margin:20px 0 0 0;
	}
	table.info{
		width:65vw;
}
	.contain{
		display:block;
		width:60vmin;
		margin:0.2rem auto;
	}
	#works{
		margin:0 auto;
	}
	.acc-contain{
	display:block;
}*/
	/*.google-map{/*問題有*/
		/*position:relative;
		width:100%;
		height:100%;*/
/*	}*/
	/*.google-map iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 75%;
		height: 75%;/*ここまで*/
	/*}
}*/

/*@media(max-width: 560px){  /* スマホ向け*/
	/*body{
		font-size:16px;
	}
	.contain{
		display:block;
	}
}*/