@charset "utf-8";
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video{margin:0;padding:0;}

/* --------------------------------------------------- */
/* common
/* --------------------------------------------------- */
html{width:100%;height:100%;}
body{min-width:1000px;}

@import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(//use.fontawesome.com/releases/v5.0.6/css/all.css);

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 500;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}
#chugen { line-height: 1.5em; font-size: 16px; position: relative;}
#chugen ol,#chugen ul { list-style: none;}
#chugen .sanserif,#chugen .sanserif *,#chugen .btn, #chugen .point p, #chugen .badge p,#experience02 p, #experience02 a {font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;}
#chugen a{ color: #222;}

/*main*/
article > .container, section > .container{padding:80px 20px;}
.container{width:100%;max-width:1040px;padding:0 20px;margin:auto;position:relative;box-sizing:border-box;}
.main-block{color:#444;font-size:16px;line-height:2;  font-family: '游ゴシック','游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Sans','Hiragino Kaku Gothic ProN','メイリオ',meiryo,"ＭＳ Ｐゴシック", sans-serif;font-weight:500;}
.main-block a{color:#222;text-decoration:none!important;transition:.3s;}
.main-block a:hover{opacity:0.7;}
.clearfix:after,.inner:after,.col-group:after{	content: "";	display: block;	clear: both;}

#spmenuArea{display:none;}
#spfooterArea{display:none;}
.no-pc{display:none;}
.no-sp{display:block;}

/*img*/
img{max-width:100%;height:auto;-webkit-backface-visibility:hidden;}
.img-left {float: left;margin-right: 30px;}
.img-right {float: right;margin-left: 30px;}
div.img-right,div.img-left {text-align: center;}

/*txt*/
.txt_l{text-align:left!important;}
.txt_c{text-align:center!important;}
.txt_r{text-align:right!important;}
.f_bold{font-weight:bold;}
.f-min{font-family:游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif!important;font-weight:500;}
.br-sp{display:none;}

/* ttl */
.common-ttl01{font-size:30px;margin-bottom:40px;text-align:center;line-height:1.6;font-weight:normal;}
.common-ttl01 small{font-size:22px;display:block;}
.common-ttl01 span{color:#1e7fbd;}
.common-ttl01.common-ttl01-line{position:relative;}
.common-ttl01.common-ttl01-line::before{content:"";display:block;width:30%;height:5px;border-top:1px solid #1e7fbd;border-bottom:1px solid #1e7fbd;position:absolute;left:0;top:50%;margin-top:-2px;}
.common-ttl01.common-ttl01-line::after{content:"";display:block;width:30%;height:5px;border-top:1px solid #1e7fbd;border-bottom:1px solid #1e7fbd;position:absolute;right:0;top:50%;margin-top:-2px;}

/*pagetop*/
#pagetop{position:fixed;right:20px;bottom:20px;transition:.3s;}
#pagetop:hover{opacity:0.7;}
#pagetopsp{display:none;}

/* IE */
body.ie .main-block{font-family: Verdana, Meiryo, sans-serif;}

/* --------------------------------------------------- */
/* #mv
/* --------------------------------------------------- */
#mv {position: relative;overflow:hidden;background:url(../img/mv.jpg) no-repeat center center;background-size:cover;}
#mv .inner{max-width:1040px;padding:0 20px;height:580px;margin:0 auto;position:relative;}
#mv .ttl {padding:50px 0 0;text-align:center;}
#mv .txt-box{width:450px;height:100%;margin:auto;background:url(../img/mv_txt_back.png) no-repeat center center;background-size:cover;position:relative;}
#mv .txt01{position:absolute;top:30px;right:35px;}
#mv .txt02{position:absolute;top:160px;left:35px;}
#mv .summer{position:absolute;bottom:60px;left:-15px;}
#mv .img{position:absolute;bottom:20px;right:-20px;}
#mv .sp-txt{display:none;}
.mv-attention{text-align:center;font-size:13px;padding:20px 0;}

/* --------------------------------------------------- */
/* #block-ranking
/* --------------------------------------------------- */
#block-ranking{background:url(../img/back.jpg);position:relative;text-align:center;margin-bottom:20px;}
#block-ranking::after{content:"";display:block;width:100%;height:0;padding-bottom:50%;background:url(../img/ranking_bottom.jpg) no-repeat center bottom;background-size:100% auto;position:absolute;bottom:0;left:0;z-index:1;}
#block-ranking .container{position:relative;z-index:2;}
#block-ranking .ttl-block{display:inline-block;position:relative;}
#block-ranking .common-ttl01{font-size:36px;display:inline-block;position:relative;padding-left:70px;margin-bottom:50px;}
#block-ranking .common-ttl01 img{display:block;margin:10px auto 0;}
#block-ranking .common-ttl01::before{content:"";display:block;width:40px;height:44px;background:url(../img/ranking_before.png) no-repeat center center;background-size:100% auto;position:absolute;left:-150px;bottom:20px;}
#block-ranking .common-ttl01::after{content:"";display:block;width:40px;height:44px;background:url(../img/ranking_after.png) no-repeat center center;background-size:100% auto;position:absolute;right:-150px;bottom:20px;}
#block-ranking .pop{position:absolute;top:0;left:-70px;}
#block-ranking .lead{margin-bottom:50px;}
#block-ranking .graph{background:#fff;border:2px solid #eee;padding:25px 0;position:relative;}
#block-ranking .graph .img{margin-bottom:20px;}
#block-ranking .graph .attention{text-align:left;font-size:12px;line-height:1.6;padding: 0 40px;}
#block-ranking .graph .rank{position:absolute;top:-20px;right:0;}

/* --------------------------------------------------- */
/* #block-gift
/* --------------------------------------------------- */
#block-gift{background:url(../img/back.jpg);position:relative;margin-top:20px;}
#block-gift::before{content:"";display:block;width:314px;height:346px;background:url(../img/gift_back01.png) no-repeat center center;background-size:100% auto;position:absolute;top:0;left:0;z-index:0;}
#block-gift::after{content:"";display:block;width:352px;height:330px;background:url(../img/gift_back02.png) no-repeat center center;background-size:100% auto;position:absolute;top:0;right:0;z-index:1;}
#block-gift .container{padding-top:40px;padding-bottom:40px;}
#block-gift .box{background:rgba(255,255,255,0.9);padding:100px 5% 60px;text-align:center;position:relative;z-index:2;}
#block-gift .box::before{content:"";display:block;width:75px;height:48px;background:url(../img/gift_img.png) no-repeat center center;background-size:100% auto;position:absolute;top:-20px;left:50%;margin-left:-24px;}
#block-gift .box p{margin-top:-10px;}
#block-gift .box .btn{display:inline-block;font-size:20px;margin-top:40px;padding:20px 90px;text-align:center;background:#1e7fbd;background:linear-gradient(120deg,#26b6da 0,#1e7fbd 30%) #1e7fbd;background:-webkit-linear-gradient(120deg,#1e7fbd 30%,#26b6da 100%) #1e7fbd;border-radius:2px;color:#fff;position:relative;box-sizing:border-box;}
#block-gift .box .btn::after{content:"";display:block;width:12px;height:7px;background:url(../img/arrow.png) no-repeat center center;background-size:100% auto;position:absolute;top:50%;right:30px;margin-top:-3px;transition:.3s;}
#block-gift .box .btn:hover::after{margin-top:1px;}

/* --------------------------------------------------- */
/* #block-catalog
/* --------------------------------------------------- */
#block-catalog .common-ttl01{position:relative;}
#block-catalog .common-ttl01::before{content:"";display:block;width:25%;height:80px;position:absolute;top:50%;left:0;background:url(../img/catalog_ttl01.png) no-repeat center right;background-size:auto 100%;margin-top:-40px;}
#block-catalog .common-ttl01::after{content:"";display:block;width:25%;height:80px;position:absolute;top:50%;right:0;background:url(../img/catalog_ttl02.png) no-repeat center left;background-size:auto 100%;margin-top:-40px;}
#block-catalog .lead{text-align:center;margin-bottom:40px;}
#block-catalog .list-catalog > li{background:#e0f1f9;list-style-type:none;margin-bottom:5px;}
#block-catalog .list-catalog > li a{display:block;padding:30px;overflow:hidden;}
#block-catalog .list-catalog > li .img{float:left;margin-right:30px;line-height:1;width:22%;text-align:center;}
#block-catalog .list-catalog > li .inner{overflow:hidden;}
#block-catalog .list-catalog > li .ttl{border-left:3px double #0654ba;padding-left:15px;margin-bottom:15px;}
#block-catalog .list-catalog > li .ttl .catch{font-size:14px;line-height:1.5;margin-bottom:3px;}
#block-catalog .list-catalog > li .ttl h3{font-weight:bold;color:#0654ba;}
#block-catalog .list-catalog > li .ttl .price{font-weight:bold;line-height:1.5;}
#block-catalog .list-catalog > li .voice{background:#fffffb;color:#444;font-size:14px;padding:20px;line-height:1.5;position:relative;}
#block-catalog .list-catalog > li .voice .name{font-weight:bold;margin-top:10px;line-height:1;}
#block-catalog .list-catalog > li .voice::before{content:"";display:block;width:20px;height:20px;position:absolute;top:0;right:0;background:url(../img/catalog_page01.png) no-repeat center center;background-size:100% auto;}
#block-catalog .list-catalog > li:nth-child(even){background:#eef6f9;}
#block-catalog .list-catalog > li:nth-child(even) .voice::before{background-image:url(../img/catalog_page02.png);}

/* --------------------------------------------------- */
/* .block-catalog
/* --------------------------------------------------- */
.block-catalog > .container{padding-top:30px;padding-bottom:30px;}
.block-catalog .catalog-box{color:#222222;text-align:center;background:url(../img/back.jpg);padding:0 0 20px;margin-bottom:40px;}
.block-catalog .catalog-box .catalog-head{line-height:0;}
.block-catalog .catalog-box .catalog-head .sp{display:none;}
.block-catalog .catalog-box .catalog-catch{padding:60px 0 20px;}
.block-catalog .catalog-box .catalog-catch h2{font-size:30px;margin-bottom:20px;font-family:游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;font-weight:normal;line-height:1.5;}
.block-catalog .catalog-box .catalog-catch h2 small{font-size:22px;display:block;}
.block-catalog .catalog-box .catalog-link{width:96%;background:#f0f0e2;margin:20px auto 0;border-radius:10px;line-height:1.5;}
.block-catalog .catalog-box .catalog-link ul{display:block;list-style-type:none;margin:0;padding:20px 20px 15px;}
.block-catalog .catalog-box .catalog-link li{display:inline-block;width:24%;vertical-align:top;margin-right:0.5%;margin-bottom:1%;}
.block-catalog .catalog-box .catalog-link li:nth-child(4n),
.block-catalog .catalog-box .catalog-link li:last-child{margin-right:0;}
.block-catalog .catalog-box .catalog-link li a{position:relative;display:block;border:solid 1px #d6d6ca;background-color:#FFF;box-sizing:border-box;width:100%;padding:20px 20px 25px;text-align:left;margin:0;}
.block-catalog .catalog-box .catalog-link li a::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:0 0 18px 18px;border-color:transparent transparent #b30000 transparent;position:absolute;bottom:0;right:0;z-index:0;}
.block-catalog .catalog-box .catalog-link li .img{text-align:center;margin:0;}
.block-catalog .catalog-box .catalog-link li h3{color:#0654ba;margin:18px 0 3px;padding:0;font-size:18px;font-weight:bold;}
.block-catalog .catalog-box .catalog-link li .price{margin:0;font-size:16px;color:#b30000;font-weight:bold;}
.block-catalog .catalog-box .catalog-link li .price span{color:#666666;font-size:14px;font-weight:normal;}

.block-catalog .catalog-box.catalog01 .catalog-head{border-bottom:solid 4px #990000;}
.block-catalog .catalog-box.catalog01 .catalog-catch{background:url(../img/catalog01_img01.png) left 20px center no-repeat, url(../img/catalog01_img02.png) right 20px center no-repeat;}
.block-catalog .catalog-box.catalog01 h2 span{color:#990000;}
.block-catalog .catalog-box.catalog02 .catalog-head{border-bottom:solid 4px #0654ba;}
.block-catalog .catalog-box.catalog02 .catalog-catch{background:url(../img/catalog02_img01.png) left 20px center no-repeat, url(../img/catalog02_img02.png) right 20px center no-repeat;}
.block-catalog .catalog-box.catalog02 h2 span{color:#0654ba;}
.block-catalog .catalog-box.catalog03 .catalog-head{border-bottom:solid 4px #c28a02;}
.block-catalog .catalog-box.catalog03 .catalog-catch{background:url(../img/catalog03_img01.png) left 20px bottom 40px no-repeat, url(../img/catalog03_img02.png) right 20px bottom 40px no-repeat;}
.block-catalog .catalog-box.catalog03 h2 span{color:#c28a02;}
.block-catalog .catalog-box.catalog04 .catalog-head{border-bottom:solid 4px #96274d;}
.block-catalog .catalog-box.catalog04 .catalog-catch{background:url(../img/catalog04_img01.png) left 20px bottom 40px no-repeat, url(../img/catalog04_img02.png) right 5px bottom 20px no-repeat;}
.block-catalog .catalog-box.catalog04 h2 span{color:#96274d;}

/* --------------------------------------------------- */
/* .block-banner
/* --------------------------------------------------- */
.block-banner{text-align:center;padding-bottom:80px;}
.block-banner .banner-sp{display:none;}


/* =================================================================================== */
/* for SP */
/* =================================================================================== */
@media screen and (max-width:1000px){	body{background:none!important;}}
@media screen and (max-width:599px){
	body{min-width:319px;overflow-x:hidden;}
  article > .container, section > .container{padding:50px 5%;}

	/* --------------------------------------------------- */
	/* common
	/* --------------------------------------------------- */
	.container{padding:0 5%;width:100%;}
	.main-block{margin-top:0;overflow-x:hidden;font-size:14px;line-height:1.7;}

	#spmenuArea{display:block;}
	#spfooterArea{display:block;}
	#headerArea{display:none;}
	#gnaviArea{display:none;}
	#footer{display:none;}

  /* ttl */
  .common-ttl01{font-size:24px;margin-bottom:20px;}
  .common-ttl01 small{font-size:16px;}
  .common-ttl01.common-ttl01-line::before{content:"";display:block;width:8%;height:3px;border-top:1px solid #1e7fbd;border-bottom:1px solid #1e7fbd;position:absolute;left:0;top:50%;margin-top:-2px;}
  .common-ttl01.common-ttl01-line::after{content:"";display:block;width:8%;height:3px;border-top:1px solid #1e7fbd;border-bottom:1px solid #1e7fbd;position:absolute;right:0;top:50%;margin-top:-2px;}
  .br-sp{display:block;}

	/*display*/
	.no-pc{display:block!important;}
	.no-sp{display:none!important;}

	/*pagetop*/
	#pagetop{display:none!important;}
	#pagetopsp{display:block;}

	/* --------------------------------------------------- */
	/* mv
	/* --------------------------------------------------- */
  #mv{height:0;padding-bottom:120%;position:relative;background-image:url(../img/sp/mv_back.jpg);}
  #mv .inner{display:none;}
  #mv .sp-txt{display:block;position:absolute;top:45%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
  .mv-attention{font-size:10px;padding:15px 0;line-height:1.5;text-align:left;}

  /* --------------------------------------------------- */
  /* #block-ranking
  /* --------------------------------------------------- */
  #block-ranking{margin-bottom:10px;}
  #block-ranking::after{background-size:150% auto;}
  #block-ranking .common-ttl01{font-size:24px;padding-left:50px;margin-bottom:30px;white-space:nowrap;}
  #block-ranking .pop{width:60px;left:-3%;z-index:2;}
  #block-ranking .lead{margin-bottom:25px;text-align:left;}
  #block-ranking .lead br{display:none;}

  #block-ranking .graph{padding:15px 0;}
  #block-ranking .graph .img{margin-bottom:15px;}
  #block-ranking .graph .attention{padding:0 5%;font-size:10px;}
  #block-ranking .graph .rank{width:20%;top:-4%;right:-2%;}

  /* --------------------------------------------------- */
  /* #block-gift
  /* --------------------------------------------------- */
  #block-gift{margin-top:10px;}
  #block-gift::before{max-width:42%;background-position:left top;}
  #block-gift::after{max-width:42%;background-position:right top;}
  #block-gift .container{padding-top:30px;padding-bottom:5%;}
  #block-gift .common-ttl01{font-size:20px;white-space:nowrap;line-height:1.5;}
  #block-gift .common-ttl01 small{margin-bottom:3px;}
  #block-gift .box{padding:35px 5% 5%;}
  #block-gift .box::before{width:40px;margin-left:-20px;}
  #block-gift .box p{text-align:left;margin:0;}
  #block-gift .box p br{display:none;}
  #block-gift .box .btn{width:100%;font-size:17px;margin-top:20px;padding:15px 15px;line-height:1.5;font-weight:bold;}
  #block-gift .box .btn::after{right:15px;}

  /* --------------------------------------------------- */
  /* #block-catalog
  /* --------------------------------------------------- */
  #block-catalog .common-ttl01::before{width:25px;background-size:200px auto;margin-top:-55px;}
  #block-catalog .common-ttl01::after{width:25px;background-size:200px auto;margin-top:-20px;}
  #block-catalog .lead{text-align:left;margin-bottom:25px;}
  #block-catalog .lead br{display:none;}

  #block-catalog .list-catalog > li{margin-bottom:3px;}
  #block-catalog .list-catalog > li a{padding:5%;}
  #block-catalog .list-catalog > li .img{float:none;margin:0 auto 20px;width:100%;max-width:120px;}
  #block-catalog .list-catalog > li .inner{border-top:3px double #0654ba;}
  #block-catalog .list-catalog > li .ttl{border-left:0;padding-left:0;margin-bottom:15px;padding-top:15px;text-align:center;}
  #block-catalog .list-catalog > li .ttl .catch{font-size:12px;}
  #block-catalog .list-catalog > li .ttl .catch br:not(.br-sp){display:none;}
  #block-catalog .list-catalog > li .ttl h3{font-size:18px;}
  #block-catalog .list-catalog > li .ttl .price{font-size:16px;}
  #block-catalog .list-catalog > li .voice{padding:5%;}
  #block-catalog .list-catalog > li .voice::before{width:15px;height:15px;background-position:right top;}

  /* --------------------------------------------------- */
  /* .block-catalog
  /* --------------------------------------------------- */
  .block-catalog > .container{padding:0;}
  .block-catalog .catalog-box{margin-bottom:20px;}
  .block-catalog .catalog-box .catalog-head .pc{display:none;}
  .block-catalog .catalog-box .catalog-head .sp{display:block;}
  .block-catalog .catalog-box .catalog-catch{padding-bottom:0;padding-top:38%;}
  .block-catalog .catalog-box .catalog-catch h2 {padding:0 5%;font-size:22px;white-space:normal;margin-bottom:10px;}
  .block-catalog .catalog-box .catalog-catch h2 small{font-size:16px;}
  .block-catalog .catalog-box .catalog-catch h2 br:not(.br-sp){display:none;}
  .block-catalog .catalog-box .catalog-catch .txt{text-align:left;padding:0 5%;}
  .block-catalog .catalog-box .catalog-catch .txt br{display:none;}
  .block-catalog .catalog-box .catalog-link { margin: 20px auto 0;background: none; }
  .block-catalog .catalog-box .catalog-link ul { padding: 0; width: 100%; }
  .block-catalog .catalog-box .catalog-link li { width: 100%; }
  .block-catalog .catalog-box .catalog-link li a { border-left: none; border-right: none; border-top: none; width: 100%; padding: 15px;display: table; background-color: inherit; }
  .block-catalog .catalog-box .catalog-link li:first-of-type a { border-top: solid 1px #d6d6ca; }
  .block-catalog .catalog-box .catalog-link li a:before { content: ""; position: absolute; right: 0; top: 43.25%; width: 20px; height: 20px; background: #FFF; border-radius: 100%; }
  .block-catalog .catalog-box .catalog-link li a:after { content: ""; position: absolute; right: 5px; top: 46%; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #868686; }
  .block-catalog .catalog-box .catalog-link li h3{margin-top:0;}
  .block-catalog .catalog-box .catalog-link li .img, .block-catalog .catalog-box .catalog-link li .txt { display: table-cell;vertical-align:middle; }
  .block-catalog .catalog-box .catalog-link li .img { width: 35%; padding-right: 7%; }

  .block-catalog .catalog-box.catalog01 .catalog-catch{background-position:right 25% top 35px,left 25% top 30px;background-size:40% auto, 40% auto;}
  .block-catalog .catalog-box.catalog02 .catalog-catch{background-position:right 35% top 5px,left 35% top 10px;background-size:27% auto, 17% auto;}
  .block-catalog .catalog-box.catalog03 .catalog-catch{background-position:right 30% top 28px,left 30% top 23px;background-size:40% auto, 30% auto;}
  .block-catalog .catalog-box.catalog04 .catalog-catch{background-position:left 30% top 8px,right 30% top 30px;background-size:26% auto, 30% auto;}

  /* --------------------------------------------------- */
  /* .block-banner
  /* --------------------------------------------------- */
  .block-banner .banner-pc{display:none;}
  .block-banner .banner-sp{display:block;}

}
@media screen and (max-width:374px){
  #block-ranking .common-ttl01{padding-left:0;}
  #block-ranking .pop{top:auto;bottom:22px;}
}
