<style>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;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
a:hover{
  text-decoration: none;
}

.note{
  margin-bottom: 0;
}


div.products{
  position: relative;
    top: 0px;
    left: 0px;
      width: 90%;
    margin: 0 auto;
}

#container {
  background-image: url('/special/fromagee/feature/kimetsu_no_yaiba/images/bg_container.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

div#containers_1300 {
  width: 1300px;
  padding: 0;
  position: relative;
  background-image: url("/special/fromagee/feature/kimetsu_no_yaiba/images/bg3.png");
}

div#gnav {
  margin-bottom: 0;
}

#containers_1300>div.bcs {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

div#special_tpl div.twitter, div#containers_1300 div.twitter {
  z-index: 1;
  top: 0px;
}

.cursol {
  pointer-events: none;
}

.opacity:hover {
  opacity: 0.7;
}

.pick_text p,
h3 {
  font-family: serif;
}

h2 {
  text-align: center;
  padding: 5% 0;
}

.contents {
  padding: 5% 0;
  background-attachment: fixed;
}

.bg1 {
  background-image: url("/special/fromagee/feature/kimetsu_no_yaiba/images/bg1.png");
}

.bg2 {
  background-image: url("/special/fromagee/feature/kimetsu_no_yaiba/images/bg2.png");
}
.bg3{
background-image: url("/special/fromagee/feature/kimetsu_no_yaiba/images/bg3.png");
}

.bg4{
background-image: url("/special/fromagee/feature/kimetsu_no_yaiba/images/bg4.png");
}

.pickup_flex {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  width: 80%;
  margin: 0 auto;
}

.pick_image {
  position: relative;
}

.pickup_circle_mask {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: -50%;
  /* 枠の上に置いて表示させない */
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.pickup_circle_mask .caption {
  font-size: 16px;
  color: #fff;
  margin: 10px 0 5px;
  text-align: center;
  line-height: 22px;
}

.cover:hover .pickup_circle_mask{
  bottom: 0;
}

.cover {
  position: absolute;
  width: 47%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.cover img {
  width: 100%;
}

.pick_text {
  position: relative;
}

.pick_text p {
  font-weight: bold;
  position: absolute;
  width: 92%;
  font-size: 1.45em;
  line-height: 2em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ranking_container {
  background-color: #fff;
  padding: 1% 0;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  background-image: url("/special/fromagee/feature/kimetsu_no_yaiba/images/bg_white.png");
  background-repeat: no-repeat;
  background-position:  bottom right;
  border-radius: 15px;
}

.item {
  width: 15%;
  margin: 0.5% 1%;
}
.item h3{
  padding: 0 0 0 13%;
  font-size: 2em;
  font-weight: bold;
  background-image: url("/special/fromagee/feature/kimetsu_no_yaiba/images/icon.png");
  background-repeat: no-repeat;
  background-size: contain;

}
.ranking_cover {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
position: relative;
}

.ranking_cover img {
  width: 100%;
}




.ranking_circle_mask {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: -100%;
  /* 枠の上に置いて表示させない */
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.ranking_circle_mask .caption {
  font-size: 1.2em;
  color: #fff;
  margin: 10px 0 5px;
  text-align: center;
  line-height: 1.5em;
}
.ranking_cover:hover .ranking_circle_mask {
  bottom: 0;
}

.category{
  padding: 0;
}

.tab_flex{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
}

.tab_flex label{
  width: 25%;
}
.tab_flex label *{
  width: 100%;
}

.products{
  background:#fff;
}
.products.carousel.viewmode_target.note.related_products{
  width: 1169px;
  margin: 0 auto;
}
input[name="tab_item"]{
  display: none;
}
.panel_area {}

	.tab_panel {
		width: 100%;
		padding: 0;
		display: none;
	}

	#tab1:checked~.tab_area .tab1_label {
		opacity: 0.6;
	}

	#tab1:checked~.panel_area #panel1 {
		display: block;
	}

	#tab2:checked~.tab_area .tab2_label {
		opacity: 0.6;
	}

	#tab2:checked~.panel_area #panel2 {
		display: block;
	}


	#tab3:checked~.tab_area .tab3_label {
		opacity: 0.6;
	}

	#tab3:checked~.panel_area #panel3 {
		display: block;
	}
  	#tab4:checked~.tab_area .tab4_label {
		opacity: 0.6;
	}

	#tab4:checked~.panel_area #panel4 {
		display: block;
	}

