@charset "utf-8";

@font-face{
	font-family: 'Baskerville';
	src: url(../fonts/Baskerville.ttc);
}
@font-face{
	font-family: 'futura';
	src: url(../fonts/futura/futura.ttf);
}
@font-face{
	font-family: 'futura_light_bt';
	src: url(../fonts/futura/futura_light_bt.ttf);
}
@font-face{
	font-family: 'futura_light_font';
	src: url(../fonts/futura/futura_light_font.ttf);
}
@font-face{
	font-family: 'NotoSansJP-Thin';
	src: url(../fonts/NotoSansJapanese/NotoSansJP-Thin.otf);
}
@font-face{
	font-family: 'NotoSansJP-Medium';
	src: url(../fonts/NotoSansJapanese/NotoSansJP-Medium.otf);
}
@font-face{
	font-family: 'NotoSansJP-Regular';
	src: url(../fonts/NotoSansJapanese/NotoSansJP-Regular.otf);
}
@font-face{
	font-family: 'NotoSansJP-Light';
	src: url(../fonts/NotoSansJapanese/NotoSansJP-Light.otf);
}

html{
	height: 100%;
}
::-webkit-scrollbar{/* スクロールバー全体の幅 */
	width: initial;
}
::-webkit-scrollbar-thumb{/* スクロールバーのツマミの部分 */
	background-color: rgba(255,255,255,0.5);
	border-radius: 0.8rem;
	border: 1px solid #333;
	border-right: none;
}
::-webkit-scrollbar-track{/* スクロールバーのツマミの背後の部分 */
	background: transparent;
}
body{
	min-height: 100%;
	overflow-x: hidden;
//	border: 1px solid #000; /* 確認用 */
}
footer{
	position: sticky;
	text-align: center;
	top: 100vh;
	font-size: 0.8rem;
	color: #333;
	letter-spacing: 0.1rem;
	padding: 0 0 0.5rem 0;
	margin: 1rem 0 0.5rem 0;
	font-family: futura_light_bt;
	border: 0px solid #000; /* 確認用 */
}
.main_container{
	font-family: 'NotoSansJP-Light';
	letter-spacing: 0.1rem;
	line-height: 1.5rem;
	border: 0px solid #000; /* 確認用 */
}
.sub_container{
	width: 85%;
	margin: 0rem auto 0 auto;
//	border: 1px solid #000; /* 確認用 */
}
.my_video{
	display: block;/* 下部に出来る隙間を消すための記述 */
 	width: 100vw;
//	border: 1px solid #000; /* 確認用 */
}
.no_deco{
	text-decoration: none;
}
.bg_img1{
	background-image: url(../img/sample1.webp);
}
.bg_img2{
	background-image: url(../img/sample2.webp);
}
.bg_img3{
	background-image: url(../img/sample3.webp);
}
.bg_img4{
	background-image: url(../img/sample4.webp);
}
.bg_img5{
	background-image: url(../img/sample5.webp);
}
.section{
	width: 100%;
	padding: 0 0 3rem 0;
	background-color: rgba( 0, 0, 0, 0.3);
//	border: 1px solid #fff; /* 確認用 */
}
.section1_1{
	border: 0px solid #000; /* 確認用 */
}
.layer1{
	background-color: rgba( 0, 0, 0, 0);
//	border: 1px solid #fff; /* 確認用 */
}

.display1{/* div */
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border: 0px solid #000; /* 確認用 */
}

