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

#main{
     background:#3CB6D4;
}

.midashi { font-family: "Shippori Mincho";
color: #3C448F;}

/* -------------------------------------------------------------------------

	iframe

------------------------------------------------------------------------- */

#Header iframe.header {
	width: 100%;
  height: 100px;

	margin: 0 auto;
	padding: 0;
}


#Header iframe.header-sp {
	width: 100%;
	height: 80px;
	margin: 0 auto;
	padding: 0;
}
#Header-sp iframe.header-sp {
	width: 100%;
	height: 80px;
	margin: 0 auto;
	padding: 0;
}

#Footer iframe.footer {
	width: 100%;
	height: 1080px;
	margin: 0 auto;
	padding: 0;
}

#Header{
	width: 100%;
  height: 100px; !important
	margin: 0 auto;
	padding: 0;
}
#Footer{
background-color:#333;
}
#Side-sp {
    display:block !important;
    padding: 15% 0 0 0;
}


.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
	align-items:center;
}

.flexbox_review {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.frame_review{
	width:15%;}

.abbr {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 5% auto 3%!important;
}

#container a {
    color: inherit;
    text-decoration: none;
}
#container {
	width:1100px;
    height: auto;
    margin: 0 auto;
    padding: 0 3% 3% ;
    background:#fff;
}
section {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background:#fff;
}

article {
    width: 100%;
    height: auto;
    margin: 5% auto;
    padding: 3% 0;
}

.contentArea {
    width: 1000px;
    height: auto;
    margin: 0 auto;
    padding: 20px 20px 50px;
    font-size: 1.2em;
    line-height: 1.8;
    text-align: center;
    background: #fff;
}

.recommend_wrap{
margin:5% auto 0;
}
.recommend_wrap h3{
padding-bottom:1%;
border-bottom:1px solid #000;
margin-bottom:1%;
font-weight:bold;
}
h4{
font-size:1em !important;
font-weight: bold !important;
margin:2% auto !important;
}
.catemark{
padding:3px;
background:#fff;
width:80px;
margin:5px auto;
font-size:0.8em;

}
.bgwhite{
background:#fff;
}
/*.swiper*/
.swiper-wrapper {
    width: 1000px !important;/*900px*/
    margin:0 auto !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.8em;
}
.swiper-button-next, .swiper-button-prev {
    background: #7a3540;
    padding: 0/*5px 10px*/;
}

/*
.swiper-slide {
    width: 23% !important;
    margin: 0 1% !important;
}*/

/* list */
#Style li{
background:#fff;
}

/*.brand_lineup*/
.brand_lineup li {
    margin-top: 2% !important;/* 1.5% 1.5% 3% 1.5% */
    margin-bottom: 2% !important;
    margin-left: auto !important;
    width: calc(100%/2 - 10%);
    min-width: auto;
    /*display: inline-block;
    vertical-align: top;*/
    list-style: none;
    text-align: center;
    font-size: 1em;
    padding:4%;
    border:1px solid #ccc;
}

.recommend_wrap .item_lineup li img {
    width: auto !important;
    max-width: 100%;
    max-height: 160px;
}
.recommend_wrap ul{
  display:flex;
  justify-content:space-around;
  -ms-flex-pack:distribute;
}
.recommend_wrap li {
    width: 100%;
}
.recommend_wrap .rankimg, .recommend_wrap .recommend_l{
display:inline-block;
width:50%;
vertical-align:top;
}

.recommend_wrap .cap {
    font-size:1em;
    line-height:1.6;
    text-align:left;
}

.item_lineup li {
    margin: 1.5%;
    /*width: calc(100%/5 - 30px);*/
    min-width: auto;
 /*   margin: 35px;
    width: 26%;
    min-width: 287px;
    display: inline-block;
    vertical-align: top;*/
    list-style: none;
    text-align: center;
    font-size: 0.8em;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center top;
   /*padding-top: 40px;*/
}

.item_lineup li a {
    text-decoration: none;
    color: #666;
}
.brand_lineup li a > img {
    margin-bottom: 1%;
    max-height: unset !important;
}
.name, .price {
    color: #7a3540;
    font-size: 1em;
    font-weight:bold;
}
.comment {
    padding: 5%;
    background: #f8f7e3;
    font-size: .8em;
    line-height:1.5;
    text-align: left;
    position:relative;
    border-radius:5px;
}
.comment::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #f8f7e3;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.price{
    font-weight: bold
}


#pageTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
#pageTop a {
    display: block;
    z-index: 999;
    padding: 8px 0 0 0;
    border-radius: 0px;
    width: 35px;
    height: 35px;
    background-color: #A58030;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    line-height: 1em;
}


.btn{
background:#008AB8;
color:#fff;
padding:3%;
margin:2% auto;
text-align:center;
border-radius:15px;
max-width:600px;
clear: both;
}

a:hover {
	opacity: 0.5 ;}


img{width:100%;}


.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0% auto;
    padding: 0% 0 5%;
}


.flexbox_review {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0% auto;
    padding: 0% 0 5%;
}

.flexbox div {
    width: calc(100% / 2 - 2%);
}



.reverse {
    flex-direction: row-reverse;
}
p{
line-height:2.2;
}

.bg01 {
    background: #dcdcdc;
}

.lead_wrap{
background:#ffffff;
padding:20px;
margin:15px;
color:#333333;
border-radius: 10px;
border: 1px solid #333333;
}

.lead_wrap p{
width:90%;
margin: 3%;
}

