@charset "utf-8";




html {
	font-size: 62.5%;
	height: 100%;
	position: relative;
}
body {
	position: relative;
	color: #333;
	height: 100%;
	word-break: break-all;
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
	-webkit-text-size-adjust: 100%; /* フォントサイズ自動調整 */
	font-size: 0.9rem;
	line-height: 1.7;
	letter-spacing: 0.07rem;
	margin: 0 auto;
	font-family: "Sawarabi Mincho";
	background:#FFF url('2019ss-odekake-3.jpg') no-repeat fixed left top;
	background-size: cover;
}
a {
	text-decoration: none;
	color: #333;
	outline: none;
}
a:hover {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: 0.6s;
	transition: 0.6s;
}
a img:hover {
	opacity: 0.5;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
img {
	width: 100%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0 auto;
	padding: 0;
}
section {
	margin: 0 auto;
	padding: 80px 0px;
}
hr {
	border: 1px #999 dashed;
	width: 20%;
	text-align: center;
	margin: 0 auto;
}
li {
	list-style: none;
}
/* clearfix */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 735px) {
body {
	font-size: 0.7rem;
	line-height: 1.6;
	background:#FFF url('2019ss-odekake-3.jpg') no-repeat fixed center top;
	background-size:auto;
	background-size:cover;
	background-size:contain;
}
}
/********** フォント類 **********/

h1 {
	text-align: center;
	font-size: 2.0rem;
	letter-spacing: 0.3rem;
	font-weight: 800;
	padding-bottom:10px
}

h2 {
	margin: 0 auto;
	text-align: center;
	font-size: 1.5rem;
	letter-spacing: 0.3rem;
	font-weight: 500;
	padding-bottom:10px;
	
}		
	
p.smo{
	margin: 0 auto;
	text-align: center;
	font-size: 1.0rem;
	letter-spacing: 0.3rem;
	font-weight: 500;
	
}	

p.mmo{
	margin: 0 auto;
	text-align: left;
	font-size: 1.0rem;
	letter-spacing: 0.2rem;
	padding: 1% 5%;
	
	
}


p.description {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	letter-spacing: 0.15rem;
	line-height: 2.3rem;
	padding-top: 20px;
	font-size: 1.3rem;
	
}


@media (max-width: 735px) {
h1 {
	text-align: center;
	font-size: 2.0rem;
	letter-spacing: 0.3rem;
	font-weight: 800;
	padding-bottom:10px
}
h2 {
	text-align: center;
	padding-bottom: 35px;
}
p.description {
	width: 95%;
	margin: 0 auto;
	text-align: center;
	letter-spacing: 0.15rem;
	line-height: 2.0rem;
	padding-top: 20px;
	font-size: 1.1rem;
	
}
	
p.mmo{
	margin: 0 auto;
	text-align: left;
	font-size: .9rem;
	letter-spacing: 0.2rem;
	padding: 4% 2%;
	
	
}	
	
	p.description br{display: none;}	
}
/********** 固定メニュー **********/
.header {
	position: fixed;
	top: 0;
	z-index: 9999;
	width: 94%;
	margin: 0 auto;
	padding: 15px 3%;
	background-color: rgba(255,255,255,.85);
}
.header a {
	padding: 0px 5px;
	letter-spacing: 1px;
	display: block;
	float: left;
	font-size: 15px;
}
.header .right {
	float: right;
}
.header i {
	font-size: 19px;
	padding-right: 5px;
}
.header .right img {
	width: 24px;
	padding-top: 1px;
	padding-right: 5px;
}

@media (max-width:768px) {
.header {
	position: fixed;
	bottom: 0;
	top: inherit;
	z-index: 9999;
	border-bottom: 3px solid #2B2B2B;
	border-top: 3px solid #2B2B2B;
	width: 94%;
	margin: 0 auto;
	padding: 15px 3%;
	background-color: rgba(255,255,255,.85);
}
}
/********** TOP **********/

#top {
	width: 100%;
	padding: 0;/*background-color:rgba(141,211,221,1.00);
	height: 65vh;
	position: relative;*/
}
#top img {
	width: 100%;
	max-width:780px;
	padding-top:30px;

}

