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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body{margin: 0px !important;}
h1,h2,h3,h4,h5,h6{margin: 0;}
ul {
    display: block;
    list-stslideyle-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
p {margin: 0;}
#bl{
    padding: 0;
    font-family: yu-gothic-pr6n, sans-serif;
    margin: 0 auto;
    line-height: 2.0;
    font-size: 12px;
    letter-spacing: 1px;
    box-sizing: border-box;
    color: #2b2b2b;
    -webkit-text-size-adjust: 100%;
	overflow: hidden;
}
#bl a {
	text-decoration: none;
	color: #2b2b2b;
}
#bl　a:hover {
	opacity: 1;
}
#bl .clear{
	clear: both;
}
#bl img{
    width: 100%;
    vertical-align: bottom;
    line-height: 0;
}
#bl ul,#bl li {
	list-style: none;
	padding: 0;
	margin: 0;
}
.f-ja {font-family: yu-gothic-pr6n, sans-serif;}
.f-en {
        font-family: "Lusitana", serif;
        font-style: normal;
}
@media only screen and (max-width: 768px)  {
	#bl {
		width: 100%;
		font-size: 11px;
		overflow: hidden;
	}
}
/************************************************************
                main 
************************************************************/
#bl #bl_header {
	width: 100%;
	position: relative;
	padding-top: 55px;
	padding-bottom: 100px;
}
#bl .main {
	position: relative;
	margin: 0 auto;
	max-width: 1150px;
}
#bl .main .top-pic {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0 0 auto;
	width: 700px;
	position: relative;
}
#bl .main .top-pic li {
    width: 33.3%;
    box-sizing: border-box;
    padding: .5%;
}
#bl .main .top-pic li:nth-child(1) {
	transition: 2.0s all 1.7s ease;
}
#bl .main .top-pic li:nth-child(2) {
	transition: 2.0s all 0.5s ease;
}
#bl .main .top-pic li:nth-child(3) {
	transition: 2.0s all 1.1s ease;
}
#bl .main .top-pic li:nth-child(4) {
	transition: 2.0s all 1.4s ease;
}
#bl .main .top-pic li:nth-child(5) {
	transition: 2.0s all 1.8s ease;
}
#bl .main .top-pic li:nth-child(6) {
	transition: 2.0s all 0.2s ease;
}
#bl .main .top-pic .ttl {
    width: 220px;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: -33%;
    transform: translate(-50%, -50%);
    z-index: 9;
}
#bl .main .ttl img{
	width: 100%;
}
#bl .read{
	 margin: 6% auto 0;
	font-size: 14px;
	text-align: center;
	position: relative;
	 animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
#bl .main .read p {
    margin-bottom: 10px;
}

