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

/*------------------------------index page------------------------------*/
#index-page{width:100%; height:auto; padding-top:0px;}/*ヘッダ高さ分padding*/

#main-visual{width:100%; height:380px; position:relative;}
/*main visual set*/
#main-visual .slider-wrap {height:width:100%; height:380px; margin: 0 auto; position: relative; overflow: hidden;/* border:1px solid #f00;*/}
#main-visual .slider-wrap ul {width:100%;height:380px;margin: 0;padding: 0;}
#main-visual .slider-wrap ul li {width:100%; height:380px; background-size: cover;position: absolute;background-position:center;animation-iteration-count: infinite;animation-duration: 24s;/*total duration*/}
#main-visual .slider-wrap ul li:nth-child(1) {background:url(../../img/top/main_visual_01.jpg); animation-name: slider-zoomin; animation-delay: -3s; background-size: cover;}
#main-visual .slider-wrap ul li:nth-child(2) {background-image: url(../../img/top/main_visual_02.jpg); animation-name: slider-zoomin; opacity: 0; animation-delay: 3s;background-size: cover;}
#main-visual .slider-wrap ul li:nth-child(3) {background-image: url(../../img/top/main_visual_03.jpg); animation-name: slider-zoomin; opacity: 0; animation-delay: 9s;background-size: cover;}
#main-visual .slider-wrap ul li:nth-child(4) {background-image: url(../../img/top/main_visual_04.jpg); animation-name: slider-zoomin; opacity: 0; animation-delay: 15s;background-size: cover;}
#main-visual .slider-wrap ul li img {width: 130%;}

/*main visual animation*/
@keyframes slider-zoomin {
  0% {opacity: 0;transform: scale(1);}
  10% {opacity: 1;}
  25% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;transform: scale(1.3);}
}


#main-visual .btn-movie{width:248px;height:64px; text-align:center; position:absolute;margin:auto; top:70%; left:0; right:0;background:url(../../img/top/btn_bg_movie.png) no-repeat; background-position:center; background-size:cover;}
#main-visual .btn-movie img{width:100%;height:auto;}
#main-visual .btn-movie a{width:248px;height:64px; }
#main-visual .catch{font-size:6.0vw; font-weight:bold;color:#fff; text-align:center;line-height:140%;text-shadow: 0px 0px 3px #000;position:absolute;margin:auto; top:40%; left:0; right:0;}


h2{font-size:6vw;font-weight:bold;}

.bg-photo-top{background:url(../../img/top/store_format_visual.jpg) no-repeat; background-position:center; background-size:cover;}

/* -----------CAFE & Convenience store ----------- */
#c_and_c_store{}
#c_and_c_store .inner-full h2{text-align:left;}
#c_and_c_store .inner-full .lead-ccs{width:80%; height:auto; margin:40px auto 40px auto; float:none;}
#c_and_c_store .inner-full figure{width:100&;height:auto;margin:0 0 20px 0;float:none;}
#c_and_c_store .inner-full .lead-ccs img,
#c_and_c_store .inner-full figure img{width:100%;height:auto;}

/* -----------scene----------- */
#scene{}
#scene >.inner-full{height:auto; position:static;}
#scene .inner-full h2{text-align:center;}
#scene .inner-full .scene-box-right{width:100%; height:auto; right:0;position: statice; z-index:2;}
#scene .inner-full .scene-box-right p{ margin:20px 0; }
#scene .inner-full figure{width:100%;height:auto;position: static; left:0; z-index:4;}
#scene .inner-full figure img{width:100%;height:auto;}


/* -----------storeformat----------- */
#storeformat{height:auto;}
#storeformat .inner-full h2{margin-top:0px; text-align:center;text-shadow: 1px 1px 0px #fff;}

#storeformat .inner-full ul{width:100%;margin:40px auto 40px auto;}
#storeformat .inner-full ul li{width:100%; height:auto;margin:20px auto; float:none;}
#storeformat .inner-full ul li .cisca-logo{width:80%; height:auto;}
#storeformat .inner-full ul li .ministop-logo{width:40%; height:auto;}

#storeformat .inner-full ul li .cisca-logo img,
#storeformat .inner-full ul li .ministop-logo img{width:100%;height:auto;}

