html {
    scroll-behavior: smooth;
}

body{
    max-width: 980px;
    margin: auto;
    background-color: #876f55;
}

body>footer>aside ul {
	float:left;
	width: 300px;
	padding: 10px;
}

h1{
    font-size: 24px;
    color: #333;
	border:none;
}

h2{
    font-size: 20px;
    color: #333;
    border:none;
}

h3,h4{
    font-size: 16px;
    color: #333;
    border:none;
}

p{
    color: #333;
}

a:hover{
	color:#333;
}

/* 投稿 */
.info_p{
	color:#333;
	border-bottom: 1px solid #eee;
    padding: 5px 0;
}

.info_p a:hover{
	color:#333 !important;
}


/* スクロールボックス */
#example {
	width: 100%; /*ブロックの幅*/
	height: 400px; /*ブロックの高さ*/
	background-color: #fff; /*ブロックの背景色*/
	overflow: scroll; /*スクロール*/
	border: 1px solid #dcdcdc;
	padding: 5px 10px;
  margin-bottom: 40px;
}

#example h2{
	line-height: 1em;
	padding: 25px 10px 15px 20px;
	margin-top: 10px;
	background-color: transparent;
	background-image: url(images/post_title_bg.jpeg);
	background-repeat: no-repeat;
	margin: 10px 0;
	background-position: 0 0;
	color: #442f18 !important;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
}

#example h2 a{
	text-decoration: none;
	color: #442f18;
}

#cooperation {
	color: #600;
}

#cooperation ul {
	margin: 0 0 30px;
	padding: 0;
	font-size: 15px;
}

#cooperation ul li {
	list-style: none;
	border-bottom: 1px solid #eee;
	padding: 5px 0;
}


/* nav */
#gMenu_outer{
	background-color:#876f55;
}

.gMenu_name{
	color:#fff;
}

#content-wrap {
    padding-right: 0;
    margin-right: 0;
    display: flex;
    width: 100%;
}

main{
    max-width: 980px;
    width: 100%;
    margin: 100px auto 0;
}

a{
    color: blue;
    transition: .5s;
}

a:hover{
    text-decoration: none;
    transition: .5s;
}

a img{
    transition: .5s;
}

a img:hover{
    opacity: 0.7;
    transition: .5s;
}

img{
    max-width:100%;
}

/* header */
.right{
    text-align: right;
}

.right p{
    color: #fff;
}

/* スマホナビ */
.navbar-header{
    display: none;
}

#menu-button {
    width: 50px;
    padding: 10px 0;
    margin-left: 86%;
    margin-top: 5%;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    background-color: #876f55;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #876f55;
    cursor: pointer;
    position: fixed;
    z-index: 10;
    transition: all 0.5s linear;
    display: none;
}

#sp-menu {
    right: -300px;
    width: 275px;
    height: 100%;
    background-color: #fff;
    position: fixed;
    overflow: auto;
    z-index: 9;
    display: block;
    transition: all 0.5s ease-out;
}

#sp-menu .menu {
    padding-left: 30px;
    margin-top: 55px;
    line-height: 25px;
}

#sp-menu .menu .sub-menu {
    display: none;
}


/* nav */
.navbar-default{
    background-color: #876f55;
    border: none;
}

.navbar-collapse{
    background-color: #876f55;
}

.navbar-collapse a{
    color: #fff !important;
}

/* footer */
footer{
    text-align: center;
    background-color: #876f55;
    margin-top: 100px;
}

footer p{
  color: white;
}

.footer{
    background-color: #000000;
    color: #fff;
    padding-inline-start: 20px;
    padding: 20px;
}

.footer aside{
    display: flex;
    justify-content: center;
}

.footer aside ul{
    text-align: left;
    list-style: none;
    width: 30%;
}

.footer_clm{
    width: 30%;
}

.f_clm{
    margin-bottom: 20px;
}

.f_clm h2{
    color: #EEE8AA;
}

.f_clm span{
    color: green;
}

.f_clm h2,p{
    margin: 5px;
}

.footer_clm img{
    width: 100%;
}

.f_top_clm{
    height: auto;
}

/* main */
#content-wrap{
    padding-right: 0;
    margin-right: 0;
}

