@charset "UTF-8";

/*
Theme Name: ORIGINAL
*/


* {
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
	text-rendering:optimizeLegibility;
	overflow-x: hidden;
}

ul, li{
  list-style:none;
}

img{
  display:block;
  width:100%;
  height:auto;
}

::selection {
  background-color: #000;
  color:#fff;
}

a{
	text-decoration:none;
	color:#000;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}



a:hover{
	text-decoration:none;
	color:#000;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}




.text_border{
  text-decoration:underline;
}

.text_center{
	text-align:center;
}


.font_bold{
  font-weight:bold;
}


.font12{
  font-size:12pt;
}


.font13{
  font-size:13pt;
}


.font14{
  font-size:14pt;
}

.font15{
  font-size:15pt;
}

.font16{
  font-size:16pt;
}

.font17{
  font-size:17pt;
}

.font18{
  font-size:18pt;
}

.font19{
  font-size:19pt;
}

.font20{
  font-size:20pt;
}

p{
	font-size: 11px;
	font-feature-settings: "palt";
}


.clear{
  clear: both;
}


img{
  width:100%;
  height:auto;
}


body {
	font-family: "fot-tsukuardgothic-std", sans-serif;
	color: #000;
	line-height:150%;
	overflow-x: hidden;
	background:#fcfff1;
}





#logo_mioclip{
	position:fixed;
	z-index:999;
	top:25px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}


#logo_mioclip > a{
	width:230px;
	display:block;
}







#h_menu{
	position:fixed;
	z-index:9999;
	right:20px;
	top:20px;
}


.sub_grand_menu{
	width: 50px;
  -webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  transition: 1s cubic-bezier(0.78, .18, .34, .98);
}


.sub_grand_menu.sub_grand_menu_ani{
  position:fixed;
  top:0px;
  -webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  transition: 1s cubic-bezier(0.78, .18, .34, .98);
}


.sub_grand_menu .button-navi-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 1.6px;
    margin: 0px 0 0 -18px;
	background: #211916;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -ms-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

.sub_grand_menu .button-navi-icon:after, .sub_grand_menu .button-navi-icon:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 35px;
  height: 1.6px;
  background: #211916;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.sub_grand_menu .button-navi-icon:before {
  margin-top: -10px;
}

.sub_grand_menu .button-navi-icon:after {
  margin-top: 9px;
}


.sub_grand_menu .button-navi-icon.close:after, .sub_grand_menu .button-navi-icon.close:before {
  background: #000;
}



.sub_grand_menu_top{
  padding: 24px 0px;
  overflow:hidden;
}



.sub_grand_menu_top .sub_menu ul li{
  display: inline-block;
  padding:0 20px;
}




.sub_grand_menu .button-navi-icon.close:before, .sub_grand_menu .button-navi-icon.close:after {
  margin-top: 0;
}

.sub_grand_menu .button-navi-icon.close:after {
  margin-left: 0px;
}


.button-navi-icon.close:after {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.button-navi-icon.close:before {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


.button-navi-icon.close {
  background: transparent;
}



.button-close{
  position:absolute;
  padding: 24px 0px;
	width: 50px;
  top: 0;
  z-index:-9999;
}



#menu_index{
	position:fixed;
	top: 0;
	width:100%;
	height:100%;
	background:#fcfff1;
	z-index: 998;
	overflow: scroll;
}


.menu_box{
	width: 62%;
	overflow: scroll;
	position:absolute;
	top:50%;
	left:50%;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: space-between;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}



.menu_box > div{
	border-bottom:1px solid #000000;
	display:inline-block;
	width:48%;
	opacity:0;
}


.menu_box > div > a{
	padding:5px 0;
	display: block;
}

.menu_box > div > a:hover{
	padding:5px 0;
	opacity:0.4;
}



#menu_index.active .menu_box > div{
	opacity:1;
}

#menu_index.active .menu_box > div:nth-child(1){
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) .2s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) .2s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) .2s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) .2s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) .2s;
}

#menu_index.active .menu_box > div:nth-child(2){
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) .3s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) .3s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) .3s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) .3s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) .3s;
}

#menu_index.active .menu_box > div:nth-child(3){
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) .4s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) .4s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) .4s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) .4s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) .4s;
}


#menu_index.active .menu_box > div:nth-child(4){
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) .5s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) .5s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) .5s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) .5s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) .5s;
}


#menu_index.active .menu_box > div:nth-child(5){
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
}

#menu_index.active .menu_box > div:nth-child(6){
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) .7s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) .7s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) .7s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) .7s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) .7s;
}


