@charset "utf-8";

*{
	margin:0;
	padding:0;
}

/* 画像をボックスからはみ出さないようにする */
img {
  max-width:100%;
  max-height:100%;
  height:auto;
}

/**ブラウザの規定スタイルを解除**/
/*見出しと段落の上マージンをなくす*/
p,h1,h2,h3,h4,h5,h6{
	margin-top: 0;
}

/*画像下の余白をなくす*/
img {
	vertical-align: bottom;
}

/*リスト項目の余白をなくす*/
ul {
	margin: 0;
	padding: 0;
}
/**規定解除ここまで**/

#wrap {
	clear: both;
	margin-top: 0px;        /*コンテンツエリアの外部上に余白*/
	padding: 0px;       /*コンテンツ内部に余白*/
}



/* ヘッダーの固定 */
header{
  top: 0px;                   /* 位置(上0px) */
  left: 0px;                  /* 位置(右0px) */
	width: cover;           /*ヘッダーフルページ表示*/
	height: 50px;
	margin: 0 auto;
}


body {
  width:750px;
  height:100%;
	margin: 0;
	padding: 0;
	font-size: 15px;
}

/*index背景画像設定*/
#index {             /*index狙い撃ち*/
	background-image:url('../photo/haikeiindex.jpg');   /*背景画像URL*/
	background-repeat: no-repeat;         /*タイル状繰り返し解除*/
	background-position: center center;     /*位置指定*/
	background-attachment: fixed;               /*位置指定固定*/
	background-size: cover;              /*フルページ大きさ指定*/
}

.box1 {
	float:left;
	width:80%;
}

.box1:after{
  content:"";
  display:block;
  clear:both;
}

.box2 {
	float:left;
	width:20%;
}

.box2:after{
  content:"";
  display:block;
  clear:both;
}

.content{
	margin-top: 150px;
}

.box3{
  margin-left:50px;
}


h1 {                   /*index狙い撃ち*/
	font-size:120px;
	line-height: 1;                     /*行間設定*/
	color: #ffffff;
	font-family: 'Gamja Flower', cursive;     /*グーグルフォント*/
	margin-bottom: 50px;     /*下余白*/
	border: none;          /*下線無*/
	
}


h2{             /*index狙い撃ち*/
	font-size: 24px;
	color: #ffffff;
	font-family: "Hannari";
}

.box4{
	margin-left:70px;
}


/* リンクの下線削除 */
a {
		text-decoration: none;
}

/*ボタンの装飾*/
.btn a {
	background-color: #009cd3;
	color: #ffffff;
	font-size: 20px;
	font-family; 'Bitter', serif;    /*グーグルフォント*/
	width: 185px;
	display: block;             /*ブロック要素指定*/
	text-align: center;              /*文字の中央揃え*/
	line-height: 50px;             /*内部上下の余白*/
	margin-top: 100px;             /*外部上の余白*/
	border-radius: 5px;          /*ボタン角を丸く*/
	border: 3px solid #009cd3;        /*ボタン枠線*/
}

/*ボタンの装飾(マウスを置いたとき)*/
.btn a:hover {
	text-decoration: none;
	background-color: #ffffff;
	color: #009cd3;
}

/*indexフッターの設定*/
footer {
  bottom: 0px;                /* 位置(下0px) */
  left: 0px;                  /* 位置(左0px) */
  width: 100%;                /* 横幅100%　*/
  height: 60px;              /* 縦幅140px */
	margin: 300px auto 0 auto;     /*外部上余白*/
	line-height: 20px;            /*行間内部余白*/
	padding-top: 10px;                /*内部余白*/
	padding-left: 20px;
	background-color: #d3d3d3;        /*背景色*/
}






/****************** 349px以下のとき適用 ******************/
@media (max-width: 349.999px){

body {
  width:300px;
}

.content{
	margin-top: 80px;
}

.box3{
  margin-left:20px;
}


h1{
	font-size:70px;
}

h2{
	font-size: 12px;
}


.box4{
	margin-left:35px;
}

footer {
	margin: 150px auto 0 auto;     /*外部上余白*/
}

}



/****************** 350px以上399以下のとき適用 *******************/
@media (min-width: 350px) and (max-width: 399.999px) {

body {
  width:350px;
}

.content{
	margin-top: 80px;
}

.box3{
  margin-left:20px;
}


h1{
	font-size:70px;
}

h2{
	font-size: 12px;
}


.box4{
	margin-left:35px;
}

footer {
	margin: 150px auto 0 auto;     /*外部上余白*/
}

}



