@charset "utf-8";

/* base.css
(00)共通コンテンツ
(01)ヘッダー
(02)キャンペーンバナー
(03)左メニュー
(04)商品検索
(05)強み
(06)パンくず
 */
 
/*------------------------------------------------------------------------------------------------------------------------*/
/* デスクトップレイアウト : 900 px ～ 最大　                                                                                                                                                    */
/* タブレットレイアウト　　 : 601 px ～ 899px以下　 デスクトップレイアウトからスタイルを継承。　   　　　　　　　　　　　　                */
@media only screen and (max-width: 899px) {
}
/* モバイルレイアウト　　 : 600px以下。           タブレットレイアウトからスタイルを継承。　     　　　　　　　　　　　　                 */
@media only screen and (max-width: 600px) {
}
/*------------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------------------*/
/* (00)共通コンテンツ                                                                                                       */
/*------------------------------------------------------------------------------------------------------------------------*/
 
img, object, embed, video {
	max-width: 100%;
	vertical-align: bottom;
}
.ie6 img {
	width:100%;
}
a{ color:#ff8a00; text-decoration: underline;}
a:link{ color:#ff8a00; text-decoration: underline;}
a:visited{ color:#f0c704; text-decoration: underline;}
a:hover{ color:#f0c704; text-decoration: none;}

a:focus, *:focus { outline:none; }

a img{
	vertical-align: bottom;
}

a img:hover{opacity: 0.5; transition:all 0.5s ease 0s;}

p{ margin:0;}

.tal{ text-align:left;}
.tac{ text-align:center;}
.tar{ text-align:right;}


.br_sp  { display:none}
.br_pc  { display:inherit;}
@media only screen and (max-width: 640px) {
	.br_sp  { display:inherit}
	.br_pc  { display:none;}
}

/* デスクトップレイアウト : 960 px ～最大 1200 px */
.wrapper{
	width:1200px;
	margin:0 auto;
}
#contents{
	margin: 0 0 100px 0;
	padding:0 0 0 0;
	font-size:0;
}
#contents .wrapper{
	margin-top:	30px;
}
#contents #main{
	width:calc(75% - 40px);
	max-width: 860px;
	font-size: 14px;
	display:inline-block;
	vertical-align: top;
}
#contents #main.column1{
	margin: 0 auto;
	display: block;
}
#contents .wrapper #form {
	max-width: 860px;
	margin: 0 auto;
}
/* タブレットレイアウト : 600 px ～ 959 px */
@media only screen and (max-width: 1240px) {
	.wrapper{
		width:calc(100% - 40px);
		margin:0 20px;
	}
}
/* モバイルレイアウト : 900 px およびそれ以下.  */
@media only screen and (max-width: 1090px) {
	.wrapper{
		width:calc(100% - 20px);
		margin:0 10px;
	}
	#contents{
		margin: 0 0 50px 0;
		padding:90px 0 0 0;
	}
	#contents .wrapper{
		margin-top:	20px;
		overflow:hidden;
	}
	#contents #main{
		width:100%;
		max-width: 860px;
		margin: 0 auto;
		display: block;
	}
}

/* ローディング */
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #FFFFFF;
  z-index: 10001;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 110px;
  margin-top: -100px;
  margin-left: -50px;
  text-align: center;
  color: #fff;
  z-index: 10002;
}
#loader img{
	width: 110px;
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (01)ヘッダー                                                                                                            */
/*------------------------------------------------------------------------------------------------------------------------*/
header{
	background: #FFFFFF;
	padding: 0;
	height: 220px;
}
header h1{
	color: #222222;
	font-size: 11px;
	font-weight: normal;
}
header h1 img{
	width: 100%;
}
header .sp-header{
	display: none;
}
/* PC用ヘッダー */
header .pc-header h2{
	max-width: 282px;
}
.head-scroll .navibar{
	background: #f3f3f3;
	height: 60px;
	display: flex;
	align-items: center;
	padding: 0 calc((100% - 1200px)/2);
}
	.head-scroll .navibar h1 {
		width: 50%;
	}
	.head-scroll .navibar .menu1 {
		margin-left: auto;
	}
	.head-scroll .navibar .tel {
		margin-left: 20px;
	}
.head-scroll .menu2{
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0px auto;
	height: 80px;
}
.head-scroll .menu2 ul {
	display: flex;
	align-items: center;
}
.head-scroll .menu2 ul li {
	margin-right: 1em;
}
.head-scroll .menu2 ul li:last-child,
.head-scroll .menu2 ul li.head_contact {
	margin-right: 0;
}
.head-scroll .menu2 ul li a {
	display: block;
	text-decoration: none;
	color: #000;
	height: 26px;
	line-height: 26px;
	position: relative;
}
	.head-scroll .menu2 ul li a:hover {
		color: #888;
	}

.head-scroll .menu2 ul li a img {
	margin-right: 4px;
}
.head-scroll .menu2 ul li a.beginner {
	background: url("../images/icon_beginner.png") no-repeat left center;
	background-size: 19px;
	padding-left: 23px;
}
.head-scroll .menu2 ul li a.howto {
	background: url("../images/icon_howto.png") no-repeat left center;
	background-size: 31px;
	padding-left: 35px;
}
.head-scroll .menu2 ul li a.pen {
	background: url("../images/icon_pen.png") no-repeat left center;
	background-size: 25px;
	padding-left: 29px;
}
.head-scroll .menu2 ul li a.kikaku {
	background: url("../images/icon_kikaku.png") no-repeat left center;
	background-size: 31px;
	padding-left: 35px;
}
.head-scroll .menu2 ul li a.map {
	background: url("../images/icon_map.png") no-repeat left center;
	background-size: 25px;
	padding-left: 29px;
}
.head-scroll .menu2 ul li a.qa {
	background: url("../images/icon_qa.png") no-repeat left center;
	background-size: 23px;
	padding-left: 27px;
}
.head-scroll .menu2 ul li a.mail {
	background: url("../images/icon_mail.png") no-repeat left center;
	background-size: 22px;
	padding-left: 26px;
}
.head-scroll .menu2 ul li.btn_entry,
.head-scroll .menu2 ul li.btn_login,
.head-scroll .menu2 ul li.btn_logout,
.head-scroll .menu2 ul li.tel,
.head-scroll .menu2 ul li.keyword {
	display: none;
}

.head-scroll .menu3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	padding: 10px calc((100% - 1200px)/2);
	height: 60px;
	background-color: #faf2de;
}
.head-scroll .menu3 .nav {
	width: 100%;
}
.head-scroll .menu3 .search_head {
	display: flex;
	justify-content: space-between;
}
	.head-scroll .menu3 .search_head > div,
	.head-scroll .menu3 .search_head > p {
		margin-left: 5px;
	}
	.head-scroll .menu3 .search_head > div {
		padding-right: 30px;
		padding-left: 30px;
	}
	.head-scroll .menu3 .search_head > p {
		flex: 1;
		text-align: right;
	}
	.head-scroll .menu3 .search_head .category,
	.head-scroll .menu3 .search_head .keyword {
		flex: 2;
	}
	.head-scroll .menu3 .search_head .price {
		text-align: right;
		border-right: 1px solid #999;
	}
	.head-scroll .menu3 .search_head .category {
		border-right: 1px solid #999;
		padding-left: 0;
	}




