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

/*++++++++++++++++++++++++++++++++++++++++++++++++

Desighed ＆ Direction , Construction By BECK inc.
https://www.beck-dx.com

+++++++++++++++++++++++++++++++++++++++++++++++++*/

* {font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}

body{margin:0; padding:0;}

#main-cont{
width:1000px;
height:auto;
padding:0;
margin:0 auto;
background:#f5f7ee;
padding-bottom: 50px;
padding-top: 30px;
}

.topimage{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background-size: cover;
background:url(https://midori.itembox.design/item/beck/category/img/feijoa001.jpg);
background-repeat: no-repeat;
}

#main-cont h1{
text-align:center;
font-size: 35px !important;
line-height:2em;
letter-spacing:1px;
margin-top:-10px;
margin-bottom: 20px;
color:#111;
font-weight: bold !important;
}

#main-cont h2{
text-align:center;
line-height:2em;
font-size: 20px !important;
letter-spacing:1px;
color:#111;
/* padding-top: 50px; */
font-weight: bold !important;
}

#main-cont h3{
text-align:center;
letter-spacing: 0.1em;
font-size:23px !important;
color:#111;
font-weight: bold !important;
}

.kugiri{
border-bottom:3px solid #111;
margin-bottom:40px !important;
width:10%;
margin:0 auto;
}
p.txt01{
font-size:100%;
line-height:2em;
color:#333 !important;
text-align:left;
margin:0 auto;
width:80%;
padding-bottom:50px;
}

.tate-tx{
writing-mode: tb-rl;/* IE独自 */
writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
float:left;
display:block;
padding:10px 0;
box-sizing: border-box;
text-align:left;
color:#444;
font-size:105%;
line-height:2.2em;
height:270px;
}

.pr-area{
width:100%;
padding:0;
overflow:hidden;
clear:both;
}

.pr-img{
width:70%;
}

.pr-img02{
width:70%;
float: right;
}

.tate-tx1{
writing-mode: tb-rl;/* IE独自 */
writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
float:right;
display:block;
margin: auto;
box-sizing: border-box;
text-align:left;
color:#444;
font-size:97%;
line-height:2.0em;
letter-spacing: 0.1em;
height:630px;
padding:70px 70px 0 0;
margin-bottom: 80px;
}

.tate-tx2{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
float:left;
display:block;
margin: auto;
box-sizing: border-box;
text-align:left;
color:#444;
font-size:97%;
line-height:2.0em;
letter-spacing: 0.1em;
height:630px;
padding:70px 0 0 70px;
margin-bottom: 80px;
}

