@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { 
	font-family: -apple-system, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	background-color: #f8f5f2; }
body {
	width: 100%;	
	font-size: 17px;
	font-weight: 500;
	line-height: 1.75;
	color: #333;
	box-sizing:border-box; }
h1 { font-size: 28px; }
a { text-decoration: none; color: #333; display: block; }
a:hover { text-decoration:none;} 
a:visited { color: #333; }
p { margin: 18px 0 20px;}


img { width: 100%; height: auto; vertical-align:top;}
.img_m { margin-top:12px;}
hr { border-top: 1px solid #8c8b8b; border-bottom: 1px solid #fff; }
ul, ol { list-style: none; }

.sp { display: block; }
.pc { display: none; }
.grecaptcha-badge { visibility: hidden; }
.products, 
.company,
.blogs,
.headtext,
.ask { margin: 0 12px; }



.complete { 
	margin: 50px auto 0; 

	text-align: center;

	padding: 15px 30px;
	background: red
	color: #fff;
	text-align: center;
	width: 60%; }
/* color */
.red { color: red; }

/* header */
header { 
	width: 100%;
	padding: 12px 0 ;
	text-align: center; }
/* logo */
.logo{ 
	font-family: 'Vidaloka', serif;
	font-size: 20px;
	font-weight: 900; }
/* menu */
.groval { display: flex; margin: 9px 0 0; }
.groval li {
	width: calc( 100% / 3);
	padding: 12px;
	border: 1px solid #ccc;
	text-align: center;
	margin-left:-1px;
	margin-top:-1px; }

	
/* menu_under */
.order { display: flex; }	
.order li {
	width: calc( 100% / 2);
	padding: 12px;
	border: 1px solid #ccc;
	text-align: center;
	margin-left:-1px;
	margin-top:-1px; }
	
/* index */
.heading			{ margin: 30px 12px; }
.heading h2,
.sidemenu h2 { font-size: 20px; margin-bottom: 0;}
.heading span,
.sidemenu span { font-size: 18px; align-items: center; color: #e4211f; }
.midasi { border-bottom: 3px solid #403A2F;}
.flow h2 {font-size: 20px; padding-left: 12px; margin-bottom: 18px;}
.flow li { padding: 20px; border-radius: 5px; background-color: #827D64; color: #fff;}


/* パンくず */
.breadcrumb { margin: 18px 12px 0; display: flex; font-size: 14px; flex-wrap: wrap;}
.breadcrumb li { display: inline; list-style: none; }
.breadcrumb li a { display: inline; }
.breadcrumb li:after { content: '>'; padding: 0 10px;}
.breadcrumb li:last-child:after { content: ''; }
.breadcrumb li:first-child a:before { font-family: 'icomoon' ; content: '\e900'; font-weight: normal; }
.breadcrumb li a:hover { text-decoration: underline; }


/* 問い合わせ */
button, input, textarea { font-family: inherit; font-weight: 500; font-size: 18px;}
input[type=radio] { display: none; text-align: center;}
label { 
	display: block;
	width: 46%;
	text-align: center;
	height: 60px;
	line-height: 60px;
	float: left; 
	margin: 5px 5px 30px;
	border-radius: 5px;
	border: 2px solid #ddd;
	cursor: pointer;
	box-sizing: border-box; }
input[type="radio"]:checked + label {
background: #632f24;
color: #ffffff;
}
textarea {
	width: 100%;
	padding: 10px 15px;
	border-radius: 3px;
	border: 2px solid #ddd; }
.put {
	width: 100%;
	padding: 10px 15px;
	border-radius: 3px;
	border: 2px solid #ddd;
	margin: 0 0 12px; }
.put2 {
	display: none; }
.error {
	width:98%;
	margin: 12px auto;
	padding: 12px;
	border: 2px solid red;
	color: red; }
input[type="text"]:focus { outline: solid 1px #632f24; background-color:#fff8dc; border: 1px solid #632f24; }
/* blog */

.blogs h1 {
	font-size: 20px;
  padding: 0px 20px;
  border-left: 7px solid #e4211f;
  border-bottom: 1px solid #e4211f;
	margin: 40px 0 30px; }



.card_frame { 
	display: flex; 
	flex-direction: column; 
	background-color: #fff; 
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; 
	padding: 20px 18px;
	margin-bottom: 12px; }
.card_text { padding-top: 20px;}
.card_title { font-size: 20px; font-weight: bold; line-height: 125%; }
.card_text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

/* blogs */
.menu { margin: 30px 12px; }
.mokuji { width: 100%; background-color:#e4211f; padding: 5px 20px; color: #fff; font-weight: bold;}
.mokuji:before { font-family: 'icomoon' ; content: '\f03a'; font-weight: normal; padding-right: 20px; }
.menu ol { list-style-type: decimal; margin: 20px 30px; }
.menu li { padding: 12px 18px 0; border-bottom: 1px solid #603813; }
.menu i { font-weight: bold;}
/* products */

.product_box { 
	padding-bottom: 12px;
	margin: 0 8px; 
	line-height: 1.3; }
.tag {
	display: inline-block;
	margin: 20px 0 10px;
	padding: 5px 10px;
	background-color: #e4211f;
	color: #fff;
	font-size: 14px; }
.index02 {
	padding-bottom: 10px;
	font-size: 20px;
	background-image: repeating-linear-gradient(90deg, #e4211f 0, #e4211f 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
	background-size: 4px 4px;
	background-repeat: repeat-x;
	background-position: center bottom; }
.btm_red { border: 0; border-bottom: 3px solid #e4211f; }


/* company */
table  { width: 100%; border-collapse: collapse;}
th, td { padding: 8px;}
tr { border-bottom: 1px solid #603813; }
th { width: 30%;  padding: 12px 24px; text-align: right; }
td { width: 70%;  padding: 12px 24px; text-align: left; }

/* merit_toppage */
.merit { display: flex; flex-wrap: wrap;  }
.merit li { padding: 8px 10px; border: 1px solid #603813; margin: 8px; font-size:14px; border-radius: 10px; }
.article { display: flex; flex-direction: column; }
.article li { width: 90%;  padding: 8px 20px; border-left: solid 8px #603813; margin: 8px auto; background: #fff; border-radius: 0 5px 5px 0; width: 90%; } 

/* button */
.btn {
	width: 70%;
	font-size: 18px;
	font-weight: bolder;
  text-align: center;
  cursor: pointer; 
  padding : 14px 0;
  background: #F05E1C;
  color : #ffffff;
	border: 0;
	line-height: 1;
	margin: 18px auto; }
.btn a { color : #ffffff; display: block; }
.center { text-align: center;}
.captcha{ width: 70%; font-size: 13px; margin: 0 auto; text-align: center;}

.recaptcha_policy {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 11px !important;
  color: #444 !important;
}
.recaptcha_policy a {
  font-size: 11px !important;
  color: #111 !important;
}


.left { text-align: left;}
/* button_up */
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6; }
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none; }
#page_top a::before{
  font-family: 'icomoon';
  content: '\ea25';
  font-size: 25px;
  color: #603813;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center; }
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #603813; }



.paging { width: 98%; display: flex; margin: 0 auto 80px; border: 1px solid #8c6239; }
.paging li { padding:12px; }
.paging li a { color: #fff; display: block;}
.pre{ width:25%; background-color: #8c6239; color: #fff;}
.middle { width:50%; text-align: center; border-right: 1px solid #8c6239; border-left: 1px solid #8c6239;}
.next { width:25%; text-align:right; background-color: #8c6239; color: #fff;}



.love { margin: 70px auto 0; width: 80%;}
footer { margin: 50px auto; text-align: center; }

.sidemenu { display:none;}


@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?xie38w');
  src:  url('fonts/icomoon.eot?xie38w#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?xie38w') format('truetype'),
    url('fonts/icomoon.woff?xie38w') format('woff'),
    url('fonts/icomoon.svg?xie38w#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
}
.icon-play:before {
  content: "\e912";
}
.icon-cart:before {
  content: "\e93a";
}
.icon-phone:before {
  content: "\e942";
}
.icon-location:before {
  content: "\e947";
}
.icon-clipboard:before {
  content: "\e9b8";
}
.icon-list2:before {
  content: "\e9bb";
}
.icon-menu4:before {
  content: "\e9c0";
}
.icon-eject:before {
  content: "\ea25";
}
.icon-arrow-up:before {
  content: "\ea32";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-mail2:before {
  content: "\ea84";
}



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

body { max-width: 1080px; margin: 0 auto; }
.ask { width: 600px; margin: 0 auto;}
.obi { width: 100%; margin: 0 10px; }
.sidemenu { width: 20%; display: block; }

.blogs { width: 80%; }
.content { display: flex; flex-direction: row; margin: 0 auto; }

.sp { display: none; }
.pc { display: inline;}


.login { width: 350px; margin: 20px auto 30px; }
.btn { width: 100%; } 

table { width: 600px; margin: 0 auto; }




.logo{ font-size: 30px; }
.love { width: 60%;}
}