header .pc-header .head-right,
header .pc-header .menu,
header .pc-header .menu nav ul,
header .pc-header .menu nav ul li,
header .pc-header .menu1,
header .pc-header .menu1 nav ul,
header .pc-header .menu1 nav ul li{
	display: inline-block;
	vertical-align: middle;
}
header .pc-header .menu .menu1 li,
header .pc-header .menu1 li{
	display: inline-block;
	vertical-align: middle;
}
header .pc-header .menu1 li.head{
	margin: 0 0 0 20px;
	font-size: 11px;
	font-weight: bold;
}
header .pc-header .menu1 li.head a:link   { color: #222222; text-decoration: none;}
header .pc-header .menu1 li.head a:visited{ color: #222222; text-decoration: none;}
header .pc-header .menu1 li.head a:hover  { color: #777777; text-decoration: none;}
header .pc-header .menu1 li.btn_entry{
	margin: 0 20px 0 0;
	font-size: 13px;
	font-weight: bold;
}
header .pc-header .menu1 li.btn_entry a:link,
header .pc-header .menu1 li.btn_entry a:visited,
header .pc-header .menu1 li.btn_login a:link,
header .pc-header .menu1 li.btn_login a:visited,
header .pc-header .menu1 li.btn_logout a:link,
header .pc-header .menu1 li.btn_logout a:visited {
	display:block;
	background-color: #fff;
	color: #ff8a00;
	text-decoration: none;
	padding: 0 2em;
	border-radius: 10px;
	border: 1px solid #ff8a00;
	height: 38px;
	line-height: 38px;
}
header .pc-header .menu1 li.btn_entry a:hover,
header .pc-header .menu1 li.btn_login a:hover,
header .pc-header .menu1 li.btn_logout a:hover {
	background-color: #ff8a00;
	color: #fff;
}
header .pc-header .search{
	display: none;
}
header .pc-header .tel .scroll{
	display: none;
}
#global-nav{
	display:none;
}
@media screen and (max-width: 1100px) {
	header{
		background: #FFFFFF;
		padding: 5px 0;
/*		height: 120px;*/
	}
	header .pc-header h2{
		width:calc(100% - 650px);
		max-width: 250px;
	}

	header .pc-header .tel{
		display: inline-block;
		width: 32%;
		max-width: 181px;
		margin: 0 0 0 10px;
		vertical-align: top;
	}
	header .pc-header .tel .head{
		display: none;
	}
	header .pc-header .tel .scroll{
		display: inline-block;
	}

}

/* スクロール後のヘッダー */
.clone-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	transition: .3s;
	transform: translateY(-400%);
	display: inherit;
	background: #FFFFFF;
	padding: 10px 0 10px 0;
	height: 40px;
	border-bottom: solid 1px #DFDFD0;
}
.is-show {
	transform: translateY(0);
}
.head-scroll.clone-nav h1,
.head-scroll.clone-nav .navibar,
.head-scroll.clone-nav .menu3,
.head-scroll.clone-nav .menu2 ul li:nth-child(4),
.head-scroll.clone-nav .menu2 ul li:nth-child(5),
.head-scroll.clone-nav .menu2 ul li:nth-child(6),
.head-scroll.clone-nav .menu2 ul li:nth-child(7) {
	display: none;
}
.head-scroll.clone-nav h2{
	width: 160px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 40px 0 0;
}
.head-scroll.clone-nav h2 img{
	width: 100%;
}
.head-scroll.clone-nav .menu2 {
	margin: 0 auto;
	height: 40px;
}
.head-scroll.clone-nav .menu2 ul li {
	margin-right: 0;
}
.head-scroll.clone-nav .menu2 ul li:nth-child(3) {
    margin-right: 10px;
}
.head-scroll.clone-nav .menu2 ul li.btn_entry,
.head-scroll.clone-nav .menu2 ul li.btn_login,
.head-scroll.clone-nav .menu2 ul li.btn_logout,
.head-scroll.clone-nav .menu2 ul li.tel,
.head-scroll.clone-nav .menu2 ul li.keyword {
	display: block;
}
.head-scroll.clone-nav .menu2 ul li.keyword {
	vertical-align: middle;
	margin: 0 20px 0 0;
	padding: 0 0 0 15px;
	max-width: 170px;
	border: solid 1px #888888;
	border-radius: 10px;
}
.head-scroll.clone-nav .menu2 ul li.keyword input[type="text"] {
	border: none;
    background: #FFFFFF;
    padding: 3px 0 3px 0;
    width: calc(100% - 40px);
    display: inline-block;
    vertical-align: middle;
}
.head-scroll.clone-nav .menu2 ul li.keyword input[type="submit"] {
	border: none;
    background: url(../images/icon_search02.png) no-repeat center center;
    background-size: 18px;
    padding: 3px 0 3px 0;
    width: 30px;
    display: inline-block;
    vertical-align: middle;
}

.head-scroll.clone-nav .menu2 ul li a.beginner,
.head-scroll.clone-nav .menu2 ul li a.howto {
	background-image: none;
	padding: 0 10px;
	border-right: 1px solid #ddd;
}
.head-scroll.clone-nav .menu2 ul li a.mail {
	background-image: none;
	padding: 0 10px;
}
.head-scroll.clone-nav .menu2 li.btn_entry a:link,
.head-scroll.clone-nav .menu2 li.btn_entry a:visited,
.head-scroll.clone-nav .menu2 li.btn_login a:link,
.head-scroll.clone-nav .menu2 li.btn_login a:visited,
.head-scroll.clone-nav .menu2 li.btn_logout a:link,
.head-scroll.clone-nav .menu2 li.btn_logout a:visited {
	display:block;
	background-color: #fff;
	color: #ff8a00;
	text-decoration: none;
	padding: 0 1em;
	border-radius: 10px;
	border: 1px solid #ff8a00;
	height: 30px;
	line-height: 30px;
	margin-right: 10px;
}
.head-scroll.clone-nav .menu2 li.btn_entry a:hover,
.head-scroll.clone-nav .menu2 li.btn_login a:hover,
.head-scroll.clone-nav .menu2 li.btn_logout a:hover {
	background-color: #ff8a00;
	color: #fff;
}


.head-scroll.clone-nav .menu2 .search,
.head-scroll.clone-nav .menu2 .tel,
.head-scroll.clone-nav .menu2 .btn_entry,
.head-scroll.clone-nav .menu2 .btn_login {
	display: block;
}

.head-scroll.clone-nav .head-right,
.head-scroll.clone-nav .menu,
.head-scroll.clone-nav .menu .menu1,
.head-scroll.clone-nav .menu .menu1 li,
.head-scroll.clone-nav .menu nav,
.head-scroll.clone-nav .menu nav ul,
.head-scroll.clone-nav .menu nav ul li{
	display: inline-block;
	vertical-align: middle;
}
.head-scroll.clone-nav .head-right{
	width:calc(100% - 220px);
}
.head-scroll.clone-nav .menu .menu1 .head{
	display: none;
}
.head-scroll.clone-nav .search{
	display: inline-block;
	vertical-align: middle;
	margin: 0 20px 0 0;
	padding: 0 0 0 15px;
	max-width: 170px;
	border: solid 1px #888888;
	border-radius: 20px;
}
.head-scroll.clone-nav .search input[type="text"]{
	border: none;
	background:#FFFFFF;
	padding: 3px 0 3px 0;
	width:calc(100% - 40px);
	display: inline-block;
	vertical-align: middle;
}
.head-scroll.clone-nav .search input[type="submit"]{
	border: none;
	background:url(../images/icn_search01.png) no-repeat center center;
	background-size: 18px;
	padding: 3px 0 3px 0;
	width: 30px;
	display: inline-block;
	vertical-align: middle;
}
.head-scroll.clone-nav .tel .head{
	display:none;
}
.head-scroll.clone-nav .tel,
.head-scroll.clone-nav .tel .scroll{
	display: inline-block;
	vertical-align: middle;
}
@media screen and (max-width: 1160px) {
	.head-scroll.clone-nav .tel .scroll{
		display: none;
	}
}
@media screen and (max-width: 980px) {
	.head-scroll.clone-nav .search{
		display: none;
	}
}

/* SP用ヘッダー */
@media screen and (max-width: 1090px) {
	header{
		height: 90px;
	}
	header .head-scroll{
        position: fixed;
		top: 0;
	}
	header .sp-header{
		display:inherit;
		background: #FFFFFF;
		z-index:99999;
		width: 100%;
        height: 90px;
        position: relative;
	}
	header .pc-header,
	.clone-nav{
		display:none;
	}
	header h1{
		text-align: center;
		margin: 0;
		padding: 10px 0;
		font-size: 9px;
	}
	#top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
		line-height: 1;
		z-index: 999;
    }
	header h2{
		margin:0 auto;
		width: 169px;
		position: absolute;
		left:calc(50% - 105px);
	}
	header h2 img{
		width: 169px;
	}
	header .btn_mail,
	header .btn_tel{
		display:inline-block;
		vertical-align: middle;
		font-size: 10px;
		font-weight: bold;
	}
	header .btn_tel{
		margin:0 20px 0 0;
	}
	header .btn_mail a{
		background:url(../images/icon_mail.png) no-repeat top 2px center;
		background-size: 25px;
		width: 40px;
		padding: 30px 0 0 0;
		text-align: center;
	}
	header .btn_tel a{
		background:url(../images/icon_tel.png) no-repeat top center;
		background-size: 25px;
		width: 40px;
		padding: 30px 0 0 0;
		text-align: center;
	}
	header .btn_mail a,
	header .btn_tel a{
		display:block;
	}
	header .btn_mail a:link,
	header .btn_tel a:link{ color:#ff8a00; text-decoration: none;}
	/* Toggle Button */
	#nav-toggle {
		position: absolute;
		left: 20px;
		height: 36px;
		cursor: pointer;
		z-index: 101;
	}
	#nav-toggle div {
		position: relative;
		font-size: 9px;
		font-weight: bold;
		color: #f0a704;
		display: inline-block;
		width: 40px;
		height: 40px;
		vertical-align: middle;
	}
	#nav-toggle div.text{
		height: 25px;
		line-height: 130%;
	}
	#nav-toggle span {
		display: block;
		position: absolute;
		height: 4px;
		width: 34px;
		background: #f0a704;
		left: 0;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	#nav-toggle span:nth-child(1) {
		top: 6px;
	}
	#nav-toggle span:nth-child(2) {
		top: 17px;
	}
	#nav-toggle span:nth-child(3) {
		top: 28px;
	}
    /* Fixed reset */
    #mobile-head {
		text-align: right;
    }
    #global-nav {
		display: inherit;
        position: fixed;
		top:-1500px;
        background: #E1E0DC;
        width: 100%;
        text-align: center;
        padding: 10px 0 0 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
		overflow: scroll;
		_height: calc(100% - 100px);
		height: 500px;
		width: 100%;
		overflow-x: hidden;
    }
	#global-nav section{
		border-bottom: solid 2px #FFFFFF;
		text-align: left;
		font-weight: bold;
		padding: 15px 20px;
		font-size: 13px;
	}
	#global-nav section.login li{
		background: url(../images/icon_login01.png) no-repeat center left;
		background-size: 15px;
		padding: 5px 0 5px 30px;
	}
	#global-nav section.login a:link   { color: #f0a704;}
	#global-nav section.login a:visited{ color: #f0a704;}
	#global-nav section.login a:hover  { color: #37A917;}
	
	#global-nav section li.logout{
		background: url(../images/icn_logout02.png) no-repeat center left;
		background-size: 15px;
		margin: 10px 0 0 0;
		padding: 5px 0 5px 30px;
	}
	#global-nav section li.edit{
		background: url(../images/icn_entry02.png) no-repeat center left;
		background-size: 15px;
		margin: 15px 0 0 0;
		padding: 5px 0 5px 30px;
	}
	#global-nav section li.logout a:link,
	#global-nav section li.edit a:link   { color: #f0a704;}
	#global-nav section li.logout a:visited,
	#global-nav section li.edit a:visited{ color: #f0a704;}
	#global-nav section li.logout a:hover,
	#global-nav section li.edit a:hover  { color: #37A917;}
	
	#global-nav section.category a:link   { color: #333333;}
	#global-nav section.category a:visited{ color: #333333;}
	#global-nav section.category a:hover  { color: #888888;}
	#global-nav section.category h3{
		margin: 0 0 10px 0;
		padding: 15px 0 10px 35px;
		color: #666666;
	}
	#global-nav section.star h3{
		background:url(../images/icon_star.png) no-repeat center left;
		background-size: 30px;
	}
	#global-nav section.special h3{
		background:url(../images/icon_special.png) no-repeat center left;
		background-size: 30px;
	}
	#global-nav section.pen h3{
		background:url(../images/icn_pen01.png) no-repeat center left;
		background-size: 23px;
	}
	#global-nav section.office h3{
		background:url(../images/icn_office01.png) no-repeat center left;
		background-size: 23px;
	}
	#global-nav section.clock h3{
		background:url(../images/icn_clock01.png) no-repeat center left;
		background-size: 23px;
	}
	#global-nav section.goods h3{
		background:url(../images/icon_goods.png) no-repeat center left;
		background-size: 23px;
	}
	#global-nav section.use h3{
		background:url(../images/icn_use01.png) no-repeat center left;
		background-size: 20px;
	}
	#global-nav section.category ul{
		font-size: 0;
	}
	#global-nav section.category li{
		display:inline-block;
		width: calc(100% / 3);
		font-size: 14px;
		padding: 10px 0;
		vertical-align: top;
	}
	#global-nav section.guide{
		font-size: 0;
		padding: 0;
	}
	#global-nav section.guide li{
		display:inline-block;
		width: calc((100% - 82px )/ 2);
		font-size: 14px;
		padding: 15px 20px;
		vertical-align: top;
		border-top:solid 2px #FFFFFF;
	}
	#global-nav section.guide li:nth-child(2n){
		border-left: 2px solid #FFFFFF;
	}
	#global-nav section.guide a:link   { color: #666666;}
	#global-nav section.guide a:visited{ color: #666666;}
	#global-nav section.guide a:hover  { color: #CCCCCC;}
    #top-head #global-nav ul li a{
        width: 100%;
        display: block;
		text-decoration: none;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 16px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 16px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
		top:90px;
    }
}
@media screen and (max-width: 700px) {
	#global-nav section.category li{
		width: 50%;
		font-size: 13px;
		padding: 8px 0;
	}
	#global-nav section.category li.pen,
	#global-nav section.category li.office,
	#global-nav section.category li.memory,
	#global-nav section.category li.zakka,
	#global-nav section.category li.youto,
	#global-nav section.category li.bottle,
	#global-nav section.category li.new {
		width: 100%;
		font-weight: bold;
		padding-left: 25px;
	}
	#global-nav section.category li.pen {
		background: url(../images/icon_pen2.png) no-repeat center left;
		background-size: 20px;
	}
	#global-nav section.category li.office {
		background: url(../images/icon_office.png) no-repeat center left;
		background-size: 20px;
	}
	#global-nav section.category li.memory {
		background: url(../images/icon_memory.png) no-repeat center left;
		background-size: 20px;
	}
	#global-nav section.category li.zakka {
		background: url(../images/icon_zakka.png) no-repeat center left;
		background-size: 20px;
	}
	#global-nav section.category li.youto {
		background: url(../images/icon_youto.png) no-repeat center left;
		background-size: 20px;
	}
	#global-nav section.category li.bottle {
		background: url(../images/icon_mag.png) no-repeat center left;
		background-size: 20px;
	}
	#global-nav section.category li.new {
		background: url(../images/icon_new.png) no-repeat center left;
		background-size: 20px;
	}


}
@media screen and (max-width: 400px) {
	#nav-toggle div.text{
		display: none;
	}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (02)キャンペーンバナー                                                                                                    */