@media only screen and (max-width: 768px)  {
	#bl #bl_header {
        padding-top: 10%;
        padding-bottom: 15%;
	}
	#bl .main {
	    margin: 0 auto;
        width: 100%;
    }
	#bl .main .top-pic {
		width: 100%;
        margin: 0 auto;
    }
	#bl .main .top-pic li {
	    width: 33.3%;
	    box-sizing: border-box;
	    padding: .3%;
    }
   #bl .main .ttl {
	    width: 45%;
	    margin: 0 auto 4%;
    }
   #bl .read {
	    margin: 7% 6% 0%;
	    font-size: 11px;
    }
	
}
/************************************************************
                contents .itemArea
************************************************************/
#bl #contents {
	max-width: 1200px;
	margin: 2% auto 5%;
	font-family: 'Roboto', sans-serif;
}
#bl #contents section {
	
	margin: 0 auto 16%;
}
#bl #contents section .midashi {
	display: flex;
    font-size: 12px;
    font-weight: 700;
    border-top: solid 3px;
	margin: 0 0 6%;
    padding: .8% 1%;
    justify-content: space-between;
}
#bl #contents section .midashi div:nth-child(2) {
	width: 120px;
	margin-top: .8%;
}
#bl #contents section .midashi .item-name {
    height: 53px;
    width: auto;
}
@media only screen and (max-width: 768px)  {
	#bl #contents {
	    max-width: 100%;
	    margin: 0 auto 5%;
    }
	#bl #contents section {
	    width: 100% !important;
	    margin: 0 auto 24%;
	}
	#bl #contents section .midashi {
	    font-size: 8px;
		letter-spacing: .5px;
		 margin: 0 0 9%;
    }
	#bl #contents section .midashi div:nth-child(2) {
	    width: 18%;
	    margin-top: 5%;
    }
}
#bl #contents section .pic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 1075px;
	margin: 0 auto;
}
#bl #contents section .pic li {
	box-sizing: border-box; 
}
#bl #contents section .pic li:nth-child(1) {
	grid-area: 1 / 1 / 5 / 3;
	transition: 2.0s all 0.3s ease;
	margin: 0 4% 0 0;
}
#bl #contents section .pic li:nth-child(2) {
	grid-area: 1 / 3 / 3 / 5;
    transition: 2.0s all 0.6s ease;
    width: 303px;
    margin: 0 0 0 16%;
}
#bl #contents section .pic li:nth-child(3) {
	grid-area: 3 / 3 / 5 / 5;
    transition: 2.0s all 0.9s ease;
    width: 237px;
    margin: -7% 0 0 58%;
}
#bl #contents section .pic2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 1075px;
	margin: 0 auto;
}
#bl #contents section .pic2 li {
	box-sizing: border-box; 
}
#bl #contents section .pic2 li:nth-child(1) {
	grid-area: 1 / 1 / 3 / 3;
	transition: 2.0s all 0.6s ease;
	margin:  0 0 0 30%;
	width: 303px;
}
#bl #contents section .pic2 li:nth-child(2) {
	grid-area: 3 / 1 / 5 / 3;
    transition: 2.0s all 0.9s ease;
    width: 237px;
    margin: -7% 0 0 0%;
}
#bl #contents section .pic2 li:nth-child(3) {
	grid-area: 1 / 3 / 5 / 5;
    transition: 2.0s all 0.3s ease;
	margin: 0 0 0 4%;
}
@media only screen and (max-width: 768px)  {
	#bl #contents section .pic {
	    display: block;
	    width: 100%;
	    margin: 0 auto;
    }
	#bl #contents section .pic li:nth-child(1) {
	    margin:  0 auto 10%;
	    width: 72%;
    }
	#bl #contents section .pic li:nth-child(2) {
	    display: inline-block;
        width: 44%;
        margin: 0 0 0 7%;
        vertical-align: top;
    }
	#bl #contents section .pic li:nth-child(3) {
	    display: inline-block;
        width: 36%;
        margin: 0 0 0 6%;
        vertical-align: top;
    }
	
}

