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

body{
 /*フォントファミリゴシック*/
font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック",Verdana,"ヒラギノ角ゴシック",Hiragino Sans,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,sans-serif;
background: #fff;
}

section {
	margin: 0 auto;
	box-sizing: border-box;
}

div {
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

.shadow {
	box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
}

.container {
	width: 1000px;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
}

.wrapper {
	width: 100%;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
}

a {
	text-decoration: none;
}



/* clearfix */
.clearfix:after{
	content: "."; 
	display: block; 
	height: 0; 
	font-size:0;	
	clear: both; 
	visibility:hidden;
}


/* header */

#header {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 10px 0;
	background: #fff;
	border-bottom: 1px solid #ccc;
}

#header h1 img.header-logo {
	text-align: center;
	display: block;
	margin: 0 auto;
	max-width: 150px;

}

/* form */

form select {
	width: 24.4%;
    box-sizing: border-box;
    display: inline-block;
    margin: 5px 0;
}

input {
	-webkit-appearance: none;
	width: 100%;
	height: auto;
	margin: 5px auto;
	padding: 5px 10px;
	background: #f953c6;
    background: -webkit-linear-gradient(to top, #b91d73, #f953c6);
    background: linear-gradient(to top, #b91d73, #f953c6);
    color: #fff;
    display: block;
    text-align: center;
    padding: 10px 10px;
    margin: 10px auto;
    border-radius: 5px;
    font-size: 14px;
	border: none;

}


/* body */

img.header-img {
	width: 100%;
	height: auto;
	display: block;
}


h2.bread-title {
	font-size: 12px;
	color: #666;
	padding: 20px 0;
	font-weight: normal;
}

div.main-contents {
	width: 70%;
	height: auto;
	float: left;
}

div.sidebar {
	width: 27%;
	height: auto;
	float: right;
	padding: 0 10px;
}

div.sidebar img {
	max-width: 100%;
}

.item-wrap {
	width: 100%;
	height: auto;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0 auto;
	padding-bottom: 20px;
	border-bottom: 1px dotted #bdb8ad;
	position: relative;
	margin-bottom: 10px;
}

.item-wrap::after {
	clear: both;
	display: block;
}


.thumb-wrap {
	width: 30%;
	height: auto;
	float: left;
}

.thumb-wrap img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	text-align: center;
}

.desc-wrap {
	width: 70%;
	height: auto;
	float: right;
	padding: 10px 10px;
}

.desc-wrap::after {
	clear: both;
	display: block;
}

.desc-wrap p {
	font-size: 13px;
	line-height: 2;
}

.desc-wrap p.maker {
	font-size: 12px;
	color: #666;
}

.desc-wrap p.price {
	font-size: 15px;
	font-weight: bold;
}

.desc-wrap p.eval {
	margin-bottom: 5px;
	font-size: 15px;
}

p.desc {
	border-bottom: 1px dotted #bdb8ad;
}

.desc-wrap .item-title {
	font-size: 22px;
	color: #07B0A9;
	text-decoration: none;
	font-weight: bold;
}

.text-wrap {
	width: 100%;
    height: auto;
    float: right;
	padding: 3px;
    background: #e8e5e0;
    border: 1px solid #bdb8ad;

}

.text-wrap-inner {
	background: #fff;
	padding: 10px;
}

.text-wrap p {
	line-height:2;
	font-size: 14px;
}

.content-wrap {
	width: 100%;
	height: auto;
	margin: 0 auto;
	float: right;
}

.conv-area {
	width: 100%;
    height: auto;
    clear: both;
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
    padding: 20px 0;

}

.body-wrap {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 20px 0;
	margin-bottom: 20px;
	line-height: 1.5;
}

a.official {
	margin: auto;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 10px;
    background: #f4719a;
    -webkit-box-shadow: 0 5px #d52a66;
    -moz-box-shadow: 0 5px #d52a66;
    box-shadow: 0 5px #d52a66;
	width: 48%;
	display: block;
	color: #fff;
	padding: 15px 10px;
	clear: both;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}

a.detail {
	margin: auto;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 10px;
    background: #58c6bd;
    -webkit-box-shadow: 0 5px #2b948c;
    -moz-box-shadow: 0 5px #2b948c;
    box-shadow: 0 5px #2b948c;
	width: 48%;
	display: block;
	color: #fff;
	padding: 15px 10px;
	clear: both;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}

a:hover {
	opacity: 0.9;
}

/* search */

.product_item {
	position: relative;
}

.result-num {
	width: 100%;
	height: auto;
	padding: 15px 10px;
	font-size: 14px;
	background: #efefef;
	margin: 10px auto 20px;
}


.result-num span {
}

.pagenation {
    display: flex;
    width: 300px;
    justify-content: center;
    margin: 0 auto;
    padding: 20px 0;
}

.pagenation li {
	width: 35px;
    height: 35px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    margin: 0 5px;
    box-sizing: border-box;
    background: #fff;
    color: #000;

}

.pagenation li a {
	text-decoration: none;
}


/* sidebar */

.sidebar-inner {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 20px 0px;
}

.sidebar-inner img.adsence {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 30px;
}

.sidebar-inner img.rectan {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 30px;
}




/* footer */

footer {
	width: 100%;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 30px 5px;
	text-align: center;
	clear: both;
	background: #efefef;
}

footer a {
	color: #000;
	text-decoration: none;
	text-align: center;
	margin: 0 auto;
	font-size: 12px;
}


/* style */

span.bg {
	display: inline-block;
	box-sizing: border-box;
	font-size: 13px;
	width: 25%;
}

span.score {
	color: #FF8800;
	font-weight: bold;
}

img.poster {
	position: absolute;
	top: 0;
	left: 20px;
	z-index: 2;
}

/* kiji-style */

.body-wrap {
	line-height: 1.5;
}

.body-wrap p {
	font-size: 18px;
	line-height: 2.5;
}

.body-wrap img {
	width: 100%;
	height: auto;
	display: block;
	margin: 10px auto;
}

.body-wrap h1 {
    font-size: 25px;
    font-weight: bold;
    padding: 20px;
    border-top: solid 5px #ff0099;
    border-bottom: solid 5px #ff0099;
	margin-bottom: 20px;
}

.body-wrap h4 {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: solid 1px #ff0099;
	margin-bottom: 20px;
}

blockquote {
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

.body-wrap iframe {
	display: block;
	margin: 10px auto 35px;
}


.pconly {
	display: block;
}

.sponly {
	display: none;
}


/* top */

.top-post {
	overflow: visible !important;
    display: flex;
    flex-wrap: wrap;
	background: none !important;
	box-shadow: none !important;
}

.post-container {
	width: 47%;
	background: #fff;
}

.cat-bar {
	background-color: #339f9e;
	color: #fff;
	font-family: helvetica,arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	font-size: .75em;
    font-weight: 700;
	padding: 10px 5px;
}

.full-img-wrap {
	width: 100%;
	height: 200px;
}

.full-img-wrap img {
	min-width: 100%;
	height: auto;
}

p.rest-title {
	font-family: 'Roboto Slab',sans-serif;
    font-size: 16px;
    line-height: 120%;
    font-weight: 700;
    color: #2b3542;
    word-break: break-word;
    -ms-word-break: break-word;
    padding: 5% 4% 2%;
}

p.rest-desc {
	font-size: .8em;
    line-height: 150%;
    color: #666;
    padding: 5% 4% 2%;
}

p.rest-fav-number {
	padding: 0 5% 2%;
    float: right;
}


@media screen and (max-width: 979px) {




#header h1 img.header-logo {
	text-align: center;
	display: block;
	margin: 0 auto;
	max-width: 200px;
	height: 50px;

}

.container {
	width: 100%;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
}

.main-contents {
	padding: 0 10px;
}

div.main-contents {
	width: 100%;
	height: auto;
	float: left;
}

div.sidebar {
	width: 100%;
	height: auto;
	float: right;
	padding: 0 10px;
	margin: 40px 0 0;
}

.thumb-wrap {
	width: 100%;
	height: auto;
	float: left;
}

.thumb-wrap img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	text-align: center;
}

.desc-wrap {
	width: 100%;
	height: auto;
	float: right;
	padding: 10px 10px;
}

.conv-area {
	width: 100%;
    height: auto;
    clear: both;
    overflow: hidden;
    display: block;
    justify-content: space-evenly;
    padding: 20px 0;

}

a.official {
	margin: auto;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 10px;
    background: #f4719a;
    -webkit-box-shadow: 0 5px #d52a66;
    -moz-box-shadow: 0 5px #d52a66;
    box-shadow: 0 5px #d52a66;
	width: 100%;
	display: block;
	color: #fff;
	padding: 15px 10px;
	clear: both;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	margin-bottom: 20px;
}

a.detail {
	margin: auto;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 10px;
    background: #58c6bd;
    -webkit-box-shadow: 0 5px #2b948c;
    -moz-box-shadow: 0 5px #2b948c;
    box-shadow: 0 5px #2b948c;
	width: 100%;
	display: block;
	color: #fff;
	padding: 15px 10px;
	clear: both;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}

form select {
	width: 49%;
    box-sizing: border-box;
    display: inline-block;
    margin: 5px 0;
	font-size: 14px;
}

.sidebar-inner img.adsence {
	width: 100%;
	height: auto;
	display: none;
}


.sidebar-inner img.rectan {
	margin: 30px auto;
	width: auto;
	max-width: 100%;
	display: block;
}

.body-wrap {
	line-height: 1.5;
}

.body-wrap p {
	font-size: 16px;
	line-height: 2.5;
}

.body-wrap img {
	width: 100%;
	height: auto;
	display: block;
	margin: 10px auto;
}

.body-wrap iframe {
	max-width: 100%;
	height: auto;
	min-height: 200px;
	margin: 10px auto;
}

.pconly {
	display: none;
}

.sponly {
	display: block;
}


.body-wrap div a {
	max-width: 95%;
	box-sizing: border-box;
}



}