@media (max-width: 735px) {
#top {
	width: 100%;
	margin-top:0px;
}
#top img {
	margin: -10% 0 0;
	padding:0px;
}

}
/********** 内容 **********/

#all {
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	position: relative;
	background-color: #FFF;
	width: 100%;
}


@media (max-width: 735px) {
#all {
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	position: relative;
	background-color: #FFF;
	width: 100%;
}
section#comment {
	padding-top: 0px;
	margin-bottom: -20%;
}
}


/**********feature**********/


.fea {
	width:100%;
	margin: 0 auto;
	clear: both;
}

ul.search{
	width: 40%;
	margin: 3% auto;
	text-align: center;
	
	}

ul.search li{
 width: 33.3%;
	float: left;
	font-size: 1.3rem;
	overflow:hidden;
}

h2{
	clear: both;
padding-top: 3%;}

.hr1{border-top: 3px solid #5092ae;
width: 70%;
margin: 0 auto;
}

/*******************
スライダー
********************/


.slider-container {
  position: relative;
	
	width:63%;
	margin: 0 auto;
}




.slider-arrow {
  position: absolute;
  top: 40%;
  height: 36px;
  margin-top: -18px;  /* 高さの半分だけネガティブマージン */
  color: #999;
  line-height: 36px;
  font-size: 3.5rem!important;
  cursor: pointer;
  z-index: 100;  /* 重要 */
}
.slider-prev {
  left: 0;
}
.slider-next {
  right: 0;
}



/*******************
END/スライダー
********************/


ul.feaitem{
	
width: 100%;
margin: 5% auto 2%;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

ul.feaitem li{width: 49%;
float: left;
	padding-left: 1%;
padding-bottom: 2%}


p.link{
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
	font-size: 1.2rem;
	font-weight: 100;
	width: 50%;
	letter-spacing: 0.05rem;
	margin: 1% auto 0;
	background: #5092ae;
	color:#fff;
	padding: .3% 0;
	text-align: center;
}



@media (max-width: 735px) {
	
	
	
.fea {
	width:100%;
	margin: 0 auto;
	clear: both;
}

	

ul.search{
	width: 95%;
	margin: 3% auto;
	text-align: center;
	
	}

ul.search li{
 width: 33.3%;
	float: left;
	font-size: 1.3rem;
	overflow:hidden;
}

h2{
	clear: both;
padding-top: 3%;}

.hr1{border-top: 3px solid #5092ae;
width: 70%;
margin: 0 auto;
}

ul.feaitem{width: 100%;
margin: 5% auto 2%;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

ul.feaitem li{width: 95%;
float: left;
padding-bottom: 2%;
	margin: 0 auto;}
	
	
	

	
/*******************
スライダー
********************/


.slider-container {
  position: relative;
	
	width:98%;
	margin: -20% auto 0;
}

.slider-arrow {
  position: absolute;
  top: 30%;
  height: 36px;
  margin-top: -18px;  /* 高さの半分だけネガティブマージン */
  color: #999;
  line-height: 36px;
  font-size: 3.5rem!important;
  cursor: pointer;
  z-index: 100;  /* 重要 */
}
.slider-prev {
  left: 0;
}
.slider-next {
  right: 0;
}

}

/*******************
スマホEND/スライダー
********************/
	
	
	
/*******************
#brand
********************/	
	
#brand {
	width:100%;
	margin: 0 auto;
	clear: both;
	
	

}	


p.bbmo{
	
	width: 60%;
	margin: 0 auto;
	text-align: center;
		font-size: 2rem;
		color:#333;
	 line-height: 0rem;
	letter-spacing: .5rem;
		padding: 3% 0 6% 0;
		
	}

ul.brand_Disp{
		
		width: 50%;
		margin: 0 auto 10%;
		overflow:hidden;
		
	display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;

		
	}
	
	.brand_Disp li img{
		width: 85%;
	}

	.brand_Disp li img.brand_s{
		width: 80%;
	}

.brand_Disp li img.arrow{
		width: 21%;
	margin-left: auto;
margin-right: 0px;
	
	}
	
	.brand_Disp p.bmo{
		font-size: 1.7rem;
		color:#333;
	 line-height: 0rem;
		padding: 5% 0 0 0;
		
	}

		.brand_Disp span.smo{
		font-size: 1.3rem;
		color:#333;
	 line-height: 0rem;
		
	}

	.brand_Disp p.mmo{
		font-size: 1.25rem;
		color:#333;
	 	line-height: 2.3rem;
		letter-spacing: .3rem;
		padding: 1.5% 1.2%;
		
	}

	.brand_Disp p.mmo2{
		font-size: 1.2rem;
		color:#333;
	 	line-height: 2.3rem;
		letter-spacing: .1rem;
		margin: 0 auto;
		padding: 2% 10% 0;
		font-weight: 900;
		
		
	}

.brand_Disp p.mmo3{
		font-size: 1.1rem;
		color:#333;
	 	line-height: 2.3rem;
		letter-spacing: .1rem;
		margin: 0 auto;
		padding: 0% 10%;
		
		
	}

.brand_Disp p.mmo4{
		font-size:1.2rem;
		color:#333;
	 	line-height: 2.3rem;
		letter-spacing: .1rem;
		
		padding:8% 0 0 0;
	text-align: right;
		
		
	}
	
	
	
	ul.brand_Disp li.li100{
	
	width: 100%}


	ul.brand_Disp li.li30{
		
	margin-top: 5%;
	width: 33.333%;
	float: left}
	
	
	
	
.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1em 0;
  padding: 0px 1px;
  width: 100%;
  color: #666;
  font-size: .1rem;
  background: #FFF;
  border-bottom: solid 2px #666;
  box-sizing: border-box;
}