/****************** 400px以上449以下のとき適用 *******************/
@media (min-width: 400px) and (max-width: 449.999px) {

body {
  width:400px;
}

.content{
	margin-top: 80px;
}

.box3{
  margin-left:20px;
}


h1{
	font-size:70px;
}

h2{
	font-size: 12px;
}


.box4{
	margin-left:35px;
}

footer {
	margin: 150px auto 0 auto;     /*外部上余白*/
}

}







/****************** 450px以上479以下のとき適用 *******************/
@media (min-width: 450px) and (max-width: 479.999px) {

body {
  width:450px;
}

.content{
	margin-top: 80px;
}

.box3{
  margin-left:20px;
}


h1{
	font-size:70px;
}

h2{
	font-size: 12px;
}


.box4{
	margin-left:35px;
}

footer {
	margin: 150px auto 0 auto;     /*外部上余白*/
}

}





/****************** 480px以上509以下のとき適用 *******************/
@media (min-width: 480px) and (max-width: 509.999px) {

body {
  width:480px;
}

.content{
	margin-top: 100px;
}

.box3{
  margin-left:30px;
}


h1{
	font-size:80px;
}

h2{
	font-size: 15px;
}


.box4{
	margin-left:45px;
}

footer {
	margin: 200px auto 0 auto;     /*外部上余白*/
}


}



/****************** 510px以上549以下のとき適用 *******************/
@media (min-width: 510px) and (max-width: 549.999px) {

body {
  width:510px;
}

.content{
	margin-top: 100px;
}

.box3{
  margin-left:30px;
}


h1{
	font-size:80px;
}

h2{
	font-size: 15px;
}


.box4{
	margin-left:45px;
}

footer {
	margin: 200px auto 0 auto;     /*外部上余白*/
}


}




/****************** 550px以上599以下のとき適用 *******************/
@media (min-width: 550px) and (max-width: 599.999px) {

body {
  width:550px;
}

.content{
	margin-top: 100px;
}

.box3{
  margin-left:30px;
}


h1{
	font-size:80px;
}

h2{
	font-size: 15px;
}


.box4{
	margin-left:45px;
}

footer {
	margin: 200px auto 0 auto;     /*外部上余白*/
}


}




/****************** 600px以上649以下のとき適用 *******************/
@media (min-width: 600px) and (max-width: 649.999px) {

body {
  width:600px;
}

.content{
	margin-top: 100px;
}

.box3{
  margin-left:40px;
}


h1{
	font-size:90px;
}

h2{
	font-size: 18px;
}


.box4{
	margin-left:55px;
}

footer {
	margin: 250px auto 0 auto;     /*外部上余白*/
}


}

/****************** 650px以上689以下のとき適用 *******************/
@media (min-width: 650px) and (max-width: 689.999px) {

body {
  width:650px;
}

.content{
	margin-top: 100px;
}

.box3{
  margin-left:40px;
}


h1{
	font-size:90px;
}

h2{
	font-size: 18px;
}


.box4{
	margin-left:55px;
}

footer {
	margin: 250px auto 0 auto;     /*外部上余白*/
}


}




/****************** 690px以上739以下のとき適用 *******************/
@media (min-width: 690px) and (max-width: 739.999px) {

body {
  width:690px;
}

.content{
	margin-top: 100px;
}

.box3{
  margin-left:40px;
}


h1{
	font-size:90px;
}

h2{
	font-size: 18px;
}


.box4{
	margin-left:55px;
}

footer {
	margin: 250px auto 0 auto;     /*外部上余白*/
}


}





/****************** 740px以上767以下のとき適用 *******************/
@media (min-width: 740px) and (max-width: 767.999px) {

body {
  width:740px;
}

.content{
	margin-top: 100px;
}

.box3{
  margin-left:40px;
}


h1{
	font-size:90px;
}

h2{
	font-size: 18px;
}


.box4{
	margin-left:55px;
}

footer {
	margin: 250px auto 0 auto;     /*外部上余白*/
}


}