.marker.active {
	background-position: -100% 1.7em;
	display: inline-block;

}
 
.pink {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(255,132,220,0.5) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(255,132,220,0.5) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(255,132,220,0.5) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(255,132,220,0.5) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(255,132,220,0.5) 50%);
    background-repeat: repeat-x;
    background-size: 200% 5px;
    background-position: 0 .5em;
    transition: all 1s ease;
    font-weight: bold;
}

.yellow {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(237,221,0,0.5) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(237,221,0,0.5) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(237,221,0,0.5) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(237,221,0,0.5) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(237,221,0,0.5) 50%);
    background-repeat: repeat-x;
    background-size: 200% 5px;
    background-position: 0 .5em;
    transition: all 1s ease;
    font-weight: bold;
}

.red {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(234,33,28,0.75) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(234,33,28,0.75) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(234,33,28,0.75) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(234,33,28,0.75) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(234,33,28,0.75) 50%);
    background-repeat: repeat-x;
    background-size: 200% 5px;
    background-position: 0 .5em;
    transition: all 1s ease;
    font-weight: bold;
}

.blue {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(23,0,228,0.5) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(23,0,228,0.5) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(23,0,228,0.5) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(23,0,228,0.5) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(23,0,228,0.5) 50%);
    background-repeat: repeat-x;
    background-size: 200% 5px;
    background-position: 0 .5em;
    transition: all 1s ease;
    font-weight: bold;
}