.display1_1{/* div 枠1 */
	text-align: center;
	padding: 1rem 1rem 1rem 1rem;
//	border: 1px solid #fff; /* 確認用 */
}
.display2{/* h1 */
	display: inline-block;
	color: #fff;
	font-size: 1.2rem;
	letter-spacing: 0.3rem;
	padding: 0.7rem 0.5rem 0.7rem 0.5rem;
	scroll-margin-top: 3rem; /* スクロールしたときにだけ適用する余白を指定 */
	margin: 3rem auto 2rem auto;
	border: 3px solid #fff;
}
.display3{/* 0 */
//	font-size: 1.5rem;
//	border: 1px solid #000; /* 確認用 */
}
.display4{/* h2 */
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0.3rem;
	margin: 2rem 0 0 0;
//	border: 1px solid #000; /* 確認用 */
}
.display5{/* h3 */
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0.3rem;
	margin: 2rem 0 0 0;
//	border: 1px solid #fff; /* 確認用 */
}
.display6{/* h4 */
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0.3rem;
	margin: 2rem 0 0 0;
//	border: 1px solid #fff; /* 確認用 */
}
.display7{/* h5 */
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0.3rem;
	margin: 2rem 0 0 0;
//	border: 1px solid #fff; /* 確認用 */
}
.display8{/* a お気軽にお問い合わせください｡ */
	color: #fff;
//	border: 1px solid #fff; /* 確認用 */
}
.display9{/* div */
	display: flex;
	align-items: flex-end;
	margin: 1rem 0 0 0;
	border: 0px solid #fff; /* 確認用 */
}
.display10{/* h1 Webサイト制作費 */
	padding: 0.7rem 1rem 0.7rem 1rem;
	border: 2px solid #333;
}
.display11{/* スマホモックアップ */
	display: block;
	width: 28%;
	border: 0px solid #333;
}
.display12{/* スペーサー */
	display: block;
	width: 4%;
	border: 0px solid #333;
}
.display13{/* PCモックアップ*/
	display: block;
	width: 68%;
	border: 0px solid #333;
}
.display14{/* img */
	width: 100%;
	border: 0px solid #333;
}
.display15{/* img */
	width: 100%;
	border: 0px solid #333;
}
.display16{/* div */
	padding: 0rem 0rem 0rem 0rem;
	border: 0px solid #333;
}
.display17{/* a */
	display: block;
	width: 85%;
	text-decoration: none;
	margin: 0 auto 2rem auto;
	border: 0px solid #333;
}
.display18{/* div */
	text-align: left;
	padding: 0 0 0 0.5rem;
	border-bottom: 1px solid #333;
}
.display19{/* h1 webサイト制作費 */
	border-top: 0px solid #333;
	border-right: 0px solid #333;
	border-left: 0px solid #333;
	border-bottom: 1px solid #333;
}
.display20{/* div */
	width: 90%;
	font-size: 0.8rem;
	margin: 0 auto;
//	border: 1px solid #000;
}
.display21{/* a */
	display: block;
	font-size: 0.8rem;
	color: #333;
	text-align: left;
	text-decoration: none;
	margin: 1rem 0 0 0;
	padding: 1rem 0 1rem 1rem;
	box-shadow: 2px 2px 4px gray;
//	border-radius: 0.5rem;
	border: 1px solid #ccc;
}
.display21:hover{/* a */
	transition: 0.5s;
	transform: translate3d(0, 5px, 0);
	color: #1da1f2;
	box-shadow: none;
//	background-color: #1da1f2;
	border: 1px solid #1da1f2;
}
.display22{/* img wayday */
	width: 50%;
	margin: 2rem auto 0 auto;
	border: 0px solid #333;
}
.display23{/* p */
	margin: 1rem 1rem 1rem 1rem;
	border: 0px solid #333;
}
.display24{/* div */
	font-size: 0.8rem;
	border: 0px solid #333;
}
.display25{/* a */
	color: #fff;
	border: 0px solid #333;
}
.display26{/* p */
	margin-top: 2rem;
	border: 0px solid #333;
}
.display27{/* img */
	display: block;
	width: 20%;
	margin: 1rem auto 0 auto;
	border: 0px solid #333;
}
.display28{/* div */
	text-align: center;
	margin: 2rem 0 0 0;
	border: 0px solid #333;
}
.display29{/* a */
	color: #333;
	font-size: 0.7rem;
	text-decoration: none;
	border: 0px solid #333;
}
.display30{/* div */
	border: 0px solid #333;
}
.display31{/* 0 */
	font-size: 2rem;
	letter-spacing: 0rem;
	border: 0px solid #333;
}
.display32{/* div 独自ドメイン料金､Webサーバー料金含む */
	font-size: 0.8rem;
	margin: 0.5rem 0 0 0;
	border: 0px solid #333;
}
.display33{/* img */
	display: block;
	width: 40%;
	margin: 1rem auto 0 auto;
	border: 0px solid #333;
}
.display34{/* 随時掲載予定 */
	display: inline-block;
	margin: 0 0 0 0;
	padding: 0.4rem 1rem 0.5rem 1rem;
	border: 1px dotted #ccc;
}

/********************************/
/* PC向けのスタイル：1024px以上 */
/********************************/

