@charset "utf-8";
body {
	margin: 0;
	padding: 0;
	font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
	font-size:100%;
    font-weight: 500;
	line-height:200%;
	color:#000;
	animation: bgchange 15s ease infinite;
    overflow-x: hidden;
}
@keyframes bgchange{
      0%   {background:rgba(0,100,255,0.05);}
      25%  {background:rgba(50,205,255,0.05);}
      50%  {background:rgba(95,191,2,0.05);}
      75%  {background:rgba(255,214,0,0.05);}
      90%  {background:rgba(229,0,18,0.05);}
      100%  {background:rgba(0,100,255,0.05);}
}
		  
/* Default Clear */
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
    font-weight: 500;
	list-style:none;
	box-sizing:border-box;
}
img { border: none; vertical-align:bottom;}

#wrapper {overflow-x: hidden;}

/* Link */
a:link {color:#06F; outline:none; }
a:visited {color:#06F;}
a:hover {color: #333;}
@media only screen and (min-width:750px){
    a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
}

/* Materiaru Icon */
i.material-icons { vertical-align: middle;}

/* pc and sp change tag */
.pc {display:block;}
.sp {display:none;}

/* anchor */
.anchor { display: block; position: relative;}
.anchor a { position:absolute; top: -150px;}


/*--------------------------------------------------------
  HEADER
--------------------------------------------------------*/
#header { position: fixed; top: 0; width: 100%; z-index: 99999999999999999999;}

/* active1 */
.active1_waku { overflow: hidden;}
#header.active1 h1 { display:none;}
#header.active1 .nav_btn {
    position: absolute; top:0; right:0; cursor: pointer;
    width:85px; height: 85px; transition: all .4s;
    z-index: 999999999999999;
}
#header.active1 .nav_btn span {
    display: inline-block;
    position: absolute; left:0; right: 0; margin:auto;
    width:40px; height: 4px;
    background: #000000;
    border-radius: 4px;
    transition: all .4s;
}
#header.active1 .nav_btn span:nth-of-type(1) {top:25px;}
#header.active1 .nav_btn span:nth-of-type(2) {top:40px;}
#header.active1 .nav_btn span:nth-of-type(3) {top:55px;}
#header.active1 .nav_btn.active span:nth-of-type(1) { top:40px; transform:rotate(-45deg);}
#header.active1 .nav_btn.active span:nth-of-type(2) { opacity: 0;  left: 50%; animation: active-menu05-bar02 .8s forwards;}
#header.active1 .nav_btn.active span:nth-of-type(3) { top:40px; transform:rotate(45deg);}
#header.active1 #nav_cont {
    display:none;
	position:fixed; top:0; left: 0; z-index: 99999999;
	padding: 10%;
	width: 100vw;
	height: 100vh;
	background:#000 url("../img/nav_bg.jpg") no-repeat center center;
	background-size:cover;
}
#header.active1 #nav_cont ul li+li { margin-top: 20px;}
#header.active1 #nav_cont ul li a { position: relative; color: #222; text-decoration: none;}
#header.active1 #nav_cont ul li a b {
	margin-right: 20px;
	font-family:"Barlow", sans-serif;
	font-size: 150%;
}
#header.active1 #nav_cont ul li a small { position: relative; top:-5px; font-size:80%; }
#header.active1 #nav_cont ul li a::after {
	display: block; clear: both; content:"";
	position: absolute; top:0; bottom: 0; left: -30px;
	margin: auto; width:0; height: 2px;
	background: #222;
	transition: all 0.5s ease;
}
#header.active1 #nav_cont .sns { padding:20px 0; overflow:hidden;}
#header.active1 #nav_cont .sns p { float: left;}
#header.active1 #nav_cont .sns p+p { margin-left:10px;}
#header.active1 #nav_cont .sns a { display: block; width: 30px; height: 30px;	text-indent: -9999px;}
#header.active1 #nav_cont .sns a.sns_in { background: url("../img/sns_icon1.svg") no-repeat;}
#header.active1 #nav_cont .sns a.sns_yt { background: url("../img/sns_icon2.svg") no-repeat;}
#header.active1 #nav_cont .btn_shop {
	margin-top: 20px;
	max-width: 200px;
	transition: .5s;
	background:linear-gradient(to right, #4762CF, #1985F8, #66D5DC);
	z-index: 9999;
}
#header.active1 #nav_cont .btn_shop a {
	display: block;
	padding:12px 20px;
	color: #fff;
	text-align: center;
	font-weight: 700;
	text-indent: 30px;
	text-decoration: none;
	background:url("../img/cart_w.svg") no-repeat 15px center;
	background-size: 30px auto;
}