.balloon2:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 10%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon2:after{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 10%;
  margin-left: -18px;
  border: 15px solid transparent;
  border-top: 15px solid #666;
  z-index: 1;
}




	

@media (max-width: 735px) {
	
	
	
	#brand {
	width:100%;
	margin: 0 auto;
	clear: both;
	
	

}	
	
p.bbmo{
	
	width: 85%;
	margin: 0 auto;
	text-align: center;
		font-size: 1.8rem;
		color:#333;
	 line-height: 2.3rem;
	letter-spacing: .4rem;
		padding: 3% 0 8% 0;
		
	}	

ul.brand_Disp{
		
		width: 85%;
		margin: 0 auto 10%;
		overflow:hidden;
		
	display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;

		
	}
	
	.brand_Disp li img{
		width: 95%;
	}

	.brand_Disp li img.brand_s{
		width: 95%;
	}
	
	.brand_Disp li img.arrow{
		width: 50%;
	margin-left: auto;
margin-right: 0px;
	
	}
	
	.brand_Disp p.bmo{
		font-size: 1.7rem;
		color:#333;
	 line-height: 0rem;
		padding: 13% 0 0 0;
		
	}

		.brand_Disp span.smo{
		font-size: 1.3rem;
		color:#333;
	 line-height: 0rem;
		
	}

	.brand_Disp p.mmo{
		font-size: 1.15rem;
		color:#333;
	 	line-height: 2.1rem;
		letter-spacing: .2rem;
		padding: 1.5% 0.5%;
		
	}

	.brand_Disp p.mmo2{
		font-size: 1.0rem;
		color:#333;
	 	line-height: 1.8rem;
		letter-spacing: .1rem;
		margin: 0 auto;
		padding: 2% 5% 0;
		font-weight: 900;
		
		
	}

.brand_Disp p.mmo3{
		font-size: .9rem;
		color:#333;
	 	line-height: 1.8rem;
		letter-spacing: .1rem;
		margin: 0 auto;
		padding: 0% 5%;
		
		
	}
	
	
	
	ul.brand_Disp li.li100{
	
	width: 100%}


	ul.brand_Disp li.li30{
		
	margin-top: 5%;
	width: 50%;
	float: left}
	
	
	
	
.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1em 0;
  padding: 0px 1px;
  width: 100%;
  color: #666;
  font-size: .1rem;
  background: #FFF;
  border-bottom: solid 2px #666;
  box-sizing: border-box;
}

.balloon2:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 10%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon2:after{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 10%;
  margin-left: -18px;
  border: 15px solid transparent;
  border-top: 15px solid #666;
  z-index: 1;
}
	
	
	}



	
	
/*******************
END/#brand
********************/	
	

