/* 以下、スマホ対応コード　*/
@media screen and (max-width:480px) {

	/*　画面サイズが480px以下の場合ここの記述が適用される　*/
	wrapper {
			width: 100%;
			margin: 0 auto;
		}

	*{
		margin: 0;
		padding: 0;
	}

	li{/*リストのナカグロなくす、リスト横並び*/
		list-style:none;
		font-family: Arial, Helvetica, "sans-serif";
		float:left;
	}

	/* プライス　表に関する処理 */
	table {
		border-collapse:  collapse; /* セルの線を重ねる */
	}
	th,td {
		padding: 8px 10px;      /* 余白指定 */
	}
	th {
		font-weight: normal;
	}
	tr:nth-child(odd) {
		background-color:  #ddd;    /* 背景色指定 */
	}

	/* プロフィール　表に関する処理 */
	dl{
	  display:flex;
	  flex-wrap: wrap;
	  border-top: none;
	}
	dt{
	  width: 16%;
	  padding: 13px 10px 4px 13px;
	  box-sizing: border-box;
	}
	dd{
	  padding: 10px 5px 5px 10px;
	  margin: 0;
	  border-left: 1px solid #ccc;
	  width: 80%;
	  box-sizing: border-box;
	}
	@media (max-width: 300px) {
	  dl{
		flex-flow: column nowrap;
	  }
	  dt,
	  dd{
		width: 100%;
	  }
	  dd{
		border-left: none;
	  }
	}

	/*タグによって異なる文字サイズや太さをリセット*/
	h1, h2, h3, p, input, texterea, select{
		font-weight:normal;
	}

	/*画像にリンクを設定したときにでる枠をなくし、画像の下に出来る隙間をなくす*/
	img{
		border: 0;
		vertical-align: bottom;
	}

	a{/*リンクの設定*/
		color: #fff;
		text-decoration: none;
	}
	a:hover{
		color: #BF0007;
	}

	body {/*ページ全体の設定*/
		font-family: "Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	}

	#wrapper {/* 全体枠 */
		width: 100%;
		margin: 0 auto;
	}

	#header{/*ヘッダー*/
		width: 480px;
		height: 240px;
		margin: 0 auto;
		color: #fff;/*ヘッダー内の文字色指定*/
	}
	#titlebox{/* HOME トップページ枠 */
		width: 100%;
		height: 900px;
		background-color:#BF0007;/*ヘッダー内のバックの色を指定*/
	}

	#header_logo{/*ロゴ部分*/
		width: 480px;
		height: 184px;
		margin: 35px 0 0 190px;/*ロゴ位置指定*/
		float: left;
	}

	#info{/*お問い合わせ部分・ボーダーライン*/
		width: 480px;
		height: 20px;
		margin: 0 0 0 465px;
		padding: 125px 0 0 0;
		border-bottom: 1px solid #fff;
		font-size: 11px;
	}
	#gmail{/*お問い合わせgmail部分*/
		width: 300px;
		height: 16px;
		margin: 0 0 30px 465px;
		font-size: 13px;
	}
	#gmail a:hover{
		color: #fff;
	}

	/*　トップページの処理　*/
	#top{/*　１　トップページ 大枠 */
		width: 480px;
		margin: 0 auto;
		color: #fff;/*全体の文字色指定*/
	}
	#visual_top{/*トップのメイン画像*/
		float: left;
		background-color:#BF0007;/*トップバックの色を指定*/
	}

	/* 高さに合わせてリサイズ、はみ出た分をトリミング */
	#visual_top img {
		position: absolute;
		top: 350px;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		object-fit: cover;
		width: 100%;
		height: 218px;
	}

	#top_midashi{/*トップの見出し*/
		width: 480px;
		height: 90px;
		float: left;
		font-size: 50px;
		text-align: center;
	}
	#top_komidashi{/*トップの小見出し*/
		width: 480px;
		height: 30px;
		margin: 230px 0 0 0;
		float: left;
		font-size: 20px;
		text-align: center;
		font-family: "Arial", "Helvetica", "sans-serif";
	}

	.top_text{/*トップテキスト*/
		width: 480px;
		height: 200px;
		margin: 0 auto;
		float: left;
		font-size: 12px;
		text-align: center;
		line-height: 2em;
	}


	/*　worksページの処理　*/
	#works{/*　２　制作実績 大枠 */
		width: 480px;
		height: 900px;
		margin: auto;
		z-index: 5;
	}

	#visual_works{/*visual_worksのメイン画像*/
		z-index: 10;
	}

	/* 高さに合わせてリサイズ、はみ出た分をトリミング */
	#visual_works img {
		position: absolute;
		top: 1009px;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		object-fit: cover;
		width: 100%;
		height: 218px;
	}

	#works_Contents{/*　Works　下位コンテンツ大枠　*/
		width: 480px;
		height: 520px;
		margin: 0 0 0 15%;
		float: left;
		background-color:#FFFFFF;/*バックの色を指定*/
	}
	#works_Contents img{
		width: 93%;
	}

	#works_text{/*　Worksページ　テキスト*/
		width: 100%;
		height: 150px;
		margin: 0 auto;
		text-align: center;
		padding: 10px 0 0 0;
		float: left;
		font-size: 12px;
		line-height: 2em;
	}


	/*　priceページの処理　*/
	#price{/*　３　プライス 大枠 */
		width: 480px;
		height: 900px;
		margin: 0 auto;
		z-index: 6;
	}

	#visual_price{/*トップのメイン画像*/
		float: left;
	}
	/* 高さに合わせてリサイズ、はみ出た分をトリミング */
	#visual_price img {
		position: absolute;
		top: 1910px;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		object-fit: cover;
		width: 100%;
		height: 218px;
	}

	#price_text{/*下位ページ　テキスト*/
		width: 100%;
		height: 200px;
		margin: 0 auto;
		text-align: center;
		padding: 10px 0 0 0;
		float: left;
		font-size: 12px;
		line-height: 2em;
	}

	#price_Contents{/*　price　下位コンテンツ大枠　*/
		width: 480px;
		height: 315px;
		margin: 10% 0 0 15%;
		float: left;
		font-size: 12px;
		text-align: left;
	}


	/*　remoteページの処理　*/
	#remote{/*　４　リモート 大枠 */
		width: 480px;
		height: 1300px;
		margin: 0 auto;
		z-index: 7;
	}

	#visual_remote{/*トップのメイン画像*/
		float: left;
	}
	/* 高さに合わせてリサイズ、はみ出た分をトリミング */
	#visual_remote img {
		position: absolute;
		top: 2810px;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		object-fit: cover;
		width: 100%;
		height: 218px;
	}

	#Contents_title_remote{
		width: 480px;
		height: 20px;
		margin: 0 0 0 15%;
		font-size: 13px;
		text-align: left;
	}

	#remote_text{/*下位ページ　テキスト*/
		width: 100%;
		height: 150px;
		margin: 0 auto;
		text-align: center;
		padding: 10px 0 0 0;
		float: left;
		font-size: 12px;
		line-height: 2em;
	}

	#remote_Contents{/*　Remote　下位コンテンツ*/
		width: 480px;
		height: 920px;
		text-align: center;
		float: left;
	}
	#remote_Contents img{/*　Remote　図のサイズ*/
		width: 600px;
	}


	/*　profileページの処理　*/
	#profile{/*　５　プロフィール 大枠 */
		width: 480px;
		height: 1000px;
		margin: 0 auto;
		z-index: 8;
	}

	#visual_profile{/*プロフィールのメイン画像*/
		float: left;
	}
	/* 高さに合わせてリサイズ、はみ出た分をトリミング */
	#visual_profile img {
		position: absolute;
		top: 4110px;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		object-fit: cover;
		width: 100%;
		height: 218px;
	}

	#profile_Contents{/*　profile　下位コンテンツ大枠　*/
		width: 480px;
		height: 550px;
		float: left;
	}
	#profile_Contents p{
		font-size: 10px;
	}

	#profile_top_text{/*下位ページ　テキスト*/
		width: 100%;
		height: 210px;
		margin: 0 auto;
		text-align: center;
		padding: 10px 0 0 0;
		float: left;
		font-size: 12px;
		line-height: 2em;
	}

	.profile_text{/*下位ページ　プロフィールテキスト*/
		width: 480px;
		height: 220px;
		text-align: left;
		line-height: 3.5px;
		margin:0 0 0 20%;
		padding: 50px 0 0 0;
		float: left;
		font-size: 12px;
	}


	/*下位ページ共通処理*/
	.absolute {/*下位ページメイン画像のロゴ重ね処理*/
		position: absolute;
		top: 0;
		left: 0;
	}
	.absolute2 {/*下位ページメイン画像のメニュー重ね処理*/
		position: absolute;
		right: 300px;
		bottom: 30px;
		color: #FFFFFF;
	}

	.komidashi{/*下位ページ　小見出し*/
		width: 100%;
		height: 30px;
		font-size: 20px;
		color: #BF0007;/*文字色指定*/
		font-family: "Arial", "Helvetica", "sans-serif";
	}

	.Contents_title{/*下位コンテンツ見出し*/
		width: 100%;
		height: 20px;
		font-size: 13px;
		text-align: left;
	}

	.Contents{/*下位コンテンツ*/
		width: 235px;
		height: 240px;
		float: left;
		font-size: 12px;
	}

	.Contents p{
		font-size: 10px;
		text-align: left;
	}


	#footer{/*　フッター　*/
		width: 480px;
		height: 30px;
		margin: 0 auto;
		font-size: 12px;
		text-align: center;
		clear: both;
	}


	.logo_kotei{/* ロゴを固定させる　*/
		position:absolute;
	}
	.logo_kotei img{
		width: 480px;
		height: 175px;
		z-index: 22;
		margin: 0;
	}

	.navigation{
		width: 480px;
		height: 220px;
		z-index: 25;
		position: relative;
	}
	.navigation ul{/* 各 メニュー位置 指定　*/
		padding: 175px 0px 0 32em;
	}

	/* ボタン押下処理　*/
	.top_nav {
		display: flex;
	}
	.top_nav li {
		width: 52.5px;
		text-align: center;
		height: 20px;
		line-height: 20px;
		margin-right: 2.5px;
		border: 1px solid #fff;
	}
	.top_nav li a {
		font-size: 12px;
		font-weight: bold;
		padding: 5px;
	}
	.top_nav li:hover {
		background: #fff;
		color: #BF0007;
	}


	.nav {
	  display: flex;
	}
	.nav li {
		width: 54px;
		text-align: center;
		height: 20px;
		line-height: 20px;
		margin-right: 2.5px;
		border: 1px solid #fff;
	}
	.nav li a {
		font-size: 12px;
		font-weight: bold;
		padding: 6px;
	}
	.nav li:hover {
	  background: #fff;
	  color: #BF0007;
	}

	/* ページトップに戻る　*/
	#page_top{
		width: 40px;
		height: 40px;
		position: fixed;
		right: 0;
		bottom: 10px;
		background: #961818;
		opacity: 0.6;
	}
	#page_top a{
		position: relative;
		display: block;
		width: 40px;
		height: 40px;
		text-decoration: none;
	}
	#page_top a::after{
		content: '▲';
		font-size: 14px;
		font-weight: bold;
		color: #fff;
		position: absolute;
		top: 10px;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		text-align: center;
	}

	html {
	  scroll-behavior:smooth;
	}

}