#menu_index.active .menu_box > div:nth-child(7){
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
}


















#footer{
	background:#2d2d2d;
	padding-top:50px;
	padding-bottom:10px;
	text-align:center;
	margin-top:120px;
}

.footer_logo a{
	width:130px;
	display:inline-block;
}

.footer_sns{
	margin-top: 20px;
	}

.footer_sns > div{
	display:inline-block;
	vertical-align: middle;
	margin: 0 5px;

}

.footer_sns > div p{
	font-size:20pt;
	font-weight:bold;
	color:#fff;
}


.footer_sns > div a{
	width:36px;
	display:block;
}

.footer_copy {
	margin-top:20px;
}


.footer_copy p{
	color:#fff;
	font-weight: bold;
	font-size: 10pt;
}






#main_content{
	
}


.inner{
	max-width:1120px;
	padding: 0 80px;
	margin:0 auto;
}














.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 999999;
  opacity: 1;
  background: #fcfff1;
}



.loader
{
  position: absolute;
  display: inline-block;
  top:50%;
  left:50%;
  margin-left:-17px;
  margin-top:-30px;
  width: 36px;
  height: 36px;
  border-radius: 30px;
  border: 6px solid #000;
  border-right-color: transparent;
  -webkit-animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear;
}


@-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); opacity: 0.4; }
50%  { -webkit-transform: rotate(180deg); opacity: 1; }
100%   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); opacity: 0.4; }
50%  { -moz-transform: rotate(180deg); opacity: 1; }
100%   { -moz-transform: rotate(360deg); opacity: 0.4; }
}




.loading:after
{
	content:"";
	position: absolute;
	display: inline-block;
	top:50%;
	left:50%;
	margin-left:-35px;
	margin-top:-30px;
	width: 25px;
	height: 25px;
	border-radius: 30px;
	border: 6px solid #000;
}








/* TOP PAGE */


#top_slide{
	max-width: 1180px;
	padding: 0 120px;
	margin: 0 auto;
}






	#home #footer {
		margin-top: 60px;
	}
	

#top_slide{
	margin-top: 45px;
}


#top_slide .flexslider .slides > li {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    overflow: hidden;
}


.cate_banner_title{
	text-align:center;
		margin-bottom:0px;
}

.cate_banner_title p{
	font-size:28px;
	font-family: "poppins", sans-serif;
	font-weight: 800;
}




#cate_banner{
	max-width: 1180px;
	padding: 0 120px;
	margin: 20px auto 0;
}


.cate_banner_wrap{
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
}


#cate_banner .cate_banner_wrap .cate_banner_box{
	position:relative;
	width:24%;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	overflow:hidden;
}



#cate_banner .cate_banner_wrap .cate_banner_box a:hover{
	opacity:.6;
}



#cate_banner .cate_banner_wrap .cate_banner_box:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff;
}


.open #cate_banner .cate_banner_wrap .cate_banner_box:nth-child(1):after{
	height:0%;
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) .6s;
}

.open #cate_banner .cate_banner_wrap .cate_banner_box:nth-child(2):after{
	height:0%;
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) .8s;
}

.open #cate_banner .cate_banner_wrap .cate_banner_box:nth-child(3):after{
	height:0%;
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) 1s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) 1s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) 1s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) 1s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) 1s;
}

.open #cate_banner .cate_banner_wrap .cate_banner_box:nth-child(4):after{
	height:0%;
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	transition: .6s cubic-bezier(0.78, .18, .34, .98) 1.2s;
}







#cate_banner .cate_banner_wrap > div:nth-child(n+4){
	margin-top:1.2%;
}


.c_detail{
	position:absolute;
	left:15px;
	bottom:15px;
}


.c_text01 p{
	font-size:11px;
	background:#fff;
	display:inline-block;
	padding: 0 5px;
  border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.c_text02{
	margin-top:-3px;
}

.c_text02 p{
	font-size:13px;
	font-weight:bold;
	background:#fff;
	display:inline-block;
	padding: 0 5px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}





#main_banner{
	max-width: 1180px;
	padding: 0 120px;
	margin: 50px auto 0;
}


#main_banner .cate_banner_wrap .cate_banner_box{
	position:relative;
	width:49.3%;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	overflow:hidden;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: space-between;
}




#main_banner .cate_banner_wrap .cate_banner_box:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff;
}


#main_banner .cate_banner_wrap .cate_banner_box.active:after{
	height:0%;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
}





#main_banner .cate_banner_wrap > div:nth-child(n+3){
	margin-top:1.2%;
}

