@charset "utf-8";
/*
Theme Name: 精巧堂ストア
Theme URI: https://
Description: 株式会社秋田精巧堂 20.10.20
Author: 株式会社秋田精巧堂
Author URI: https://
*/
/* CSS Document all device-movilefirst*/
#wpadminbar { z-index: 99999999; }
.pc {
	display: none;
}
img { max-width: 100%; 
    height:auto;
}
.t_c {text-align: center;}
.t_l {text-align: left;}
.t_r {text-align: right;}
.lh0 {line-height: 0;}
.res_img{}/*レスポンシブ画像切り替えのjs用クラス名 定義不要*/
.posi_r{position: relative;}
.fw_b{font-weight: bold;}

/*--------フレックス--------*/
.dis_flex{display: flex;
justify-content: space-between;
}
@media print, screen and (min-width : 721px) {
.dis_flex_pc{display: flex;
justify-content: space-between;
}
}

/*--------背景色--------*/
.bg_gold{background-color: #aa931e;}
.bg_darkgray{background-color: #151515;}
.bg_gray{background-color: #666666;}
.bg_lightgray{background-color: #cccccc;}
.bg_red{background-color: #bd1a1f;}
.bg_white{background-color: #ffffff;}
.bg_main{
	background-image: url(images/main_bg.png);
	background-position: center top;
	background-repeat: repeat-y;
}

/*--------文字色--------*/
.t_white{color: #ffffff}
.t_black{color: #000000}
.t_gold{color: #aa931e}

@media print, screen and (min-width : 721px) {
.pc {
	display: block;
}
.sp {
	display: none;
}
img { max-width: auto; 
    height:auto;
}
.f_l{float: left;}
.f_r{float: right;}
}
/*テーブル*/
dl.dl_tbl{
 display:flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc; 
font-size: 1.6rem;
color: #000000;
}
dl.dl_tbl dt{
  background: #e6e6e6;
  width: 30%;
  padding: 10px 1em;
  border-top: 1px solid #ccc; 
}
dl.dl_tbl dd{
  padding: 10px 1em;
  margin: 0;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc; 
  width: 70%;
  background: #fff;
}

/* ----------------------------------------
 * 0. Loader, wrapper
 * ---------------------------------------- */
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff;
	z-index: 9999999;
}
.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #aa931e 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #aa931e 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #aa931e 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #aa931e 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #aa931e 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #aa931e;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #ffffff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.wrapper{
	overflow: hidden;
	padding-bottom:85px;
}
.wrap_1000,
.wrap_1100{
	width:94%;
margin-right: auto;
margin-left: auto;
}

@media print, screen and (min-width : 721px) {
.wrapper{
	overflow: hidden;
	padding-bottom:0;
}
.wrap_1000{
	width:1000px;
}
.wrap_1100{
	width:1100px;
}

/*PC-ヘッダ固定分mainを下げる*/
main{padding-top: 220px;}
main.frontpage{padding-top: 0}
}

/* ----------------------------------------
 * 1. header
 * ---------------------------------------- */
header{
	width: 100%;
 position:relative;
	height:50px;
}

.logo{
 position:absolute;
      top:8px;
	  left:13px;
	z-index: 999999;
}
.logo img{
	max-height:40px;
	width: auto;
}
/*movilenav*/
#g_menu {
        display:none;
}
.slicknav_menu {
        display:block;
}
#mobileMenu{
}
@media print, screen and (min-width : 721px) {

header{
	width:100%;
	height: auto;
	margin:0 auto;
 position:inherit;
}

.top_logo_box_wrap{
position: inherit;
z-index: 999999;
background-color: #ffffff;
width:100%;
}
.top_logo_box{
display: flex;
margin-right: 20px;
margin-left: 20px;
width:  calc(100% - 40px);
height: 100px;
justify-content: space-between;
align-items: center;

}
.top_logo_l{
}
.top_logo_l dt{
font-size:1.2rem;
padding-left: 10px;
padding-botom: 10px;
}
.top_logo_r{
display: flex;
align-items: center;
}
.top_logo_r>dt{
width: 190px;
line-height: 1.0;
}

.header_free_tit{
font-size:1.2rem;
display: block;
padding-bottom: 6px;
}

.header_free{
font-size:2.4rem;
font-weight: bold;
display: block;
}
.header_telmark{
font-size:2.0rem;
}

.header_free a,
.header_free a:visited,
.header_free a:hover,
.header_free a:active{
	text-decoration: none;
	color: #000000;
}
.header_fax{
display: block;
}
.header_att{
font-size:1.0rem;
line-height: 1.3;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
border-right:1px solid #666666;
}
.header_credit{
font-size:1.1rem;
padding-left: 10px;
}
.header_credit_list li{
display: inline-block;
padding-right: 8px;
padding-top: 4px;
}
.logo{
	width:116px;
 position:inherit;
}
.logo img{
width:116px;
max-height:48px;
height:48px;
}
/*グローバルメニュー*/
.clone-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  transition: .3s;
  transform: translateY(-100%);
}
.clone-nav {
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 999999;
  width: 100%;
  transition: .3s;
  transform: translateY(-250%);
}
.clone-nav02 {
  position: fixed;
  top: 170px;
  left: 0;
  z-index: 999999;
  width: 100%;
  transition: .3s;
  transform: translateY(-450%);
}
.is-show {
  transform: translateY(0);
}
.is-fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
.is-fixed-nav {
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 2;
  width: 100%;
}
.is-fixed-nav02 {
  position: fixed;
  top: 170px;
  left: 0;
  z-index: 2;
  width: 100%;
}

#mobileMenu{
}

/*movilenav*/

#g_menu_box{
width: 100%;
height: 70px;
margin: 0 auto;
background-image: url(images/bg_gray.png);
background-position: left top;
background-repeat: repeat;
}

.g_menu_wrap{
width: 1100px;
margin: 0 auto;
position: relative;
}
	
#g_menu{
	display: block;
	*zoom: 1;
	list-style-type: none;
	position: absolute;
	top:20px;
	right:0;
	width: 1100px;
}
 #g_menu:before,  #g_menu:after{
  content: "";
  display: table;
}
 #g_menu:after{
  clear: both;
}


 #g_menu > li{
	position: relative;
	width: 157px;
	height: 30px;
	float: left;
	margin: 0;
	text-align: center;
	font-size:1.4rem;
	line-height: 1.07;
	color: #ffffff;
	border-right:1px solid #ffffff;
}
#g_menu > li:first-child{
	border-left:1px solid #ffffff;
	width: 158px;
}
.g_menu_1l{
padding-top: 7px;
}

 #g_menu li a{
  display: block;
  margin: 0;
  padding:  0;
  text-decoration: none;
	height: 30px;