/*------------------------------------------------------------------------------------------------------------------------*/
#campaign{
	text-align: center;
	max-height: 60px;
	vertical-align: bottom;
	background: #ffdbed;/* 画像にあわせて変更してください */
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (03)左メニュー                                                                                                           */
/*------------------------------------------------------------------------------------------------------------------------*/
#left-menu{
	font-size: 13px;
	display: inline-block;
	max-width: 300px;
	width: 25%;
	margin: 0 40px 0 0;
	vertical-align: top;
}
/* ユーザー情報 */
#left-menu .user{
	border:solid 3px #CECEBF;
	margin: 0 0 40px 0;
	padding: 15px;
	font-size: 0;
}
#left-menu .user .name{
	font-weight: bold;
	margin: 0 0 10px 0;
	font-size: 14px;
}
#left-menu .user .edit{
	font-weight: bold;
	margin: 0 10px 0 0;
	font-size: 12px;
	font-weight: bold;
	display: inline-block;
}
#left-menu .user .edit a:link,
#left-menu .user .edit a:visited{
	display:block;
	background: url(../images/icn_entry01.png) no-repeat left 10px center #f0a704;
	background-size: 20px;
	color: #FFFFFF;
	text-decoration: none;
	padding: 8px 10px 8px 40px;
	border-radius: 3px;
}
#left-menu .user .edit a:hover{
	display:block;
	background: url(../images/icn_entry01.png) no-repeat left 10px center #37A917;
	background-size: 20px;
	color: #FFFFFF;
	text-decoration: none;
}
#left-menu .user .logout{
	font-weight: bold;
	margin: 0 0 0 0;
	font-size: 12px;
	display: inline-block;
}
#left-menu .user .logout a:link,
#left-menu .user .logout a:visited{
	display:block;
	color: #FFFFFF;
	text-decoration: none;
	padding: 8px 10px 8px 40px;
	border-radius: 3px;
	background: url(../images/icn_logout01.png) no-repeat left 10px center #8ABF56;
	background-size: 15px;
}
#left-menu .user .logout a:hover{
	display:block;
	color: #FFFFFF;
	text-decoration: none;
	background: url(../images/icn_logout01.png) no-repeat left 10px center #96D95E;
	background-size: 15px;
}


/* 商品検索 */
#left-menu .searchbox{
	margin:0 0 20px 0;
}
#left-menu .searchbox h2{
	font-size:16px;
	font-weight: bold;
	color:#666666;
	margin: 0 0 5px 0;
}
#left-menu .searchbox h2::before{
	top: 10px;
}
/* カテゴリメニュー */
#left-menu nav{
	margin: 0 0 0 0;
}
#left-menu nav section{
	background:	#FFFFFF;
	margin: 0 0 10px 0;
}
#left-menu nav section h3{
	color:#666666;
	font-size: 16px;
	font-weight: bold;
	padding: 20px 10px 15px 60px;
}
#left-menu nav section ul{
	padding:20px;
	padding-left: 0;
}
#left-menu nav section li{
	padding: 10px 0 10px 50px;
	border-bottom: 1px solid #eee;
}