#main_banner .cate_banner_wrap .cate_banner_box a{
	width:50%;
	position:relative;
}


#main_banner .cate_banner_wrap .cate_banner_box a:hover{
	opacity:.6;
}


#main_banner .cate_banner_wrap .cate_banner_box a:last-child .c_detail{
	left:auto;
	right:15px;
	bottom:15px;
}






#main_banner .c_text01 p{
	font-size:13px;
}


#main_banner .c_text02 p{
	font-size:15px;
}



#main_banner .cate_banner_wrap .cate_banner_box a:last-child .c_text02 p{
	border-top-left-radius: 3px;
}




.top_detail{
	margin-top:60px;
}

.top_detail_note{
	text-align:center;
	margin-top:10px;
}

.top_detail_note p{
	font-size:18px;
}















.sp_img{
  display:none;
}





@media screen and (max-width: 640px) {
  
  .sp_img{
  display:block!important;
}

.pc_img{
  display:none!important;
	}
	
	
	

	
	
	#footer {
		padding-top: 30px;
	}
	
	
	.footer_sns > div p {
		font-size: 15pt;
	}
	
	
	.footer_sns > div a {
		width: 30px;
	}
	
	
	.footer_copy p{
		font-size: 6pt;
	}
	
	
	
	#logo_mioclip{
		top:15px;
	}
	
	#logo_mioclip > a {
		width: 150px;
	}
	
	
	#h_menu {
		right: 10px;
		top: 10px;
	}
	
	#menu_index {
	width: 100%;
	}
	
	
	.menu_box {
		top:70px;
		width:80%;
		display: block;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,0%);
		-moz-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
	}
	
	.menu_box > div {
    display: block;
    width: 100%;
	}
	
	
	
	.menu_box > div:last-child{
		border-bottom:none;
	}
	
	
	
	.button-close {
		width: 30px;
	}
	
	.sub_grand_menu .button-navi-icon:after, .sub_grand_menu .button-navi-icon:before {
		width: 30px;
	}
	
	.sub_grand_menu .button-navi-icon {
		width: 30px;
		margin: 0px 0 0 -15px;
	}
	
	
	.sub_grand_menu .button-navi-icon:before {
		margin-top: -8px;
	}
	
	.sub_grand_menu .button-navi-icon:after {
		margin-top: 7px;
	}
	
	
	.menu_index_inner {
		width: auto;
		height: 100%;
		overflow: scroll;
		margin: 0 auto;
		position: relative;
		top:auto;
		left: auto;
		margin-left: 0px;
		margin-top: 70px;
		padding:0 40px;
		display: inline-block;
	}
	
	
	
	
	
	
	
	
	
	.inner {
	padding: 0 30px;
	}
	
	
	
	
	
	
	
	/* TOP PAGE */
	
	
	
	#top_slide {
    max-width: 1180px;
    padding: 0 8px;
    margin: 65px auto 0;
	}
	
	#top_slide .flexslider .slides > li {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
	
	
	#home #footer {
		margin-top: 30px;
	}
	
	
	
	#cate_banner {
		margin: 13px auto 0;
	}
	
	.cate_banner_title p {
		font-size: 20px;
	}
		
	
	#cate_banner {
		padding: 0 8px;
	}
	
	
	#cate_banner .cate_banner_wrap .cate_banner_box {
		width: 49%;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	}
	
	
	#main_banner {
		padding: 0 8px;
		margin: 50px auto 0;
	}
	
	
	
	#main_banner .cate_banner_wrap .cate_banner_box {
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	}
	
	
	#main_banner .cate_banner_wrap > div:nth-child(n+2) {
		margin-top: 2%;
	}
	
	#cate_banner .cate_banner_wrap > div:nth-child(n+2) {
		margin-top: 2%;
	}
	
	
	
	.c_detail {
		left: 10px;
		bottom: 10px;
	}
	
	#main_banner .cate_banner_wrap .cate_banner_box a:last-child .c_detail {
    left: auto;
    right: 10px;
    bottom: 10px;
	}
	
	
	.c_text01 p {
		font-size: 9px;
	}
	
	.c_text02 p {
		font-size: 11px;
	}
	
	
	#main_banner .c_text01 p {
    font-size: 11px;
	}
	
	
	#main_banner .c_text02 p {
		font-size: 12px;
	}
	
	
	.top_detail {
		margin-top: 30px;
	}
	
	.top_detail_note p {
		font-size: 13px;
	}
	
	
	


}






@media screen and (max-width: 320px) {





}