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

.single-item + .single-item{
    margin-top: 80px;
}

/* アニメーションスタイル */
/* ---------------------------- */

/* アニメーション前 */
.u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;
}

/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active{
    transition: .6s;
    transform: translateY(0);
    opacity: 1;
}
/**================================= Index Setting =================================**/

main {
	background:url("../img/img_bg01.png") repeat;
	display:block;
}

#sec_top_sp {display: none;}
section.top {
    width: 100%;
    height: auto;
	min-height: 380px;
    padding: 5em 0;
    background-position: center center;
    background-size: cover ;
    position: relative;
    text-align: center;
}

.note { font-size: 50%; font-weight: normal; text-decoration: none; line-height: 1;}
.sml { font-size: 80%}
.font-impact { font-weight: bold; font-size: 120%;}


/* top */
section.top {
	background-image: url("../img/top1.png");
	z-index: 999;
	height: 520px;
}

section.top h2{
	max-width: 440px; 
	padding: 80px 0; 
	width: 46vw; 
	margin: 0 auto;
}
section.top .mvlogo_sp{
	display: none !important;
}
section.top h3{
	color: #fff; 
	font-size: 2.4em; 
	letter-spacing: .06em; 
	line-height: 1.4em; 
	padding-bottom: 6vw;
}
section.top .info_area{ 
	background: #fff; 
	text-align: left; 
	font-size: .875em; 
	display:flex; 
	align-items: center; 
	justify-content: flex-start;
	border: 2px solid #980606;
	width: 60%;
	margin: 0 auto;
}
section.top .info_area dl{
	display: flex;
	width: 100%;
}
section.top .info_area dt{
	padding: 0.6em 1em 0.6em;
	margin-right: 1em; 
	background: #980606;
	color: #FFF;
	display: flex;
	align-items: center;
	width: 17%;
}
section.top .info_area dd{
	display: block;
	padding: 10px;
	width: 83%;
}
section.top .info_area a {
	color: #980606;
}

h1 img {
	width: 100%;
}



/* slickslider arrow */
.slick-arrow:before{ content:"" !important; width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0;}
.slick-next::before{ 
	content: '';
	width: 40px !important;
	height: 40px!important;
	border: 0px;
	border-top: solid 6px #FFF;
	border-right: solid 6px #FFF;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -20px;
}
.slick-prev:before{ 
	content: '';
	width: 40px !important;
	height: 40px !important;
	border: 0px;
	border-top: solid 6px #FFF;
	border-right: solid 6px #FFF;
	-ms-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -20px;
}
.slick-arrow{ z-index:99999 !important;}
.slick-next{ right: 4% !important; }
.slick-prev{ left: 4% !important;}
.slick-slide {margin:0 .3em;}

.slick-slide img:hover {
	opacity: 0.7;
	transition: 0.6s;
}

/* keywordArea */
.keywordArea {
	margin: 30px 0;
	display: flex;
}
.keywordArea p{
	float: left;
	font-weight: bold;
	display: block;
	font-size: 0.7vw;
	padding: 14px 0 0;
	margin-right: 10px;
}
.keyword--list {
	display: flex;
	justify-content: space-between;
	float: left;
	width: 70%;
	margin: 0 20px 0 0;
	padding: 8px 0 0;
}
.keyword--list li {
	background: #23959A;
    border-radius: 10px;
	padding: 8px 2px;
    height: 22px;
    width: 12.5%;
    text-align: center;
	transition: .5s;
}
.keyword--list li:hover {
	background: #10787C;
}
.keyword--list a {
    color: #FFF;
    text-decoration: none;
    font-size: 14px;
	display: block;
}

.search_word {
	background: #FFF;
	box-shadow:3px 3px 6px 2px #ddd inset;
    border-radius: 50px;
    width: 18%;
    display: inline-block;
    padding: 10px
}
.search_word input {
	border: none;
	background: none;
	padding: 10px;
	width: 71%;
}
.search_word input:focus, .search_word button:focus {
  outline: 0; /*フォーカス時の枠線を消す*/
}
.search_word i {
	vertical-align: text-bottom;
    display: inline-block;
	float: right;
    padding: 10px 0;
}