p.link{
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
	font-size: 1.2rem;
	font-weight: 100;
	width:80%;
	letter-spacing: 0.05rem;
	margin: 1% auto 0;
	background: #5092ae;
	color:#fff;
	padding: .7% 0;
	text-align: center;
}
	
	
/**********ソート**********/
#odekake {
	width:100%;
	margin: 0 auto;
	clear: both;
}

ul#sort{margin: 0 auto;}

#sort li {
	width: 10%;
	list-style:none;
	float: left;
	margin-right: 10px;
	color: #333;
	text-align: center;

	font-weight: bold;
	padding: 5px 10px;
	cursor: pointer;
	border: solid 1px #555;
	
}

ul#odekake_item {
	clear: both;
	overflow:hidden;
	width: 100%;
	margin: 0 auto;
	padding-top: 3%;
	
	display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
	
}
ul#odekake_item li{width: 25%;
float: left;
font-size: 1.1rem;
margin-bottom: 2%;


}

ul#odekake_item li img{width: 90%;
}

ul#odekake_item li p{margin-left: 4%;
}



ul#odekake_item li p.new{
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	font-size: .8rem;
	font-weight: 100;
	width: 35%;
	letter-spacing: 0.05rem;
	margin: 1% 0 0 4%;
	background: #be9dcf;
	color:#fff;
	padding: .3% 0;
	text-align: center;
}


ul#odekake_item li p.tujyou{
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	font-size: .7rem;
	font-weight: 100;
	width: 35%;
	letter-spacing: 0.05rem;
	margin: 1% 0 0 4%;
	background: #76c1e4;
	color:#fff;
	padding: .3% 0;
	text-align: center;
}


@media (max-width: 735px) {
	
#odekake {
	width:100%;
	margin: 0 auto;
	clear: both;
}

ul#sort{margin: 0 auto;}

#sort li {
	width: 20%;
	list-style:none;
	float: left;
	margin-right: 2%;
	margin-bottom: 2%;
	color: #333;
	text-align: center;

	font-weight: bold;
	padding: 5px 10px;
	cursor: pointer;
	border: solid 1px #555;
	
}

ul#odekake_item {
	clear: both;
	overflow:hidden;
	width: 100%;
	margin: 0 auto;
	padding-top: 3%;
	
	display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
	
}
ul#odekake_item li{width: 50%;
float: left;
font-size: .9rem;
margin-bottom: 2%;


}

ul#odekake_item li img{width: 95%;
}

ul#odekake_item li p{margin-left: 4%;
}



ul#odekake_item li p.new{
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	font-size: .8rem;
	font-weight: 100;
	width: 50%;
	letter-spacing: 0.05rem;
	margin: 1% 0 0 4%;
	background: #be9dcf;
	color:#fff;
	padding: .3% 0;
	text-align: center;
}	
	
	
ul#odekake_item li p.tujyou{
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	font-size: .7rem;
	font-weight: 100;
	width: 50%;
	letter-spacing: 0.05rem;
	margin: 1% 0 0 4%;
	background: #76c1e4;
	color:#fff;
	padding: .3% 0;
	text-align: center;
}	
	
	
}
/**********フッター**********/
footer {
	width: 100%;
	text-align: center;
	font-size: 0.7rem;
	background-color: rgba(247,247,247,1.00);
	padding: 40px 0px;
}

@media (max-width: 735px) {
footer {
	font-size: 0.55rem;
	padding: 40px 0px 100px;
}
}

/******************************************************************************

 * RESPONSIVE
 
*******************************************************************************/

@media (min-width: 1200px) {
section {
	width: 55%;
}
}

@media (max-width: 1199px) {
section {
	width: 80%;
}
}

@media (max-width: 735px) {
section {
	width: 90%;
}
}

/********** PC・スマホ切り替え **********/
 
@media (max-width:735px) {
#attention-pc {
	display: none;
}
.top-pc {
	display: none;
}
}

@media (min-width:736px) {
#attention-sp {
	display: none;
}
.top-sp {
	display: none;
}
}



/********** タブレット **********/
@media (max-width: 1199px) {
/* TOP */
#top {
	width: 100%;
	padding: 0;
}
#top .top-pc {
	width: 100%;
}
#top .title-image {
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
}

}