text-align: center;
color: #ffffff;
transition: 0.3s ease-in-out;
}

 #g_menu > li > a:hover{
color: #d5ca91;
}


 #g_menu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  width: 250px;
}
 #g_menu li ul li{
	width: 100%;
  overflow: hidden;
  height: 0;
  transition: .2s;
	 	padding: 0;
	position: relative;
  font-size: 1.5rem;
}
 #g_menu li:hover > ul > li{
  overflow: visible;
  height: 60px;
}
 #g_menu li ul li a{
  padding: 22px 15px 0;
  background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	 line-height: 1;
	 vertical-align: 0;
  height: 60px;
  font-size: 1.5rem;
  border-bottom: 1px solid #ffffff;
}
#g_menu li ul li a:hover{
	color: #fbed21;
}
 #g_menu li ul li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 155px;
  margin: 0;
  padding: 0;
}
 #g_menu li ul li ul li{
	width: 155px;
  overflow: hidden;
  height: 0;
  transition: .2s;
	 	padding: 0;
}
 #g_menu li:hover ul li ul li{
display: none;
	 height: 50px;
}
 #g_menu li ul li:hover ul li{
display: block;
	 height: 50px;
} 
#g_menu li ul li:hover ul li.show{
 animation: show 0.2s ease-out 0s;
-webkit-animation:show  ease-out 0.2s ease;
}
 #g_menu li ul li  ul li a{
  padding: 14px 15px 0;
  background: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	 line-height: 1;
	 vertical-align: 0;
  height: 50px;
  font-size: 1.5rem;
}
#mobileMenu{
display: none;
}
.g_menu02_box{
background-color: #666666;
width: 100%;
height: 50px;
}
#g_menu02{
	display: block;
	*zoom: 1;
	list-style-type: none;
	padding-top:10px;
margin-right: auto;
margin-left: auto;
width: 1100px;
}
 #g_menu02:before,  #g_menu02:after{
  content: "";
  display: table;
}
 #g_menu02:after{
  clear: both;
}

 #g_menu02 > li{
	position: relative;
	width: 366px;
	height: 30px;
	float: left;
	margin: 0;
	text-align: center;
	font-size:1.4rem;
	line-height: 30px;
	color: #ffffff;
	border-right:1px solid #ffffff;
}
#g_menu02 > li:first-child{
	border-left:1px solid #ffffff;
}
 #g_menu02 li a{
  display: block;
  margin: 0;
  padding:  0;
  text-decoration: none;
	height: 30px;
text-align: center;
color: #ffffff;
transition: 0.3s ease-in-out;
}

 #g_menu02 > li > a:hover{
color: #d5ca91;
}


}


/* ----------------------------------------
 * 2. footer
 * ---------------------------------------- */

footer{
width: 100%;
background-image: url(images/bg_gray.png);
background-position: left top;
background-repeat: repeat;
color:#ffffff;
}

footer a {
	text-decoration: none;
	color: #ffffff;
}
footer a:visited {
	text-decoration: none;/**/
	color: #ffffff;
}
footer a:hover {
	color: #ffffff;
	text-decoration: none;
}
footer a:active {
	color: #ffffff;
	text-decoration: none;
}

.footer_wrap{
	padding-top: 50px;
	padding-bottom: 50px;
}