.shikiri{
background:url(https://midori.itembox.design/item/beck/category/img/shikiri.png) no-repeat;
height:100px;
margin: 50px 0;
display:block;
clear:both;
}

.shiyou th{
width:33%;
text-align:left;
vertical-align:top;
}
.shiyou td{
padding: 6px;
font-size:13px;
background-color:#fff;
text-align:left;
padding-left:10px !important;
padding:15px 0;
letter-spacing:1.5px;
border-bottom: 1px solid #fff;
color: #333 !important;
}
td.sel{
background: #000;
text-align: left;
color: #FFF !important;
font-weight:bold;
}


/* --Q&Aコーナー　*/
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
font-family: 'FontAwesome', sans-serif;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
}
.cp_qa .cp_actab {
position: relative;
overflow: hidden;
width: 90%;
margin: 0 0 1em 0;
margin-left: 40px;
color: #ffffff;
line-height:1.6em;
letter-spacing: 0.1em;
font-size:96%;
}
.cp_qa .cp_actab input {
position: absolute;
opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
line-height: 1.6em;
position: relative;
display: block;
margin: 0 0.5em 0.5em 2em;
padding: 1em 0 2em 0;
cursor: pointer;
border-radius: 0.3em;
background: #222;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
.cp_qa .cp_actab label span {
display: block;
padding: 0 2em 1em 2em;
border-bottom: 1px solid #ffffff;
}
/* --?アイコン */
.cp_qa .cp_actab label::before {
font-size: 2em;
position: absolute;
z-index: 99;
top: 0.5em;
left: -1em;
padding: 0 0.5em;
content: '?';
border: 3px solid #ffffff;
border-radius: 50%;
background: #222;
display: inline-block;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
}
/* --▼アイコン */
.cp_qa .cp_actab label::after {
font-size: 1em;
font-weight: normal;
line-height: 1em;
position: absolute;
right: 0;
bottom: 1em;
content: '▼';
display: inline-block;
width: 100%;
height: 1em;
padding: 0.5em;
text-align: right;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
position: relative;
overflow: hidden;
max-height: 0;
margin: 0 0 0.5em 0;
padding: 0 0 0 5em;
-webkit-transition: max-height 0.5s ease;
	    transition: max-height 0.5s ease;
color: #444;
font-size: 14px!important;
font-weight: normal !important;
}
/* --!アイコン */
.cp_qa .cp_actab .cp_actab-content::before {
font-size: 1.5em;
position: absolute;
z-index: 99;
top: calc(50% - 0.9em);
left: 2.5em;
padding: 0 0.6em;
content: '!';
color: #222;
border: 3px solid #ffffff;
border-radius: 50%;
background: #ccc;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
}
.cp_qa .cp_actab .cp_actab-content p {
margin: 0.5em 0.5em 0.5em 0;
padding: 1em 1em 1em 3em;
border-radius: 0.3em;
background: #ccc;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
max-height: 150em;
}
/* 質問をクリックした時の▼アイコンの動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
bottom: 0em;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
	
/* --*資材PR */
.item-pr ul {
width: 100%;
overflow: hidden;
padding: 0;
margin: 20px 25px;
}

.item-pr li {
width: 28%;
list-style: none;
margin: 10px 15px 10px 20px;
float: left;
font-size: 14px;
color: #111;
text-align: center;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.item-pr li a {
text-decoration: none !important;
color: #111 !important;
}

.item-pr img {
width: 100%;
transition-duration: 0.5s;
}

@media screen and (max-width:850px) { 
.cp_qa .cp_actab {
width:90%;
margin-left: 20px;
}
.cp_qa .cp_actab .cp_actab-content {
font-size: 90% !important;
}
#main-cont{
width:100%;
}
p.txt01{
font-size: 83%;
}
.shiyou{
width:90%;
}
}


.fn-sp ul a{
text-decoration:none !important;
}

.fn-sp ul{
width:99.9%;
margin:0;
padding:0;
height:auto;
overflow:hidden;
}

.fn-sp li{
width:44%;
margin-bottom:5px;
margin-top:10px;
font-size:14px;
margin-right:3%;
margin-left:3%;
box-sizing:border-box;
color:#222;
text-align:left;
float:left;
list-style:none;
}

.fn-sp li img{
width:100%;
margin-top:10px !important;
transition-duration: 0.3s;
}

.fn-sp li img:hover{
transform: scale(1.05);
transition-duration: 0.3s;
opacity:0.7;
}

.fn-sp-name{
color:#222;
font-weight:normal;
text-align:left;
font-size:80%;
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top:7px;
margin-bottom:8px;
padding-left:5px;
}

.fn-sp-price{
color:#000;
font-size:115%;
text-align:right;
float:right;
font-weight:bold;
}

.fn-sp-deli{
background:#F30;
color:#fff;
font-weight:bold;
font-size:75%;
padding:2px 3px;
float:left;
margin-left:16px;
}

/* --スマホ left ナビボタン */
#sp-Naviarea ul{
	position:fixed;
	bottom:5%;
	left: 0;
	overflow:hidden;
	width:100%;
	margin:0;
	padding:0;
}

#sp-Naviarea li{
	background:#fff;
	border:1px solid #bf0000;
    /* border-left: none; */
	box-sizing:border-box;
	padding:5px 4px;
	height:60px;
	width:60px;
	list-style:none;
	margin:10px 0;
	text-align:center;
	font-size:10px;
	color:#000;
}

#sp-Naviarea li a{
	text-decoration:none !important;
	color:#bf0000!important;
}

#sp-Naviarea .ca{
	background:#d64e76;
	color:#fff;
	font-weight:600;
	border:1px solid #933 !important;
}

#sp-Naviarea .ca a{
	text-decoration:none !important;
	color:#fff !important;
}

#sp-Naviarea li img{
	width:25px;
	padding-top:6px;
}

/*自己紹介*/
.member {
background: #f8f8f8;
width:75%;
height:170px;
margin:0 auto;
overflow:hidden;
box-sizing: border-box;
border: 1px solid #333;
position: relative;
padding: 10px 0 !important;
margin-bottom: 60px;
margin-top: 30px;
box-shadow: 0px 5px 4px -1px #ccc;
}
.member .txt {
position: absolute;
left: 120px;
display: block;
top: 0;
color: #222;
font-size: 85%;
text-align: left;
line-height: 2.0em;
padding: 20px 6px 20px 0!important;
}
.txt b {
font-size: 20px;
}
.member .icon {
width:100px;
border-radius: 50%;
box-sizing:border-box;
border:4px solid #fff;
position: absolute;
left: 30px;
top: 30px;
box-shadow: 0px 7px 5px -4px #ccc;
}
.member .sns-icon {
position: absolute;
float: right;
right: 15px;
bottom: 20px;
}
.member .sns-icon img {
width: 35px;
padding-left: 7px;
}

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

.txt b {
    font-size: 16px;
}
.member .txt {
        line-height: 1.8em;
}
}
@media screen and (max-width: 1050px){
.member .icon {
    width: 80px;
    left: 10px;
}
.member .txt {
        left: 100px;
}
}