/* -----------benefits----------- */
#benefits{}
#benefits .inner-full .wrap-80per{width:100%;margin:0 auto;}
#benefits .inner-full .wrap-80per h2{width:100%; text-align:center; margin:0 0 0 0;}
#benefits .inner-full .wrap-80per .lead-benefit{width:80%;height:auto; margin:40px auto 40px auto;}
#benefits .inner-full .wrap-80per figure{width:100%;height:auto; float:none;}

#benefits .inner-full ul{width:100%;margin:40px 0 40px 0;}
#benefits .inner-full ul li{width:45%; height:auto;margin:0 2.5%; float:left;}

#benefits .inner-full .wrap-80per .lead-benefit img,
#benefits .inner-full .wrap-80per figure img,
#benefits .inner-full ul li img{width:100%;height:auto;}


/* -----------case----------- */
#case{}
#case .inner-full h2{ text-align:center;}
#case .inner-full ul{width:44%;margin:20px 3%; float:left;}
#case .inner-full ul li{width:100%; height:auto;margin:5px 0; float:left;}
#case .inner-full ul li img{width:100%;height:auto;}

/* -----------topics----------- */
#topics{}
#topics .inner-full h2{ text-align:center;}
#topics .inner-full ul{margin:0;padding:0;}
#topics .inner-full ul li{width:100%; height:auto; margin:20px auto 0 auto;}

#topics .inner-full .topics-photo{width:100%;height:auto;margin:0px auto 20px auto; float:none; box-sizing:content-box; border:1px solid #946b45;}
#topics .inner-full .topics-photo img{width:100%;height:auto;}
#topics .inner-full .column-wrap{width:100%;height:auto; float:none;}
#topics .inner-full .column-wrap h3{font-size:1.8rem;font-weight:bold; margin-bottom:1rem;}
#topics .inner-full .column-wrap p{font-size:1.4rem;}
.btn-zoom{text-underline-position:under; float:right;}
.btn-zoom a{ text-decoration:underline;}