#main{
    width: 70%;
	padding: 10px 30px;
}

/* sidebar */
#sidebar{
    width: 30%;
    padding-left: 0;
    padding-right: 0;
}

.sidebar1{
    background-color: #eeeab6;
}

.form{
    margin: auto;
    width: 90%;
}

.space_bar{
    height: 50px;
    margin: 0 10px;
    border-bottom: 2px solid #333;
}

.brown{
    /* text-align: center; */
    color: #660000;
}

h2.brown,
.h3{
    text-align: left;
    padding-left: 10px;
}

.category_clm{
    display: flex;
    justify-content: flex-start;
    flex-direction: initial !important;
    width: 100%;
}

.category_clm a{
    text-align: left;
    padding-left: 10px;
    color: #660000;
    width: 50%;
}

.category_clm a:hover{
    opacity: 0.6;
}

.sidebar_img{
    text-align: center;
}

.sidebar_img img{
    width: 75%;
    margin: 20px;
}

.sidebar_icon{
    text-align: center;
}

.sidebar_icon img{
    width: 75%;
    margin: 5px 0;
}

.sidebar_reservation{
    display:flex;
    flex-direction: column;
}

.sidebar_reservation a{
    color:#660000;
    margin:5px 10px 0;
}

.center{
    display: flex;
    flex-direction: column;
}

.center a{
    color: #660000;
    margin: 5px 10px 0;
}

/* 共通 */
#content{
    background-image: url(images/main_bg-300x53.jpeg);
    background-repeat: repeat-y;
    background-color: #fff;
}

.h2, h2 {
    font-size: 2.5rem;
}
.container {
    width: auto;
}
.iframe{
position:relative;
width:100%;
height:0;
padding-top:75%;
}
.iframe iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
/* TOP */
.header-img img{
    width: 100%;
}
ul.categoryList{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    padding: 0;
    margin: 10px auto 0;
}
ul.categoryList,
.categoryList li{
    list-style: none;
}
.categoryList li{
    width: 30%;
max-width:220px;
    border: 1px solid #66bdbe;
    background: rgb(238,237,211);
    background: linear-gradient(0deg, rgba(238,237,211,1) 0%, rgba(255,255,255,1) 100%);
    border-radius: 10px;
    margin: 0 10px 10px 0;
    box-sizing: border-box;
    display: flex;
}
.categoryList li:hover{
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(238,237,211,1) 100%);
    border: 1px double #66bdbe;
    transition: .4s;
}
.categoryList li a{
    color:#449293;
    text-decoration: none;
    display: flex;
    align-items: center;
justify-content:space-between;
}
.categoryList li a picture,
.categoryList li a .text{
    box-sizing: border-box;
}
.categoryList li a picture{
    width: 35%;
    padding: 10px 0 10px 10px;
}
.categoryList li a img {
    width: 100%;
    padding: 0;
}
.categoryList li a .text{
    width: auto;
    text-align: right;
    font-weight: bold;
    padding: 10px;
    line-height: 1.2;
    letter-spacing: 0;
}
.categoryList li a .text h3{
    font-size: 1.5rem;
    font-weight: bold;
    color:#449293;
    margin: 0;
    border: none;
    letter-spacing: -1px;
    line-height: 1;
}
.categoryList li a .text h3 span{
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1.2;
}

@media screen and (max-width:767px){
ul.categoryList{
    width: 100%;
    /* max-width: 400px; */
justify-content: flex-start;
}
.categoryList li{
    width: 46%;
}
.categoryList li a picture{
    width: 35%;
    padding: 5px 0 5px 5px;
}
.categoryList li a .text{
    padding: 0 5px;
}

}

@media screen and (max-width:480px){
.categoryList li a .text h3{
    font-size: 1.2rem;
}
.categoryList li a .text h3 span{
    font-size: 0.75rem;
}
}

  #yotsuya h3,#yotsuya h4,#yotsuya p,#yotsuya li,
  #shiodome h3,#shiodome h4,#shiodome p,#shiodome li{
      text-align:left;
  }


/* 求人 */
.recruite_clm{
    display: flex;
    justify-content: center;
    width: 100%;
    color: #333;
}

.r_clm{
    display: flex;
    align-items: center;
    width: 100%;
    color: #333;
}