.footer_add{
font-size:1.2rem;
line-height: 1.4;
text-align: center;
padding-bottom: 18px;
}
@media print, screen and (min-width : 721px) {
.footer_add{
text-align: left;
width: 200px;
padding-bottom: 0;
padding-right: 5px;
}
}
.footer_att{
line-height: 1.0;
text-align: center;
margin-bottom: 8px;
}
@media print, screen and (min-width : 721px) {
.footer_att{
text-align: left;
}
}
.footer_att_telmark{
font-size:2.2rem;
}
.footer_free{
font-size:3.2rem;
font-weight: bold;
padding-right: 10px;
padding-bottom: 4px;
}
.footer_fax{
font-size:1.8rem;
padding-bottom: 8px;
}
.footer_att_txt{
font-size:1.2rem;
line-height: 1.4;
}
.footer_btn_wrap>dt{
padding-top: 14px;
padding-bottom: 6px;
}
@media print, screen and (min-width : 721px) {
.footer_btn_wrap{
display: flex;
padding-top: 15px;
}
.footer_btn_wrap>dt{
padding-top: 0;
padding-bottom: 0;
padding-right: 5px;
width: 200px;
}
.footer_btn_wrap>dd{
width: 200px;
}
}

.footer_credit_wrap{
margin-top: 16px;
padding: 10px;
background-color: #ffffff;
text-align: center;
}
@media print, screen and (min-width : 721px) {
.footer_credit_wrap{
text-align: left;
display: flex;
justify-content: center;
align-items: center;
}
}
.footer_credit_tit{
font-size:1.2rem;
color: #000000;
}
@media print, screen and (min-width : 721px) {
.footer_credit_tit{
line-height: 1.3;
padding-right: 16px;
}
}
.footer_credit_list li{
display: inline-block;
padding-left: 8px;
padding-top: 4px;
}
.footer_credit_list li:first-child{
padding-left: 0;
}

@media print, screen and (min-width : 721px) {
.footer_comment_wrap{
display: flex;
justify-content: space-between;
width: 600px;
}
}
.footer_comment_box{
border:1px solid #ffffff;
padding: 20px;
margin-top: 16px;
}
@media print, screen and (min-width : 721px) {
.footer_comment_box{
width: 184px;
margin-top: 0;
}
}
.footer_comment_tit{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
@media print, screen and (min-width : 721px) {
.footer_comment_tit{
display: inline-block;
text-align: center;
width: 100%;
}
}
.footer_comment_tit>dd{
font-size:1.6rem;
font-weight: bold;
padding-left: 14px;
text-align: center;
}
@media print, screen and (min-width : 721px) {
.footer_comment_tit>dd{
padding-left: 0;
}
.footer_link{
padding-top: 25px;
font-size:1.2rem;
}
.footer_link>li{
display: inline-block;
padding-right: 24px;
}
}
.copyright {
margin:0;
	font-size: 1.2rem;
	line-height: 1.25;
	text-align: center;
	padding:8px 0;
	background-color: #ffffff;
	color: #000000;
}

/*SPフッタ固定*/
#footerMenu_sp {
  background: #aa931e;
  color: #ffffff;
  width: 100%;
  height: 0px;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  overflow: none;
  left: 0;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

#footerMenu_sp.show{
  height: 10vh;
display: flex;
	align-items: center;
justify-content: center;
-moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  z-index: 9999;

}
.footerMenu_navi {
margin:0 auto 0;
display: flex;
justify-content: center;
width: 96%
}
.footerMenu_navi li {
  text-align: center;
  height: 6vh;
  margin-left:8px;
  width: calc(100% / 3);
  font-size:4.0rem;
}
.footerMenu_navi li a {
color: #ffffff;
}



/* ----------------------------------------
 * 3. common, 見出しなど
 * ---------------------------------------- */
main {
	width: 100%;
	margin:0;
}
#pagetop,#pagetop i {
display: none;}
@media print, screen and (min-width : 721px) {
#pagetop {
	margin-bottom: 34px;
	width: 40px;
	height: 40px;
	position: fixed;
	z-index: 9999;
	bottom: 20px;
	right: 25px;
	background-color: rgba(0,0,0,0.5);
	color: #ffffff;
	text-align: center;
	line-height: 40px;
	font-size:2.2rem;
}
#pagetop a {
	color: #ffffff;
	display: block;
}
#pagetop i {
	display: inline-block;
}
}
a img.img_hover{
transition: 0.3s ease-in-out;
  opacity: 1.0;
}

a:hover img.img_hover{
transition: 0.3s ease-in-out;
  opacity: 0.7;
}