/****************** 768px以上799以下のとき適用 *******************/
@media (min-width: 768px) and (max-width: 799.99px) {

body {
  width:768px;
}

.content{
	margin-top: 150px;
}

.box3{
  margin-left:50px;
}


h1{
	font-size:100px;
}

h2{
	font-size: 18px;
}


.box4{
	margin-left:70px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}


}


/****************** 800px以上849以下のとき適用 *******************/
@media (min-width: 800px) and (max-width: 849.999px) {

body {
  width:800px;
}

.content{
	margin-top: 150px;
}

.box3{
  margin-left:50px;
}


h1{
	font-size:100px;
}

h2{
	font-size: 18px;
}


.box4{
	margin-left:70px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}


}






/****************** 850px以上899以下のとき適用 *******************/
@media (min-width: 850px) and (max-width: 899.999px) {

body {
  width:850px;
}

.content{
	margin-top: 150px;
}

.box3{
  margin-left:60px;
}


h1{
	font-size:110px;
}

h2{
	font-size: 24px;
}


.box4{
	margin-left:80px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}


}


/****************** 900px以上949以下のとき適用 *******************/
@media (min-width: 900px) and (max-width: 949.999px) {

body {
  width:900px;
}

.content{
	margin-top: 150px;
}

.box3{
  margin-left:60px;
}


h1{
	font-size:110px;
}

h2{
	font-size: 24px;
}


.box4{
	margin-left:80px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}


}




/******************* 950px以上1049以下のとき適用 ********************/
@media (min-width: 950px) and (max-width: 1049.999px) {

body {
  width:950px;
}

.content{
	margin-top: 150px;
}

.box3{
  margin-left:70px;
}


h1{
	font-size:120px;
}

h2{
	font-size: 24px;
}


.box4{
	margin-left:100px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}


}


/******************* 1050px以上1149以下のとき適用 ********************/
@media (min-width: 1050px) and (max-width: 1149px) {

body {
  width:1050px;
}

.content{
	margin-top: 150px;
}

.box3{
  margin-left:70px;
}


h1{
	font-size:120px;
}

h2{
	font-size: 24px;
}


.box4{
	margin-left:100px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}


}




/******************* 1150px以上1249以下のとき適用 ********************/
@media (min-width: 1150px) and (max-width: 1249.999px) {

body {
  width:1150px;
}

.content{
	margin-top: 200px;
}

.box3{
  margin-left:80px;
}

h1{
	font-size:140px;
}

h2{
	font-size: 36px;
}

.box4{
	margin-left:110px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}



}



/******************* 1250px以上1349以下のとき適用 ********************/
@media (min-width: 1250px) and (max-width: 1349.999px) {

body {
  width:1250px;
}

.content{
	margin-top: 200px;
}

.box3{
  margin-left:80px;
}

h1{
	font-size:140px;
}

h2{
	font-size: 36px;
}

.box4{
	margin-left:110px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}



}




/******************* 1350px以上1449以下のとき適用 ********************/
@media (min-width: 1350px) and (max-width: 1449.999px) {

body {
  width:1350px;
}

.content{
	margin-top: 200px;
}

.box3{
  margin-left:80px;
}

h1{
	font-size:140px;
}

h2{
	font-size: 36px;
}

.box4{
	margin-left:110px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}



}




/******************* 1450px以上1549以下のとき適用 ********************/
@media (min-width: 1450px) and (max-width: 1549.999px) {

body {
  width:1450px;
}

.content{
	margin-top: 200px;
}

.box3{
  margin-left:80px;
}

h1{
	font-size:140px;
}

h2{
	font-size: 36px;
}

.box4{
	margin-left:110px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}



}


/******************* 1550px以上1649以下のとき適用 ********************/
@media (min-width: 1550px) and (max-width: 1649.999px) {

body {
  width:1550px;
}

.content{
	margin-top: 200px;
}

.box3{
  margin-left:80px;
}

h1{
	font-size:140px;
}

h2{
	font-size: 36px;
}

.box4{
	margin-left:110px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}



}



/********************* 1650px以上のとき適用 ********************/
@media (min-width: 1650px){

body {
  width:1650px;
}

.content{
	margin-top: 200px;
}

.box3{
  margin-left:80px;
}

h1{
	font-size:140px;
}

h2{
	font-size: 36px;
}

.box4{
	margin-left:110px;
}

footer {
	margin: 300px auto 0 auto;     /*外部上余白*/
}




}