.review {
    background:#ffffff;
padding:30px;
margin:30px;
color:#333333;
border-radius: 10px;
border: 1px solid #8da0b6;}

.review h2{
	font-size:1.5em;
font-weight:bold;
margin:3%;
padding:0;
text-align:center;}


.review img {
    max-width: 100px;
    text-align: center;
    margin: 2%;
    float: left;}


.review p{
	font-size:1em;
	line-height:2;
	padding:0% 5%;
	text-align:center;}
	
.review_h3{
	font-size:1.3em;
font-weight:bold;
margin:10% 5% 3% 5%;
padding:2% 5%;
text-align:center;
border-bottom: dashed 1px #333;}

.highlight1 {
    background: linear-gradient(transparent 50%, #ffff66 0%);
    line-height: 1.3em;
}

.topimg{width:100%;}

.frame img{
	display:block;
	width:60%;
	padding: 5%;
	margin:0 auto;
	border: 1px solid #ccc;
	border-radius:5px;
		-webkit-box-shadow: 3px 3px 3px #ccc;
	   -moz-box-shadow: 3px 3px 3px #ccc;
	        box-shadow: 3px 3px 3px #ccc;
	/* IE */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true)";
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true); /* IE5.5+ */
	background: #/*eaf2f6*/fff;
}



.contents{
  position: relative;
  padding: 10px;
  background:#f5f5f5;
  border-radius:5px;
  height:100%;
}

.contents p{
	font-size:0.9em;
	line-height: 2;
	padding:3%;}

.conl, .conr{
  position: relative;
}

/* �A�C�R������ɕ\�� */


.fukidashi{
  width:80%;
  position: relative;
  padding: 18px;
  background:#f7f6fb;
  border-radius:5px;
  height:100%;
}


.fukidashi p{
	line-height:2;
	padding:0 3%;}

.fl, .fr{
  position: relative;
}

/* �A�C�R������ɕ\�� */
.fl::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #f7f6fb;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.fr::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #f7f6fb;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

h1{
font-size:2em;
font-weight:bold;
text-align:center;
margin:2% 5%;
padding:1%;
}

h2{
font-size:2em;
font-weight:bold;
margin:5% 2%;
padding:2% 5%;
text-align:center;
}

.under {
    border-bottom: double 6px #ccc;
    border-top: double 6px #ccc;
}

.hakutsuru {
	font-weight: bold;
	color:#3CB6D4;
}

.paragraph{
width:300px;
margin:0 auto 5%;
}
.paragraph img{
border-radius:50%;
}
.people{
max-width:200px;
margin:0 auto;
}
.people img{
border-radius:50%;
}
.interview_wrap{
border:5px solid #000;
border-radius:;
padding:0 5% 5% 5%;
}
.question, .answer{
position:relative;
margin:0;
padding-left:40px;
}
.question::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: 5px;
    left: 0px;
    display: block;
    content: 'Q.';
    color: #3285bf;
}
.answer::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: 5px;
    left: 0px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #D65556;
}
.pname{
font-weight:bold;
margin-bottom:3%;
}

@media screen and (max-width: 768px) {
	
	
	
	
.head_wrap{
border-bottom:none;
}
#Header{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background:#fff;
}
#Footer{
display: none;
background-color:#333;
}
#Side-sp {
    display:block !important;
    padding: 15% 0 0 0;
}


header{
width:100%;
margin:0 auto;
padding:0%;
}
#header{
width:100%;
height:100px;
}
.h_logo{
position:relative;
top:0px;
left:0px;
width:100px;
height:100px;
vertical-align:top;
padding:0;
margin:0;
}

#Header{
	width: 100%;
  height: 100px !important;

}

#header .hmenu{
display:none !important;
}
.gmenu{
display:none !important;
}

#main{
font-size:0.8em;
line-height:1.8;
}


#container {
	width:100%;
    padding: 0;
}

#main article{
width:100%;
text-align:left;
}
.contentArea {
    width: 100%;
    padding: 0 0 5%;
    margin: 5% auto 0;
}

#container {
	width:100%;
}

.english {
    display: block;
}





.flexbox div {
    width: calc(100% / 1 - 0%);
}





.reverse {
    flex-direction: row-reverse;
}
p{
line-height:1.8;
font-size:1em;
}
.lead_wrap{
background:#ffffff;
padding:10px;
color:#333333;
}

.review {
    background:#ffffff;
padding:10px;
color:#333333}


.review img {
    max-width: 40px;
    text-align: center;
    margin: 2%;
    float: left;}

.lead_wrap p{
width:100%;
margin: 0 auto 5%;
}

.contents{
  margin-top:3%;
}
.conl, .conr{
  position: relative;
}


.frame_review{
	width:30%;}

.btn{
	max-width: 300px;
}

.fukidashi{
	width:90%;
  margin-top:3%;
}
.fl, .fr{
  position: relative;
}

/* �A�C�R������ɕ\�� */




.fl::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 5px;
  top: -12px;
  border-right: 15px solid #f7f6fb;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.fr::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 5px;
  top: -12px;
  border-right: 15px solid #f7f6fb;
  border-left:none;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
h1{
font-size:1.6em;
font-weight:bold;
text-align:center;
margin:2% auto;
}

h2{
font-size:1.5em;
font-weight:bold;

text-align:center;
}

.paragraph{
width:220px;
margin:0 auto 5%;
}
.people{
max-width:200px;
margin:0 auto;
}
.people img{
border-radius:50%;
}
.interview_wrap{
border:3px solid #000;
border-radius:;
padding: 0 3% 3% 3%;
}

.recommend_wrap ul{
  display:flex;
  flex-flow: column;
}
.recommend_wrap li{
margin-bottom: 5%;
}
}



/*
@media screen and (max-width: 480px) {
#tradition .item_lineup img {
    width: auto !important;
}
}*/