/*------------------------------------------------------------
font-size・・・フォントサイズの設定
-------------------------------------------------------------*/
.b{ font-weight: bold!important; }/*太字*/
.big{ font-size: 1.2em!important; }/*文字（大）*/
.big2{ font-size: 1.5em!important; }/*文字（特大）*/
.big3{ font-size: 1.8em!important; }/*文字（特特大）*/
.small{ font-size: 0.8em!important; }/*文字（小）*/
 
 

 
 
/*------------------------------------------------------------
蛍光ペンのようなボックスの設定
-------------------------------------------------------------*/
.box-yellow{ padding:2px;background-color: #ff9!important; }/*黄色*/
.box-aqua{ padding:2px;background-color: #9ff!important; }/*水色*/
.box-gray{ padding:2px;background-color: #eee!important; }/*灰色*/
.box-red{ padding:2px;background-color: #fcc!important; }/*赤色*/
 
 
/*------------------------------------------------------------
【下線の設定】
-------------------------------------------------------------*/
.bd-red{border-bottom:2px solid #FDA2A2}     /* 赤色の下線 */
.bd-blue{border-bottom:2px solid #3094DD}    /* 青色の下線 */
.bd-green{border-bottom:2px solid #1ABC9C}   /* 緑色の下線 */
.bd-yellow{border-bottom:2px solid #F7D745}  /* 黄色の下線 */
.bd-orange{border-bottom:2px solid #F39C12}  /* 橙色の下線 */
.bd-black{border-bottom:2px solid #000}      /* 黒色の下線 */
 
 
/*------------------------------------------------------------
【ボックスの設定】
-------------------------------------------------------------*/
.box_shadow {
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    width: 88%;
    margin: 48px auto;
    padding: 5%;
    overflow: hidden;
}/*BOX（影）*/
 
.box_gray {
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    width: 88%;
    margin: 48px auto;
    padding: 5%;
    background-color: #FBFAF8;
    overflow: hidden;
}/*BOX（グレー）*/
 
.box_red {
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    width: 88%;
    margin: 48px auto;
    padding: 5%;
    background-color: #FADBDA;
    overflow: hidden;
}/*BOX（赤）*/
 
.box_blue {
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    width: 88%;
    margin: 48px auto;
    padding: 5%;
    background-color: #99CCFF;
    overflow: hidden;
}/*BOX（青）*/
 
.box_green {
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    width: 88%;
    margin: 48px auto;
    padding: 5%;
    background-color: #66CC99;
    overflow: hidden;
}/*BOX（緑）*/
 
 
/*------------------------------------------------------------
align・・・文字の横位置
-------------------------------------------------------------*/
.al-c{ text-align: center; }/*中央寄せ*/
.al-r{ text-align: right; }/*右寄せ*/
.al-l{ text-align: left; }/*左寄せ*/
 
 
/*------------------------------------------------------------
余白（下）
-------------------------------------------------------------*/
.m10-b{ margin-bottom: 10px!important; }
.m20-b{ margin-bottom: 20px!important; }
.m30-b{ margin-bottom: 30px!important; }
.m40-b{ margin-bottom: 40px!important; }
.m50-b{ margin-bottom: 50px!important; }
.m60-b{ margin-bottom: 60px!important; }
.m70-b{ margin-bottom: 70px!important; }
.m80-b{ margin-bottom: 80px!important; }
.m90-b{ margin-bottom: 90px!important; }

.kakoi{
border: 2px solid green;
}



/* 会社概要 */


table.company {
    width: 100%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0px 15px;
    font-size: 12px;
}
 
table.company th,
table.company td {
    padding: 10px;
	line-height: 1.3;
}

table.company th {
    background: #C50049;
    vertical-align: middle;
    text-align: left;
    width: 20%;
    overflow: visible;
    position: relative;
    color: #fff;
    font-weight: normal;
    font-size: 13px;
}
 
 
@media screen and (max-width: 999px) {
table.company th {
    background: #C50049;
    vertical-align: middle;
    text-align: left;
    width: 35%;
    overflow: visible;
    position: relative;
    color: #fff;
    font-weight: normal;
    font-size: 13px;

}

table.company th,
table.company td {
    padding: 5px;
	line-height: 1.5;
}

}
 
 
table.company th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #C50049;
    border-width: 10px;
    margin-top: -10px;
}
 
table.company td {
    background: #f8f8f8;
    width: 80%;
    padding-left: 20px;
}