/************************************************************
             #contents section .textBox
************************************************************/
#bl #contents section .textBox {
	width: 42%;
	margin: 0 auto;
}
#bl #contents section .textBox .credit a {
	position: relative;
    width: 100%;
    display: inline-block;
    border-bottom: solid 1px #232323;
	letter-spacing: .8;
    line-height: 2.0;
    font-weight: 500;
    font-size: 13px;
    padding: 1.5% 0 1.3%;
	font-family: "Lusitana", serif;
}
#bl #contents section .textBox .credit a span {
	font-weight: 700;
}
#bl #contents section .textBox .credit a::after {
    position: absolute;
    content: "+";
    right: 2%;
    bottom: 0%;
    font-size: 21px;
    font-weight: 400;
    font-family: yu-gothic-pr6n, sans-serif;
}
#bl #contents section .textBox .credit .sto {
    position: relative;
    width: 100%;
    display: inline-block;
    border-bottom: solid 1px #232323;
	letter-spacing: .8;
    line-height: 2.0;
    font-weight: 500;
    font-size: 13px;
    padding: 1.5% 0;
	pointer-events: none;
}
#bl #contents section .textBox .credit .sto::after {
    position: absolute;
    content: "STORE ONLY";
    right: 1%;
    font-size: 12px;
    font-weight: 300;
	color: #606060;
}
#bl #contents section .textBox .credit .smp {
    position: relative;
    width: 100%;
    display: inline-block;
    border-bottom: solid 1px #232323;
	pointer-events: none;
}
#bl #contents section .textBox .credit .smp::after {
    position: absolute;
    content: "SAMPLE";
	font-family: "Lusitana", serif;
    right: 1%;
	bottom: 17%;
	color: #606060;
	font-size: 13px;
}
@media only screen and (max-width: 768px)  {
	#bl #contents section .textBox {
        width: 85%;
        margin: 10% auto 0;
        display: block;
    }
	#bl #contents section .textBox .credit a {
        font-size: 11px;
		padding: 1.8% .8% 1.3%;
    }
	#bl #contents section .textBox .credit a::after {
        font-size: 18px;
    }
	#bl #contents section .textBox .credit .smp::after {
        font-size: 11px;
		bottom: 13%;
    }
}

/************************************************************
               .moreArea
************************************************************/
#bl #contents .moreArea  {
    background: #e5e5e5;
    padding-bottom: 12%;
    margin: 0 auto 8%;
}
#bl #contents .moreArea .midashi2 {
	display: flex;
    font-size: 12px;
    font-weight: 700;
    border-top: solid 3px;
	margin: 0 0 0%;
    padding: .8% 1%;
    justify-content: space-between;
}
#bl #contents .moreArea .midashi2 div:nth-child(2) {
	width: 270px;
	margin-top: 2%;
}
#bl #contents .moreArea .midashi2 .item-name {
    height: 53px;
    width: auto;
}
#bl #contents .moreArea .morelist {
	width: 1130px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
#bl #contents .moreArea .morelist li {
	width: 32%;
	padding: .5%
}
#bl #contents .moreArea .morelist li p {
	width: 74%;
    margin: 0 auto;
    display: block;
    border-bottom: solid 1px;
    letter-spacing: .5px;
    padding: 1% 1% .4%;
}
#bl #contents .moreArea .morelist li .morebtn {
	display: block;
    background: #111;
    color: #fff;
    text-align: center;
    width: 18%;
    margin: 5% auto 0;
    font-size: 11px;
	border-radius: 10px;
    line-height: 2.0;
    letter-spacing: 0px;
}
@media only screen and (max-width: 768px)  {
	#bl #contents .moreArea .midashi2 {
	    font-size: 8px;
		letter-spacing: .5px;
		margin: 0 0 9%;
		display: block;
		position: relative;
    }
	#bl #contents .moreArea .midashi2 div:nth-child(2) {
        position: absolute;
		width: 55%;
        left: 22%;
    }
	#bl #contents .moreArea .midashi2 div:nth-child(3) {
        position: absolute;
        right: 1%;
        top: 13%;
    }
	#bl #contents .moreArea .morelist {
	    width: 100%;
		margin: 16% auto 0;
    }
	#bl #contents .moreArea .morelist li {
		width: 49.9%;
        padding: 0 0 5%;
    }
	#bl #contents .moreArea .morelist li p {
        width: 78%;
    }
	#bl #contents .moreArea .morelist li .morebtn {
        width: 30%;
        margin: 11% auto 0;
        font-size: 10px;
    }
	
}

/************************************************************
                js
************************************************************/
/*////pcview////*/
   #bl .spview {
		display: none;
	}	
	#bl .pcview {
		display: block;
	}
@media only screen and (max-width: 768px)  {
	#bl .spview {
		display: block;
	}	
	#bl .pcview {
		display: none;
	}	
}

#bl .anim {
	opacity: 0;
	transition: 1.5s all 0s;
}
#bl .anim.ac {
	opacity: 1;
	 transform: translate(0);
}