@charset "utf-8";
/* CSS Document */

.pc{display: none!important;}
/*ul, menu, dir {padding-inline-start: 0!important;}*/

body{
	margin: 0px;
	font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 20px;
    color:#444;
}

a:link {color: #444;text-decoration: none;}
a:visited {color: #666;	text-decoration: none;}
a:hover {color: #000;text-decoration: none;}
a:active {color: #036;text-decoration: none;}
.example { cursor: pointer; } 
a img{border: none;}

ul{ display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;}

.cf:before,.cf:after{content:"";display:block;overflow:hidden;}
.cf:after{clear:both;}
.cf{zoom:1;}

.f-oswald{font-family: 'Oswald', sans-serif; letter-spacing: 0.05em;}


hr.type1 {
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #cccccc;
height: 1px;
}


/* NEW と　プライスダウン*/
.mark-new{bcakground:#CC66BC;}
.mark-down{bcakground:#5F63C8;}


.wrap{width: 100%; margin: 0 auto;}
#main-content{padding: 30px 0 50px;width: 100%; margin: 0 auto;}
#content{width:100%;}
#page-content{width:100%;}
#side{display: none;}

.w50{width: 50%; margin: 0 auto;}
.w60{width: 60%; margin: 0 auto;}
.w70{width: 70%; margin: 0 auto;}

.img100 img{width: 100%; height: auto;}


/* position 設定
----------------------------------------*/
.position-r{position: relative}

h1{
	margin: 0px;
	padding: 0px;
	line-height: 13px;
	text-align: right;
	font-size: 12px;
	font-weight: normal;
    position: absolute;
    top:-100px; right: 0;
}

h2{font-size: 22px; font-weight: bold; margin: 0 0 20px 0; padding: 0; text-align: center;}
h2 span.subtxt{font-size: 12px; display: block; font-weight: normal; margin-top: 8px; letter-spacing: 0.05em;} 

.pankuzu{font-size: 80%; margin-bottom: 20px; color: #999;}

/* header erea
---------------------------------------------------------*/
#header{padding: 8px 0 10px;}
#header .h-logo{display: none;}
#header .h-logo-name{margin: 11px 0 0 1%;}
#header .h-logo-name img{height: 30px; width: auto; margin:0 0 5px 6px;}
#header .h-right-box{position: absolute; bottom: 10px; right:2%;}
/*#header .h-tel{position: absolute; bottom: 0; right:100px;}
#header .h-tel strong{color: #CC66BC; font-size: 30px;}*/
#header .smp-tel{position: absolute; bottom: -6px; right:70px;}
#header .smp-tel img{height: 32px; width: auto;}
#header .smp-tel-txt{font-size: 10px; position: absolute; bottom: 6px; right:65px; font-weight: 600;}
#header .h-favorite-box{position: absolute; bottom: 0; right:0;width: 100px;}
#header .h-favorite{position: absolute; bottom: -5px; right:10px; z-index: 0;}
#header .h-favorite img{width: 36px; height: auto;}
#header .h-favorite-count{
    position: absolute; bottom: -8px; right:6px; z-index: 2;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 11px;
    background: #CC66BC;
    height: 20px;
    width: 20px;    
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;}
#header .h-favorite-txt{font-size: 10px; position: absolute; bottom: -12px; right:0;}


/*  SMP SEARCH NAVI
------------------------------------------------*/
#h-search-nav{}
#h-search-nav ul{margin: 0; padding: 0; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc;}
#h-search-nav li{float: left; width: 25%; font-size: 12px; line-height: 1.1em; list-style: none;}
#h-search-nav li a{display: block; padding: 10px 0; text-align: center;}
#h-search-nav .icon{display: block; margin-bottom: 5px;}
#h-search-nav .icon img{width: auto; height: 25px;}
#h-search-nav .txt{display: block;}

/*　header menu
----------------------------------------------------*/
.primary-nav {
	border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;
	text-align: center;
	clear: both;
	width: 100%;
	position: relative;
}
.primary-nav > ul{margin: 0; padding: 0;}
.primary-nav > ul > li{
	display: inline-block;
	-webkit-transition : all .2s linear;
	transition : all .2s linear;
    padding: 5px 0;
    width: 28%;
    box-sizing: border-box;
    text-align: center;
}
.primary-nav > ul > li.home{padding: 12px 0 0; width: 16%}
.primary-nav > ul > li.home img{height: 20px; width: auto;}
.primary-nav > ul > li:hover{background: #E5E5E5;}
.primary-nav > ul > li.home:hover{background-color: #fff;}
.primary-nav > ul > li span{display: block;}
.primary-nav > ul > li > a {
	padding: 5px 10px;
	line-height: 1.2em;
	display: block;
    font-size: 14px; font-weight: bold;
}
.sub-nav {
	clear: both;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	background: #E5E5E5;
	margin: 0;
	-webkit-transition : all .2s linear;
	transition : all .2s linear;
	z-index: 101;
	left: 0;
}
.account-nav .sub-nav {
	text-align: left;
	padding: 15px 20px;
	min-width: 120px;
	left: 50%;
	margin: 10px 0 0 -80px;
}
.account-nav .sub-nav:before {
	background: #f0f0f0;
	content: '';
	display: block;
	position: absolute;
	transform: rotate(45deg);
	top: 0;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
}
.primary-nav .sub-nav {
	width: 100%;
	padding: 20px -webkit-calc(50% - 480px);
	padding: 20px calc(50% - 480px);
	border-bottom: 1px solid #ccc;
	text-align: center;
}

li:hover .sub-nav {
	opacity: 1;
	visibility: visible;
}
.primary-nav .sub-nav ul{margin: 0; padding: 0 2%;}
.primary-nav .sub-nav li {
	font-size: 13px;
	float: left;		
	margin: 10px 2%;
	width: 46%;
    border: solid 1px #666;
    background-color: #fff;
	box-sizing: border-box;
    list-style: none;
}
.primary-nav .sub-nav li a{display: block;line-height: 1.5;padding: 10px 0; }
.primary-nav .sub-nav a:hover{background-color: #F9F9F9;}

.sub-nav li .icon{display: block; text-align: center;}
.sub-nav li .icon img {	
	width: auto;
	max-height: 28px;
	margin: 0 0 5px;
}


/* side
--------------------------------------------*/

#side .side-navi{background-color:#E6E6E6;}
#side .side-navi-ttl{background-color: #666666; color: #fff; text-align: center; padding: 10px 0; margin-bottom: 20px;}
#side .side-navi-ttl .eg{font-size: 60%; letter-spacing: 0.1em;}
#side .search-type{margin: 20px 20px 10px; font-size: 110%; font-weight: 500;}
#side ul.side-nav{margin: 10px 20px; padding: 10px 20px 20px; border-bottom: 1px #666 solid;}
#side ul.side-nav:last-child{border-bottom:none;}
#side ul.side-nav li{padding: 5px 0;}


/*　pagetop
-------------------------------------------*/
#pagetop {
  position: fixed;
  right: 0;
  bottom: 50px;
  z-index: 1000;
  width: 40px;
}
#pagetop a {
    font-size: 2rem!important;
    text-align: center;
    display: block;
    text-decoration: none;
    border: 1px solid #aaa;
    padding: 2px 0 4px;
    background-color: rgba(255,255,255,0.50);
    color: #666;
}

/* footer erea
-------------------------------------------------*/

#footer{border-top: solid #ccc 1px; padding: 50px 0 0;}

#footer .add-container{text-align: center; padding: 30px 0 30px; font-size: 14px; line-height: 1.5em;width: 100%; margin: 0 auto;}
#footer .add-container strong{display: block; margin-top: 5px;}
#footer .f-logo{text-align: center;}
#footer .f-logo img{width: 55%; height: auto;}

#footer ul.btn{display:table;border-spacing: 20px 0; margin: 20px 20px 0 10px;}
#footer ul.btn li{
display:table-cell;
vertical-align:middle;
text-align:center;
}

#footer .f-navi{display: none;}
#footer .f-navi a:link,#footer .f-navi a:visited{color:#fff;}
#footer .f-navi a:hover{color:#ccc;}

#smp_menu {background-color: #F4F4F4; padding: 1.5em 0.5em 5em;}
#smp_menu ul{margin: 0; padding: 0;}
#smp_menu li{list-style: none;width: 50%; float: left; font-size: 85%;text-align: center;}
#smp_menu li a{display: block; padding: 8px;}

#copyright{display: none;}



/* フッター固定
--------------------------------------------*/

#smp-fnav{position: fixed; bottom:0px; width: 100%; z-index: 999999999999;}
#smp-fnav ul{margin:0; padding: 0;}
#smp-fnav li{float: left; width: 50%; box-sizing: border-box;background-color: #666; list-style: none; border-right: solid 1px #fff; font-size: 13px; line-height: 1.1em; font-weight: 600;}
#smp-fnav li:last-child{border-right: none;}
#smp-fnav li a{color: #fff; padding:17px 10px 0; display: block; line-height: 1.3em;}
#smp-fnav li:last-child a{color: #fff; padding:12px 10px; display: block; line-height: 1.3em;}
#smp-fnav .icon{display: inline-block;vertical-align: middle; margin:0 10px 0 15px;}
#smp-fnav .icon img{width: auto; height: 25px;}
#smp-fnav .txt{display: inline-block;vertical-align: middle;}



/*  button
---------------------------------------------*/

a.btn-contact, a.btn-phone{
  padding: 15px 30px 15px 20px;
  margin: 15px 0;
  display: block;
  color: #fff !important;
  background: #CC66BC;
  text-decoration: none;
  font-size:14px;
  text-align:center;
  text-decoration:none !important;
}
a.btn-contact:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 1px 10px 0 10px;
    background-repeat: no-repeat;
    background-image: url(../img/ic_mail.svg);
    background-size: contain;
    vertical-align: middle;
}
a.btn-phone:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 1px 10px 0 10px;
    background-repeat: no-repeat;
    background-image: url(../img/ic_phone.svg);
    background-size: contain;
    vertical-align: middle;
}
a.btn-contact:hover,a.btn-phone:hover {
    background-color: #C042AC;
}

a.btn-blog{
  padding: 10px 20px 15px 15px;
  margin: 15px 0;
  display: block;
  border: solid 1px #666;
  background: #fff;
  text-decoration: none;
  font-size:20px;
  font-weight: bold;
  text-decoration:none !important;
  position: relative;

}
a.btn-blog:before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 5px 20px 0 10px;
    background-repeat: no-repeat;
    background-image: url(../img/ic_edit_24px.svg);
    background-size: contain;
    vertical-align: middle;
}
a.btn-blog span{position: absolute; bottom: 5px; left:38%; font-size: 50%; font-weight: normal;}

a.btn-contact-footer{
  padding: 15px;
  margin: 35px 0 15px;
  display: block;
  border: solid 1px #666;
  background: #fff;
  text-decoration: none;
  font-size:16px;
  font-weight: 500;
  text-decoration:none !important;
  position: relative;

}

.new-btn{border: solid 1px #666; background: #fff; width: 80%; margin: 20px auto 0; position: relative;}
.new-btn a{display: block; padding: 15px 0 15px 15px;}
.new-btn .icon{display: inline-block;vertical-align: middle; margin:0 3px 0 0; background: #CC66BC; color: #fff; text-align: center; width: 50px; padding: 3px 0; text-align: center;}
.new-btn .txt{display: inline-block;vertical-align: middle;}
.new-btn:after {
    content: "\f105";
    font-family: FontAwesome;
    right: 15px;
    top: 30%;
    position: absolute;
}