/*190313 追加ここから*/
/*///////////////////////////////
「NEW」タグ
///////////////////////////////*/

/*赤枠バージョン*/
/*.new_tag{
 margin-right: 2px;
 padding:0 8px;
 background: red;
 color:#fff;
 vertical-align: middle;
 border-radius: 4px;
}*/

/*赤文字バージョン*/
.new_tag{
 margin-right: 2px;
 color:red;
 font-weight: 800;
 font-size:16px;
}

/*オレンジ枠バージョン2*/

.new_tag2{
	color: #fff;
    background: #ffb400;
    display: inline-block;
    padding: 4px 10px 1px;
    border-radius: 15px;
    margin-right: 4px;
    margin-bottom: 10px;
    position: relative;
}
	.new_tag2:before {
		content: "";
		position: absolute;
		top: 100%;
		left: 30%;
		margin-left: -15px;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		border-top: 10px solid #ffb400;
	}

.new_tag3{
	color: #fff;
    background: #c96161;
    display: inline-block;
    padding: 4px 10px 1px;
    border-radius: 4px;
    margin-right: 4px;
}

.new_tag_hover:hover{
	opacity:0.7;
}

/*190313追加ここまで*/

/*///////////////////////////////
お知らせ　追加　ここから
///////////////////////////////*/

.new_oshirase_wrap{
	padding:10px;
	border:3px solid #D42528;
	margin-bottom:20px;
}

.new_oshirase_mark{
	display: inline-block;
	padding:2px 7px;
	color:#fff;
	background: red;
	font-size: 14px;
}

.new_oshirase_heading{
	font-size :1.1em;
	border-bottom:1px solid #000;
	font-weight:bold;
}






/*///////////////////////////////
お知らせ　追加　ここまで
///////////////////////////////*/





#left-menu nav section li a:link   { color:#333333; text-decoration: none;}
#left-menu nav section li a:visited{ color:#333333; text-decoration: none;}
#left-menu nav section li a:hover  { color:#999999; text-decoration: none;}
#left-menu nav section.star h3{
	background:url(../images/icon_star.png) no-repeat center left 20px #ffd7d2;
	background-size: 30px;
	border-radius: 0 0 10px 10px;
	border-top: 2px solid #ff3c00;
}
#left-menu nav section.star h3.page{
	background:url(../images/icon_gray01.png) no-repeat center left 20px #eee;
	background-size: 30px;
	border-radius: 0 0 10px 10px;
	border-top: 2px solid #ccc;
}
#left-menu nav section.goods h3{
	background:url(../images/icon_goods.png) no-repeat center left 20px #faf2de;
	background-size: 30px;
	border-radius: 0 0 10px 10px;
	border-top: 2px solid #ff8a00;
}
#left-menu nav section.goods h3.page{
	background:url(../images/icon_gray01.png) no-repeat center left 20px #eee;
	background-size: 30px;
	border-radius: 0 0 10px 10px;
	border-top: 2px solid #ccc;
}
#left-menu nav section.special h3{
	background:url(../images/icon_special.png) no-repeat center left 20px #faf2de;
	background-size: 23px;
	border-radius: 0 0 10px 10px;
	border-top: 2px solid #ff8a00;
}
#left-menu nav section.earth div{
	padding:20px;
}

#left-menu nav section.naire h3{
	background:url(../images/icon_gray02.png) no-repeat center left 20px #eee;
	background-size: 30px;
	border-radius: 0 0 10px 10px;
	border-top: 2px solid #ccc;
}
	#left-menu nav section.naire p{
		margin: 1em 0;
	}


/*--------------
  ご用途別ノベルティ特集　リスト
---------------*/
#left-menu nav section li.list01 {
	background: url('../images/icon_01.png') no-repeat center left;
}
#left-menu nav section li.list02 {
	background: url('../images/icon_02.png') no-repeat center left;
}
#left-menu nav section li.list03 {
	background: url('../images/icon_03.png') no-repeat center left;
}
#left-menu nav section li.list04 {
	background: url('../images/icon_04.png') no-repeat center left;
}
#left-menu nav section li.list05 {
	background: url('../images/icon_05.png') no-repeat center left;
}
#left-menu nav section li.list06 {
	background: url('../images/icon_06.png') no-repeat center left;
}
#left-menu nav section li.list07 {
	background: url('../images/icon_07.png') no-repeat center left;
}
#left-menu nav section li.list08 {
	background: url('../images/icon_08.png') no-repeat center left;
}
#left-menu nav section li.list09 {
	background: url('../images/icon_09.png') no-repeat center left;
}
#left-menu nav section li.list10 {
	background: url('../images/icon_10.png') no-repeat center left;
}
#left-menu nav section li.list11 {
	background: url('../images/icon_11.png') no-repeat center left;
}
#left-menu nav section li.list12 {
	background: url('../images/icon_12.png') no-repeat center left;
}
#left-menu nav section li.list13 {
	background: url('../images/icon_13.png') no-repeat center left;
}
#left-menu nav section li.list14 {
	background: url('../images/icon_14.png') no-repeat center left;
}
#left-menu nav section li.list15 {
	background: url('../images/icon_15.png') no-repeat center left;
}
#left-menu nav section li.list16 {
	background: url('../images/icon_16.png') no-repeat center left;
}
#left-menu nav section li.list17 {
	background: url('../images/icon_17.png') no-repeat center left;
}
#left-menu nav section li.list18 {
	background: url('../images/icon_18.png') no-repeat center left;
}
#left-menu nav section li.list19 {
	background: url('../images/icon_19.png') no-repeat center left;
}
#left-menu nav section li.list20 {
	background: url('../images/icon_20.png') no-repeat center left;
}
#left-menu nav section li.list21 {
	background: url('../images/icon_21.png') no-repeat center left;
}
#left-menu nav section li.list22 {
	background: url('../images/icon_22.png') no-repeat center left;
}
#left-menu nav section li.list23 {
	background: url('../images/icon_23.png') no-repeat center left;
}
#left-menu nav section li.list24 {
	background: url('../images/icon_24.png') no-repeat center left;
}
#left-menu nav section li.list25 {
	background: url('../images/icon_25.png') no-repeat center left;
}

/*-------------
  販促品・ノベルティカテゴリ
--------------*/
#left-menu nav section.goods li {
	padding-left: 30px;
	font-weight: bold;
	font-size: 16px;
}
#left-menu nav section.goods.page li {
	padding-left: 15px;
	font-weight: normal;
	font-size: 13px;
}
#left-menu nav section.goods li > ul {
	margin-left: -20px;
}
#left-menu nav section.goods li > ul > li {
	padding-left: 15px;
	border-bottom: none;
	background: url('../images/arrow_list01.png') no-repeat center left;
	font-size: 13px;
	font-weight: normal;
}
#left-menu nav section.goods li.pen {
	background: url('../images/icon_pen2.png') no-repeat top 10px left;
}
#left-menu nav section.goods li.office {
	background: url('../images/icon_office.png') no-repeat top 10px left;
}
#left-menu nav section.goods li.memory {
	background: url('../images/icon_memory.png') no-repeat top 10px left;
}
#left-menu nav section.goods li.zakka {
	background: url('../images/icon_zakka.png') no-repeat top 10px left;
}
#left-menu nav section.goods li.youto {
	background: url('../images/icon_youto.png') no-repeat top 10px left;
}
#left-menu nav section.goods li.bottle {
	background: url('../images/icon_mag.png') no-repeat top 10px left;
}
#left-menu nav section.goods li.new {
	background: url('../images/icon_new.png') no-repeat top 10px left;
}
/*-------------
  その他特集
--------------*/
#left-menu nav section.special ul,
#left-menu nav section.page ul {
	margin-left: 5px;
}
#left-menu nav section.special li,
#left-menu nav section.page li {
	padding-left: 15px;
	background: url('../images/arrow_list02.png') no-repeat center left;
}








@media screen and (max-width: 1090px) {
	#left-menu{
		display: none;
	}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (04)商品検索                                                                                                            */