.banner_area{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.banner_area a{
  width: 30%;
}
.banner_area a:hover{
  opacity: 0.7;
}
.banner_area *{
  width: 100%;
}


.coupling_container{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 70%;
  margin: 0 auto;
}

.menu {
    position: relative;
    width: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.menu > li {
    width: 100%;
    margin: 15px 0 0 0;
}

.menu > li a.init-bottom{
    display: block;
    color: #fff;
    font-size: 2.5em;
}

.menu > li a:hover {
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    text-align: center;
}

ul.menu__second-level li a{
    color:#fff;
    font-size: 1.8em;
    display: inline-block;
}
.menu__second-level li a:hover {
  opacity: 0.7;
}

.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    width: 60%;
    padding: 2px 0;
  /*  -webkit-transition: all .2s ease;
    transition: all .2s ease;*/
}

li.menu__single:hover ul.menu__second-level {
    top: 35px;
    left: 185px;

    visibility: visible;
    opacity: 1;
}
.init-bottom:hover{

}

.akaza:hover > .init-bottom{
  background-color:#ff1493;
  color:#000;
}


.zenitsu:hover > .init-bottom{
  background-color:#ffd700;
  color:#000;
}

.obanai:hover > .init-bottom{
  background-color:#008080;
  color:#fff;
}
.tengen:hover > .init-bottom{
  background:linear-gradient(90deg, rgba(173, 216, 230,1) 20.5625%,rgba(173, 215, 229,1) 20.5625%,rgba(220, 20, 60,1) 80.5625%);
  color:#000;
}

.kaigaku:hover > .init-bottom{
  background-color:#A4A4A4;
  color:#000;
}
.tanjiro:hover > .init-bottom{
  background-color:#008000;
  color:#fff;
}
.nezuko:hover > .init-bottom{
  background-color:#ff69b4;
  color:#fff;
}
.mitsuri:hover > .init-bottom{
  background:linear-gradient(90deg, rgba(255, 182, 193,1) 20.5625%,rgba(254, 182, 192,1) 20.5625%,rgba(144, 238, 144,1) 80.5625%);
  color:#000;
}

.shinobu:hover > .init-bottom{
  background-color:#9932cc;
  color:#fff;
}

.sabito:hover > .init-bottom{
  background-color:#f08080;
  color:#000;
}


.genya:hover > .init-bottom{
  background-color:#4b0082;
  color:#fff;
}

.sanemi:hover > .init-bottom{
  background-color:#088A08;
}

.kanawo:hover > .init-bottom{
  background-color:#ee82ee;
  color:#000;
}

.michikatsu:hover > .init-bottom{
  background-color:#A4A4A4;
  color:#000;
}

.yoriichi:hover > .init-bottom{
  background-color:#B43104;
}

.douma:hover > .init-bottom{
  background:linear-gradient(90deg, rgba(220, 20, 60,1) 20.5625%,rgba(220, 20, 59,1) 20.5625%,rgba(255, 215, 0,1) 80.5625%);
  color:#fff;
}

.muichiro:hover > .init-bottom{
  background:linear-gradient(90deg, rgba(1, 145, 151,1) 20.5625%,rgba(1, 144, 150,1) 20.5625%,rgba(4, 104, 43,1) 80.5625%);
}

.giyuu:hover > .init-bottom{
  background-color:#0000ff;
  color:#fff;
}


.inosuke:hover > .init-bottom{
  background-color:#4169e1;
  color:#fff;
}

.makomo:hover > .init-bottom{
  background-color:#0080FF;
}

.kyojuro:hover > .init-bottom{
  background-color:#ff0000;
  color:#000;
}

.shinjuro:hover > .init-bottom{
  background-color:#ff0000;
  color:#000;
}

.senjuro:hover > .init-bottom{
  background-color:#ff0000;
  color:#000;
}

.muzan:hover > .init-bottom{
  background:linear-gradient(90deg, rgba(220, 20, 60,1) 20.5625%,rgba(220, 220, 220,1) 80.5625%);
;
}


#pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}

#pagetop a {
  display: block;
  width: 144px;
  height: 100px;
  transition: all 1s 2ms;
  background-color: rgba(255, 92, 162, .7);
  color: #fff;
  text-align: center;
  font-size: 26px;
  line-height: 100px;
}

#pagetop a:hover {
  opacity: 0.7;
}

</style>