/**/
.main_container{
}	
@media print, screen and (min-width : 721px) {
/*main_contents*/	
.main_container{
width: 812px;
float:right;
}	
/*side_contents*/	
.side_container{
width: 248px;
float:left;
}

.sidemenu_tit{
background-image: url(images/bg_gray.png);
background-position: left top;
background-repeat: repeat;
font-size:1.5rem;
color: #ffffff;
display: flex;
align-items: center;
padding:8px 14px;
}
.sidemenu_tit>dt{
padding-right: 14px;
line-height: 1.0;
}

.sidemenu_subtit{
background-color: #666666;
padding:5px 14px;
font-size:1.5rem;
color: #ffffff;
line-height: 1.2;
}
.sidemenu li{
font-size: 1.4rem;
border-bottom: 1px solid #666666;
height: 40px;
line-height: 40px;
	position: relative;
}
.btn_triangle_gray{
  border-bottom: 7px solid #666666;
  border-left: 7px solid transparent;
	  position: absolute;
bottom:3px;
	right:3px;
    transition: .4s;
}
.sidemenu li a{
display: block;
height: 40px;
color: #000000;
padding-left: 14px;

transition: 0.3s ease-in-out;
}
.sidemenu a:hover{
background-color: #aa931e;
color: #ffffff;
}

/*検索フォーム*/
.searchform_box {
border:1px solid #000000;
border-top:none;
padding:14px;
}
.searchform {
  position: relative;
}
.searchfield {
  font-size: 14px;
  width: 100%;
  margin: 3px;
  padding: 4px;
  border: solid 1px #bbb;
  border-radius: 4px;
}
.searchsubmit {
  font-family: FontAwesome;
  font-size: 1.4em;
  position: absolute;
  top: 0;
  right: 2%;
  margin-top: 10px;
  padding: 0;
  cursor: pointer;
  color: #a0a0a0;
  border: none;
  background: transparent;
}
 
.searchsubmit:hover {
  opacity: 0.6;
}




/*サイド-お知らせ*/
.side_news_wrap{
border:1px solid #666666;
border-top:none;
padding-bottom: 10px;
}
.side_news_box{
width: 210px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
}
.side_news_date{
font-size:1.3rem;
}
.side_news_tit{
font-size:1.7rem;
line-height: 1.3;
padding-bottom: 6px;
}
}

/* ----------------------------------------
 * btn
 * ---------------------------------------- */
.btn_triangle_white{
  border-bottom: 10px solid #ffffff;
  border-left: 10px solid transparent;
	  position: absolute;
bottom:3px;
	right:3px;
    transition: .4s;
}
.btn_red{
	width: 100%;
	position: relative;
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1.0;
	padding: 13px;
	margin-bottom:8px;
	text-decoration: none;
	color: #ffffff!important;
	background-color: #be1a20;
}
a.btn_red {
    color: #ffffff!important;
	transition: .4s;
}
a.btn_red:hover{
	background-color: #aa931e;
}
/*サイドバーのお知らせ等用*/
.btn_triangle_white_ss{
  border-bottom: 7px solid #ffffff;
  border-left: 7px solid transparent;
  position: absolute;
  bottom:3px;
  right:3px;
  transition: .4s;
}
.btn_gray_ss{
	position: relative;
	display: inline-block;
	font-size: 1.0rem;
	line-height: 1.0;
	padding: 5px 10px 5px 5px;
	margin-bottom:8px;
	text-decoration: none;
	color: #ffffff!important;
	background-color: #999999;
}
a.btn_gray_ss {
    color: #ffffff!important;
	transition: .4s;
}
a.btn_gray_ss:hover{
	background-color: #aa931e;
}
/*トップのお知らせ等用*/
.btn_black_ss{
	position: relative;
	display: inline-block;
	font-size: 1.0rem;
	line-height: 1.0;
	padding: 5px 10px 5px 5px;
	margin-bottom:8px;
	text-decoration: none;
	color: #ffffff!important;
	background-color: #000000;
}
a.btn_black_ss {
    color: #ffffff!important;
	transition: .4s;
}
a.btn_black_ss:hover{
	background-color: #aa931e;
}



/*タイトル*/
/*グレー背景の小見出し*/
.main_tit_wrap{
border-bottom:1px solid #666666;
padding-bottom: 2px;
}
.main_tit{
background-image: url(images/bg_gray.png);
background-position: left top;
background-repeat: repeat;
border-left:6px solid #aa931e;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 1.0;
}
.main_tit>dt{
color:#ffffff;
font-size:2.0rem;
padding-left: 20px;
}
.main_tit>dd{
color:#666666;
font-size:3.4rem;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
}

/*区切り罫*/
hr{
 height: 1px;
 background-color: #c5c4c3;
 width: 100%;
 border: none;
}


/* ----------------------------------------
 * テンプレートパーツ
 * ---------------------------------------- */
/*問い合わせ*/
.temp_contact_wrap{
border:1px solid #cfcfcf;
margin-top: 50px;
padding-right: 3.5%;
padding-left: 3.5%;
}
.temp_contact_tit{
display: flex;
justify-content: center;
align-items: center;
line-height: 1.0;
border-bottom:1px solid #cfcfcf;
}
.temp_contact_tit>dt{
padding-right: 14px;
}
.temp_contact_tit>dt>img{
vertical-align: bottom;
}
.temp_contact_tit>dd{
font-size:2.0rem;
}
.temp_contact_txt a,
.temp_contact_txt a:visited,
.temp_contact_txt a:hover,
.temp_contact_txt a:active{
	text-decoration: none;
	color: #000000;
}
.temp_contact_txt{
padding-top: 24px;
padding-bottom: 24px;
border-bottom:1px solid #cfcfcf;
}
@media print, screen and (min-width : 721px) {
.temp_contact_txt{
display: flex;
justify-content: center;
}
}
.temp_contact_txt>dt{
text-align: center;
padding-bottom: 20px;
}
@media print, screen and (min-width : 721px) {
.temp_contact_txt>dt{
text-align: left;
padding-bottom: 0;
width: 360px;
}
}
@media print, screen and (min-width : 721px) {
.temp_contact_txt>dd{
width: 266px;
}
}
.temp_contact_free>a,
.temp_contact_free>a:visited,
.temp_contact_free>a:hover,
.temp_contact_free>a:active{
	text-decoration: none;
	color: #000000;
}
.temp_contact_free{
font-size:4.6rem;
font-weight: bold;
display: block;
padding-bottom: 4px;
line-height: 1.0;
}
.temp_contact_free>img{
height: 32px;
width: auto;
}
.temp_contact_telmark{
font-size:3.6rem;
}

