/*レスポンシブデザイン対応済み　引出し1カラム用*/

/*
  	0px～320px（小型スマートフォン）
	321px～479px（スマートフォン縦）
	480px～599px（スマートフォン横）
	600px～925px（タブレット）
	960px～1275px（小型PC)
	1280px～（大型PC)
*/

/*モバイルファースト*/

/*0px?320px（小型スマートフォン）に共通事項を書く*/

/*
===============================================================================================
TOPのCSS
===============================================================================================
*/

/*共通のBody要素の設定*/

.hikidasitop {
        background-color:#fff;
	color:#000;/*文字色を黒色に設定*/
	margin-left:auto;/*要素間の余白を0 autoに設定*/
        margin-right:auto;
	text-align:center;/*文字を中央寄せで表示*/
	width:320px;/*横幅を320pxに設定*/

}

.wraphikidasitop {

	margin:0px;/*要素間の余白を0pxに設定*/
	width:320px;/*横幅を320pxに設定*/
}

/*共通の画像設定*/

/*どの画面サイズでも一つの画面で適切なサイズに変更する設定*/

img {
	height:auto;/*高さを自動に設定*/
	max-width:100%;/*常に画像サイズを100%で表示*/
}

/*共通のh1とヘッダー部の設定*/

.siteTitlehikidasitop {
	font-size:17px;/*基本文字サイズを17pxに設定*/
	font-weight:bold;/*文字を太文字に設定*/
	
}

h1{

	margin-top:40px;/*要素間の上余白を40pxに設定*/
	padding:0 auto;/*要素内の余白を0 autoに設定*/
}

/*その他の共通設定*/

/*右寄せ*/

.migi{
	text-align:right;/*文字を右寄せで表示*/

}

/*共通の紙が折れているようなBOX部の設定*/

.maki{
	border:solid black;/*黒い実線で囲み線を表示*/
	border-bottom-right-radius:58px;
	margin:auto;/*要素間の余白を自動に設定*/
	margin-top:20px;
	line-height:2.3;/*行間を2.3に設定*/
	padding:auto;/*要素内の余白を自動に設定*/
	padding-top:20px;
	position:relative;
	width:300px;
	
}

.maki::after{
	bottom:0;
	border-color:#fff #fff #fff #000;
	border-style:solid;
	border-width:0 0 37px 37px;
	content:"";
	position:absolute;
	right:0
}

/*共通のボタン部の設定*/

/*ボタンデザイン*/

.btn-s {
	background:#DBFFB7;
	border:none;
	boeder-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	color:#000000;
	height:40px;
	margin:0 auto;
	width:40px;
	outline:none;
	-webkit-appearance:none;
	-moz-apperance:none;
	apperance:none;
}


.btn-m {
	background:#FFFF99;
	border:none;
	boeder-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	color:#000000;
	height:40px;
	margin:0 auto;
	width:40px;
	outline:none;
	-webkit-appearance:none;
	-moz-apperance:none;
	apperance:none;
}

.btn-l {
	background:#FFD6FF;
	border:none;
	boeder-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	color:#000000;
	height:40px;
	margin:0 auto;
	width:40px;
	outline:none;
	-webkit-appearance:none;
	-moz-apperance:none;
	apperance:none;
}


.hikidasibutton {
	background:#ffffff;
	border:1px solid #1B1B1B;
	color:#1B1B1B;
	display:inline-block;
	height:auto;
	line-height:20px;
	padding-top:2px;
	position:relative;
	text-align:center;
	text-decoration:none;
	width:200px;
	word-wrap:normal;
}

.hikidasibutton:hover {
	 cursor: pointer;
	 text-decoration: none;
	-webkit-animation: hikidasibutton 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        -moz-animation: hikidasibutton 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	 animation: hikidasibutton 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes hikidasibutton {
  0% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-moz-keyframes hikidasibutton {
  0% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes hikidasibutton {
  0% {
    -webkit-transform: scale(0. 85);
            transform: scale(0.85);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/*321px?479px（スマートフォン縦）用*/
@media screen and (min-width:321px) and (max-width:479px) {

	.hikidasitop {
　　　　　　　　margin-left:auto;
                margin-right:auto;
                width:400px;
	}

	.wraphikidasitop {
		width:400px;
	}

	.maki {
		width:350px;
	}

}

/*375px?812px（iphoneX)*/
@media screen and (min-width:375px) and (max-width:812px) {

        .hikidasitop {
                margin-left:auto;
                margin-right:auto;
                width:290px;

        }

        .wraphikidasitop {

                margin-left:auto;
                margin-right:auto;
                width:290px;
        }

        .maki ｛
　　　　　　　　width:200px;

        }
}


/*480px?599px（スマートフォン横）用*/
@media screen and (min-width:480px) and (max-width:599px) {

	.hikidasitop {
                margin-left:auto;
                margin-right:auto;
		width:400px;
	}

	.wraphikidasitop {
		width:400px;
	}

	.maki {
		width:350px;
	}
}

/*600px?925px（タブレット）用*/
@media screen and (min-width:600px) and (max-width:925px) {
	
	.hikidasitop {
                margin-left:auto;
                margin-right:auto;
		width:500px;
	}

	.wraphikidasitop {
		width:500px;
	}

	.maki {
		width:350px;
	}
}

/*960px?1275px（小型PC)用*/
@media screen and (min-width:960px) and (max-width:1275px) {

	.hikidasitop {
                margin-left:auto;
                margin-right:auto;
		width:400px;
	}

	.wraphikidasitop {
		width:400px;
	}

	.maki {
		width:400px;
	}
}

@media screen and (min-width:375px) and (max-width:667px);

	.hikidasitop {
                margin-left:auto;
                margin-right:auto;
		width:400px;
	}

	.wraphikidasitop {
		width:400px;
	}

	.maki {
		width:350px;
	}
}

/*1280px?（大型PC)用*/
@media screen and (min-width:1280px) {
	
	.hikidasitop {
                margin-left:auto;
                margin-right:auto;
		width:400px;
	}

	.wraphikidasitop {
		width:400px;
	}

	.maki {
		width:400px;
	}

}