@charset "UTF-8";

html{
	/* ルートのフォントサイズを10pxに設定しておく */
	font-size: 62.5%;
	max-width: 1000px;
	margin: auto;}
	@media screen and (max-width: 800px) {
  html{font-size: 70%;}
}

body{
	/* ルートのフォントサイズを1.6rem（16pxと同等のサイズ）に設定 */
	font-size: 1.6rem;
	background-color: #f8f7f3;
	font-family: "TsukuARdGothicStd-R" ,"FOT-筑紫A丸ゴシック Std R";}
	@media screen and (max-width: 800px) {
  body{margin: 0;}
}

strong{
	font-family: "TsukuARdGothicStd-D" ,"FOT-筑紫A丸ゴシック Std D";}
}

a{text-decoration: none;}

.sp_hide{}
	@media screen and (max-width: 800px) {
	.sp_hide{display: none;}
}


br{}
	@media screen and (max-width: 800px) {
	br.sp_hide{display: none;}
}

.ma{margin: auto;}
.mb1{margin-bottom: 1rem;}
.mb2{margin-bottom: 2rem;}
.mb5{margin-bottom: 5rem;}
.center{text-align: center;}
.smalltext{font-size: 80%;}
.w80{width: 80%;}
.w90{width: 90%;}
.lh3{line-height: 3rem;}
.lh2{line-height: 2rem;}
/* ============================== カラー指定 ============================== */
.green{color: #098b94;}
.orange{color: #eca432;}
.red{color: #d44442;}
.gray{color: #797878;}
.blue{color: #1877b8;}

.bg_green{background-color: #098b94;}
.bg_orange{background-color: #eca432;}
.bg_red{background-color: #d44442;}
.bg_gray{background-color: #797878;}
.bg_blue{background-color: #1877b8;}

/* ============================== 汎用ここまで ============================== */
/* ============================== ヘッダーメニューここから ============================== */

#index_header{
  background: #098b94;
}

#index_header h1{
  margin: 0;
	padding-top: 3%;
	padding-bottom: 1%;
}

#index_header img.logo{
	width: 30%;
}
	@media screen and (max-width: 800px) {
  #index_header img.logo{width: 40%;}
}

#index_header img.hero{
	width: 100%;
	vertical-align:top;
}

#index_lead p{
		font-size: 1.5rem;
		color: #098b94;
		font-weight: bold;
}

#index_lead p.lead{
}

#index_lead p.emphasis{
		font-family: "TsukuARdGothicStd-D" ,"FOT-筑紫A丸ゴシック Std B";
		font-size: 2.5rem;
		line-height: 2.5rem;
		margin-top: 5px;
}

#index_lead .smalltext{font-size: 50%;}

.item_top a:link, .item_top a:visited, .item_top a:hover, .item_top a:active{
	color: #fff;
}

.item a:link, .item a:visited, .item a:hover, .item a:active{
	color: #fff;
}

#embroidery_list a:link, #embroidery_list a:visited, #embroidery_list a:hover, #embroidery_list a:active{
	color: #098b94;
}

/* ============================== ヘッダーメニューここまで ============================== */
/* ============================== インデックスここから ============================== */

#index_main h2{
	font-family: "TsukuARdGothicStd-D","FOT-筑紫A丸ゴシック Std D";
	font-size: 1.6rem;
	text-align: center;
	color: #ffffff;
  background: #098b94;
	margin-top: 3%;
	margin-bottom: 5%;
	padding: 2%;
}
	@media screen and (max-width: 800px) {
  #index_main h2{font-size: 1.8rem;
	padding: 3%;}
}

#index_main h3{
	font-family:"FOT-筑紫A丸ゴシック Std D";
	font-size: 1.4rem;
	text-align: center;
	color: #ffffff;
  background: #098b94;
	margin-top: 3%;
	margin-bottom: 3%;
	padding: 1%;
}
	@media screen and (max-width: 800px) {
  #index_main h2{font-size: 1.8rem;}
}


/* ============================== メイン部分 ============================== */
#embroidery_bg{
	background-position: center center;
	background-image: url("../img/embroidery_bg@2x.png");
	background-repeat:  no-repeat;
  background-size: contain;
	margin-bottom: 5%;
}

#embroidery p.head{
	font-family: "TsukuARdGothicStd-D" ,"FOT-筑紫A丸ゴシック Std D";
	font-size: 1.6rem;
	margin: auto;
	margin-bottom: 20px;
	line-height: 2.5rem;
	color: #1a1a1a;
}
	@media screen and (max-width: 800px) {
  #embroidery p.head{font-size: 1.6rem;}}

#embroidery p.main{
	font-family: "TsukuARdGothicStd-D" ,"FOT-筑紫A丸ゴシック Std D";
	font-size: 1.5rem;
	margin: auto;
	margin-bottom: 20px;
	width: 80%;
	line-height: 3rem;
	letter-spacing: 0.2rem;
	color: #098b94;
}
	@media screen and (max-width: 800px) {
  #embroidery p.main{
		font-size: 1.4rem;
		width: 90%;
		line-height: 2.5rem;
		letter-spacing: 0.3rem;}
}

.embroidery_boxwrap{
	display: flex;
}
	@media screen and (max-width: 800px) {
	 .embroidery_boxwrap{
	 	display: inline;}}

.embroidery_box{
	width: 45%;
	margin-right: 2.5%;
	margin-left: 2.5%;
}
	@media screen and (max-width: 800px) {
  #embroidery .embroidery_box{
		width: 100%;
		margin-right: 0;
		margin-left: 0;}
}