.temp_contact_fax{
font-size:2.9rem;
line-height: 1.0;
display: block;
padding-bottom: 8px;
}
.temp_contact_att_txt{
font-size:1.2rem;
line-height: 1.4;
}
.temp_contact_card_tit{
font-size:1.5rem;
text-align: center;
padding-top: 18px;
padding-bottom: 12px;
font-weight: bold;
}
.temp_contact_card{
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
text-align: center;
}
.temp_contact_card>li{
display: inline-block;
padding-left: 10px;
}
.temp_contact_card>li:first-child{
padding-left: 0;
}

/*配達エリア*/
.temp_area_wrap{
border:1px solid #cfcfcf;
margin-top: 50px;
padding-right: 3.5%;
padding-left: 3.5%;
}
.temp_area_tit{
display: flex;
justify-content: center;
align-items: center;
line-height: 1.0;
border-bottom:1px solid #cfcfcf;
padding-top: 16px;
padding-bottom: 10px;
}
.temp_area_tit>dt{
padding-right: 14px;
}
.temp_area_tit>dt>img{
vertical-align: bottom;
}
.temp_area_tit>dd{
font-size:2.0rem;
}

.temp_area_txt{
padding-top: 16px;
padding-bottom: 18px;
border-bottom:1px solid #cfcfcf;
}
@media print, screen and (min-width : 721px) {
.temp_area_txt{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
}
.temp_area_txt>dt{
padding-bottom: 10px;
}
@media print, screen and (min-width : 721px) {
.temp_area_txt>dt{
padding-bottom: 0;
}
}
.temp_area_txt>dd{
font-size:1.3rem;
}
@media print, screen and (min-width : 721px) {
.temp_area_txt>dd{
font-size:1.3rem;
width: 366px;
}
}
.temp_area_txt_tit{
font-size:1.5rem;
font-weight: bold;
color: #ffffff;
padding: 6px 10px;
margin-bottom: 10px;
margin-top: 20px;
}
.temp_area_txt_tit:first-child{
margin-top: 0;
}
.temp_area_tit02{
font-size:1.5rem;
text-align: center;
padding-top: 18px;
padding-bottom: 18px;
font-weight: bold;
}
.temp_area_txt_tit_bg5000{
background-color:#f7ccde; 
}
.temp_area_txt_tit_bg10000{
background-color:#ef99bd; 
}
.temp_area_txt_tit_bg15000{
background-color:#e6669d; 
}
.temp_area_txt_tit_bg20000{
background-color:#d6005b; 
}
.temp_area_txt_tit_tc{
color:#d6005b; 
}


/* ----------------------------------------
 * top
 * ---------------------------------------- */
  /*mainimg*/
 .top_slider{
 padding-top: 60px;
}
@media print, screen and (min-width : 721px) {
.top_slider{
 padding-top: 0;
}
}

  /*top_商品スライド*/
.main_slider{
width: 90%;
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width : 721px) {
.main_slider{
width: 758px;
}
}
.main_slider a,
.main_slider a:visited,
.main_slider a:hover,
.main_slider a:active{
	text-decoration: none;
	color: #000000;
}
.slide-prev-arrow,
.slide-next-arrow{
cursor:pointer;
}
.slide-prev-arrow{
position: absolute;
left:-24px;
top:30%;
z-index: 90000;
}
.slide-next-arrow{
position: absolute;
right:-24px;
top:30%;
z-index: 90000;
}
@media print, screen and (min-width : 721px) {
.slide-prev-arrow{
left:-27px;
}
.slide-next-arrow{
right:-27px;
}
}

.top_item_read{
font-size:1.5rem;
padding-top: 24px;
padding-bottom: 18px;
}
@media print, screen and (min-width : 721px) {
.top_item_read{
padding-left: 26px;
}
}
.top_item{
width: 94%;
}
@media print, screen and (min-width : 721px) {
.top_item{
width: 244px;
}
}
.top_item_tit{
font-size:1.7rem;
line-height: 1.3;
padding-top: 6px;
padding-bottom: 6px;
}
.top_item_price{
text-align: right;
font-size:2.6rem;
}
.top_item_price>span{
font-size:1.6rem;
}

.top_sidemenu{
width: 90%;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
@media print, screen and (min-width : 721px) {
.top_sidemenu{
width: 758px;
}
}
.top_sidemenu>li{
border:1px solid #cfcfcf;
width: 48%;
margin-bottom: 10px;
}
@media print, screen and (min-width : 721px) {
.top_sidemenu>li{
width: 179px;
margin-bottom: 0;
}
}
/*instagram*/
.top_instagram_tit{
border-bottom:1px solid #cfcfcf;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 67px;
margin-bottom: 24px;
}
.top_instagram_tit>dd{
font-size:1.7rem;
padding-bottom: 8px;
}

/*top_newsとFB*/
.top_news_wrap{
margin-top: 40px;
margin-bottom: 40px;
}
.top_news_wrap>dt{
border:1px solid #cfcfcf;
margin-bottom: 20px;
}
@media print, screen and (min-width : 721px) {
.top_news_wrap>dt{
width: 444px;
margin-bottom: 0;
}
.top_news_wrap>dd{
width: 344px;
}
}
.top_news_box{
width: 87%;
margin-right: auto;
margin-left: auto;
}
.top_news_tit{
display: flex;
align-items: center;
border-bottom:1px solid #cfcfcf;
margin-top: 14px;
padding-bottom: 8px;
}

.top_news_tit>dt{
font-size:3.4rem;
line-height: 1.0;
padding-right: 15px;
}
.top_news_tit>dd{
font-size:2.0rem;
line-height: 1.0;
}
.top_news_txt{
display: flex;
flex-wrap: wrap;
}
.top_news_txt a,
.top_news_txt a:visited,
.top_news_txt a:hover,
.top_news_txt a:active{
	text-decoration: none;
	color: #000000;
}
.top_news_txt>dt{
font-weight: bold;
width: 25%;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
border-bottom:1px solid #cfcfcf;
line-height: 1.0;
font-family: 'Oswald', sans-serif;
}
.top_news_txt>dd{
width: 75%;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
border-bottom:1px solid #cfcfcf;
line-height: 1.0;
}
.top_news_btn{
margin-top: 16px;
margin-right: 8px;
margin-bottom: 8px;
}
/*top_社長あいさつ*/
.top_messeage_wrap{
}
.top_messeage_tit{
display: flex;
justify-content: center;
align-items: baseline;
}
@media print, screen and (min-width : 721px) {
.top_messeage_tit{
margin-left: 20px;
}
}
.top_messeage_tit>dt{
font-size:7.7rem;
line-height: 1.0;
padding-right: 10px;
}
.top_messeage_tit>dd{
font-size:2.0rem;
line-height: 1.0;
}
.top_messeage_box{
border:1px solid #cfcfcf;
margin-top: 20px;
margin-bottom: 20px;
padding: 15px;
}
@media print, screen and (min-width : 721px) {
.top_messeage_box{
border:none;
margin-top: 0;
margin-bottom: 40px;
padding: 0;
position: relative;
}
.top_messeage_box::before {
content:'';
display:block;
padding-top:50%;
}
}
.top_messeage_img{
text-align: center;
}
@media print, screen and (min-width : 721px) {
.top_messeage_img{
text-align: left;
position: absolute;
top:-90px;
left:0;
z-index: -1;
}
}
.top_messeage_subtit{
font-size:2.0rem;
font-weight: bold;
margin-bottom: 8px;
}
@media print, screen and (min-width : 721px) {
.top_messeage_txt_box{
border: 1px solid #cfcfcf;
border-top: none;
width: 604px;
height: 450px;
position: absolute;
top: 0;
right: 0;
z-index: -2;
background-image: url(images/top/top_messeage_line.png);
background-position: right top;
background-repeat: no-repeat;
}
.top_messeage_txt{
width: 530px;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
}
}

/* ----------------------------------------
 * 2f_common
 * ---------------------------------------- */
/*2f ページタイトル*/
.page_tit{
font-size: 6.0rem;
text-align: center;
line-height: 1.0;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.page_subtit{
font-size: 1.6rem;
font-weight: bold;
margin-top: 10px;
padding-bottom: 20px;
}
@media print, screen and (min-width : 721px) {
.page_tit{
font-size: 7.0rem;
margin-top: 0;
padding-top: 30px;
padding-bottom:30px;
}
.page_subtit{
margin-top: 5px;
padding-bottom: 0;
}
}

/* ----------------------------------------
 * 商品一覧
 * ---------------------------------------- */
.archive_att_box_tit{
color: #ffffff;
line-height: 1;
padding-top: 24px;
padding-bottom: 14px;
}
.archive_att_box_tit>dt{
font-size:7.0rem;
text-align: center;
}
.archive_att_box_tit>dd{
font-size:2.6rem;
text-align: center;
}
@media print, screen and (min-width : 721px) {
.archive_att_box_tit{
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.archive_att_box_tit>dt{
padding-right: 20px;
}
}

.archive_att_box_wrap{
width: 94%;
margin-right: auto;
margin-left: auto;
padding-bottom: 24px;
}
@media print, screen and (min-width : 721px) {
.archive_att_box_wrap{
display: flex;
justify-content: space-between;
}
}
.archive_att_box_wrap>li{
background-color: #ffffff;
padding: 10px;
}
@media print, screen and (min-width : 721px) {
.archive_att_box_wrap>li{
background-color: #ffffff;
width: 244px;
}
}
.archive_att_box>dt{
background-color: #be1a20;
color: #ffffff;
text-align: center;
font-size: 2.0rem;
margin-bottom: 4px;
}
.archive_att_box>dd{
text-align: center;
}
.archive_att_box>dd.archive_att_box_txt{
text-align: left;
}

/*アーカイブ用ランキング*/
.archive_ranking_tit{
background-image: url(images/bg_gray.png);
background-position: left top;
background-repeat: repeat;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 1.0;
}
.archive_ranking_tit>dt{
color:#ffffff;
font-size:2.0rem;
padding-left: 20px;
}
.archive_ranking_tit>dd{
color:#666666;
font-size:3.4rem;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
}
.archive_ranking_wrap{
border:1px solid #000000;
padding: 18px;
}
@media print, screen and (min-width : 721px) {
.archive_ranking_wrap{
display: flex;
justify-content: space-between;
}
}
.archive_ranking_wrap a,
.archive_ranking_wrap a:visited,
.archive_ranking_wrap a:hover,
.archive_ranking_wrap a:active{
	text-decoration: none;
	color: #000000;
}
.archive_ranking{
display: flex;
justify-content: space-between;
padding-bottom: 10px;
}
@media print, screen and (min-width : 721px) {
.archive_ranking{
width: 244px;
display: block;
padding-bottom: 0;
}
}
.archive_ranking>dt{
width: 48%;
}
.archive_ranking>dd{
width: 48%;
}
@media print, screen and (min-width : 721px) {
.archive_ranking>dt{
width: inherit;
}
.archive_ranking>dd{
width: inherit;
}
}
.archive_ranking_img{
position: relative;
}
.archive_ranking_num{
position: absolute;
top:4px;
left:4px;
}
.archive_ranking_num img{
width: 75%;
}

@media print, screen and (min-width : 721px) {
.archive_ranking_num{
top:10px;
left:10px;
}
.archive_ranking_num img{
width: 100%;
}
}

.archive_list_wrap{
padding-top: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.archive_list_box{
background-color: #f2f2f2;
width: 48%;
padding: 10px;
margin-bottom: 10px;
}
@media print, screen and (min-width : 721px) {
.archive_list_wrap::after{
  content:"";
  display: block;
  width:264px;
 }
.archive_list_box{
width: 264px;
}
}

.archive_list04_box{
background-color: #f2f2f2;
width: 48%;
padding: 10px;
margin-bottom: 10px;
}
@media print, screen and (min-width : 721px) {
.archive_list04_box{
background-color: #f2f2f2;
width: 192px;
padding: 10px;
}
}



@media print, screen and (min-width : 721px) {
.archive_list{
width: 244px;
}
.archive_list04{
width: 172px;
}

}

/*デリカート CSS*/
.item_detail_number button {
    height: 31px;
    width: 31px;
}

.border_tit{
display: flex;
justify-content: space-between;
align-items: center;
line-height: 1.0;
border:1px solid #cfcfcf;
}
.border_tit>dt{
font-size:2.0rem;
padding-left: 20px;
}
.border_tit>dd{
color:#666666;
font-size:3.4rem;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
}
.variation{
margin-bottom: 8px;
}

.open_btn {
	width: 40px;
	height: 170px;
	position: fixed;
	z-index: 9999;
	top: 240px;
	right: 0;
}

/* ----------------------------------------
 * 商品詳細
 * ---------------------------------------- */
.item_syosai_wrap{
border:1px solid #000000;
padding:20px;
}
.item_syosai_tit{
border-bottom:1px solid #000000;
font-size:1.6rem;
}
.item_syosai_price{
font-size:1.6rem;
}
.item_syosai_price>span{
font-size:2.6rem;
}
.item_syosai_txt{
font-size:1.3rem;
}
@media print, screen and (min-width : 721px) {
.item_syosai_img{
width: 480px;
}
.item_syosai_txt_wrap{
width: 268px;
}

}
#featured_img img,
#thumb_img img{
max-width: 100%;
}
#thumb_img{
 margin-top:2%;
}
#thumb_img img{
 float:left;
 max-width: 32%;
 width: 32%;
 cursor: pointer;
 margin-right:1%;
 border:2px solid #ffffff;
 box-sizing:border-box;
}
#thumb_img .active{
 border:2px solid #aa931e;
}
#thumb_img img:last-child{
 margin-right:0;
}

