@charset "utf-8";
/* CSS Document */
html{scroll-padding-top: 150px;}
@font-face {
  font-family: "myfont"; src: url("../font.ttf") format("truetype");}
/*main {padding-top: 27rem;}*/
body {font-size: 17px;}
.sph1, .for-sp {display: none;}
.f2, dt, .booth dd, #onlinestore dd {font-size: 1.2rem; text-align: center;line-height: 1.9rem;}
.booth dd:first-of-type{padding-bottom: 2rem;}
#gaiyo, #onlinestore, #booth, #konyu {max-width: 988px;margin: 0 auto; width: 96%; border: 5rem solid;border-image-source: url(../img/summary_flame.png); border-image-slice: 100 100 100 100 fill;}
#item1, #tokuten1, #item2, #tokuten2{max-width: 988px;margin: 0 auto; width: 96%; }
h3{font-size: 2rem; color: #5B2418;padding-bottom: 1rem;text-align: center;}
#item1 h3, #item2 h3, #tokuten1 h3, #tokuten2 h3 {color:#000; }
#tokuten1 h2 span, #item1 h2 span {border: #fff solid 2px; font-size: 1.8rem;  color: #fff; width: 350px;  text-align: center; padding: 0.8rem;display: block;}
h1 {position: relative;justify-content: space-between;}
h2 {padding-bottom: 5rem;}
.global_nav li {font-size: 1.1rem!important;}
.br_400, .br460,  .br_600, .br_650 {display: none;}
.bg1 {background: url("../img/stripebg1.png") repeat-y; padding: 5rem 0;}
.bg2 {background: url("../img/bluelockbg2.png") repeat-y; padding-bottom: 5rem;}
.bg3 {background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.8)), url("../img/298184.png") repeat-y;padding: 0 0 5rem 0; position: relative;}
.kumo1 {position: absolute;right: 0; top: 35%; max-width: 40%;}
.kumo2 {position: absolute; left: 0; bottom: 30%; max-width: 40%;}
.kumo3 {position: absolute;right: 0; bottom: 20%;transform: scale(-1, 1); max-width: 40%;}
.kumo4 {position: absolute; left: 0; bottom: 10%; max-width: 40%;}
.kumo5 {position: absolute; top: 15%; left: 0; max-width: 40%;}
.nav-tr {background: #000; color: #fff;padding-right: 16%!important; align-items: center;}
.nav-tr a {color: #fff!important;}
.nav-bl {padding-right: 16%!important; background: #BBEDF0;align-items: center;}
.global_nav li{width: calc(97%/8); }
.global_nav ul{max-width: initial!important;}
.pc-nav {position: relative;}
.nav2 {position: absolute; right: 0%; top: 50%; transform: translate(0, -50%);display: flex; justify-content: space-around; padding-right: 2rem;}
/*booth*/
.booth {margin-bottom: 5rem!important; text-align: center;}
.booth a {color: #fff; background: #081FC0; border-radius: 14px; padding: 1rem 2rem;display: inline-block; text-decoration: none;}
.booth　dt {font-weight: bold;}
/*gaiyo*/
#gaiyo { position: relative;}
.summary p {text-align: left;}

/*bluelock*/
.item1, .tokuten1 {background: rgba(235,192,149,0.82);}
.item1-1 {background: #fff;}
#item1 h3 {display: flex; justify-content: space-between;padding-bottom: 1rem;align-items: center;}
#item1 h3 div {width: 28%;}
#item1 {margin-bottom: 5rem; padding: 1rem 0.5rem 0.5rem; position: relative;border-radius: 20px 20px 0px 0px;}
#item1 ul {display: flex; justify-content: space-between;flex-wrap: wrap; padding: 2rem;}
#item1 li {width: calc(97%/4);text-align: center;margin-bottom: 2rem; }
#item1 li:last-child{margin-right: 25%;}
#item1 li img, #item2 li img {border: solid black 0.8px;}
.term1 {margin-top: 0!important; font-size: 0.8rem; padding: 0.3rem 0; margin: 1rem 0; font-weight: bold; line-height: 1.1rem; background-color: #000; color: #fff; }
.itemname1 {line-height: 1.1rem; margin-bottom: 0.5rem; font-size: 0.85rem;color: #000000;}
.prices1 {font-size: 0.9rem;line-height: 1.1rem;color: #000000;}
/*tokuten*/
.tokuten1-1 {background: #fff;}
#tokuten1 { border-radius: 20px 20px 0px 0px;padding: 1rem 0.5rem 0.5rem;}
#tokuten1 h3 {display: flex; justify-content: space-between;padding-bottom: 1rem;align-items: center;}
#tokuten1 h3 div {width: 28%;}
#tokuten1 .toku_content {padding: 2rem;}

/*東リベ*/
#item2 {margin-bottom: 5rem;}
#item2 ul {display: flex; justify-content: space-between;flex-wrap: wrap; padding: 2rem; font-family: "myfont";}
#item2 li {width: calc(97%/4);text-align: center;margin-bottom: 2rem; }
#item2 li:last-child {margin-right: 25%;}
#item2, #tokuten2 {position: inherit; z-index: 1; border: 3rem solid;border-image-source: url("../img/notesflame.png"); border-image-slice: 100 100 100 100 fill;}

/*twitter*/
.tokui {max-width: 70%;margin:0 auto;}
.toku_p {font-weight: bold; font-size: 1.2rem; padding-bottom: 1rem;}
#tokuten1 span {font-weight: bold;}
.toku_p2 {max-width: 80%; margin: 0 auto;}
#tokuten1 fr {text-align: center;}
.toku-img {margin-bottom: 2rem;}

/*購入方法 事後通販*/
.dl {text-align: center; padding: 1rem;position: relative;}
.dl img{max-width: 200px; margin: 0 auto;}
.dl a{display: inline-block;}
.dl .deco1,.dl .deco2 {display: none;}
.dl p {font-size: 1.25rem;}
dl {text-align: center;}
dt {font-weight: bold; padding-bottom: 0.5rem;}

/*attention*/
#attention { position: relative;line-height: 1.7rem;}
.attention {position: relative; padding: 3rem;}
.flower1, .flower2 {position: absolute; max-width: 10%;}
.flower1 {top: 0; left: 0;}
.flower2 {bottom: 0; right: 0;}

#onlinestore { margin-top: 5rem;}

/*footer*/
footer {background: #EBC095; padding: 1rem 0; font-weight: bold;}
.top1 {position: fixed; bottom: 10%; max-width: 220px; right: 3%; z-index:10;}
.top2 {width: 100%; max-width: 1800px;  margin-right: auto;  margin-left: 0px;  display: block;}
.top2 a {float: right;}
.top2 a img {box-shadow: 3px 5px 5px 0px rgba(0, 0, 0, 0.3);outline: 2px solid #ccc;}
.bluelock {padding-bottom: 1rem;}

@media screen and (max-width:1000px) {
	#item1 li, #item2 li {width:calc(97%/2);}
	#item1 li:last-child {margin-right: 0;}
	.toku-sub {width: 30%;}
}
@media screen and (max-width:750px){
	.pch1 {display: none;}
	.sph1 {display: block;}
	h1 {flex-direction: column;}
	.f2, .booth dd, #onlinestore dd {font-size: 1rem;}
	#tokuten1 .f2, .toku-p {font-size: 1rem;}
	html{scroll-padding-top: 50px;}
	#tokuten1 h3 {top: -4rem;}
	#item2 ul, #item1 ul {padding: 0;}
	.nav1 {display: none!important;}
	.item1-1 {padding: 1.5rem;}
	.summary p {text-align: center;}
	
}
@media screen and (max-width:650px){
	.br_650{display: block;}
	.n650 {display: none;}
	/*.top1 {max-width: 60px;}*/
	.top1 {display: none;}
	.dl .deco1, .dl .deco2 {max-width: 45px;position: absolute;display: block;}
	.dl .deco1 {top: 0;left: 17%;}
	.dl .deco2 {transform: scale(-1, -1);bottom: 7%;right: 16%;}
	
	/*下部固定メニュー*/
#sp-fixed-menu{display: block;position: fixed;width: 100%;bottom: 0px;font-size: 0;z-index: 99;}
#sp-fixed-menu ul{display: flex;list-style: none;padding:0;margin:0;width:100%;}
#sp-fixed-menu li{position: relative;justify-content: center;align-items: center;width: 50%;padding:0;margin:0;font-size: 14px;border-right: 1px solid #ccc;}
#sp-fixed-menu li a{color: #fff;text-align: center;display:block;width: 100%;box-shadow: inset 0 0 10px #ccc;}
#sp-fixed-menu li img {position: relative;z-index: -1;}
	#sp-fixed-menu li a:hover {filter: brightness(0.92);opacity: 1;}
}

@media screen and (max-width:600px){
	.br_600 {display: block;}
	#tokuten1 h3 {top: -3.9rem;}
	.toku-p2{max-width: 90%;}
	.f2, .booth dd, #onlinestore dd {font-size: 0.95rem;}
	.attention {padding: 2rem 1rem;}
	#gaiyo, #onlinestore, #booth, #konyu {border: 2rem solid; border-image-source: url(../img/summary_flame.png); border-image-slice: 100 100 100 100 fill;}
	#item2, #tokuten2 {position: inherit; z-index: 1; border: 2rem solid;border-image-source: url("../img/notesflame.png"); border-image-slice: 100 100 100 100 fill;}
	.top1, #top img {max-width: 130px!important;}
	.dl p {font-size: 1rem;}
	
}

@media screen and (max-width:480px){
	.dl .deco1 {top: 0;left: 11%;max-width: 37px;}
	.dl .deco2 {bottom: 7%;right: 11%;max-width: 37px;}
}
@media screen and (max-width:460px){
	html{scroll-padding-top: 80px;}
	.f2 {line-height: 1.7rem;}
	footer {font-size: 0.7rem!important;}
	body {font-size: 13px;}
	#gaiyo {font-size: 1.05rem;}	.toku_p2, .tokui {max-width: 100%;}
	.itemname1,.prices1 {font-size: 0.75rem;}
	.term1 {font-size: 0.7rem;}
	h3 {font-size: 1.5rem;}
	#tokuten1 .toku_content {padding: 1rem;}
	.dl .deco1 {top: 0;left:8%;}
	.dl .deco2 {bottom: 7%;right: 8%;}
	.br460 {display: block;}
}
@media screen and (max-width:400px){
	.br_400{display: block;}
	.item1-1 {padding: 1.5rem 0.5rem;}
	#item2, #tokuten2 {position: inherit; z-index: 1; border: 1rem solid;border-image-source: url("../img/notesflame.png"); border-image-slice: 100 100 100 100 fill;}
	.dl .deco1 {top: 0;left: 2%;}
	.dl .deco2 {bottom: 7%;right: 2%;}
}
@media screen and (max-width:370px){
	.dl .deco1 {top: 0;left: 0%;}
	.dl .deco2 {bottom: 7%;right: 0%;}
}