/* active2 */
#header.active2 { height: 85px; background:rgba(255,255,255,0.95); border-bottom: 1px solid #ddd; z-index: 9999999999;}
#header.active2 h1 { display:block; position: relative; z-index: 99999;}
#header.active2 h1 a {
	display: block;
	width:150px; height:80px;
	text-indent: -9999px;
	background:url("../img/logo2.svg") no-repeat 15px center;
	background-size:90% auto;
}
#header.active2 .nav_btn  { opacity: 0; z-index:-1;}
#header.active2 #nav_cont { display: block !important;}
#header.active2 #nav_cont ul {  position: absolute; top:20px; right:20px; z-index: 999999999;}
#header.active2 #nav_cont ul li { float: left; position: relative; padding: 0 15px; text-align: center;}
#header.active2 #nav_cont ul li a { display: block; text-decoration: none; color: #000; font-family:'Barlow', sans-serif; line-height:100%;}
#header.active2 #nav_cont ul li small { 
	display: block;
	font-size:75%;
	font-family:  "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
	color: #555;
    margin-top:5px;
}
#header.active2 #nav_cont ul li a.active,
#header.active2 #nav_cont ul li a.active small { color: #0064ff;}
#header.active2 .btn_shop { display: none;}
#header.active2 .sns { display: none;}
#header.active2 {
    animation-name: fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
#header.active2_off {
    animation-name: fadeUpAnime2;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeUpAnime {
    from { opacity: 0; transform: translateY(-100px);}
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpAnime2 {
    from { opacity: 0; transform: translateY(-100px);}
    to { opacity: 1; transform: translateY(0); }
}
@media only screen and (min-width:750px){
    #header.active1 #nav_cont ul li a:hover::after {
        display: block; clear: both; content:"";
        position: absolute; top:0; bottom: 0; left: -30px;
        margin: auto; width: 20px; height: 2px;
        background: #222;
    }
    #header.active1 #nav_cont .btn_shop:hover { 
        background-size: 250% auto;
        background-position: right center;
    }
    #header.active2 #nav_cont ul li a:hover,
    #header.active2 #nav_cont ul li a:hover small { color: #0064ff;}
}


/*--------------------------------------------------------
  CONTENT
--------------------------------------------------------*/
#content {}

/* BUTTON */
#content .more_btn {
    margin: auto; padding: 5px; max-width: 400px; 
    background-image: linear-gradient(90deg, #48acff, #9d0fae);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.05);
}
#content .more_btn a {
    position: relative;
    display: block;
    padding:30px 20px 10px;
    font-weight: 600;
    color:#000;
    text-align: center;
    text-decoration: none;
    background: #fff url("../img/arrow.png") no-repeat center 3px;
    background-size: 25px auto;
    border-radius: 100px;
    z-index: 1;
}
@media only screen and (min-width:750px){
    #content .more_btn a { transition: .3s; }
    #content .more_btn a::before {
        position: absolute; top: 0; left:-5px;
        margin: auto; content: "";
        width:calc(100% + 10px); height: 100%;
        background-image: linear-gradient(90deg, #48acff, #9d0fae);
        border-radius: 100px;
        z-index: -1;
        transform-origin: 50% 0%;
        transform: scaleY(0);
        transition: transform ease .3s;
    }
    #content .more_btn a:hover { color: #fff; padding:20px;}
    #content .more_btn a:hover::before {
      transform-origin: 50% 100%;
      transform: scaleY(1);
    }
}



.btn_box { text-align: center;}
.btn  { margin:1% 2%; width:160px;}
.btn a {
    display: block;
    height: 45px;
    color: #0064FF;
    line-height: 45px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    position: relative;
}
.btn:hover svg rect { stroke:#000;}
.btn svg { position: absolute; top: 0; left: 0; width: 100%;}
.btn svg rect, .btn svg path, .btn svg polyline {  fill: none; stroke:#0064FF; stroke-width:3;}
.btn svg rect {
  stroke-dasharray: 400, 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
.btn:hover svg rect {
  stroke-width:3;
  stroke-dasharray:45, 264;
  stroke-dashoffset:48;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
.btn.b1 { float: none; margin: auto; }
.btn.b2 { display: inline-block; float: none;}


/*--------------------------------------------------------
  FOOTER
--------------------------------------------------------*/
#footer { 
	padding:50px 0 30px;
	background:url("../img/slash_top.svg")no-repeat top center;
	background-size: 100% auto;
}
#footer .f_box { display:flex; margin: auto; width:90%; max-width:1000px;}
#footer .address { padding: 10px 0; width:calc(100% - 80px);}
#footer .sns { padding:20px 0; overflow:hidden;}
#footer .sns div { font-family:"Barlow", sans-serif; text-align: center; font-size:90%;}
#footer .sns p { /*float: left;*/ margin:5px auto; width: 30px;}
#footer .sns a { display: block; width: 30px; height: 30px;	text-indent: -9999px;}
#footer .sns a.sns_in { background: url("../img/sns_icon1.svg") no-repeat; background-size: 100% auto;}
#footer .sns a.sns_yt { background: url("../img/sns_icon2.svg") no-repeat;}
#footer .copy { text-align:left;}


/*--------------------------------------------------------
  PAGE TOP
--------------------------------------------------------*/
#pagetop,
#pagetop a { display:block; width: 20px; height: 80px; }
#pagetop { position: fixed; bottom:20px; right:20px; z-index: 999999;}
#pagetop a { text-indent: -9999px; background: url("../img/pagetop.svg") no-repeat center center; background-size: 100% auto;}
@media only screen and (min-width:750px){
    #pagetop a:hover { opacity: 0.5;}
}