/*サンクレールの想い*/
.feeling_tit{
font-size:3.2rem;
margin-bottom: 40px;
}
.reason_box{
width: 48%;
}
.reason_box>dd>div{
font-size:2.2rem;
font-weight: bold;
line-height: 1.2;
margin-bottom: 10px;
}
.reason_box>dd>div>span{
font-size:1.8rem;
font-weight: bold;
}

/*会社概要*/
.compamnuy_tbl{
display: flex;
flex-wrap: wrap;
}
.compamnuy_tbl>dt{
width: 15%;
border-bottom:1px solid #afafaf;
padding:10px 10px;
}
.compamnuy_tbl>dd{
width: 85%;
border-bottom:1px solid #afafaf;
padding:10px 10px;
}


/*お問い合わせ・プライバシーポリシー*/
@media print, screen and (min-width : 721px) {
.privacy_box{
width: 70%;
margin-left: auto;
margin-right: auto;
}
}
.privacy_tit{
font-size:2.4rem;
font-weight: normal;
border-bottom:1px solid #000000;
padding:0 0 8px;
margin-bottom:20px;
}
.privacy_subtit{
font-size:2.0rem;
padding:20px 0 0.5em;
}
.privacy-list-num{
list-style-type: decimal;
list-style-position: inside;
padding:10px 0;
}
.contact_tel{
font-size:1.6rem;
border-bottom: #e2e2e2 1px solid;
}


