/* Move down content because we have a fixed navbar that is 50px tall */

html {
	font-size: 62.5%;
}

body {
	padding-top: 50px;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
	font-family: Verdana, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	color:white;
	background-color: #383838;
}

.jumbotron p {color: #383838;}

.pb-1em{padding-bottom: 1em;}
.pb-2em{padding-bottom: 2em;}
.pb-3em{padding-bottom: 3em;}
.fs-70{font-size: 70%;}
.fs-80{font-size: 80%;}
.fs-90{font-size: 90%;}

nav {
	font-size: 12px;
	font-size: 1.2rem;
}

.navbar {
	margin-bottom: 0;
	border-bottom: 0;
}

.jumbotron {
	padding-top: 0;
	padding-bottom: 0;
	background-color: white;
}

.jumbotron h1 {
	font-size: 48px;
	font-size: 4.8rem;
	font-family: Verdana, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	margin-top: 0;
}

.jumbotron p {
	font-size: 12px;
	font-size: 1.2rem;
	font-family: Verdana, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	padding-top: 100px;
	padding-bottom: 100px;
	padding-right: 40px;
	padding-left: 40px;
	margin-bottom: 0;
}

section {
	padding-bottom: 100px;
}

.sec-white {
	background-color: white;
}

.sec-darkgray {
	background-color: #383838;
}

.image-base {background-color: #222!important;}

.jumbotron {
	margin-bottom: 0;
}

section h2 {
	margin: 0 0 100px;
	padding: 100px;
}

section h3 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 18px;
	font-size: 1.8rem;
}

section p {
	font-size: 12px;
	font-size: 1.2rem;
	padding-right: 20px;
	padding-left: 20px;
}

section img {
	margin-bottom: 20px;
}

.lastp {
	margin-bottom: 60px;
}

form label {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: normal;
}

footer p {
	font-size: 8px;
	font-size: 0.8rem;
	padding: 10px;

}

hr {
	padding: 0;
}

.btn-info {
	background-color: #f8f8f8;
	color: gray;
}

.thanks {
	font-size: 12px;
	font-size: 1.2rem;
}

.thanks p {
	padding: 100px
}

.btn {
	margin-bottom: 50px;
	transition: 1s;
	/*	outline: none;*/
	outline: none;
	/*	border: 1px solid #ccc;*/
}

#pattern h3 {
	font-size: 20px;
	font-size: 2.0rem;
	margin-bottom: 50px
}

#pattern section {
	padding: 0;
}

#pattern h2 {
	margin-bottom: 70px;
}


/* ↓↓↓ セレクトボックス ↓↓↓ */

label.selectbox {
	position: relative;
	display: block;
	width: 200px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
}

label.selectbox:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	width: 0;
	height: 0;
	margin: -2px 0 0 0;
	border: 5px solid transparent;
	border-top: 7px solid #ccc;
}

select {
	cursor: pointer;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 200px;
	padding: 0.3em 1em;
	color: gray;
	border: none;
	border-radius: 5px;
	background: transparent;
	font-size: 12px;
	font-size: 1.2rem;
}

::-ms-expand {
	display: none;
}

.form-control:focus {
	border-style: none;
	box-shadow:none;
	border: solid 1px #ccc;
}

select:focus {
	outline: none;
	box-shadow: none;
}