.r_clm h4,p{
    margin-left: 10px;
}

.r_clm h4{
    text-align: center;
    border: 1px solid #333;
    border-radius: 15px;
    padding: 10px;
}

.r_clm span{
    font-size: 10px;
    color: #818080;
}

.recruite_btn{
    padding: 10px;
}

.recruite_btn a:hover{
    background-color: #abb8c3 !important;
    color: #fff !important;
}

/* 法人様専用申込書 */
.application_img{
    width: 40%;
    margin: auto;
}

.btn_register {
    background: #4fcdc4;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    border: 1px solid #4fcdc4;
    transition: 0.5s;
}
.btn_register:hover {
    background: #fff;
}
.btn_register a {
    color: #fff;
    display: block;
}
.btn_register:hover a{
    color:#4fcdc4;
}
.btn_register a strong{
  font-size: 2rem;
}
/* カテゴリー/検索/archive */
.catList,
.blogList{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.catList > li,
.blogList > li{
  width: 45%;
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
}
.catList li h2,
.blogList li h2{
  font-size: 2rem;
}
.catList li h2 a,
.blogList li h2 a{
  color:#333;
}
.catList li section{
}
.catList li section span{
  position:absolute;
  top: 0;
  right: 0;
}
.priceTable{width: 55%;}
.priceTable td {
  color:red;
  line-height:1.2;
  text-align: right;
}
.priceTable span {
    font-size: 0.75rem;
}
.thumb{width: 40%;}
.thumb img{
  width: 100%;
  height: auto;
}
.flex{
  display: flex;
  justify-content: space-between;;
}
.catList li > ul li{
  font-size: 1.25rem;
  line-height: 1.2;
}
.catList .btn{
  padding:0;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.catList .btn a{
  color:#fff;
  display: block;
  padding: 10px 0;
}
.btn .detail,
.btn .reserve{
  width:45%;
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  color: #ffffff;
}
.btn .detail{
  background: #7091e5;
  background-image: -webkit-linear-gradient(top, #7091e5, #253172);
  background-image: -moz-linear-gradient(top, #7091e5, #253172);
  background-image: -ms-linear-gradient(top, #7091e5, #253172);
  background-image: -o-linear-gradient(top, #7091e5, #253172);
  background-image: linear-gradient(to bottom, #7091e5, #253172);
  border: solid #1d48c0 2px;
}
.btn .reserve{
  background: #db5f69;
  background-image: -webkit-linear-gradient(top, #db5f69, #651916);
  background-image: -moz-linear-gradient(top, #db5f69, #651916);
  background-image: -ms-linear-gradient(top, #db5f69, #651916);
  background-image: -o-linear-gradient(top, #db5f69, #651916);
  background-image: linear-gradient(to bottom, #db5f69, #651916);
  border: solid #aa1e2a 2px;
}
.btn .detail:hover{
  background: #253172;
  background-image: -webkit-linear-gradient(top, #253172, #7091e5);
  background-image: -moz-linear-gradient(top, #253172, #7091e5);
  background-image: -ms-linear-gradient(top, #253172, #7091e5);
  background-image: -o-linear-gradient(top, #253172, #7091e5);
  background-image: linear-gradient(to bottom, #253172, #7091e5);
}
.btn .reserve:hover {
  background: #651916;
  background-image: -webkit-linear-gradient(top, #651916, #db5f69);
  background-image: -moz-linear-gradient(top, #651916, #db5f69);
  background-image: -ms-linear-gradient(top, #651916, #db5f69);
  background-image: -o-linear-gradient(top, #651916, #db5f69);
  background-image: linear-gradient(to bottom, #651916, #db5f69);
}
.blogList li img {
  height: auto;
}
.blogList li h2 {
  margin: 0;
}
.sidebar_blog {padding: 0 10px 20px;}
.sidebar_blog h3{padding: 0;}
.sidebar_blog li{
  line-height: 1.2;
  border-bottom: 1px solid #333;
  padding: 5px 0;
}
.sidebar_blog a{color: #333;}

.nav-links{

}
.nav-links a.page-numbers,
.nav-links span.page-numbers.current{
  color: #333;
  border:1px solid #333;
  border-radius: 5px;
  background: #eee;
  padding: 5px 10px;
  margin-right: 5px;
}
.nav-links span.page-numbers.current{
  color: #fff;
  background: #999;
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
nav#global-nav {
    display: none;
}

/* メニュー */
#bs-navbar-collapse-1{
    display: none !important;
}

/* スマホナビ */
#menu-button {
    display: block;
}

/* main */
#main {
    width: 100%;
	padding: 10px 15px;
}

/* sidebar */
#sidebar {
    display: none;
}

/* footer */
.footer aside ul{
    width: 50%;
}

.footer_w3{
    display: none;
}

}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
/* 求人 */
.recruite_clm{
    flex-direction: column;
}

.r_clm{
    width: 100%;
}

.r_clm h4{
    width: 30%;
}

.r_span{
    margin-left: 28%;
}

.r_span p{
    margin-left: 26px;
}

/* footer */
.footer aside {
    flex-direction: column;
}

.footer aside ul{
    width: 100%;
}


}



/*
base.css移植
 */
/* xo slider */
.item{
	width:30%;
}

/* 検索 */
.wp-block-search__inside-wrapper {
	display: flex;
   flex-wrap: initial !important;
}

.input-group{
	position: absolute;
	top: 10vh;
	width:90%;
	margin-left: 10px;
}

.full_hr{
	border-bottom: 2px solid #333;
	width: 90%;
	margin: auto;
}

.content_h3{
	margin-top:20px !important;
	margin-left:10px;
	margin-bottom:10px;
}

/* main調整 */
/* #main h1{
	display:none;
}
 */
.bg_img_h2{
	background-image:url(images/post_title_bg.jpeg);
	background-repeat: no-repeat;
}

/* カテゴリー */
/* .is-layout-flex{
	gap:0 !important;
} */

.sb_left_p{
	margin-left:30px !important;
}

/* ご予約 */
/* .reserve{
	float:left;
	margin-left:10px;
	margin-bottom:0;
} */

/* カメラカテゴリー */
.c_clm{
	display: flex;
	justify-content: space-around;
	width: 100%;
	margin:10px 0;
}

.cl{
	text-align:center;
	display: flex;
	width: 45%;
	height:125px;
	border: 1px solid #66bdbe;
	background: rgb(238,237,211);
	background: linear-gradient(0deg, rgba(238,237,211,1) 0%, rgba(255,255,255,1) 100%);
	border-radius: 10px;
	margin: auto;
}

.cl a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:100%;
}

.cl img{
	height: auto;
	width: 40%;
}

.text{
	width: 40%;
}

.text h3{
	font-size: 16px;
	color: #449293;
	margin: 0;
   padding: 0;
}

/* アクセス */
.acsess-h3{
	font-size:1em;
	font-weight:700;
	border:none;
}

.acsess-h4{
	padding: 3px 5px;
	margin-top: 10px;
	border-top-style: solid;
	border-top-color: #e6d3b1;
	margin: 10px 0 0 3px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #e6d3b1;
	border-right-style: solid;
	border-right-color: #e6d3b1;
	border-right-width: 1px;
	border-left-style: solid;
	border-left-color: #e6d3b1;
	border-left-width: 10px;
}

.list1{
	  color:#333;
		padding-left: 1pc;
		margin-top: 1em;
		margin-bottom: 1em;
		list-style-image: url(images/list_list1.png);
}

.list1 li{
	margin-bottom:10px;
	line-height:1;
}

.list1 span{
	color:#333;
	font-size:20px;
}

.qhm-deco{
		color: green !important;
}

.acsess_p p{
	line-height:1.5;
}

.top_banner li {
    margin-bottom: 20px;
}
/* 求人情報 */
.qhm-align-center{
	width:266px;
	margin:auto;
	transition:0.5s;
}

.qhm-align-center:hover{
	opacity:0.6;
	transition:0.5s;
}

/* ページの上へ */
.qhm-align-right{
	float: right;
}

.qhm-align-right a {
	color: #333 ;
	text-decoration: none;
}

.qhm-deco{
	color: green;
}

/* 他ページ共通 */

/* 法人登録へ */
.cr{
	 text-align: right;
    color: #333;
}

.cr a:hover{
	 color: #333;
}

/* 初めての方 */
.guide{
	transition:0.5s;
}

.guide:hover{
	transition:0.5s;
	opacity:0.6;
}

.h3_red h3{
	color:red;
	text-align:center;
}

.h3_red span{
	color:red;
	text-align:right;
}

.arrow img{
	width:100%;
	margin:auto;
}

.qhm-clm .wp-block-group__inner-container{
	text-align:right;
	display:flex;
	flex-direction:column;
}

.qhm-orange{
color:orange;
}

/* アイコン */
.icon_img img{
	width:50%;
	margin:auto;
}

.lending_img img{
	width:70%;
	margin:auto;
}

/* box */
.box {
	border:double 5px;
}

/* お支払い方法 */
.ident{
		display: flex;
}

.ident img{
		width: 15%;
		padding: 10px;
}

/* 星の画像 */
.star{
	width:30%;
	margin:auto;
}

/* 配送・回収 */
.delivery{
	transition:0.5s;
}

.delivery:hover{
	opacity:0.6;
	transition:0.5s;
}

.delivery_img{
	width:50% !important;
}

.delivery_p{
	color:#333;
	margin-left:10px;
}

.strong_p{
	text-align:center;
	color:#333;
	font-size:28px;
}

.strong_small{
	font-size:20px;
	line-height:1;
}

.marker_box{
	border:1px solid #a2a2a2;
	padding:10px;
}

/* text指定 */
.text3{
	margin-left:15%;
}

/* 料金プラン */
.price{
	transition:0.5s;
}

.price:hover{
	opacity:0.6;
	transition:0.5s;
}

/* 利用規約 */
.tos_txt{
	margin:10px 10px 10px 30px;
}

.quotation{
	margin:20px 0 20px 30px;
}

/* 会社概要 */
.td_bg{
	font-weight:700;
	background-color:#fffabe;
}

/* アクセスマップ */
.acsess_map_p{
 font-size: 14px;
 color: #333;
}

.p_span{
	margin-right:10px;
}

/* お問い合わせ */
.contact_p{
	color:#333;
}

.tel_img{
	width:50%;
	margin:auto;
}

label{
	display:flex;
	justify-content:space-around;
}

.label{
	display:flex;
	justify-content:center;
	width:100%;
	color:#333;
}

.label p{
	font-size:14px;
	margin-bottom:0;
}

.label_p{
	text-align:end;
	width:30%;
}

.label br{
	display:none;
}

.submit{
	text-align:center;
}

.wpcf7-submit{
   border-radius: 15px;
	background-color:#876f55;
	color: #fff;
	transition:1s;
	margin-left:15%;
	padding: 10px 20px;
}

.wpcf7-submit:hover{
	background-color:#fff;
	color:#876f55;
	border-color:#876f55;
	transition:1s;
}



/* スマホ */
@media (max-width: 480px){

	h2{
		font-size:16px !important;
	}

	.icon_img {
		max-width:60%;
		margin:auto;
	}

	.lending_img img {
    width: 35%;
		margin:0;
   }

	.img_clm{
		position:relative;
		height:300px;
	}

	.c_img1{
		position:absolute;
		top:0;
		left:0;
	}

	.c_img2{
		position:absolute;
		top:100px;
		left:35%;
	}

	.c_img3{
		position:absolute;
		top:160px;
		left:70%;
	}

	.star{
		width:50%;
	}

	.red{
		font-size:20px;
	}

	.h3_red{
		color: #CF2E2E;
		font-size: 20px;
		font-weight: 700;
		margin: auto;
	}

	.h3_red h3{
		text-align: center;
		font-size: 20px;
	}

	.h3_red span{
		float: right;
		font-size: 14px;
	}

	.ident img {
	  width: auto;
    height: 70px;
	}

	.icon_img {
    max-width: 50%;
}

	.ident_s img{
		width:35%;
	}

	.delivery_strong{
		font-size:19px;
	}

	.strong_small{
		font-size:14px;
	}

	.list1 li {
    line-height: 1.5;
   }

	/* お問い合わせ */
.label_p{
	text-align:start;
	width:75%;
	margin-left:10px;
}

/* 	カメラカテゴリー */
	.c_clm{
		display: flex;
		justify-content: space-around;
		width: 100%;
	}

	.cl{
		display: flex;
		width: 46%;
		height:100px;
		border: 1px solid #66bdbe;
		background: rgb(238,237,211);
		background: linear-gradient(0deg, rgba(238,237,211,1) 0%, rgba(255,255,255,1) 100%);
		border-radius: 10px;
		margin: auto;
	}

	.cl a{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cl img{
		height: auto;
		width: 40%;
	}

	.text{
		width: 50%;
	}

	.text h3{
		font-size: 10px;
	}

/* 	 */
	.bar a{
		color:#660000 !important;
	}

	.full_img{
		width:100%;
	}

.vk-mobile-nav{
	background-color: #eeeab6 !important;
	padding:0;
	}

	.input-group_m{
		position: absolute;
    top: 15vh;
    width: 100%;
		padding:10px;
	}

	.vk-mobile-nav-widget{
		display:flex;
	}

	.category_clm{
		display: flex;
    flex-direction: column;
    width: 100%;
	}

	.is-layout-flow{
	 width:50%;
	}

	.content_h2{
		margin:auto;
	}

	.vk-mobile-nav-menu-outer{
		display:none;
	}

	.label{
		flex-direction: column;
	}

.catList > li,
.blogList > li{
    width: 100%;
  }

}

h3.brown{
  font-size: 1.5rem;
  font-weight: bold;
}
h3.brown a{
  color: #76493c;
}


#makerBanner, ul#makerCategory li {
    width: 550px;
    min-height: 130px;
    border: 5px solid #999;
    box-sizing: border-box;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
#makerBanner {
    width: 100%;
    margin: 0 0 20px;
    padding: 10px;
    list-style: none;
}
ul.makerCategory li .description, ul.makerCategory02 li .description, #makerBanner .description {
    position: relative;
    z-index: 10;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
}
ul.makerCategory li .description h2, ul.makerCategory li .description h3, ul.makerCategory02 li .description h2, ul.makerCategory02 li .description h3, #makerBanner .description h2, #makerBanner .description h3 {
    border: none;
    color: #600;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: normal;
    background: none;
    padding: 0;
    margin: 0;
    line-height: 1.2;
}
ul.makerCategory li .description h3, ul.makerCategory02 li .description h3, #makerBanner .description h3 {
    font-size: 14px;
    margin-bottom: 10px;
    border: none;
}
ul.makerCategory02 li .description h3, #makerBanner .description h3 {
    font-size: 12px;
}
#makerBanner p {
    margin: 0;
}
ul.makerCategory li img, ul.makerCategory02 li img, #makerBanner img {
    width: auto;
    height: auto;
    max-width: 60%;
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translate(-75%, -75%);
    -webkit-transform: translate(-75%, -75%);
    -ms-transform: translate(-75%, -75%);
    transform: rotate(-15deg);
    opacity: .25;
}
#makerBanner img {
    opacity: .75;
}


.descriptionBg,
.stocklist{
    background:#fff;
    text-align:left;
    padding:1rem;
}
.stocklist h3{
  font-size: 2.5rem;
  border:1px solid #e6d3b1;
  border-left:10px solid #e6d3b1;
  line-height:1.2;
  padding: 5px 10px;
}
.stocklist ul li{
  list-style:none;
}
.stocklist ul li .textBox{
  display:flex;
  justify-content:space-between;
  align-items: flex-start;
}
.stocklist ul li .textBox strong{
  font-size:2rem;
  font-weight:bold;
}
.stocklist ul li .textBox .red{
  color:red;
  font-size:2rem;
}
.stocklist ul li .textBox img{max-width:25%;}

@media screen and (max-width:767px){
.stocklist ul li .textBox{
  flex-wrap:wrap;
}
.stocklist ul li .textBox img{max-width:50%;}

}


/*モーダルを開くボタン*/
.modal-open{
	/* display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
	width: 300px;
	height: 50px;
	font-weight: bold;
	color: #fff;
	background: #000;
	margin: auto; */
	cursor: pointer;
	/* transform: translate(-50%,-50%); */
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
  z-index: 9999;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
	text-align: left;
	padding: 30px;
}
.modal-section{
  margin-bottom: 20px;
}
.modal-section h4{
  font-weight: bold;
}
.modal-section ul {
  display: flex;
  justify-content: space-between;;
}
.modal-section li {
  width: 45%;
  background: #3693d1;
  background-image: -webkit-linear-gradient(top, #3693d1, #2980b9);
  background-image: -moz-linear-gradient(top, #3693d1, #2980b9);
  background-image: -ms-linear-gradient(top, #3693d1, #2980b9);
  background-image: -o-linear-gradient(top, #3693d1, #2980b9);
  background-image: linear-gradient(to bottom, #3693d1, #2980b9);
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px 10px 20px;
  text-align: center;
  line-height: 1.2;

}

.modal-section li a{
  color: #fff;
}
.modal-section li:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
@media screen and (max-width:480px) {
.modal-section ul {
  flex-direction: column;
}
.modal-section li {
  width: 100%;
  margin-bottom: 20px;
}
}

.eigyojikan {
  background: #fb2500;
  background-image: -webkit-linear-gradient(top, #fb2500, #b81901);
  background-image: -moz-linear-gradient(top, #fb2500, #b81901);
  background-image: -ms-linear-gradient(top, #fb2500, #b81901);
  background-image: -o-linear-gradient(top, #fb2500, #b81901);
  background-image: linear-gradient(to bottom, #fb2500, #b81901);
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 20px 10px 20px;
  text-align: center;
}

.eigyojikan a{
  color: #fff;
}
.eigyojikan:hover {
  background: #b81901;
  background-image: -webkit-linear-gradient(top, #b81901, #fb2500);
  background-image: -moz-linear-gradient(top, #b81901, #fb2500);
  background-image: -ms-linear-gradient(top, #b81901, #fb2500);
  background-image: -o-linear-gradient(top, #b81901, #fb2500);
  background-image: linear-gradient(to bottom, #b81901, #fb2500);
}

@media screen and (max-width:767px){
.eigyojikan {
  font-size: 1.25rem;
}
}



    ul.makerCategory{
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul.makerCategory li{
        width: 90%;
        max-width: 640px;
        min-height: 130px;
        border: 5px solid #999;
        box-sizing: border-box;
        margin: 0 auto 20px;
        padding:0;
        position: relative;
        overflow:hidden;
        text-align: left;
        background: #fff;
    }
    ul.makerCategory li a{
        color:#000;
        text-decoration: none;
        display: block;
        padding: 10px;
    }
    ul.makerCategory li a:hover{
        opacity: 0.5;
    }
    ul.makerCategory li .description{
        position: relative;
        z-index: 10;
        text-shadow:
           1px 1px 0px #fff, -1px -1px 0px #fff,
          -1px 1px 0px #fff,  1px -1px 0px #fff,
           1px 0px 0px #fff, -1px  0px 0px #fff,
           0px 1px 0px #fff,  0px -1px 0px #fff;

    }
    ul.makerCategory li .description h2,
    ul.makerCategory li .description h3{
        border:none;
        color: #600;
        font-size: 32px;
        font-weight: bold;
        letter-spacing: normal;
        background: none;
        padding: 0;
        margin: 0;
        line-height: 1.2;
    }
    ul.makerCategory li .description h3{
        font-size: 14px;
        margin-bottom: 10px;
        border: none;
    }
    ul.makerCategory li .description h2 span{
        font-size: 12px;
        display: inline-block;
        margin-left: 5px;
    }
    ul.makerCategory li .description p{
        margin: 0;
        line-height: 1.2;
    }
    ul.makerCategory li img{
        width: auto;
        height: auto;
        max-width: 60%;
        position: absolute;
        left: 50%;
        top: -10px;
        transform: translate(-75%, -75%);
        -webkit-transform: translate(-75%, -75%);
        -ms-transform: translate(-75%, -75%);
        transform: rotate(-15deg);
        opacity: 0.25;
    }

@media screen and (max-width:767px){
    ul.makerCategory li{
        width: 100%;
        min-height: 100px;
    }
    ul.makerCategory li .description h2{
        font-size: 24px;
        line-height: 1;
    }
    ul.makerCategory li .description h3{font-size: 12px;}
    ul.makerCategory li img{
        top: 15%;
    }

}