/*お知らせ*/
.all_post_tit{
font-size:2.0rem;
border-bottom: #e2e2e2 1px solid;
}
.all_post_tit a,
.all_post_tit a:visited,
.all_post_tit a:hover,
.all_post_tit a:active{
	text-decoration: none;
	color: #000000;
}
.all_post_side_tit{
border-bottom:1px dotted #000000;
margin-bottom:10px;
}
/*アーカイブ*/
ul.accordion {
    width:100%;
	font-size: 1.6rem;
}
ul.accordion a,
ul.post_list a{ 
    display:block; 
    padding:5px; 
    background-position:97% center; 
    background-repeat:no-repeat; 
    text-decoration:none; 
}
ul.post_list li a{ 
color: #000000;
line-height: 1.2;
	padding-right:0.5em;
	padding-left:1.5em;
	text-indent: -1.75em;
	}
ul.accordion a:hover,
ul.post_list a:hover,
ul.post_list a ul li a:hover{
   background:#aa931e; 
    color:#ffffff; 
    cursor: pointer; 
}

ul.post_list > li > a:before,
ul.post_list > li > ul > li > a:before{ 
    content: '＞';
padding-right:0.5em;
padding-left:0.5em;
}



ul.accordion span { 
    display:block; 
    padding:5px; 
    background-position:97% center; 
    background-repeat:no-repeat; 
}
ul.accordion span:hover { 
    background:#aa931e;
    color:#ffffff;
    cursor: pointer; 
}
ul.accordion ul { 
    display:none;
}
ul.accordion > li > p span { 
}
ul.accordion > li > p span:before { 
    content: '＞';
	padding-right:0.5em;
}
ul.accordion > li > p span.open { 
}
ul.accordion > li > p span.open:before { 
    content: '＞';
}
ul.accordion > li > p span.open:hover { 
    background:#aa931e;
    color:#ffffff;
}
ul.accordion > li > ul > li { 

}
ul.accordion > li > ul > li > p { 
}
ul.accordion > li > ul > li > a { 
color:#000000;
}
ul.accordion > li > ul > li > a:before { 
    content: '＞';
	padding-right:0.5em;
	padding-left:1.5em;
}
ul.accordion > li > ul > li > ul > li { 
    background:#FFF; 
}
ul.accordion > li > ul > li > ul > li:last-child {
    border:none;
}
/* ----------------------------------------
 * faq
 * ---------------------------------------- */