/* Category */
section.category {
	background: #FFF;
}
section.category ul {
	display: flex;
	justify-content: space-between;
	background: url(../img/img_line01.png) no-repeat center right;
	padding: 20px 0;
}
section.category li {
	padding: 20px 1px 10px 3px;
	font-weight: bold;
	text-align: center;
	background: url(../img/img_line01.png) no-repeat center left;
}

section.category a {
	color: #452601;
	letter-spacing: -1px;
	text-decoration: none;
	transition: .3s;
    font-size: 15px;
}
section.category a:hover {
	transform: scale(1.2,1.2);
	transition-duration: 0.5s;
	display: block;
}
section.category img {
	width: 60%;
    margin: 0 auto 10px;
	transition-duration: 0.5s;
}

/* BNR Area */
section.bnrArea { margin: 40px 0; text-align: center; padding: 0;}
section.bnrArea .inner a{ width: 74%; margin: 0 auto; display: block;}
section.bnrArea ul {width: 100%; padding: 0;}

/* Beginner Area */
section.beginner {
	background: url("../img/bg_beginner.png") no-repeat top center;
	margin: 60px auto;
	text-align: center;
	background-size: 96%;
}
section.beginner h3 {
	width : 60%;
	text-align: left;
	margin: 0 auto;
	line-height: 0;
	padding-left: 10em;
}
section.beginner h3 span {
	width: 50%;
	display: block;
	margin-left: -5em;
}
section.beginner h4 {
	font-size:37px;
	font-size: clamp(36px, 1vw, 38px);
	font-weight: bold;
	margin: 20px 0 ;
	font-family: 'Shippori Mincho B1', serif;
}
section.beginner .beginner-list{
	background: url("../img/bg_listtop.png") no-repeat top center;
	background-size: 100% auto;
	padding-top: 40px;
	width: 80%;
    margin: 20px auto;
}
section.beginner .beginner-listinner {
	background: #FFF;
	border-radius: 30px 30px 30px 30px;
	padding: 20px;
}
section.beginner ul {
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
}
section.beginner ul li{
	width: 30%;
	display: flex;
	align-items: center;
	text-align: left;
	padding: 20px 15px;
	vertical-align: middle
}
section.beginner ul li p{
	display: block;
	text-align: left;
}
section.beginner ul img{
	float: left;
	width: 16%;
	margin-right: 10px;
}