/*------------------------------------------------------------------------------------------------------------------------*/
.searchbox input[type="text"],
.search_head input[type="text"] {
	border: solid 1px #888888;
	border-radius: 10px;
	background: #FFFFFF;
	padding:1px 35px 2px 10px;
	font-size: 0.9em;
	height: 35px;
}
.searchbox select,
.search_head select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:url(../images/arrow_select.png) center right 10px no-repeat #FFFFFF;
	background-size:10px;
    border: solid 1px #888888;
	border-radius: 10px;
	padding:4px 35px 4px 10px;
	font-family: "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:13px;
	margin:0 5px 0 0;
	height: 40px;
}
@-moz-document url-prefix() { /* for firefox */
    #left-menu .searchbox select {
        background:none;
        background:url(../images/arrow_select.png) center right 10px no-repeat #FFFFFF;
		background-size:10px;
    }
}
.searchbox select::-ms-expand,
.search_head select::-ms-expand {
	display: none;
}
.searchbox .category select,
.search_head .category select{
	width: 100%;
}
.searchbox .keyword input,
.search_head .keyword input{
	width: calc(100% - 50px);
}
.searchbox .category,
.searchbox .price,
.searchbox .keyword{
	margin:0 0 5px 0;
}

.searchbox .btn{
	text-align: center;
}
.searchbox input.btn_search,
.search_head input.btn_search{
	border:none;
	border-radius: 30px;
	background: url(../images/icn_search02.png) no-repeat center left 20px #f0a704;
	background-size: 20px;
	margin: 0 auto;
	padding:7px 20px 7px 50px;
	color: #FFFFFF;
}

.searchbox button.btn_search,
.search_head button.btn_search{
	border:none;
	border-radius: 10px;
	background: url(../images/icon_search.png) no-repeat center left 20px #f0a704;
	background-size: 20px;
	margin: 0 auto;
	padding:2px 20px 2px 50px;
	color: #FFFFFF;
	height: 40px;
}

.searchbox input.btn_search:hover,
.search_head input.btn_search:hover{
	background: url(../images/icn_search02.png) no-repeat center left 20px #f0c704;
	background-size: 20px;
}
.searchbox button.btn_search:hover,
.search_head button.btn_search:hover{
	background: url(../images/icn_search02.png) no-repeat center left 20px #f0c704;
	background-size: 20px;
}

#main .searchbox{
	display:none;
}
@media screen and (max-width: 1090px) {
	#main .searchbox input[type="text"],
	#main .searchbox select{
		font-size: 16px;
	}
	#main .searchbox{
		display:block;
	}
	#main .searchbox{
		margin:0px auto;
	}
	#main .searchbox h2{
		font-weight: bold;
		color:#666666;
		margin: 0px 0 10px 0;
	}
	#main .searchbox h2::before{
		top: 14px;
	}
	#main .searchbox .category,
	#main .searchbox .price,
	#main .searchbox .keyword{
		margin:0 5px 10px 0;
		display: inline-block;
		max-width: 220px;
		width: calc((100% - 130px - 45px) / 3);
	}
	#main .searchbox .btn{
		text-align: center;
		display:inline-block;
		width: 130px;
	}
	#main .searchbox .price select{
		width:calc((100% - 30px) / 2);
	}
}
@media screen and (max-width: 800px) {
	#main .searchbox .category,
	#main .searchbox .price{
		margin:0 25px 10px 0;
		display: inline-block;
		max-width: 350px;
		width: calc((100% - 55px) / 2);
	}
	#main .searchbox .keyword{
		margin:0 0 10px 0;
		display: block;
		max-width: 100%;
		width: 100%;
	}
	#main .searchbox .price select{
		width:calc((100% - 30px) / 2);
	}
	#main .searchbox .btn{
		text-align: center;
		display:block;
		width: 100%;
	}
}
@media screen and (max-width: 600px) {
	#main .searchbox{
		margin:0 auto 40px auto;
	}
	#main .searchbox h2::before{
		top: 12px;
	}
	#main .searchbox .category,
	#main .searchbox .price,
	#main .searchbox .keyword{
		margin:0 0 10px 0;
		display: block;
		width: 100%;
		max-width: 100%;
	}
	#main .searchbox .btn{
		display: block;
	}
	#main .searchbox input.btn_search{
		padding:7px 0 7px 0;
		width: 100%;
	}

	#main .searchbox button.btn_search{
		padding:7px 0 7px 0;
		width: 100%;
	}
}


/*------------------------------------------------------------------------------------------------------------------------*/
/* (05)名入れ110について                                                                                                                */
/*------------------------------------------------------------------------------------------------------------------------*/
#about {
	background: #faf2de;
	padding-bottom: 100px;
}
#about .wrapper {
	max-width: 1200px;
}
#about .wrapper .info,
#about .wrapper .info2 {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#about .wrapper .info div {
	flex: 1;
}
#about .wrapper .info div:last-child {
	margin-left: 10px;
}
#about .about_message h2 {
	font-size: 22px;
	color: #ff8a00;
	text-align: center;
	padding: 50px 0 10px 0;
	margin-bottom: 20px;
	border-bottom: 2px solid #ff8a00;
}
#about p {
	margin-bottom: 1em;
}
#about .about_message a {
	color: #333;
}
#about .about_message .tel1 {
	color: #ff8a00;
	font-weight: bold;
}
	#about .about_message .tel1 span {
		font-size: 1.2em;
	}
#about h3,
#contact h3 {
/*	background: url('../images/h_point.png') no-repeat left center;
	padding: 4px 0 4px 30px;*/
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 1em;
}
#about .info2 > div {
	width: calc(100% - 10px);
}
#about .info_box {
	background: #fff;
	border-radius: 20px;
	box-shadow: 2px 2px 2px #ccc;
	padding: 20px;
	width: calc(100% - 60px);
	margin-bottom: 20px;
}
#about .info_box table {
	width: 100%;
	margin-bottom: 1em;
}
	#about .info_box table tr th,
	#about .info_box table tr td {
		text-align: center;
		padding: 10px;
	}
	#about .info_box table tr th {
		background: #eee;
	}
	#about .info_box table tr td {
		border-bottom: 1px solid #eee;
	}
#about .flow img {
}
#about .flow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#contact {
	padding: 50px 0;
}
#contact .calender {
	border-right: 1px solid #ccc;
	padding-right: 50px;
}
.flex {
	display: flex;
	justify-content: space-between;
}
#contact .address {
	padding-left: 50px;
}
#contact .address .tel {
	margin-right: 20px;
}
#contact .address .contact_detail {
	padding-bottom: 50px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 50px;
}
#contact .address table {
	width: 100%;
}
#contact .address table tr th {
	font-weight: bold;
}
#contact .address table tr th,
#contact .address table tr td {
	vertical-align: top;
	padding-bottom: 1em;
}
.pink {
	color: #f6caca;
}
#contact .cal_flex {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
	#contact .cal_flex p:first-child {
		margin-right: 10px;
	}


@media only screen and (max-width: 767px) {
#about {
	padding-bottom: 30px;
}
#about .info,
#about .info2,
.flex {
	flex-direction: column;
}
#about .info2 > div {
	width: 100%;
}
#about .info_box {
	width: calc(100% - 42px);
}
#about .flow p {
	width: calc((100% - 42px) / 2);
}
.flex {
	align-items: center;
}
#contact .calender {
	border-right: none;
	padding-right: 0;
}
#contact .address {
	padding-left: 0;
}
#contact .address table tr td,
#contact .address table tr th {
	display: block;

}
#contact .address .tel {
	margin: 20px 0;
}

}