#faq{ 
}
.faq_wrap{
width: 94%;
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width : 721px) {
.faq_wrap{
width: 800px;
}
}
dl.faq_ac{
	width: 94%;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 1px dotted #9fa0a0;
	margin-bottom: 22px;
}
dl.faq_ac dt{
	background-image: url(images/faq_close.png);
	background-position: right 18px;
	background-repeat: no-repeat;
	padding: 14px 50px 14px 52px;
	text-indent: -52px;
    display:block;
    cursor:pointer;
	line-height: 1.2;
}
dl.faq_ac dt img,
dl.faq_ac dd img{
	vertical-align: middle;
	padding-right: 20px;
}
dl.faq_ac dt.active{
	background-image: url(images/faq_open.png);
	background-position: right 22px;
	background-repeat: no-repeat;
}
dl.faq_ac dd{
	background-image: url(images/faq_a.png);
	background-position: 0 12px;
	padding: 14px 28px 14px 54px;
	background-repeat: no-repeat;
	min-height: 52px;
	display: none;
}
dl.faq_ac dd.open{
	display: block;
}
/* ----------------------------------------
 * flow
 * ---------------------------------------- */
.flow_wrap{
width: 94%;
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width : 721px) {
.flow_wrap{
width: 812px;
}
}

.flow_box{
border: 1px solid #aa931e;
padding: 10px 20px;
}
.flow_ya{
    color: #aa931e;
    text-align: center;
    padding-bottom: 8px;
    font-size: 3.0rem;
}
 
 
 
 
 
/*Pagenation*/
.pagenation {
    margin: 1em 0;
}
.pagenation:after, .pagenation ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.pagenation ul {
    margin: 0;
}
.pagenation li {
    float: left;
    list-style: none outside none;
    margin-left: 3px;
}
.pagenation li:first-child {
    margin-left: 0;
}
.pagenation li.active {
    background-color: #999999;
    border-radius: 3px;
    color: #FFFFFF;
    cursor: not-allowed;
    padding: 10px 20px;
}
.pagenation li a {
    background: none repeat scroll 0 0 #CCCCCC;
    border-radius: 3px;
    color: #FFFFFF;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.pagenation li a:hover {
    background-color: #9d7f3a;
    color: #FFFFFF;
    opacity: 0.8;
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease;
}