#embroidery p.h3{
	font-size: 1.4rem;
	padding: 2%;
}
	@media screen and (max-width: 800px) {
  #embroidery p.h3{
		margin-left: auto;
		margin-right:auto;
		padding: 2%;
		font-size: 1.3rem;}
}

#btob h2{
	font-family:"FOT-筑紫A丸ゴシック Std D";
	font-size: 1.5rem;
	text-align: center;
	color: #ffffff;
  background: #333333;
	margin-top: 5%;
	margin-bottom: 0;
	padding: 3%;
}
	@media screen and (max-width: 800px) {
  #btob h2{
		font-size: 1.8rem;}
}

#btob p{
	font-size: 1.3rem;
	color: #ffffff;
  background: #098b94;
	margin-top: 0;
	margin-bottom: 0;
	padding: 2%;
	line-height: 2.8rem;
}
	@media screen and (max-width: 800px) {
  #btob p{font-size: 1.5rem;
	padding: 5%;}
}

figure {
	margin: 0;
	margin-bottom: 3%;
}

.btob_img{
	width: 100%;
	margin: 0;
	vertical-align:top;
}

#info{
	border-bottom: 1px solid #c9caca;
	padding-bottom: 5%;
  padding-top:35px;
  margin-top:-35px;
}

#info .map{
	width: 50%;
	margin: auto;
	margin-bottom: 4%;
}
	@media screen and (max-width: 800px) {
  #info .map{width: 85%;}
}

#info img{
	max-width:100%;
}

#info .adress{
	margin: 0;
	padding: 2%;
	font-size: 90%;
	line-height: 3rem;
	text-align: center;
	color: #098b94;
}
	@media screen and (max-width: 800px) {
  #info .adress{line-height: 2.5rem;}
}

#info .adress_sub{
	margin: auto;
	width: 90%;
	font-size: 80%;
	line-height: 2rem;
	text-align: center;
	color: #d44442;
}
	@media screen and (max-width: 800px) {
  #info .adress{line-height: 3.5rem;}
}

#info .access{
	margin: 0;
	padding: 2%;
	font-size: 80%;
	margin-bottom: 3%;
	line-height: 2.5rem;
	text-align: center;
	color: #797878;
}
	@media screen and (max-width: 800px) {
  #info p.access{margin: auto; width: 90%; line-height: 2.5rem; text-align: left;}
}

/* ============================== インデックスここまで ============================== */
/* ============================== 問い合わせフォームここから ============================== */

#form_outer{
	padding-bottom: 3%;
  padding-top: 35px;
  margin-top: -35px;
}

#form_inner{
	padding-top: 2%;
	margin: auto;
	width: 50%;}
	@media screen and (max-width: 800px) {
	#form_inner{width: 90%; text-align: center;}
}

label{
	margin-top: 15px;
}

.submit{
	margin-top: 15px;
}

input[type="text"]{
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #a2cbcc;
    border-radius: 3px;
    padding: 10px 10px 10px 10px;
		margin-bottom: 5px;
}
	@media screen and (max-width: 800px) {
	input[type="text"]{width: 80%; text-align: left;}
}

select{
		font-size: 80%;
    width: 400px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 10px 10px 10px 10px;
		margin-top: 10px;
		margin-bottom: 10px;
}
	@media screen and (max-width: 800px) {
	select{width: 80%; text-align: left;}
}

input[type="file"]{
}

textarea{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #a2cbcc;
  border-radius: 3px;
  padding: 10px 10px 10px 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

input[type="submit"]{
	font-size: 90%;
	padding: 10px;
	background-color: #098b94;
	color: #fff;
	border: 0;
	-webkit-appearance: none;
	border-radius: 0;
}

/* ============================== フォームここまで ============================== */

/* ============================== complete/error ============================== */
#comp_err{
}
/* ============================== 以下フッター ============================== */
footer{
	font-size: 1.2rem;
	color:#fff;
  background: #098b94;
	position: absolute;
	width: 100%;
	left: 0;
}

footer a{
}

footer ul{
	margin: 20px;}
	@media screen and (max-width: 800px) {
	footer ul{text-align: center;}
}

footer li.footer_item{
  list-style: none;
	display: inline-block;
	margin-left: 10px;}
	@media screen and (max-width: 800px) {
	footer li.footer_item{display: block; margin-top: 10px;}
}

.footer_item a:link, .footer_item a:visited, .footer_item a:hover, .footer_item a:active{
	color: #fff;
}

/* ============================== 特別商取引 ============================== */
#tokutei table{
	font-family: "TsukuARdGothicStd-D" ,"FOT-筑紫A丸ゴシック Std D";
	font-size: 1.4rem;
	margin: auto;}
	@media screen and (max-width: 800px) {
	#tokutei table {font-size: 1rem;}
}

#tokutei table tr{
	height: 5rem;
}

#tokutei table th{
	padding: 3%;
}

/* ============================== 利用規約/プライバシーポリシー ============================== */
#kiyaku_policy h2{
	font-family: "TsukuARdGothicStd-D" ,"FOT-筑紫A丸ゴシック Std D";
	font-size: 1.8rem;
	text-align: center;
	margin-top: 20px;
}

#kiyaku_policy h3{
	font-family: "TsukuARdGothicStd-D" ,"FOT-筑紫A丸ゴシック Std D";
}

#kiyaku_policy{
	font-family: "TsukuARdGothicStd-R" ,"FOT-筑紫A丸ゴシック Std R";
	font-size: 1.2rem;
}

/* ========== jQuery ========= */
.fadein {
 opacity: 0;
 transform : translate(0,0);
 transition : all 1500ms;
}

.fadein.scrollin{
 opacity: 1;
 transform: translate(0, 0);
}