a { color: #ffffff; }
a:link { color: #ffffff; }
a:visited { color: #ffffff; }
a:hover{ color: #999999; }

a.btn { color: #888888; }
a.btn:link { color: #888888; }
a.btn:visited { color: #888888; }
a.btn:hover{ color: #ffffff; }

.freepattern h2 {
	margin-top: 0;
}

.climgtxt {
	width: 570px;
	margin: 0 auto;
	margin-bottom: 100px
}

.climg {
	width: 150px;
	float: left;
}

.cltxt {
	width: 300px;
	float: left;
	margin-left: 120px
}

.cltxt h4 {
	font-size: 16px;
	font-size: 1.6rem;
}

#patternbobbin #sec-bobbin h4,
#patternembroidery #sec-embroidery h4 {
	margin-top: 0;
}

footer p {
	margin: 0;
}

.freepattern h1 {
	margin-top: 0;
}

footer p {
	margin: 0;
}

.freepattern h1,
.thanks h1 {
	margin-top: 0;
}

#patternbobbin h2,
#patternembroidery h2 {
	margin-bottom: 40px;
	font-size: 26px;
}
h2 .txtsm {
	font-size: 22px;
	display:inline!important;
}
#info, #bobin, #shiro, #lesson, #blog, #contact{
	color: white;
	font-size: 36px;
}

#patternbobbin h3,
#patternembroidery h3 {
	margin-bottom: 80px;
}

#patternbobbin .climgtxt,
#patternembroidery .climgtet {
	margin-bottom: 50px;
}

#patternbobbin .container .row .row,
#patternembroidery .container .row .row {
	margin-bottom: 20px;
}

#patternbobbin h3,
#patternembroidery h3 {
	line-height: 0.8
}

#patternbobbin h4,
#patternembroidery h4 {
	font-size: 14px
}


.thanks {
	margin-bottom: 300px
}


/* ↑↑↑ セレクトボックス ↑↑↑ */

.btn {
	color: #888;
	border: solid 1px #ccc;
	background-color: white;
	transition: .5s;
}

.btn:hover {
	color: white;
	border: solid 1px white;
	background-color: #383838;
}

input.btn:active {
	border: solid 1px #ccc;
	background-color: #ddd;
}

input.btn:focus {
	border: solid 1px #ccc;
	background-color: #ddd;
}

#formWrap {
	font-size: 12px;
	font-size: 1.2rem;
}

#formWrap h3, #formWrap h4{
	font-size: 18px;
	font-size: 1.8rem;
}


.greetingcard { padding: 0 190px; }

/* ↓↓↓ パララックス 視差効果 ↓↓↓ */


/* レスポンシブサイトでパララックス効果をCSSだけで実装する方法 */


/* http://www.aiship.jp/knowhow/archives/15843 */

html {
	/*
	height: 100%;
	overflow: hidden;
*/
	/* ブラウザ標準のスクロールバーを消します */
}

body {
	overflow-y: scroll;
	/*  縦スクロールバーを表示します。 */
	overflow-x: hidden;
	/*  横スクロールバーを消します。 */
	height: 100%;
}

.image-base {
	min-height: 200px;
	/* 高さの最小値を決めることで高さを確保させます。デバイスサイズに応じて数値を変更させると、背景画像もレスポンシブに変化します。　*/
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	/* 背景画像をフルスクリーンにフィットさせます */
}

.img08 {
	background: url('../img/20210801_bobbet.png') repeat center fixed;
	/* 背景画像を固定させます。 */
}

.img09 {
	background: url('../img/20210801_bobbet.png') repeat center fixed;
	/* 背景画像を固定させます。 */
}

.img10 {
	background: url('../img/20210801_bobbet.png') repeat center fixed;
	/* 背景画像を固定させます。 */
}

.img11 {
	background: url('../img/20210801_bobbet.png') repeat center fixed;
	/* 背景画像を固定させます。 */
}

.img12 {
	background: url('../img/20210801_bobbet.png') repeat center fixed;
	/* 背景画像を固定させます。 */
}


/* ↑↑↑ パララックス 視差効果 ↑↑↑ */


/* ↓↓↓ スクロール位置調整 ↓↓↓ */

.image-base span {
	display: block;
	padding-top: 150px;
	/* 固定するもののheightと同じpx値 */
	margin-top: -150px;
	/* 固定するもののheightと同じpx値 */
}


/* ↑↑↑ スクロール位置調整 ↑↑↑ */


/*レスポンシブの設定*/
.pc { display: block !important; }
.sp { display: none !important; }

@media screen and (max-width: 767px) {
	.greetingcard { padding: 0; }
	.pc { display: none!important; }
  .sp { display: block!important; }
}

/*カーソル変更*/
html {
	cursor: url(../img/pointer-default.png), default;
}
h3,h4,h5,h6,p { cursor:auto; }