@media only screen and (min-width: 1024px){

.sub_container{/* */
	width: 60%;
	margin: 0rem auto 0 auto;
//	border: 1px solid #000; /* 確認用 */
}
.section{
	width: 100%;
	padding: 4rem 0 14rem 0;
	background-color: rgba( 0, 0, 0, 0.3);
	border: 0px solid #000; /* 確認用 */
}
.section1_1{
	padding: 3rem 0 2rem 0;
	border: 0px solid #000; /* 確認用 */
}
.layer1{
	background-color: rgba( 0, 0, 0, 0);
//	border: 1px solid #fff; /* 確認用 */
}
.display1{/* div */
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
//	border: 1px solid #fff; /* 確認用 */
}

.display1_1{/* div 枠1 */
	text-align: center;
	padding: 1rem 1rem 1rem 1rem;
	border: 0px solid #000; /* 確認用 */
}
.display1_2{/* div */
	padding-bottom: 6rem;
	border: 0px solid #000; /* 確認用 */
}

.display2{/* h1 フリーランス限定､Webサイト制作費 */
	display: inline-block;
	color: #fff;
	font-size: 2rem;
	letter-spacing: 0.3rem;
	padding: 1.5rem 2rem 1.5rem 2rem;
	scroll-margin-top: 3rem; /* スクロールしたときにだけ適用する余白を指定 */
	margin: 2rem auto 2rem auto;
	border: 3px solid #fff;
}
.display3{/* 0 */
//	font-size: 3rem;
//	border: 1px solid #000; /* 確認用 */
}
.display4{/* h2 ebサイトを制作させていただけるモニター様 */
	color: #fff;
	font-size: 1.2rem;
	letter-spacing: 0.3rem;
	margin: 4rem 0 0 0;
//	border: 1px solid #000; /* 確認用 */
}
.display5{/* h3 世界にひとつだけのあなたのオリジナルWebサイトを無料 */
	color: #fff;
	font-size: 1.2rem;
	letter-spacing: 0.3rem;
	margin: 4rem 0 0 0;
//	border: 1px solid #fff; /* 確認用 */
}
.display6{/* h4 お申込み後にお客様のご都合で制作キャンセルされた場合で */
	color: #fff;
	font-size: 1.2rem;
	letter-spacing: 0.3rem;
	margin: 4rem 0 0 0;
//	border: 1px solid #fff; /* 確認用 */
}
.display7{/* h5 お気軽にお問い合わせください｡ */
	color: #fff;
	font-size: 1.2rem;
	letter-spacing: 0.3rem;
	margin: 4rem 0 0 0;
//	border: 1px solid #fff; /* 確認用 */
}
.display8{/* a お気軽にお問い合わせください｡ */
	color: #fff;
//	border: 1px solid #fff; /* 確認用 */
}
.display9{/* div */
	display: flex;
	align-items: flex-end;
	margin: 1rem 0 0 0;
	border: 0px solid #fff; /* 確認用 */
}
.display10{/* h1 Webサイト制作費 */
	border: 3px solid #333;
}
.display11{/* スマホモックアップ */
	display: block;
	width: 28%;
	border: 0px solid #333;
}
.display12{/* スペーサー */
	display: block;
	width: 4%;
	border: 0px solid #333;
}
.display13{/* PCモックアップ*/
	display: block;
	width: 68%;
	border: 0px solid #333;
}
.display14{/* img */
	width: 100%;
	border: 0px solid #333;
}
.display15{/* img */
	width: 100%;
	border: 0px solid #333;
}
.display16{/* div */
	width: 60%;
	margin: 0 auto 0 auto;
	padding: 0rem 0rem 0rem 0rem;
	border: 0px solid #333;
}
.display17{/* a */
	display: block;
	width: 85%;
	text-decoration: none;
	margin: 4rem auto 2rem auto;
	border: 0px solid #333;
}
.display18{/* div */
	text-align: left;
	padding: 0 0 0 0.5rem;
	border-bottom: 1px solid #333;
}
.display19{/* h1 webサイト制作費 */
	border-top: 0px solid #333;
	border-right: 0px solid #333;
	border-left: 0px solid #333;
	border-bottom: 1px solid #333;
}

.display20{/* div */
	width: 60%;
	font-size: 0.8rem;
	margin: 0 auto;
	border: 0px solid #000;
}
.display21{/* a */
	display: block;
	font-size: 1rem;
	color: #333;
	text-align: left;
	text-decoration: none;
	margin: 1rem 0 0 0;
	padding: 1.5rem 0 1.5rem 1.5rem;
	box-shadow: 2px 2px 4px gray;
//	border-radius: 0.5rem;
	border: 1px solid #ccc;
}
.display21:hover{/* a */
	transition: 0.5s;
	transform: translate3d(0, 5px, 0);
	color: #1da1f2;
	box-shadow: none;
//	background-color: #1da1f2;
	border: 1px solid #1da1f2;
}
.display22{/* img wayday */
	width: 15%;
	margin: 2rem auto 3rem auto;
	border: 0px solid #333;
}
.display23{/* p */
	font-size: 1.2rem;
	margin: 2rem 1rem 1rem 1rem;
	border: 0px solid #333;
}
.display24{/* div */
	font-size: 0.8rem;
	border: 0px solid #333;
}
.display25{/* a お問い合わせはこちら */
	display: inline-block;
	font-size: 1.2rem;
	color: #fff;
	margin: 4rem 1rem 1rem 1rem;
	border: 0px solid #333;
}
.display26{/* p */
	margin-top: 4rem;
	border: 0px solid #333;
}
.display27{/* img X */
	display: block;
	width: 10%;
	margin: 2rem auto 0 auto;
	border: 0px solid #333;
}
.display28{/* div */
	text-align: center;
	margin: 2rem 0 0 0;
	border: 0px solid #333;
}
.display29{/* a */
	color: #333;
	font-size: 0.7rem;
	text-decoration: none;
	border: 0px solid #333;
}
.display30{/* div */
	margin: 2rem 0 0 0;
	border: 0px solid #333;
}
.display31{/* 0 */
	font-size: 5rem;
	letter-spacing: 0rem;
	border: 0px solid #333;
}
.display32{/* div 独自ドメイン料金､Webサーバー料金含む */
	font-size: 0.8rem;
	margin: 2rem 0 0 0;
	border: 0px solid #333;
}
.display33{/* img qrcode*/
	display: block;
	width: 15%;
	margin: 1rem auto 0 auto;
	border: 0px solid #333;
}
.display34{/* 随時掲載予定 */
	display: inline-block;
	margin: 5rem 0 0 0;
	padding: 0.4rem 1rem 0.5rem 1rem;
	border: 1px dotted #ccc;
}

}