/*------------------------------------------------------------------------------------------------------------------------*/
/* (05)強み                                                                                                                */
/*------------------------------------------------------------------------------------------------------------------------
#advantage{
	background:#f0a704;
	padding: 60px 0;
}
#advantage h2{
	font-size: 24px;
	margin: 0 0 20px 0;
}
#advantage .point{
	display:inline-block;
	width: calc(60% - 40px);
	vertical-align: top;
}
#advantage .point li{
	display:inline-block;
	width: calc((100% / 3) - 20px);
	margin: 0 7px;
	padding: 135px 0 0 0;
	vertical-align: top;
}
#advantage .point li h3{
	text-align:center;
	color:#FFFFFF;
	font-size: 16px;
	margin: 0 0 10px 0;
}
#advantage .point li:nth-child(1){
	background: url(../images/top/img_advantage01.png) no-repeat center top;
	background-size: 140px;
}
#advantage .point li:nth-child(2){
	background: url(../images/top/img_advantage02.png) no-repeat center top;
	background-size: 140px;
}
#advantage .point li:nth-child(3){
	background: url(../images/top/img_advantage03.png) no-repeat center top;
	background-size: 140px;
}
#advantage .seotext{
	display:inline-block;
	width: 39%;
	max-width: 510px;
	margin: 0 0 0 40px;
	vertical-align: top;
	color: #FFFFFF;
	font-size: 12px;
}

@media screen and (max-width: 900px) {
	#advantage .point{
		width: 100%;
	}
	#advantage .seotext{
		display:none;
	}
}
@media screen and (max-width: 600px) {
	#advantage{
		padding: 40px 0;
	}
	#advantage h2{
		font-size: 18px;
		margin: 0 0 20px 0;
	}
	#advantage h2::before{
		top: 10px;
	}
	#advantage .point li{
		padding: 100px 0 0 0;
		font-size: 11px;
	}
	#advantage .point li h3{
		font-size: 13px;
	}
	#advantage .point li:nth-child(1){
		background: url(../images/top/img_advantage01.png) no-repeat center top;
		background-size: 100px;
	}
	#advantage .point li:nth-child(2){
		background: url(../images/top/img_advantage02.png) no-repeat center top;
		background-size: 100px;
	}
	#advantage .point li:nth-child(3){
		background: url(../images/top/img_advantage03.png) no-repeat center top;
		background-size: 100px;
	}
}
*/
/*------------------------------------------------------------------------------------------------------------------------*/
/* (06)流れ                                                                                                                */
/*------------------------------------------------------------------------------------------------------------------------
#flowbox{
	background:#FFFFFF;
	padding: 60px 0;
}
#flowbox .flow-left{
	display:inline-block;
	width:calc(100% - 430px) ;
	max-width: 780px;
	vertical-align: top;
}
#flowbox .flow-left h2{
	color:#f0a704;
	font-size: 20px;
}
#flowbox .flow-left h2+.h2sub{
	color:#B3B3A5;
	font-size: 13px;
	font-weight: bold;
	margin: 0 0 20px 0;
}
#flowbox .flow-left .flow{
	border-bottom: solid 2px #ACAC9D;
	margin: 0 0 40px 0;
	padding: 0 0 40px 0;
}
#flowbox .flow-left .flow li{
	display:inline-block;
	width: calc((100% / 5) - 30px);
	vertical-align: top;
	position: relative;
	margin: 0 30px 0 0;
}
#flowbox .flow-left .flow li:last-child{
	margin: 0 0 0 0;
}
#flowbox .flow-left .flow li::after{
	content: "";
	background: url(../images/arrow01.png) no-repeat center right;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 50%;
	right: -25px;
	display:inline-block;
}
#flowbox .flow-left .flow li:last-child::after{
	background: none;
	width: 0;
	height: 0;
}
#flowbox .flow-left .flow li dt{
	text-align:center;
	content: "";
	font-size: 0;
	padding: 16px 0;
}
#flowbox .flow-left .flow li.step1 dt{
	background:url(../images/img_step1.png) no-repeat center center;
	background-size: contain;
}
#flowbox .flow-left .flow li.step2 dt{
	background:url(../images/img_step2.png) no-repeat center center;
	background-size: contain;
}
#flowbox .flow-left .flow li.step3 dt{
	background:url(../images/img_step3.png) no-repeat center center;
	background-size: contain;
}
#flowbox .flow-left .flow li.step4 dt{
	background:url(../images/img_step4.png) no-repeat center center;
	background-size: contain;
}
#flowbox .flow-left .flow li.step5 dt{
	background:url(../images/img_step5.png) no-repeat center center;
	background-size: contain;
}
#flowbox .flow-left .flow li dd{
	margin: 10px 0 0 0;
	padding: 112px 0 0 0;
	font-size: 12px;
}
#flowbox .flow-left .flow li.step1 dd{
	background:url(../images/img_flow01.png) no-repeat center top;
	background-size: contain;
}
#flowbox .flow-left .flow li.step2 dd{
	background:url(../images/img_flow02.png) no-repeat center top;
	background-size: contain;
}
#flowbox .flow-left .flow li.step3 dd{
	background:url(../images/img_flow03.png) no-repeat center top;
	background-size: contain;
}
#flowbox .flow-left .flow li.step4 dd{
	background:url(../images/img_flow04.png) no-repeat center top;
	background-size: contain;
}
#flowbox .flow-left .flow li.step5 dd{
	background:url(../images/img_flow05.png) no-repeat center top;
	background-size: contain;
}
#flowbox .flow-left .contact .tel{
	display:inline-block;
	vertical-align: top;
	width: calc((100% - 40px) / 2);
	max-width: 360px;
	margin: 0 30px 0 0;
}
#flowbox .flow-left .contact .tel img{
	max-width:330px;
	width: 100%;
}
#flowbox .flow-left .contact .tel .btn_mail{
	background:url(../images/icn_mail02.png) no-repeat center left 20px #f0a704;
	background-size: 25px;
	padding: 15px 15px 15px 60px;;
	text-align: center;
	border-radius: 3px;
	font-weight: bold;
	display:block;
}
#flowbox .flow-left .contact .tel .btn_mail:link   { color:#FFFFFF; text-decoration: none;}
#flowbox .flow-left .contact .tel .btn_mail:visited{ color:#FFFFFF; text-decoration: none;}
#flowbox .flow-left .contact .tel .btn_mail:hover  { color:#FFFFFF; text-decoration: none;}
#flowbox .flow-left .contact .tel .btn_mail:hover{
	background:url(../images/icn_mail02.png) no-repeat center left 30px #37A917;
	background-size: 25px;
}
#flowbox .flow-left .contact .calendar{
	display:inline-block;
	vertical-align: top;
	width: calc((100% - 40px) / 2);
	max-width: 340px;
}
#flowbox .flow-left .contact .calendar h3{
	color:#f0a704;
	font-size: 16px;
	margin: 0 0 10px 0;
}
#flowbox .flow-left .contact .calendar div{
	width:calc(49% - 10px);
	display: inline-block;
	vertical-align: top;
}
#flowbox .flow-left .contact .calendar div:last-child{
	margin:0 0 0 15px;
}
#flowbox .flow-left .contact .partner{
	background:url(../images/img_partner.png) no-repeat top left;
	margin:30px 0 0 0;
	padding: 0 0 0 110px;
}
#flowbox .flow-left .contact .partner h3{
	border-bottom:solid 2px #f0c704;
	font-size:17px;
	color:#f0a704;
}
#flowbox .flow-left .contact .partner dl{
	display:inline-block;
	vertical-align: top;
	margin: 15px 20px 0 0;
	max-width: calc(50% - 25px);
}
#flowbox .flow-left .contact .partner dt{
	font-weight: bold;
}
#flowbox .flow-left .contact .partner dd{
	font-size:12px;
}

#flowbox .facebook{
	display:inline-block;
	width: 340px;
	vertical-align: top;
	margin: 0 0 0 80px;
	height: 700px;
}

@media screen and (max-width: 1080px) {
	#flowbox .flow-left .flow li dd{
		padding: 80px 0 0 0;
	}
}

@media screen and (max-width: 900px) {
	#flowbox{
		background:#FFFFFF;
		padding: 40px 0;
	}
	#flowbox .flow-left{
		display:block;
		width:100%;
		max-width: 100%;
	}
	#flowbox .flow-left h2{
		color:#f0a704;
		font-size: 16px;
		text-align: center
	}
	#flowbox .flow-left h2+.h2sub{
		font-size: 11px;
		margin: 0 0 20px 0;
		text-align: center;
	}
	#flowbox .flow-left .flow li dd{
		padding: 130px 0 0 0;
	}
	#flowbox .facebook{
		display:block;
		width: 100%;
		height: 600px;
		margin: 50px auto 0 auto;
	}
}
@media screen and (max-width: 750px) {
	#flowbox .flow-left .flow li dd{
		padding: 100px 0 0 0;
	}
}

@media screen and (max-width: 600px) {
	#flowbox .flow-left .flow{
		margin: 0 0 20px 0;
		padding: 0 0 20px 0;
	}
	#flowbox .flow-left .flow li{
		display:block;
		width: 100%;
		margin: 0 0 20px 0;
	}
	#flowbox .flow-left .flow li:last-child{
		margin: 0 0 0 0;
	}
	#flowbox .flow-left .flow li::after{
		content: "";
		background: url(../images/arrow02.png) no-repeat center bottom;
		background-size: 18px;
		width: 20px;
		height: 20px;
		position: absolute;
		top: auto;
		right: 50%;
		bottom:-15px;
	}
	#flowbox .flow-left .flow li dt{
		text-align:center;
		content: "";
		font-size: 0;
		padding: 16px 0;
		display: inline-block;
		width: 72px;
		vertical-align: middle;
	}
	#flowbox .flow-left .flow li dd{
		margin: 0;
		padding: 20px 0 20px 90px;
		font-size: 13px;
		display: inline-block;
		width: calc(100% - 170px);
	}
	#flowbox .flow-left .flow li.step1 dd{
		background:url(../images/img_flow01.png) no-repeat center left;
		background-size: 78px;
	}
	#flowbox .flow-left .flow li.step2 dd{
		background:url(../images/img_flow02.png) no-repeat center left;
		background-size: 78px;
	}
	#flowbox .flow-left .flow li.step3 dd{
		background:url(../images/img_flow03.png) no-repeat center left;
		background-size: 78px;
	}
	#flowbox .flow-left .flow li.step4 dd{
		background:url(../images/img_flow04.png) no-repeat center left;
		background-size: 78px;
	}
	#flowbox .flow-left .flow li.step5 dd{
		background:url(../images/img_flow05.png) no-repeat center left;
		background-size: 78px;
	}
	#flowbox .flow-left .contact .tel{
		display:block;
		width:100%;
		max-width: 100%;
		margin: 0 0 30px 0;
	}
	#flowbox .flow-left .contact .tel img{
		max-width:325px;
		width: 100%;
	}
	#flowbox .flow-left .contact .tel .btn_mail{
		font-size: 12px;
	}
	#flowbox .flow-left .contact .calendar{
		display:block;
		width: 100%;
		max-width: 100%;
	}
	#flowbox .flow-left .contact .calendar h3{
		font-size: 14px;
	}
	#flowbox .flow-left .contact .partner{
		background:none;
		padding: 0;
	}
	#flowbox .flow-left .contact .partner h3{
		font-size:14px;
	}
	#flowbox .flow-left .contact .partner dl{
		display:block;
		margin: 15px 0 0 0;
		max-width:100%;
	}
}
*/
/*------------------------------------------------------------------------------------------------------------------------*/
/* (07)footer                                                                                                             */
/*------------------------------------------------------------------------------------------------------------------------*/
footer{
	background: #f5f5f5;
}
footer .footer1{
	padding: 50px 0;
}
footer .footer1 .add{
	display:inline-block;
	vertical-align: top;
	font-size: 14px;
	padding-right: 20px;
	border-right: 1px solid #ccc;
}
footer .footer1 .add dt{
	background:url(../images/logo01.png) no-repeat left center;
	background-size: 130px;
	margin: 0 0 10px 0;
	padding: 15px 0 0 150px;
	font-size: 16px;
	font-weight: bold;
}
footer .footer1 .bana,
footer .footer1 .pmark{
	display: inline-block;
	margin: 0 10px ;
	vertical-align: top;
	max-width: 200px;
	text-align: center;
	font-size: 12px;
}
footer .footer2{
	background:#333333;
	overflow: hidden;
	color:#FFFFFF;
	font-size: 13px;
	font-weight: normal;
	padding: 20px 0;
}
footer .footer2 ul{
	display: inline-block;
	vertical-align: middle;
}
footer .footer2 li{
	display:inline-block;
	margin: 0 30px 0 0;
}
footer .footer2 li a:link   { color:#FFFFFF; text-decoration: none;}
footer .footer2 li a:visited{ color:#FFFFFF; text-decoration: none;}
footer .footer2 li a:hover  { color:#999999; text-decoration: none;}
footer .footer2 .copy{
	display: inline-block;
	vertical-align: middle;
	float: right;
	font-size: 12px;
}

@media screen and (max-width: 900px) {
	footer .footer1{
		padding: 30px 0;
		text-align: center;
	}
	footer .footer1 .add{
		display:block;
		font-size: 13px;
		width:100%;
		margin: 0 0 30px 0;
		border: none;
	}
	footer .footer1 .add dt{
		background:url(../images/logo01.png) no-repeat center top;
		background-size: 170px;
		margin: 0 0 10px 0;
		padding: 50px 0 0 0;
		font-size: 16px;
	}
	footer .footer1 .footer-right{
		display:block;
		text-align:center;
		width: 100%;
	}
	footer .footer1 .footer-right div{
		margin: 0 10px 20px 10px ;
	}
	footer .footer2{
		text-align: center;
	}
	footer .footer2 ul{
		display: none;
	}
	footer .footer2 .copy{
		display: block;
		float: none;
		font-size: 12px;
	}
}
@media screen and (max-width: 500px) {
	footer .footer1 .footer-right div{
		display: block;
		width: 100%;
		margin: 0 auto 20px auto;
	}
	footer .footer1 .bana {
		margin-bottom: 20px;
	}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (06)パンくず                                                                                                            */
/*------------------------------------------------------------------------------------------------------------------------*/
#breadcrumb{
	padding: 10px 0;
/*	margin:0 0 30px 0;
	border-top: 2px solid #eee;
	border-bottom: 2px solid #eee;*/
}
#breadcrumb li{
	margin:0 5px 0 0;
	padding: 0;
	display: inline-block;
	font-size: 13px;
}
#breadcrumb li a:link   { text-decoration: none; color: #666;}
#breadcrumb li a:visited{ text-decoration: none; color: #666;}
#breadcrumb li a:hover  { text-decoration: underline; color: #666;}
#breadcrumb li::after{
	content: ">";
	padding: 0 0 0 10px;
	color: #666666;
	font-weight: bold;
}
#breadcrumb li:last-child::after{
	content: "";
}
@media screen and (max-width: 500px) {
#breadcrumb{
	display: none;
}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (07)フォーム                                                                                                             */
/*------------------------------------------------------------------------------------------------------------------------*/
input[type="text"],
input[type="password"]{
	border:solid 1px #888888;
	border-radius: 3px;
	padding: 3px 5px;
}
input[type="password"]{}
textarea{
	border:solid 1px #888888;
	border-radius: 3px;
	padding: 3px 5px;
	width: calc(100% - 10px);
}
@media screen and (max-width: 900px) {
	input[type="text"],
	input[type="password"],
	input[type="password"],
	textarea{
		font-size: 16px;
	}
}
/* ラジオボタン */
label.radio {
	cursor:pointer;
	position:relative;
	overflow:hidden;
	display:inline-block;
	margin:0 10px 0 0;
	padding:0px 0 3px 27px;
}
label.radio:before {
	position:absolute;
	width:14px;
	height:14px;
	border:3px solid #CCCCCC;
	border-radius:50%;
	left:0px;
	content:'';
	z-index:3;
}
label.radio:after {
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	border-radius:100%;
	left:5px;
	top:5px;
	background-color:#81B972;
	z-index:1;
}
label.radio input[type="radio"] {
	-moz-appearance:none;
	-webkit-appearance:none;
	position:absolute;
	z-index:2;
	width:20px;
	height:20px;
	left:-23px;
	top:1px;
	margin:0px!important;
	box-shadow:26px 2px #FFFFFF;
}
label.radio input[type="radio"]:checked {
	box-shadow:none;
}
label.radio input[type="radio"]:focus {
	opacity:0.2;
	box-shadow:26px 2px #FFF;
}
/* セレクト */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:url(../images/arrow_select.png) center right 10px no-repeat #FFFFFF;
	background-size:10px;
    border: solid 1px #888888;
	border-radius: 3px;
	padding:3px 35px 3px 10px;
	font-family: "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:13px;
	margin:0 5px 0 0;
}
@-moz-document url-prefix() { /* for firefox */
    #left-menu select {
        background:none;
        background:url(../images/arrow_select.png) center right 10px no-repeat #FFFFFF;
		background-size:10px;
    }
}
select::-ms-expand {
	display: none;
}
@media screen and (max-width: 500px) {
	select {
		padding:3px 35px 3px 10px;
		font-size:16px;
		margin:0 5px 0 0;
	}
}
/* チェックボックス */
input[type=checkbox]{
	display: none;
	margin: 0;
}
input[type=checkbox] + label{
	padding: 0 0 0 30px;
	position:relative;
}
input[type=checkbox] + label::before{
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin-top: -7px;
	background: #FFF;
	border: 2px solid #888888;
	border-radius:3px;
}
input[type=checkbox]:checked + label::after{
	content: "";
	position: absolute;
	top: 9px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	left: 3px;
	width: 14px;
	height: 10px;
	margin-top: -6px;
	border-left: 3px solid #81B972;
	border-bottom: 3px solid #81B972;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* disabled */
input[disabled],
select[disabled],
label[disabled],
.disabled{
	cursor: inherit;
	opacity: 0.4;
}
/* ボタン 緑 */
.btn_grn01{
	border-radius: 3px;
	background: #f0a704;
	border:none;
	margin: 0 auto;
	padding: 10px 30px;
	color: #FFFFFF;
}
.btn_grn01:hover{
	background: #37A917;
}
@media only screen and (max-width: 600px) {
	.btn_grn01{
		width: 100%;
	}
}
a.btn_grn01{
	display:inline-block;
}
a.btn_grn01:link   { color:#FFFFFF; text-decoration: none;}
a.btn_grn01:visited{ color:#FFFFFF; text-decoration: none;}
a.btn_grn01:hover  { color:#FFFFFF; text-decoration: none;}

/* ボタン グレー */
.btn_gry01{
	border-radius: 3px;
	background: #AAAAAA;
	border:none;
	margin: 0 auto;
	padding: 10px 30px;
	color: #FFFFFF;
}
.btn_gry01:hover{
	background: #CCCCCC;
}
@media only screen and (max-width: 600px) {
	.btn_gry01{
		width: 100%;
	}
}

/*エラーメッセージ*/
p.error{
	color: #FF2626;
	margin: 5px 0 0 0;
}
p.error:empty{
	margin: 0;
	display: none;
}


/*20200728追加分ここから*/
.threebanner{
	display: flex;
	flex-flow: row wrap;
}
.threebanner p{
	width:33%;
	padding:0 1%;
	box-sizing: border-box;
}

/*@media screen and (max-width: 600px) {
	.threebanner p{
		width:100%;
	}
	
	
	
}*/

/*20200728追加分ここまで*/





/*------------------------------------------------------------------------------------------------------------------------*/
/* (00)調整用                                                                                                              */
/*------------------------------------------------------------------------------------------------------------------------*/
.w1p{ width:1%!important;}
.w2p{ width:2%!important;}
.w3p{ width:3%!important;}
.w4p{ width:4%!important;}
.w5p{ width:5%!important;}
.w6p{ width:6%!important;}
.w7p{ width:7%!important;}
.w8p{ width:8%!important;}
.w9p{ width:9%!important;}
.w10p{ width:10%!important;}
.w11p{ width:11%!important;}
.w12p{ width:12%!important;}
.w13p{ width:13%!important;}
.w14p{ width:14%!important;}
.w15p{ width:15%!important;}
.w16p{ width:16%!important;}
.w17p{ width:17%!important;}
.w18p{ width:18%!important;}
.w19p{ width:19%!important;}
.w20p{ width:20%!important;}
.w21p{ width:21%!important;}
.w22p{ width:22%!important;}
.w23p{ width:23%!important;}
.w24p{ width:24%!important;}
.w25p{ width:25%!important;}
.w26p{ width:26%!important;}
.w27p{ width:27%!important;}
.w28p{ width:28%!important;}
.w29p{ width:29%!important;}
.w30p{ width:30%!important;}
.w31p{ width:31%!important;}
.w32p{ width:32%!important;}
.w33p{ width:33%!important;}
.w34p{ width:34%!important;}
.w35p{ width:35%!important;}
.w36p{ width:36%!important;}
.w37p{ width:37%!important;}
.w38p{ width:38%!important;}
.w39p{ width:39%!important;}
.w40p{ width:40%!important;}
.w51p{ width:51%!important;}
.w52p{ width:52%!important;}
.w53p{ width:53%!important;}
.w54p{ width:54%!important;}
.w55p{ width:55%!important;}
.w56p{ width:56%!important;}
.w57p{ width:57%!important;}
.w58p{ width:58%!important;}
.w59p{ width:59%!important;}
.w60p{ width:60%!important;}
.w61p{ width:61%!important;}
.w62p{ width:62%!important;}
.w63p{ width:63%!important;}
.w64p{ width:64%!important;}
.w65p{ width:65%!important;}
.w66p{ width:66%!important;}
.w67p{ width:67%!important;}
.w68p{ width:68%!important;}
.w69p{ width:69%!important;}
.w70p{ width:70%!important;}
.w71p{ width:71%!important;}
.w72p{ width:72%!important;}
.w73p{ width:73%!important;}
.w74p{ width:74%!important;}
.w75p{ width:75%!important;}
.w76p{ width:76%!important;}
.w77p{ width:77%!important;}
.w78p{ width:78%!important;}
.w79p{ width:79%!important;}
.w80p{ width:80%!important;}
.w81p{ width:81%!important;}
.w82p{ width:82%!important;}
.w83p{ width:83%!important;}
.w84p{ width:84%!important;}
.w85p{ width:85%!important;}
.w86p{ width:86%!important;}
.w87p{ width:87%!important;}
.w88p{ width:88%!important;}
.w89p{ width:89%!important;}
.w90p{ width:90%!important;}
.w91p{ width:91%!important;}
.w92p{ width:92%!important;}
.w93p{ width:93%!important;}
.w94p{ width:94%!important;}
.w95p{ width:95%!important;}
.w96p{ width:96%!important;}
.w97p{ width:97%!important;}
.w98p{ width:98%!important;}
.w99p{ width:99%!important;}
.w100p{ width:100%!important;}

.w10{ width:10px!important;}
.w20{ width:20px!important;}
.w30{ width:30px!important;}
.w40{ width:40px!important;}
.w50{ width:50px!important;}
.w60{ width:60px!important;}
.w70{ width:70px!important;}
.w80{ width:80px!important;}
.w90{ width:90px!important;}
.w100{ width:100px!important;}
.w110{ width:110px!important;}
.w120{ width:120px!important;}
.w130{ width:130px!important;}
.w140{ width:140px!important;}
.w150{ width:150px!important;}
.w160{ width:160px!important;}
.w170{ width:170px!important;}
.w180{ width:180px!important;}
.w190{ width:190px!important;}
.w200{ width:200px!important;}
.w250{ width:250px!important;}
.w300{ width:300px!important;}
.w350{ width:350px!important;}
.w400{ width:400px!important;}
.w450{ width:450px!important;}
.w500{ width:500px!important;}
.w550{ width:550px!important;}
.w600{ width:600px!important;}
.w650{ width:650px!important;}
.w700{ width:700px!important;}
.w750{ width:750px!important;}
.w800{ width:800px!important;}
.w850{ width:850px!important;}
.w900{ width:900px!important;}

.h10{ height:10px!important;}
.h50{ height:0px!important;}
.h100{ height:100px!important;}
.h150{ height:150px!important;}
.h200{ height:200px!important;}

/* margin-top */
.mt5{ margin-top:5px!important;}
.mt10{ margin-top:10px!important;}
.mt20{ margin-top:20px!important;}
.mt30{ margin-top:30px!important;}
.mt40{ margin-top:40px!important;}
.mt50{ margin-top:50px!important;}
.mt60{ margin-top:60px!important;}
.mt70{ margin-top:70px!important;}
.mt80{ margin-top:80px!important;}
.mt90{ margin-top:90px!important;}
.mt100{ margin-top:100px!important;}

/* margin-left */
.ml5{ margin-left:5px!important;}
.ml10{ margin-left:10px!important;}
.ml20{ margin-left:20px!important;}
.ml30{ margin-left:30px!important;}
.ml40{ margin-left:40px!important;}
.ml50{ margin-left:50px!important;}
.ml60{ margin-left:60px!important;}
.ml70{ margin-left:70px!important;}
.ml80{ margin-left:80px!important;}
.ml90{ margin-left:90px!important;}
.ml100{ margin-left:100px!important;}

/* margin-right */
.mr5{ margin-right:5px!important;}
.mr10{ margin-right:10px!important;}
.mr20{ margin-right:20px!important;}
.mr30{ margin-right:30px!important;}
.mr40{ margin-right:40px!important;}
.mr50{ margin-right:50px!important;}
.mr60{ margin-right:60px!important;}
.mr70{ margin-right:70px!important;}
.mr80{ margin-right:80px!important;}
.mr90{ margin-right:90px!important;}
.mr100{ margin-right:100px!important;}

/* margin-bottom*/
.mb5{ margin-bottom:5px!important;}
.mb10{ margin-bottom:10px!important;}
.mb20{ margin-bottom:20px!important;}
.mb30{ margin-bottom:30px!important;}
.mb40{ margin-bottom:40px!important;}
.mb50{ margin-bottom:50px!important;}
.mb60{ margin-bottom:60px!important;}
.mb70{ margin-bottom:70px!important;}
.mb80{ margin-bottom:80px!important;}
.mb90{ margin-bottom:90px!important;}
.mb100{ margin-bottom:100px!important;}

/* color */
.red01{ color:#D23E3E;}
.red02{ color:#FF2626;}
.green01{ color:#398726;}
.blue01{ color:#4294B8;}

/* font-size */
.font12{ font-size:12px;}
.font14{ font-size:14px;}
.font16{ font-size:16px;}
.font18{ font-size:18px;}
.font20{ font-size:20px;}
.font22{ font-size:22px;}

.strong{ font-weight: bold;}