.btn-download{text-underline-position:under; float:right;}
.btn-download a{ text-decoration:underline;}
.btn-zoom a:hover,
.btn-download a:hover{color:#c7996d;}

.btn-zoom img{width:auto;height:2rem; vertical-align:middle; margin-right:0.8rem;}
.btn-download img{width:auto;height:2rem; vertical-align:middle; margin-right:0.8rem;}

.btn-more{width:188px;height:36px; margin:0 auto;}
.btn-more img{width:100%;height:auto;}

/* helper calss */
/*flex box*/
#storeformat .inner-full ul li,
#benefits .inner-full ul li,
#main-visual .btn-movie a,
.flex-box{
display: -webkit-flex;
display: flex;
-webkit-align-items: center; /*Vertical middle Safari */
align-items: center; /* Vertical middle */
-webkit-justify-content: center; /*side middle Safari */
justify-content: center; /*side middle*/

}
/*------------------------------contents------------------------------*/

@media only screen and (min-width: 481px) and (max-width: 980px){

#main-visual .catch{font-size:2.6rem; font-weight:bold;color:#fff; text-align:center;line-height:140%;text-shadow: 0px 0px 3px #000;position:absolute;margin:auto; top:40%; left:0; right:0;}
h2{font-size:2.8rem;font-weight:bold;}

/* -----------CAFE & Convenience store ----------- */
#c_and_c_store{}
#c_and_c_store .inner-full h2{text-align:center;}
#c_and_c_store .inner-full .lead-ccs{width:50%; height:auto; margin:40px auto 0 auto; float:none;}
#c_and_c_store .inner-full figure{width:100%;height:auto;margin:20px 0 20px 0;float:right;}
#c_and_c_store .inner-full .lead-ccs img,
#c_and_c_store .inner-full figure img{width:100%;height:auto;}

/* -----------scene----------- */
#scene{}
#scene >.inner-full{height:auto; position:static;}
#scene .inner-full h2{text-align:center;}
#scene .inner-full .scene-box-right{width:100%; height:auto; right:0;position: static; z-index:2;}
#scene .inner-full .scene-box-right p{ margin:40px 0; }
#scene .inner-full figure{width:100%;height:auto;position: static; left:0; z-index:4;}
#scene .inner-full figure img{width:100%;height:auto;}

/* -----------storeformat----------- */
#storeformat{height:auto;}
#storeformat .inner-full h2{margin-top:40px; text-align:center;text-shadow: 1px 1px 0px #fff;}

#storeformat .inner-full ul{width:100%;margin:80px auto 80px auto;}
#storeformat .inner-full ul li{width:45%; height:auto;margin:0 2.5%; float:left;}
#storeformat .inner-full ul li .cisca-logo{width:100%; height:auto;}
#storeformat .inner-full ul li .ministop-logo{width:50%; height:auto;}

#storeformat .inner-full ul li .cisca-logo img,
#storeformat .inner-full ul li .ministop-logo img{width:100%;height:auto;}

/* -----------benefits----------- */
#benefits{}
#benefits .inner-full .wrap-80per{width:100%;margin:0 auto;}
#benefits .inner-full .wrap-80per h2{width:100%; text-align:center; margin:0 0 0 0;}
#benefits .inner-full .wrap-80per .lead-benefit{width:50%;height:auto; margin:40px auto 40px auto;}
#benefits .inner-full .wrap-80per figure{width:60%;height:auto; float:none; margin:0 auto;}

#benefits .inner-full ul{width:100%;margin:40px 0 40px 0;}
#benefits .inner-full ul li{width:20%; height:70px;margin:0 2.5%; float:left;}

#benefits .inner-full .wrap-80per .lead-benefit img,
#benefits .inner-full .wrap-80per figure img,
#benefits .inner-full ul li img{width:100%;height:auto;}

/* -----------case----------- */
#case{}
#case .inner-full h2{ text-align:center;}
#case .inner-full ul{width:100%;margin:40px 0 0px 0; float:left;}
#case .inner-full ul:nth-child(3){margin:40px 0 40px 0;}
#case .inner-full ul li{width:31%; height:auto;margin:0 1%; float:left;}
#case .inner-full ul li img{width:100%;height:auto;}

/* -----------topics----------- */
#topics .inner-full h2{ text-align:center;}
#topics .inner-full .topics-photo{width:30%;height:auto; float:left; box-sizing:content-box; border:1px solid #946b45;}
#topics .inner-full .topics-photo img{width:100%;height:auto;}
#topics .inner-full .column-wrap{width:65%;height:auto; float:right;}
#topics .inner-full .column-wrap h3{font-size:2.4vw;font-weight:bold; margin-bottom:1rem;}
#topics .inner-full .column-wrap p{font-size:1.8vw;}
.btn-zoom{text-underline-position:under; float:right;}
.btn-zoom a{ text-decoration:underline;}

.btn-download{text-underline-position:under; float:right;}
.btn-download a{ text-decoration:underline;}
.btn-zoom a:hover,
.btn-download a:hover{color:#c7996d;}

.btn-zoom img{width:auto;height:2rem; vertical-align:middle; margin-right:0.8rem;}
.btn-download img{width:auto;height:2rem; vertical-align:middle; margin-right:0.8rem;}

#storeformat .inner-full ul li,
#benefits .inner-full ul li,
#main-visual .btn-movie a,
.flex-box{
display: -webkit-flex;
display: flex;
-webkit-align-items: center; /*Vertical middle Safari */
align-items: center; /* Vertical middle */
-webkit-justify-content: center; /*side middle Safari */
justify-content: center; /*side middle*/
}

}


@media screen and (min-width: 981px){

/*------------------------------index page------------------------------*/
#index-page{width:100%; height:auto; padding-top:0px;}/*ヘッダ高さ分padding*/

#main-visual{width:100%; height:580px; position:relative;}
#main-visual .slider-wrap {height:width:100%; height:580px; margin: 0 auto; position: relative; overflow: hidden;/* border:1px solid #f00;*/}
#main-visual .slider-wrap ul {width:100%;height:580px;margin: 0;padding: 0;}
#main-visual .slider-wrap ul li {width:100%; height:580px; background-size: cover;position: absolute;background-position:center;animation-iteration-count: infinite;animation-duration: 24s;/*total duration*/}


#main-visual .btn-movie{width:248px;height:64px; text-align:center; position:absolute;margin:auto; top:70%; left:0; right:0;background:url(../../img/top/btn_bg_movie.png) no-repeat; background-position:center; background-size:cover;}
#main-visual .btn-movie img{width:100%;height:auto;}
#main-visual .btn-movie a{width:248px;height:64px;}
#main-visual .catch{font-size:3.0rem; font-weight:bold;color:#fff; text-align:center;line-height:140%;text-shadow: 0px 0px 3px #000;position:absolute;margin:auto; top:40%; left:0; right:0;}

h2{font-size:3.6rem;font-weight:bold;}

/* -----------CAFE & Convenience store ----------- */
#c_and_c_store{}
#c_and_c_store .inner-full h2{text-align:left;}
#c_and_c_store .inner-full .lead-ccs{width:352px; height:auto; margin:40px 0 0 0; float:left;}
#c_and_c_store .inner-full figure{width:620px;height:auto;margin:0 0 20px 0;float:right;}
#c_and_c_store .inner-full .lead-ccs img,
#c_and_c_store .inner-full figure img{width:100%;height:auto;}

/* -----------scene----------- */
#scene{}
#scene >.inner-full{height:420px; position:relative;}
#scene .inner-full h2{text-align:left;}
#scene .inner-full .scene-box-right{width:350px; height:400px; right:0;position: absolute; z-index:2;}
#scene .inner-full .scene-box-right p{ margin:40px 0; }
#scene .inner-full figure{width:782px;height:400px;position: absolute; left:0; z-index:4;}
#scene .inner-full figure img{width:100%;height:auto;}

/* -----------storeformat----------- */
#storeformat{height:480px;}
#storeformat .inner-full h2{margin-top:40px; text-align:center;text-shadow: 1px 1px 0px #fff;}

#storeformat .inner-full ul{width:648px;margin:80px auto 80px auto;}
#storeformat .inner-full ul li{width:284px; height:74px;margin:0 20px; float:left;}
#storeformat .inner-full ul li .cisca-logo{width:284px; height:38px;}
#storeformat .inner-full ul li .ministop-logo{width:112px; height:74px;}

#storeformat .inner-full ul li .cisca-logo img,
#storeformat .inner-full ul li .ministop-logo img{width:100%;height:auto;}

/* -----------benefits----------- */
#benefits{}
#benefits .inner-full .wrap-80per{width:80%;margin:0 auto;}
#benefits .inner-full .wrap-80per h2{width:100%; text-align:center; margin:0 0 0 0;}
#benefits .inner-full .wrap-80per .lead-benefit{width:255px;height:auto; margin:50px auto 80px auto;}
#benefits .inner-full .wrap-80per figure{width:382px;height:374px; float:right;}

#benefits .inner-full ul{width:100%;margin:40px 0 0px 0;}
#benefits .inner-full ul li{width:204px; height:70px;margin:0 19px; float:left;}

#benefits .inner-full .wrap-80per .lead-benefit img,
#benefits .inner-full .wrap-80per figure img,
#benefits .inner-full ul li img{width:100%;height:auto;}


/* -----------case----------- */
#case{}
#case .inner-full h2{ text-align:center;}
#case .inner-full ul{width:490px;margin:40px 0; float:left;}
#case .inner-full ul li{width:145px; height:auto;margin:0 9px; float:left;}
#case .inner-full ul li img{width:100%;height:auto;}

/* -----------topics----------- */
#topics .inner-full h2{ text-align:center;}
#topics .inner-full .topics-photo{width:240px;height:150px; float:left; box-sizing:content-box; border:1px solid #946b45;}
#topics .inner-full .topics-photo img{width:100%;height:auto;}
#topics .inner-full .column-wrap{width:700px;height:auto; float:right;}
#topics .inner-full .column-wrap h3{font-size:2.0rem;font-weight:bold; margin-bottom:1rem;}
#topics .inner-full .column-wrap p{}
.btn-zoom{text-underline-position:under; float:right;}
.btn-zoom a{ text-decoration:underline;}

.btn-download{text-underline-position:under; float:right;}
.btn-download a{ text-decoration:underline;}
.btn-zoom a:hover,
.btn-download a:hover{color:#c7996d;}

.btn-zoom img{width:auto;height:2rem; vertical-align:middle; margin-right:0.8rem;}
.btn-download img{width:auto;height:2rem; vertical-align:middle; margin-right:0.8rem;}

.btn-more{width:188px;height:36px; margin:0 auto;}
.btn-more img{width:100%;height:auto;}


/* helper calss */
/*flex box*/
#storeformat .inner-full ul li,
#benefits .inner-full ul li,
#main-visual .btn-movie a,
.flex-box{
display: -webkit-flex;
display: flex;
-webkit-align-items: center; /*Vertical middle Safari */
align-items: center; /* Vertical middle */
-webkit-justify-content: center; /*side middle Safari */
justify-content: center; /*side middle*/
}



}