@charset "utf-8";

/** 全般 **/

.home_purpose{background:url("../images/bg_dot1.png") repeat left top;background-size:4px 4px; -webkit-background-size:4px 4px;}
.home_store_news{background:url("../images/bg_dot1.png") repeat left top #fafafa;background-size:4px 4px; -webkit-background-size:4px 4px;}

h2.title{text-indent:100%;white-space:nowrap;overflow:hidden;}
.home_purpose h2{background:url("../images/title_home_purpose.png") no-repeat left bottom;background-size:145px 24px; -webkit-background-size:145px 24px;;width:145px;height:24px;margin:0 auto;}
.home_lineup h2{background:url("../images/title_home_lineup.png") no-repeat left bottom;background-size:196px 24px; -webkit-background-size:196px 24px;width:196px;height:24px;margin:0 auto;}
.home_strong h2{background:url("../images/title_home_strong.png") no-repeat left bottom;background-size:250px 24px; -webkit-background-size:250px 24px;width:250px;height:24px;margin:0 auto;}
.home_useful h2{background:url("../images/title_home_useful.png") no-repeat left bottom;background-size:276px 37px; -webkit-background-size:276px 37px;;width:276px;height:37px;margin:0 auto;}
.home_store h2{background:url("../images/title_home_store.png") no-repeat left bottom;background-size:89px 31px; -webkit-background-size:89px 31px;width:89px;height:31px;margin-bottom:10px;}
.home_news h2{background:url("../images/title_home_news.png") no-repeat left bottom;background-size:113px 31px; -webkit-background-size:113px 31px;width:113px;height:31px;}

/** メインビジュアル **/
.home_navigation{position: relative;height:480px;}
.home_navigation .train{ width:3840px;height: 100%;display: -webkit-flex;display: flex;position: absolute;top: 0;left: 0; }
.home_navigation .box{width:480px;height:100%;padding:20px 10px;-webkit-box-sizing: border-box;box-sizing: border-box;}
.home_navigation .box .in_box{height:100%;overflow: hidden;-webkit-border-radius: 20px; border-radius: 20px;background:none 50% 50% no-repeat;-webkit-background-size:cover;background-size:cover;position:relative;}
.home_navigation .box_01 .in_box{background-image:url(../../images/home_navigation_01.jpg);}
.home_navigation .box_02 .in_box{background-image:url(../../images/home_navigation_02.jpg);}
.home_navigation .box_03 .in_box{background-image:url(../../images/home_navigation_03.jpg);}
.home_navigation .box_04 .in_box{background-image:url(../../images/home_navigation_04.jpg);}
.home_navigation .box_05 .in_box{background-image:url(../../images/home_navigation_05.jpg);}
.home_navigation .box_06 .in_box{background-image:url(../../images/home_navigation_06.jpg);}
.home_navigation .box_07 .in_box{background-image:url(../../images/home_navigation_07.jpg);}

.home_navigation .text{text-align:left;min-height:196px;position:absolute;text-decoration: none;display:block;width:100%;left:0%;bottom:0%;background-color: rgba(255,255,255,0.75);-webkit-box-sizing: border-box;box-sizing: border-box;padding:20px 20px 75px;}
.home_navigation .text > *{display:block;}
.home_navigation .in_ttl{font-weight: bold;font-size:24px;margin-bottom:10px;}
.home_navigation .in_txt{line-height: 1.3;}
.home_navigation .link{font-weight:bold;position:absolute;bottom:30px;left:20px;width:120px;padding:5px 0;text-align:center;;text-decoration: none;font-size: 13px;-webkit-border-radius: 5px;border-radius: 5px;}
.home_navigation .box .link{color:#fff;}
.home_navigation .box_01 .link{background-color:#40b191;}
.home_navigation .box_02 .link{background-color:#92cd6d;}
.home_navigation .box_03 .link{background-color:#ebc240;}
.home_navigation .box_04 .link{background-color:#c1d53a;}
.home_navigation .box_05 .link{background-color:#6180e3;}
.home_navigation .box_06 .link{background-color:#e95479;}
.home_navigation .box_07 .link{background-color:#7d61e3;}

.home_navigation .train{ animation: infiniteTrain 35s linear infinite; will-change: transform;transform: translate3d(0, 0, 0); }
@keyframes infiniteTrain {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-3360px);
  }
}

/** メインビジュアル **/
.home_visual{position: relative;max-height:650px;}
.home_visual:before{ padding-top: 125%;content:"";display: block; }
.home_visual .area{ position: absolute;top: 0;left: 0;width: 100%;height: 100%; }
.home_visual .box{display:none;position:absolute;width:100%;height:100%;background:none 50% 50% no-repeat;-webkit-background-size:cover;background-size:cover;}
.home_visual .box:first-child{display:block;}
.home_visual .box_01{background-image:url(../../images/home_navigation_01.jpg);}
.home_visual .box_02{background-image:url(../../images/home_navigation_02.jpg);}
.home_visual .box_03{background-image:url(../../images/home_navigation_03.jpg);}
.home_visual .box_04{background-image:url(../../images/home_navigation_04.jpg);}
.home_visual .box_05{background-image:url(../../images/home_navigation_05.jpg);}
.home_visual .box_06{background-image:url(../../images/home_navigation_06.jpg);}
.home_visual .box_07{background-image:url(../../images/home_navigation_07.jpg);}

.home_visual .text{text-align:left;min-height:150px;position:absolute;text-decoration: none;display:block;width:100%;left:0%;bottom:0%;background-color: rgba(255,255,255,0.75);-webkit-box-sizing: border-box;box-sizing: border-box;padding:20px 20px 75px;}
.home_visual .text > *{display:block;}
.home_visual .in_ttl{font-weight: bold;font-size:24px;margin-bottom:10px;}
.home_visual .in_txt{line-height: 1.3;}
.home_visual .link{font-weight:bold;position:absolute;bottom:30px;left:20px;width:120px;padding:5px 0;text-align:center;;text-decoration: none;font-size: 13px;-webkit-border-radius: 5px;border-radius: 5px;}
.home_visual .box .link{color:#fff;}
.home_visual .box_01 .link{background-color:#40b191;}
.home_visual .box_02 .link{background-color:#92cd6d;}
.home_visual .box_03 .link{background-color:#ebc240;}
.home_visual .box_04 .link{background-color:#c1d53a;}
.home_visual .box_05 .link{background-color:#6180e3;}
.home_visual .box_06 .link{background-color:#e95479;}
.home_visual .box_07 .link{background-color:#7d61e3;}

.home_visual .arrow p{position:absolute;top:calc(50% - 20px);z-index:60;width:40px;height:60px;margin-top:-30px;text-indent:150%;overflow:hidden;white-space:nowrap;background-color:rgba(255, 255, 255, 0.8);-webkit-border-radius: 4px;border-radius: 4px;}
.home_visual .arrow p::after { content: "▲"; color: #000; display: block; font-size:18px;line-height:1; width: 20px; height: 20px; position: absolute; top: 50%;left: 50%; }
.home_visual .next{right:10px;}
.home_visual .next::after{transform: rotate(90deg) translate(-50%,50%);margin-top: -30px;}
.home_visual .prev{left:10px;}
.home_visual .prev::after{transform: rotate(-90deg) translate(-50%,50%);margin-top: 8px;margin-left: -20px;}

.home_visual ol{z-index:60;position:absolute;bottom:0;left:0;width:100%;-webkit-box-sizing: border-box;box-sizing: border-box;padding:0 10px;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;justify-content: right;}
.home_visual ol li{padding:0 3px 5px;color:#e8c309;text-align:center;font-size:18px;line-height:1;}
.home_visual ol li.active{color:#333;}

/**目的から探す*****/

.home_purpose h2{margin-bottom:20px;}
.home_purpose .wrapper{padding:40px 20px;}
.home_purpose .area{max-width:440px;margin-right:auto;margin-left:auto;}
.home_purpose .box{margin-bottom:20px;-webkit-border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;overflow:hidden;position:relative;}
.home_purpose .box .img{ width: 100%;position: relative; }
.home_purpose .box .img:before{ padding-top: 68%;content:"";display: block; }
.home_purpose .box .img span{ display:block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:none 50% 50% no-repeat;-webkit-background-size:cover;background-size:cover; }
.home_purpose .box_01 .img span{background-image:url(../../images/home_bg_purpose_01.jpg);}
.home_purpose .box_02 .img span{background-image:url(../../images/home_bg_purpose_02.jpg);}
.home_purpose .box_03 .img span{background-image:url(../../images/home_bg_purpose_03.jpg);}
.home_purpose .box_04 .img span{background-image:url(../../images/home_bg_purpose_04.jpg);}

.home_purpose .box .in_box{display:block;color:#fff;position:absolute;top:0;left:0;width:60%;max-width:250px;height:100%;-webkit-box-sizing: border-box;box-sizing: border-box;padding:30px 20px;}
.home_purpose .box_01 .in_box{background-color:rgba(64,177,154,0.9);}
.home_purpose .box_02 .in_box{background-color:rgba(119,193,72,0.9);}
.home_purpose .box_03 .in_box{background-color:rgba(233,84,121,0.9);}
.home_purpose .box_04 .in_box{background-color:rgba(235,194,64,0.9);}
.home_purpose .box_04{margin-bottom:0;}
.home_purpose .box h3{font-size:18px;margin-bottom:10px;font-weight:bold;}
.home_purpose .box .txt{font-size:14px;}
.home_purpose .box .link{margin-top:20px;}
.home_purpose .box .link span{display:inline-block;padding:2px 5px;border:1px solid #fff;text-align:center;color:#fff;font-size:13px;}

/*ゲーム機器ラインナップ*/
.home_lineup{background:url("../images/bg_lineup.jpg") repeat left top;background-size:300px 300px; -webkit-background-size:300px 300px;animation: bgScroll 18s linear infinite;}

@keyframes bgScroll {
	from {
	background-position: 0 50%;
	}
	to {
	background-position: -900px 50%;
	}
}

.home_lineup h2{margin-bottom:20px;}
.home_lineup .wrapper{padding:40px 20px 20px;}
.home_lineup ul{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px;}
.home_lineup li{width:50%;padding:0 10px;-webkit-box-sizing: border-box;box-sizing: border-box;margin-bottom:20px;position:relative;}
.home_lineup li a{display:block;position:relative;background-color:#fff;height:100%;-webkit-border-radius: 10px; border-radius: 10px;overflow:hidden;}
.home_lineup li .image{width: 100%;position: relative;margin-bottom:5px;}
.home_lineup li .image:before{ padding-top: 100%;content:"";display: block; }
.home_lineup li .image span{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url("../../images/sample_image.jpg") 50% 50% no-repeat;background-size:contain; -webkit-background-size:contain;}
.home_lineup li .name{font-weight:bold;text-align:center;font-size:15px;padding:2px 5px 5px;}
.home_lineup li::after{content:"";display:block;bottom:0;left:0;width:100%;height:4px;background-color:#000;}

.home_lineup li:nth-child(8n+1)::after{ background-color: rgb(64, 177, 145, 0.9); }
.home_lineup li:nth-child(8n+2)::after { background-color: rgb(119, 193, 71, 0.9); }
.home_lineup li:nth-child(8n+3)::after { background-color: rgb(205, 221, 97, 0.9); }
.home_lineup li:nth-child(8n+4)::after { background-color: rgb(234, 194, 64, 0.9); }
.home_lineup li:nth-child(8n+5)::after { background-color: rgb(233, 83, 121, 0.9); }
.home_lineup li:nth-child(8n+6)::after { background-color: rgb(125, 97, 226, 0.9); }
.home_lineup li:nth-child(8n+7)::after { background-color: rgba(128, 0, 128, 0.9); }
.home_lineup li:nth-child(8n)::after { background-color: rgba(255, 20, 147, 0.9); }

/**ブログ*****/
.home_news .wrapper{background-color:#fff;padding:40px 20px;}
.home_news .title{margin-bottom:10px;position:relative;}
.home_news .title h2{text-indent:150%;overflow:hidden;white-space:nowrap;}
.home_news .title a{position:absolute;background-color:#40b191;display:block;right:0;top:3px;font-size:12px;-webkit-border-radius: 3px; border-radius: 3px;padding:4px;width:100px;text-align:center;color:#fff;text-align:center;}
.home_news .txt{margin-bottom:20px;}
.home_news ul{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px;}
.home_news li{width:50%;-webkit-box-sizing: border-box;box-sizing: border-box;margin-bottom:20px;padding:0 10px;}
.home_news li a{display:block;-webkit-border-radius: 10px; border-radius: 10px;overflow:hidden;}
.home_news li .img{width: 100%;position: relative;margin-bottom:10px;overflow: hidden; }
.home_news li .img:before{ padding-top: 66.66%;content:"";display: block; }
.home_news li .img span{ display:block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(../../images/sample_image.jpg) 50% 50% no-repeat;-webkit-background-size:cover;background-size:cover; }
.home_news li .ttl{font-weight: bold;margin-bottom:10px;font-size:15px;}
.home_news li time{font-size: 12px;}
.home_news p.cate{font-size: 10px;margin-bottom:5px;color:#fff;padding:2px 4px;display:inline-block;}

.cate_01,.cate_08{background-color:#40B191;}
.cate_02,.cate_09{background-color:#77C148;}
.cate_03,.cate_010{background-color:#CDD03F;}
.cate_04{background-color:#EBC240;}
.cate_05{background-color:#E95479;}
.cate_06{background-color:#7D61E3;}
.cate_07{background-color:#5479e9;}
.cate_00{background-color:#99ccff;}
.cate_011{background-color:#c490bf;}
.cate_012{background-color:#f19149;}

.home_news .btn a{display:block;text-decoration:none;background:#40b191;color:#fff;text-align:center;padding:10px 0;-webkit-border-radius:24px;border-radius:24px;}

.home_news .txt,
.home_news .title a,
.home_news li,
.home_news .btn{opacity:0;transform: translateY(10px);-webkit-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}

.home_news.attached .txt,
.home_news.attached .title a,
.home_news.attached li,
.home_news.attached .btn{opacity:1;transform: translateY(0px);}

.home_news li:nth-child(1){transition-delay:0.2s}
.home_news li:nth-child(2){transition-delay:0.3s}
.home_news li:nth-child(3){transition-delay:0.4s}
.home_news li:nth-child(4){transition-delay:0.5s}
.home_news li:nth-child(5){transition-delay:0.6s}
.home_news li:nth-child(6){transition-delay:0.7s}
.home_news .tn{transition-delay:0.8s}

/**OKASHOの強み*****/
.home_strong .wrapper{padding:40px 20px;border-top:1px solid #cdcdcd;}
.home_strong .area{padding-top:20px;max-width:360px;margin-right:auto;margin-left:auto;}
.home_strong .box{transform: scale(0);-webkit-transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);margin-bottom:20px;text-align:center;}
.home_strong .box:last-child{margin-bottom:0;}
.home_strong p.image{margin:0 auto 10px;position:relative;display:inline-block;}
.home_strong p.image::after{background: url(../../images/strong_frame.png) no-repeat 50% 50%;position: absolute;top: 0;left: 0%;width: 100%;height: 100%;background-size: 100% 100%;content: "";}
.home_strong h3{text-align:center;font-weight:bold;font-size:16px;}
.home_strong p.link{margin-top:10px;}
.home_strong p.link a{font-size:11px;margin-right:auto;margin-left:auto;padding:4px 10px;display:block;width:110px;-webkit-border-radius: 4px;border-radius: 4px;background-color:#ffc148;color:#333;font-weight:bold;}

.home_strong.attached .box{transform: scale(1);}

/**空きスペース有効活用*****/
.home_useful{background:url("../../images/bg_home_useful.jpg") no-repeat left top;background-size:cover; -webkit-background-size:cover; }
.home_useful .wrapper{padding:60px 20px; }
.home_useful .hd_text{padding:20px 0;font-size:13px;}
.home_useful .rail{margin:0 -20px 40px;height:220px;overflow:hidden;position:relative;white-space: nowrap;}
.home_useful .train{width:100%;height:220px;position:absolute;top:0;left:0;display:-webkit-flex;display:flex;}
.home_useful .box{width:220px;height:220px;margin-right:20px;flex-shrink: 0;-webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;overflow:hidden;}
.home_useful .box a{display:block;height:100%;position:relative;overflow:hidden;}
.home_useful .box .image{width:100%;height:100%;background:url(../../images/sample_image.jpg) no-repeat 50% 50%;-webkit-background-size:cover;;background-size:cover;}
.home_useful .box .name{font-weight:bold;width:100%;position:absolute;bottom:0;left:0;text-align:center;font-size:13px;line-height:20px; text-overflow: ellipsis;overflow-x:hidden;height:34px;padding:7px 24px;color:#fff;-webkit-box-sizing: border-box;box-sizing: border-box;background:#000;display:block;}
.home_useful .box .name::after{content:"";display:block;width:7px;height:11px;position:absolute;right:12px;top:12px;background:url(../../images/icon_arrow_w.png) no-repeat 50% 50%; }
.home_useful .btn a{display:block;background: #000;color:#fff; border:3px solid #000;text-align:center;padding:10px 0;font-weight:bold;width:200px;margin:0 auto;border-radius: 24px;}

@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1920px);
  }
}

.home_useful h2,
.home_useful .hd_text,
.home_useful .btn{opacity:0;transform: translateY(10px);-webkit-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}

.home_useful.attached h2,
.home_useful.attached .hd_text,
.home_useful.attached .btn{opacity:1;transform: translateY(0px);}

.home_useful .train{opacity:0;-webkit-transition: all 0.6s ease-in-out 0.8s;transition: all 0.6s ease-in-out 0.8s;}
.home_useful.attached .train{opacity:1;animation: infiniteScroll 24s linear infinite;}

.home_useful.attached h2{transition-delay:0s}
.home_useful.attached .hd_text{transition-delay:0.2s}
.home_useful.attached .btn{transition-delay:1.2s}

/**OKASHO直営店*****/
.home_store_news .wrapper{padding:40px 20px 30px;}

.home_store{padding:0 0 20px;}
.home_store .area{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px;}
.home_store .box{width:calc(50% - 20px);background-color:#fff;margin:0 10px 20px;-webkit-border-radius: 5px;border-radius: 5px;overflow:hidden;position:relative;box-shadow:0 10px 10px rgba(0,0,0,0.2);}
.home_store .box:last-child{margin-bottom:0;}
.home_store .box .image{ width: 100%;position: relative;}
.home_store .box .image::before{ padding-top: 56.25%;content:"";display: block; }
.home_store .box .image span{ display:block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:none 50% 50% no-repeat;-webkit-background-size:cover;background-size:cover;}
.home_store .box .text{padding:10px 10px 65px;background-color:#fff;}
.home_store .box .text .name{font-size:15px;text-align:center;display: block;font-weight: bold;}
.home_store .box .text .prefectures{background-color:#000;color:#fff;font-weight: bold;position: absolute;top:-35px;left:5px;font-size:12px;-webkit-border-radius: 2px; border-radius: 2px;padding: 5px 10px;display:inline-block;text-align:center;}
.home_store .box .text .link{display:block;width:180px;height:34px;position:absolute;bottom:20px;left:50%;margin-left:-90px;}
.home_store .box .text .link a{font-size:13px;padding:7px 5px;font-weight:bold;text-align:center;-webkit-border-radius: 5px; border-radius: 5px;background: #ffd800;display: block;}
.home_store .box .text .link a::after{content: "▶";font-size: 12px;line-height: 22px;height: 22px;margin-top: -10px;right: 5px;top:50%;position: absolute;}
.home_store .box::after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:4px;background-color: #ffc000;}

.home_store .explain,
.home_store .box{opacity:0;transform: translateY(10px);-webkit-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.home_store.attached .explain,
.home_store.attached .box{opacity:1;transform: translateY(0px);}

.home_store .explain{transition-delay:0s;}
.home_store .box:nth-child(1) {transition-delay:0.4s;}
.home_store .box:nth-child(2) {transition-delay:0.5s;}
.home_store .box:nth-child(3) {transition-delay:0.6s;}
.home_store .box:nth-child(4) {transition-delay:0.7s;}


/** バナー **/
.home_banner{margin:0 -5px;padding-top:40px;}
.home_banner ul{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.home_banner ul li{width:50%;-webkit-box-sizing: border-box;box-sizing: border-box;padding:0 5px 10px;}
.home_banner ul li a{display:block;text-align:center;}