.toggle_box {
	position: relative;
}
.toggle_title {
	position: absolute;
	top:-70px;
	right: 20px;
	width: 200px;
}
.toggle_btn {
	border-radius: 40px;
	padding: 10px 30px ;
	cursor: pointer;
	font-size: 16px;
	text-align: center;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.toggle_btn {
	background: url("../img/btn_open.png") no-repeat right top;
	background-size: auto 100%;
    padding: 22px;
}
.active {
	background: url("../img/btn_close.png") no-repeat right top;
	background-size: auto 100%;
    padding: 22px;
}
.toggle_btn:before {
	width: 2px;
	height: 10px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}
section.beginner .toggle_contents {
	display: none;
}

.h3lv {
	font-size: 3.2vw;
	font-weight: bold;
	margin: 60px 0 40px;
	background: url("../img/bg_ttl01.png") no-repeat center bottom;
	background-size: 26%;
	text-align: center;
	line-height: 1.4;
    padding-bottom: 40px;
}
.h3lv span {
	font-family: 'DIN Alternate',sans-serif;
	font-size: 18px;
	font-weight: bold;
}


/* New Item Area */ /* Ranking Area */
.inner-wide {
	padding: 0;
}

section.newArea .newitem_slider li,
section.rankingArea .ranking_list li {
	margin: 10px 15px;
	padding: 3.8vw 0; 
	position: relative;
}
section.newArea .newitem_slider li span,
section.rankingArea .ranking_list li span{
	text-align: center;
	color: #DB5948;
	display: block;
	font-weight: bold;
}
section.newArea .newitem_slider img {
	filter: drop-shadow(3px 3px 3px #ccc);
	border-radius: 40px;
	margin-bottom: 10px;
}
section.rankingArea .ranking_list img {
	filter: drop-shadow(5px 5px 5px #ccc);
	margin-bottom: 10px;
}
section.newArea .newitem_slider li:before {
	content: '';
	display: inline-block;
	width: 30%;
    height: 30px;
	background-image: url(../img/ico_newlist.png);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0.8vw;
	left: 45%;
	margin-left: -30px;
}
section.rankingArea .ranking_list li:before {
	content: '';
	display: inline-block;
	background-size: contain;
	width: 30%;
    height: 3vw;
	background-repeat: no-repeat;
	position: absolute;
	top: -0.2vw;
    left: 50%;
    margin-left: -25px;
	min-height: 2em;
}
section.rankingArea .ranking_list li.no1:before {
	background-image: url(../img/ico_ranking01.png);
}
section.rankingArea .ranking_list li.no2:before {
	background-image: url(../img/ico_ranking02.png);
}
section.rankingArea .ranking_list li.no3:before {
	background-image: url(../img/ico_ranking03.png);
}
section.rankingArea .ranking_list li.no4:before {
	background-image: url(../img/ico_ranking04.png);
}
section.rankingArea .ranking_list li.no5:before {
	background-image: url(../img/ico_ranking05.png);
}

/* Realtime Area */
section.realtimeArea {
	background: #E67F19;
	margin: 60px 0 0;
}
.realtime {
	display: table;
	padding: 90px 0;
}
.realtime-ttl{
	width: 40%;
	text-align: center;
	display: table-cell;
}
section.realtimeArea .realtime-box {
	border-radius: 30px;
	background: #FFF;
}
.realtime-ttl img {
	width: 70%;
	padding: 70px;
	filter: drop-shadow(2px 2px 1px #DA5F0E);
}

/* Recommend Area */
section.recommendArea {
	background: #FFF;
	padding: 20px 0 60px;
	text-align: center;
}
section.recommendArea h4 {
	margin: 40px auto 20px;
	font-family: serif;
	font-size: 2vw;
}
section.recommendArea h4 img{
	width: 9%;
	vertical-align: baseline;
	margin-right: 10px;
}
section.recommendArea .price {
	color: #DB5948;
	font-size: 68px;
	font-family: 'Charter',sans-serif;
}
section.recommendArea .yen {
	color: #DB5948;
	font-size: 2vw;
}
.recom-list {
	display: flex;
	justify-content: space-evenly;
	justify-content: space-around;
	flex-wrap : wrap;
	width: 90%;
    margin: 0 auto;
}
.recom-list li{
	border-bottom: 2px solid #DB5948;
	padding-bottom: 10px;
	margin-bottom: 60px;
	width: 26%;
	color: #DB5948;
	text-align: right;
	font-size: 2vw;
	font-weight: bold;
}
.recom-list li.lastblock {
	margin-bottom: 0;
}
.recom-list li img{
	margin-bottom: 10px;
}
.recom-list span.yen{
	font-size: 20px;
}
.recom-list span.tax{
	font-size: 14px;
}


/* Donaition Area */
section.donationArea {
	background:url("../img/bg_arrow_w.png") no-repeat top center;
	background-size: 100%;
	padding: 100px 0 80px;
	text-align: center;
}
section.donationArea ul {
	margin: 80px auto;
	width: 84%;
}
section.donationArea ul li {
	width: 31%;
	margin: 20px 10px;
    display: inline-block;
	position: relative;
	filter: drop-shadow(5px 5px 5px #ccc);
}
section.donationArea a {
	background: url("../img/ico_sakaishi.png") no-repeat 5% center #DB5948;
	background-size: 10%;
	border-radius: 25px;
	color: #FFF;
	padding: 16px 60px;
	font-size:32px;
	font-size: clamp(30px, 1vw, 34px);
	display: block;
}
section.donationArea a::before { 
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8%;
  width: 14px; 
  height: 14px; 
  border-top: 2px solid #FFF; 
  border-right: 2px solid #FFF; 
  transform: rotate(45deg);
}


/* About Area */
section.aboutArea {
	background: url("../img/bg_about01.png") no-repeat top center #23959A;
	background-size: 100%;
	padding: 50px 0 0;
	color: #FFF;
}
section.aboutArea .inner{
	display: flex;
}
section.aboutArea h3 {
	width: 340px;
	padding: 50px 200px;
}
section.aboutArea .about-txt {
	background: url("../img/bg_about02.png") no-repeat top right;
	background-size: 50%;
	width: 100%;
	padding:135px 0 135px;
}
section.aboutArea .about-txt p{
	font-weight: lighter;
	font-size: 110%;
}
section.aboutArea span {
	font-size: 130%;
	font-weight: bold;
}
section.aboutArea .about-message {
	text-align: center;
	font-size: 2.4vw;
	padding: 50px;
}
section.aboutArea .about-message span {
	font-size: 3vw;
	line-height: 1.8;
}

/* How to Use Area */
section.useArea {
	background:url("../img/bg_arrow_g.png") no-repeat top center #FFF;
	background-size: 100%;
	padding: 100px 0 80px;
	text-align: center;
}
section.useArea .use-systembox {
	background: url("../img/bg_system.png") no-repeat bottom center #FFFBEC;
	background-size: 100%;
	border-radius: 30px;
	padding: 60px 40px 80px;
	width: 70%;
	margin: 0 auto;
}
.use-systembox p {
	font-size: clamp(16px, 0.9vw, 24px);
	line-height: 1.6;
	margin-top: 20px;
}
section.useArea h4 {
	font-size: 2.2vw;
	font-weight: bold;
	margin-bottom: 20px;
	font-family: serif;
}
section.useArea h4:before {
	content: "";
	background-image: url("../img/ico_sakaishi_b.png");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
	padding: 6px 26px;
    margin-right: 10px;
}
section.useArea .howto-list {
	display: flex;
	justify-content: space-around;
	padding: 20px;
	margin-top: 20px;
}
section.useArea .howto-list li{
	text-align: center;
	width: 24%;
	position: relative;
}
section.useArea .howto-list li:after {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -22%;
    width: 30px;
    height: 30px;
	border-top: 2px solid #452601; 
	border-right: 2px solid #452601; 
	transform: rotate(45deg);
}
section.useArea .howto-list li:last-child:after {
	border: none;
}
section.useArea .use-message {
	color: #E67F19;
	font-size: 2.2vw;
	font-weight: bold;
	position: relative;
}
section.useArea .use-message span {
	font-size: 3vw;
	line-height: 1.8;
}
section.useArea .use-message:after {
	content: "";
	position: absolute;
	top: 100%;
    left: 46%;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-top: 30px solid #E67F19;
}
section.useArea .howtouse-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 60px 0;
}
section.useArea .howtouse-list li {
	width: 24%;
	margin-bottom: 20px;
	background: #F4F4F4;
	transition: all .4s ease-in-out;
	text-align: left;
	position: relative;
}
section.useArea .howtouse-list li.nolink {
	background: #FFF;
}
section.useArea .howtouse-list li.nolink::after  {
	border-style: none;
}
section.useArea .howtouse-list li:hover {
	box-shadow: 1px 1px 10px rgba(0,0,0,.40);
}
section.useArea .howtouse-list li.nolink:hover {
	box-shadow: none;
}
section.useArea .howtouse-list li::after {
	content: "";
	position: absolute;
	bottom: 10px;
	right: 10px;
	border-style: solid;
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #DA6213 transparent;
} 
/*section.useArea .howtouse-list li:last-child::after {
	border-style: none;
}*/
section.useArea .howtouse-list a {
	padding: 0 ;
	text-align: left;
	color: #333333;
}
section.useArea .howtouse-list dd {
	padding: 20px 15px 15px;
	font-size: 1vw;
}
.goal-price {
	font-size: 16px;
	font-weight: bold;
}
.label {
	color: #FFF;
	font-weight: bold;
	padding: 5px 10px;
	margin-right: 10px;
	font-size: 16px;
	background: #333;
}
.label-cas { background: #DB5948;}
.label-city { background: #ABC32A;}
.label-res { background: #0B6BB2;}
.label-ind { background: #23959A;}
.label-nat { background: #239A28;}
.label-edu { background: #9248DB;}
.label-cul { background: #DBAE48;}


/* modal */
.modal{ display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 9999;}
.modal__bg{ background: #262626d6; height: 100vh; position: absolute; width: 100%;}
.modal__content{max-height: 70%; overflow: scroll; background: url(../img/img_bg01.png) repeat; left: 50%; padding: 1.2em 1.2em 4em ; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 84%;}
.close_icon{position: absolute; top: 3%; right: 5%; z-index: 9999;}
.close_icon span{ display: block; width: 30px; height: 30px; position: relative;}
.close_icon span::before, .close_icon span::after{ content: ""; display: block; width: 100%; height: 2px; background: #fff; transform: rotate(45deg); transform-origin:0% 50%; position: absolute; top: calc(14% - 5px); left: 14%;}
.close_icon span::after{ transform: rotate(-45deg); transform-origin:100% 50%; left: auto; right: 14%;}
.menu_icon{position: static; margin-left: 1em;}
.menu_icon { z-index: 99999; position: relative; width: 28px; height: 24px; margin-right: 0; cursor: pointer;}
.menu_icon span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff;}
.menu_icon, .menu_icon span { display: inline-block; transition: all .5s; box-sizing: border-box;}
.menu_icon span:nth-of-type(1) { top: 0;}
.menu_icon span:nth-of-type(2) { top: 11px;}
.menu_icon span:nth-of-type(3) { bottom: 0;}
.modal .btn_02 {border-bottom: 1px solid #d1d1d1;}
.modal .btn_02 a{padding: .8em 0; border-bottom: none;}
.modal .clm_2{flex-wrap: wrap;}
#modal01 ul.category {
    display: flex;
    justify-content: flex-start;
	flex-wrap: wrap;
    padding: 0;
}
#modal01 ul.category li {
    width: 27.2%;
    background: none;
    text-align: center;
    font-weight: bold;
    padding: 3%;
}
#modal01 ul.category li img{ width: 70%; padding: 5px;}
#modal02 p{margin: 1.2em 0 0; color: #452601; font-size: 20px; font-weight: bold;}
#modal02 .keyword {margin: .3em -.3em 2em;}
#modal02 .keyword li{display: inline-block; margin: .3em;}
#modal02 .keyword li a{display: inline-block; border-bottom: 1px solid;}
#modal02 .amount { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px;}
#modal02 .amount li{ border-bottom: 1px solid #CCC; width: 48%; padding: 10px 0; position: relative;}
#modal02 .amount li::before { 
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8%;
  width: 8px; 
  height: 8px; 
  border-top: 1px solid #452601; 
  border-right: 1px solid #452601; 
  transform: rotate(45deg);
}
#modal03 .modal__content{
	/*overflow:inherit; */
	overflow:scroll; 
	z-index: 9999; 
	max-height: inherit; 
	transform:none; 
	width: 100%; 
	height: 100vh; 
	box-sizing: border-box; 
	top: 0; 
	left: 0; 
	align-items: center; 
	justify-content: center;
}
#modal03 .modal__content ul{width: 100%; margin: 30px 0; }
#modal03 .modal__bg {background: url(../img/img_bg01.png) repeat;}
#modal03 .header-menu li{border-bottom: 1px solid #452601; padding: 10px 0; position: relative;}
#modal03 .header-menu li::before { 
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4%;
  width: 8px; 
  height: 8px; 
  border-top: 1px solid #452601; 
  border-right: 1px solid #452601; 
  transform: rotate(45deg);
}
#modal03 .sub_menu li {color: #FFF; font-size: 16px; width: 34%;}
#modal03 .sub_menu {height: auto;}
#modal03 .js-modal-close {z-index: 99999; position: absolute; top: 2%; right: 3%;}
#modal03 .contact_menu {width:100%; display: block; text-align: center; margin-top: 40px;}
#modal03 .contact_menu li {display: block; margin-top: 10px; padding-bottom: 2em; font-size: 18px;}
#modal03 .contact_menu li span {font-size: 12px !important; color: #452601; margin-bottom: 20px; display: block;}
#modal03 .head_tel,#modal03 .head_mail {
	background: none !important;
    padding-left: 0;
    font-size: 18px;
    font-size: clamp(22px, 1vw, 28px);
	color: #452601;
	display: block;
}
#modal03 .contact_menu img {width: 1.5em; margin: 10px auto; display: block;}

#modal03 .close_icon span::before,
#modal03 .close_icon span::after{background: #333;}


/* モーダル背景 */

.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/* モーダル本体 */

.modal_usebox .modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll; /* はみ出た部分はスクロールさせる */
  height: 70%;/* これが無いと「overflow:scroll」が利かない */
  width: 40%;/* これが無いと「overflow:scroll」が利かない */
  background: white;
}
.modal_usebox .modal-content dt img {
	width: 100%;
	display: block;
}
.modal_usebox .modal-content{
	position: relative;
}
.modal_usebox .modal-content dd {
	padding: 20px;
}
.modal_usebox {
}
.modal_usebox .btn-close {
	color: #FFF;
    background: #DA6213;
    border-radius: 20px;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 14px;
    float: right;
    margin: 0 10px 10px;
}

/* モーダルウィンドウ表示中に記事本体を固定 */

body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}

.footmenu {display: none !important;}



/* --------------------
      口コミボタン
-------------------- */
.btnKuchikomi {
	position: fixed;
    left: 0;
    top: 30%;
    transform: translateY(-50%);
    z-index: 9999;
    width: 112px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: block;
}


/**================================= Fix download Setting =================================**/

@media print,screen and (max-width:1069px) {
	.keyword--list a { font-size: 11px;}
}
@media print,screen and (max-width:885px) {
	.keyword--list a { font-size: 10px;}
}
@media print,screen and (max-width:840px) {
	.keyword--list a { font-size: 12px; line-height: 1.8em;}
}

@media print,screen and (max-width:1160px) {

	.h3lv {
    	font-size: 5.2vw;
		background-size: 56%;
		margin: 40px 0;
	}
	section.top {
		height: 360px;
	}
	section.top h2 {
		padding: 4vw 0;
    	width: 350px;
	}
	section.top .info_area {
		position: absolute;
		bottom: 0;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	-webkit-transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);
	}

	.search_word input {width: 56%;}
	
	section.bnrArea .inner a{ width: 90%;}
	
	section.beginner {
    	background: url(../img/bg_beginner.png) no-repeat center 36px;
		background-size: 116%;
	}
	section.beginner .beginner-list { width: 90%; margin: 20px auto;}
	.toggle_title {top: -40px; right: 0;}
	
	section.newArea .slick-dots, section.rankingArea .slick-dots {display:block !important; bottom: -25%;}
	section.newArea .slick-dots li:before, section.rankingArea .slick-dots li:before{background-image: none; }
	section.newArea .slick-dots li button:before, section.rankingArea .slick-dots li button:before {font-size: 38px;}
	
	section.newArea .newitem_slider li span,
	section.rankingArea .ranking_list li span{
		font-size: 12px;
	}
	.realtime {display: block; padding: 3em 0;}
	.realtime-ttl img {width: 60%; margin-bottom: 2em; padding: 0;}
	
	section.donationArea ul li {
    	width: 46%;
		margin: 10px 5px;}
	section.aboutArea {
		padding: 40px 0;
		font-size: 14px;
		background-size: auto 100%;
	}
	section.aboutArea .inner {
    	display: block;
	}
	section.aboutArea h3 {
		margin: 0 auto;
		padding: 0;
		width: 38%;
	}
	section.aboutArea .about-txt {
		text-align: center;
		background-image: none;
		padding: 60px 0;
	}
	section.aboutArea .about-message,
	section.aboutArea .about-message span{
		padding: 0;
		font-size: 4.8vw;
	}
	.footmenu {display: none !important;}
}


@media only screen and (max-width:840px) {
	
	/**================================= Index Setting =================================**/
	header .sub_menu {
		display: none;
	}
	/* footmenu */
	.footmenu {display: block !important;}
	.footmenu{position: fixed; border-radius: 8px; box-sizing: border-box; bottom: 1em; left: 1em; background: #fff; width: calc( 100% - 2em); z-index: 9999; box-shadow: 0 0 28px rgb(0 0 0 / 20%);font-size: .875em;}
	.footmenu ul {display: flex; padding: 0.4em 0;}
	.footmenu ul li{width:29%;}
	.footmenu ul li:nth-child(2){width:42%;}
	.footmenu ul li + li{border-left: 1px solid #d1d1d1;}
	.footmenu ul li a{display: block; padding: .48em 0.5em; text-align: center; font-size:12px;}
	.footmenu ul li a i{margin-bottom: 2px;}
	.footmenu #search-open{padding: 0 1em 0.4em;}
	
	section.top .mvlogo_pc { display: none;}
	section.top .mvlogo_sp { display: flow-root!important;}
	section.top h2 {
		padding: 0 ;
		width: 220px;
    	position: absolute;
    	top: -30px;
    	right: 5px;
	}
	section.top {
		height: 300px;
	}
	section.keywordArea .inner {
		padding: 1.2em;
	}
	section.top .info_area {
		display: block;
		width: 100%;
	}
	section.top .info_area dl{
		display: block;
	}
	section.top .info_area dt {
		padding: 0.6em 2% 1em;
		display: block;
		margin-right: 0;
		width: 96%;
	}
	section.top .info_area dd {
		width: auto;
		padding: 0.6em 1em;
	}
	.keywordArea {
		display: block;
		margin: 10px 0 30px;
	}
	.keywordArea p {
    	float: none;
		font-size: 14px;
		text-align: center;
	}
	.keyword--list {
		width: 100%;
		margin-bottom: 20px;
		flex-wrap: wrap;
		justify-content: center;
	}
	.keyword--list li{
		width: 27%;
		margin:0 5px 10px;
	}
	.search_word {
		display: block;
    	width: 88%;
    	overflow: hidden;
    	margin: 10px auto;
	}
	.search_word input {width:76%; font-size: 16px;}
	section.category ul {
		flex-wrap: wrap;
		background-image: none;
		justify-content: flex-start;
	}
	section.category li {
		width:23.5%;
		background: none;
	}
	/* Banner Area */
	section.bnrArea .inner a{ width: 100%;}
	.responsive-bnr {width: 100%;}
	section.bnrArea {margin: 20px 0;}
	
	/* Beginner Area */
	section.beginner h3 {
		width: 100%;
		padding-left: 0;
	}
	section.beginner h3 span {
		margin-left: 0;
		width: 60%;
	}
	section.beginner .beginner-listinner {
    	border-radius: 12px 12px 12px 12px;
	}
	section.beginner .beginner-list {
		padding-top: 20px;
	}
	section.beginner h4 {
		font-size: 20px;
		margin-top: 0;
	}
	.toggle_title {
    	position: static;
		margin:0 auto 20px;
	}
	section.beginner ul {
    	justify-content: space-between;
	}
	section.beginner ul li {
		display: block;
		padding: 10px 0;
		width: 46%;
		text-align: center;
	}
	section.beginner ul img {
		float: none;
		display: block;
		margin: 0 auto 10px;
		width: 30%;
	}

	section.newArea .newitem_slider li, section.rankingArea .ranking_list li {
    margin: 5px; padding-top: 1%;}
	section.rankingArea .ranking_list li {padding-top: 1.5%;}
	section.newArea .newitem_slider li:before {left: 50%; margin-left: -22px;}
	section.rankingArea .ranking_list li:before { width: 18%; top: 0; left: 59%;}
	section.rankingArea .ranking_list li:before {left: 50%; margin-left: -12px; height: 5vw;}
	section.newArea .slick-dots, section.rankingArea .slick-dots { bottom: -15%;}
	
	.h3lv {
    	font-size: 8.2vw;
		background-size: 76%;
		margin: 40px 0;
	}
	
	.realtime-flex {
    	display: block;
	    padding: 20px 0;
	}
	.realtime-ttl{
    	width: 80%;
		padding: 0;
		margin: 0 auto 20px;
	}
	.realtime-ttl img{
		padding: 0;
	}
	
	section.recommendArea {padding: 40px 0}
	section.recommendArea h4 img {width: 25%;}
	section.recommendArea h4 { font-size: 5vw;}
	section.recommendArea h4 .price { font-size: 10.4vw; }
	section.recommendArea h4 .yen { font-size: 6vw;}
	.recom-list {
		justify-content: space-between;
	}
	.recom-list li {
		width: 48%;
		margin-bottom: 20px;
		padding-bottom: 0;
		font-size: 6vw;
	}
	.recom-list li.lastblock {
		margin-bottom: 20px;
	}
	
	section.donationArea {padding: 40px 0;}
	section.donationArea ul { margin: 40px auto; width: 100%;}
	section.donationArea ul li { width: 48%; margin: 10px 2px;}
	section.donationArea a {padding: 14px; font-size: 4.5vw;}
	section.donationArea a::before {width: 10px;
		height: 10px;}

	
	section.useArea {padding: 40px 0 20px;}
	section.useArea .use-systembox {
		padding: 40px 20px 40px;
		width:  90%;
	}
	section.useArea h4 { font-size: 5vw;}
	.use-systembox p {font-size: 14px;}
	section.useArea .howto-list {display: block; }
	section.useArea .howto-list li{width: 80%; margin:0 auto 30px;}
	section.useArea .howto-list li:after {border: none;}
	section.useArea .use-message, section.useArea .use-message span {font-size: 6.7vw; margin-top: 0;}
	section.useArea .use-message:after {top: 104%; left: 44%; border-left: 20px solid transparent;
    border-right: 20px solid transparent;
		border-top: 20px solid #E67F19;}
	section.useArea .howtouse-list {margin: 40px 0 0;}
	section.useArea .howtouse-list li {width: 48%;}
	section.useArea .howtouse-list dd {padding: 10px;}
	.howtouse-list .label {display: block; font-size: 14px; padding: 0 10px; margin-right: 0;}
	.goal-price {font-size: 14px;}
	.modal_usebox .modal-content{ width: 90%;}

}


/*週間ランキング iframe*/
.f182109-sakai_xecin_ec_storank_766{height:500px !important;}

@media only screen and (max-width:1000px) {
.f182109-sakai_xecin_ec_storank_766{height:340px !important;}
}
@media only screen and (max-width:840px) {
.f182109-sakai_xecin_ec_storank_766{height:300px !important;}
}

.f182109-sakai_xecin_ec_storank_767{height:400px !important;}

@media only screen and (max-width:390px) {
.f182109-sakai_xecin_ec_storank_767{height:280px !important;}
}