@charset "utf-8";

.cinamoroll_cp{
padding: 0;
margin: 0;
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 1.6rem;
line-height: 1.8;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
-ms-text-size-adjust: 100%;/*EgdeMobile*/
-moz-text-size-adjust: 100%;/*firefox*/
overflow: hidden;
}
@media (min-width: 769px) and (max-width: 1399px) {
.cinamoroll_cp{
font-size: 1.6rem;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp {
font-size: 1.6rem;
}
}

.cinamoroll_cp ul {
padding-inline-start: 0;
}

.cinamoroll_cp li {
list-style-type: none;
}

.cinamoroll_cp h2,
.cinamoroll_cp h3,
.cinamoroll_cp h4,
.cinamoroll_cp h5,
.cinamoroll_cp h6,
.cinamoroll_cp p {
margin: 0;
padding: 0;
font-size: 100%;
}

.cinamoroll_cp img {
width: 100%;
vertical-align: bottom;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp img {
width: 100%;
height: auto;
}
}

.cinamoroll_cp p a {
color: #427bbf;
text-decoration: underline;
}

.cinamoroll_cp p a:hover {
opacity: 0.7;
text-decoration: none;
}

.cinamoroll_cp a:hover {
opacity: 0.7;
}

.cinamoroll_cp .forSP {display: none !important;}
.cinamoroll_cp .forPC {display: block !important;}
@media screen and (max-width: 768px) {
.cinamoroll_cp .forSP {display: block !important;}
.cinamoroll_cp .forPC {display: none !important;}
}

/* fadeの設定 */
.cinamoroll_cp .fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.75s, transform 0.75s;
}
.cinamoroll_cp .fade.active {
opacity: 1;
transform: translateY(0px);
}

/* parts */
.cinamoroll_cp .p_re{
position: relative;
}

.cinamoroll_cp .wrap900{
max-width: 900px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .wrap900{
width: calc(100vw / 999 * 900);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .wrap900{
width: 90%;
}
}

.cinamoroll_cp .blueline1{
background: #427bbf;
border-radius: 10px;
color: #ffffff;
font-weight: 500;
text-align: center;
font-size: 125% !important;
width: 250px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .blueline1{
width: calc(100vw / 999 * 250);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .blueline1{
text-align: center;
font-size: 120% !important;
width: calc(100vw / 750 * 280);
}
}

.cinamoroll_cp .blueline2{
background: #427bbf;
border-radius: 10px;
color: #ffffff;
font-weight: 500;
text-align: center;
font-size: 125% !important;
width: 100%;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .blueline2{
font-size: 120% !important;
}
}

.cinamoroll_cp .blueline3{
background: #ffffff;
border: 1px solid #427bbf;
border-radius: 10px;
color: #427bbf;
font-weight: 500;
text-align: center;
font-size: 125% !important;
width: 100%;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .blueline3{
font-size: 120% !important;
}
}

/* 雲形の背景 */
.cinamoroll_cp .bg_cloud{
background: #c0dffc url(/jrplus-cinamoroll_2025/image/bg_cloud_pc.jpg) repeat-y top center;
background-size: contain;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .bg_cloud{
background: #c0dffc url(/jrplus-cinamoroll_2025/image/bg_cloud.jpg) repeat-y;
}
}

.cinamoroll_cp .sec02::before{
content: "";
display: inline-block;
width: 100%;
height: 100px;
background: url(/jrplus-cinamoroll_2025/image/bg_cloud2_pc.png) repeat-x center;
margin: -20px auto 0;
}

@media screen and (max-width: 768px) {
.cinamoroll_cp .sec02::before{
height: calc(100vw / 750 * 100);
background: url(/jrplus-cinamoroll_2025/image/bg_cloud2.png) no-repeat top center;
margin: calc(100vw / 750 * -30) auto 0;
background-size:contain;
}
}
.cinamoroll_cp .sec03::before,
.cinamoroll_cp .sec04::before,
.cinamoroll_cp .sec05::before,
.cinamoroll_cp .sec06::before{
content: "";
display: inline-block;
width: 100%;
height: 220px;
background: url(/jrplus-cinamoroll_2025/image/bg_cloud3_pc.png) repeat-x center;
margin: -20px auto 0;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03::before,
.cinamoroll_cp .sec04::before,
.cinamoroll_cp .sec05::before,
.cinamoroll_cp .sec06::before{
width: 100%;
height: calc(100vw / 750 * 465);
background: url(/jrplus-cinamoroll_2025/image/bg_cloud3.png) no-repeat top center;
margin: calc(100vw / 750 * -40) auto 0;
background-size:contain;
}
}

/* clearFix */
.cinamoroll_cp .cf:after{
content:"."; 
display:block; 
height:0; 
clear:both; 
visibility:hidden;
}

/* indent */
.cinamoroll_cp p.cap,
.cinamoroll_cp ul.cap li{
padding-left: 1em;
text-indent: -1em;
font-size: 87.5%;
line-height: 1.7;
text-align: left;
}

.cinamoroll_cp ul.indent li{
padding-left: 1em;
text-indent: -1em;
line-height: 1.7;
text-align: left;
}

/* ===========================================
* sec_kv
* ======================================== */
.cinamoroll_cp .sec_kv{
width: 100%;
margin: 0 auto;
text-align: center;
border-bottom: #62b0e3 solid 30px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec_kv{
border-bottom: #62b0e3 solid calc(100vw / 999 * 30);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec_kv{
border-bottom: #62b0e3 solid calc(100vw / 750 * 40);
}
}

.cinamoroll_cp .sec_kv h2{
margin: 0 auto;
padding: 0;
text-align: center;
}

.cinamoroll_cp .sec_kv h3{
width: 50%;
position: absolute;
bottom: -52px;
margin: auto;
left: 0;
right: 0;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec_kv h3{
bottom: calc(100vw / 999 * -52);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec_kv h3{
width: 90%;
bottom: calc(100vw / 750 * -69);
margin: auto;
left: 0;
right: 0;
}
}

/* ===========================================
* sec01
* ======================================== */
.cinamoroll_cp .sec01{
margin: 0 auto;
padding: 0 0 70px;
text-align: center;
background: #fcd2e7;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec01{
padding: 0 0 calc(100vw / 999 * 70);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec01{
padding: 0 0 calc(100vw / 750 * 120);
}
}

.cinamoroll_cp .sec01 h3{
padding: 60px 0 30px;
margin: 0 auto;
width: 98%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec01 h3{
padding: calc(100vw / 999 * 60) 0 calc(100vw / 999 * 30);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec01 h3{
padding: calc(100vw / 750 * 80) 0 calc(100vw / 750 * 60);
width: 97%;
}
}

.cinamoroll_cp .sec01 .inner_wrap{
margin: 0 auto;
padding: 40px 50px;
text-align: center;
background: #ffffff;
border-radius: 20px;
box-shadow: 0px 6px 6px -4px #f9c2dc;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec01 .inner_wrap{
padding: calc(100vw / 999 * 40) calc(100vw / 999 * 50);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec01 .inner_wrap{
padding: calc(100vw / 750 * 60) calc(100vw / 750 * 40);
}
}

.cinamoroll_cp .sec01 .inner_wrap p{
text-align: left;
}

.cinamoroll_cp .sec01 .inner_wrap p.cap{
padding-top: 6px;
}

/* ===========================================
* sec02
* ======================================== */
.cinamoroll_cp .sec02{
margin: 0 auto 0;
padding: 0 0 90px;
text-align: center;
background: #bdfdff;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec02{
padding: 0 0 calc(100vw / 999 * 90);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec02{
margin: 0 auto 0;
padding: 0 0 calc(100vw / 750 * 170);
text-align: center;
background: #bdfdff;
}
}

.cinamoroll_cp .sec02 h2{
padding: 0 0 40px;
margin: -50px auto 0;
width: 54%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec02 h2{
padding: 0 0 calc(100vw / 999 * 40);
margin: calc(100vw / 999 * -50) auto 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec02 h2{
padding: 0 0 calc(100vw / 750 * 50);
margin: calc(100vw / 750 * -15) auto 0;
width: 94%;
}
}

.cinamoroll_cp .sec02 .inner_wrap{
margin: 0 auto;
padding: 40px 50px;
text-align: center;
background: #ffffff;
border-radius: 20px;
box-shadow: 0px 6px 6px -4px #427bbf;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec02 .inner_wrap{
padding: calc(100vw / 999 * 40) calc(100vw / 999 * 50);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec02 .inner_wrap{
padding: calc(100vw / 750 * 80) calc(100vw / 750 * 40) calc(100vw / 750 * 60);
}
}

.cinamoroll_cp .sec02 h3{
margin: -72px auto 0;
width: 44%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec02 h3{
margin: calc(100vw / 999 * -72) auto 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec02 h3{
margin: calc(100vw / 750 * -115) auto 0;
width: 68%;
}
}

.cinamoroll_cp .sec02 h4{
margin: 30px auto 16px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec02 h4{
margin: calc(100vw / 999 * 30) auto calc(100vw / 999 * 16);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec02 h4{
margin: calc(100vw / 750 * 40) auto calc(100vw / 750 * 20);
}
}

.cinamoroll_cp .sec02 .inner_wrap p{
text-align: left;
}

.cinamoroll_cp .sec02 .inner_wrap ul{
padding-top: 6px;
}

.cinamoroll_cp .sec02 .inner_wrap p:nth-of-type(1),
.cinamoroll_cp .sec02 .inner_wrap p:nth-of-type(3){
font-weight: 700;
text-align: center;
font-size: 125%;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec02 .inner_wrap p:nth-of-type(1),
.cinamoroll_cp .sec02 .inner_wrap p:nth-of-type(3){
font-size: 115%;
}
}

.cinamoroll_cp .sec02 .pa_illsut1{
width: 84%;
position: absolute;
top: 70px;
left: 90px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec02 .pa_illsut1{
top: calc(100vw / 999 * 70);
left: calc(100vw / 999 * 90);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec02 .pa_illsut1{
width: 96%;
top: calc(100vw / 750 * -160);
left: 0;
right: 0;
margin: auto;
}
}

/* ===========================================
* sec03
* ======================================== */
.cinamoroll_cp .sec03{
margin:  auto 0;
padding: 0 0 115px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03{
padding: 0 0 calc(100vw / 999 * 115);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03{
padding: 0 0 calc(100vw / 750 * 190);
}
}

.cinamoroll_cp .sec03 h3{
margin: -95px auto 0;
padding: 0;
width: 56%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03 h3{
margin: calc(100vw / 999 * -95) auto 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 h3{
margin: calc(100vw / 750 * -350) auto 0;
width: 100%;
}
}

.cinamoroll_cp .sec03 h4{
margin: 0 auto;
padding: 30px 0;
text-align: center;
font-size: 112.5%;
font-weight: 500;
position: relative;
z-index: 10;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03 h4{
padding: calc(100vw / 999 * 30) 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 h4{
font-size: 100%;
padding: calc(100vw / 750 * 30) 0 calc(100vw / 750 * 40);
}
}

.cinamoroll_cp .sec03 .inner_wrap{
margin: 0 auto;
padding: 40px 50px 50px;
text-align: center;
background: #ffffff;
border-radius: 20px;
box-shadow: 0px 6px 6px -4px #427bbf;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03 .inner_wrap{
padding: calc(100vw / 999 * 40) calc(100vw / 999 * 50) calc(100vw / 999 * 50);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 .inner_wrap{
padding: calc(100vw / 750 * 60) calc(100vw / 750 * 40);
}
}

.cinamoroll_cp .sec03 .inner_wrap .item{
font-size: 130%;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 .inner_wrap .item{
line-height: 1.2;
}
}

.cinamoroll_cp .sec03 .inner_wrap .item .price{
font-size: 150%;
}

.cinamoroll_cp .sec03 .inner_wrap .item .tax{
font-size: 75%;
}

.cinamoroll_cp .sec03 .box1{
width: 47.5%;
float: left;
text-align: left;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 .box1{
width: 100%;
float: none;
}
}

.cinamoroll_cp .sec03 .box1 p:nth-of-type(3){
padding: 16px 0 0;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03 .box1 p:nth-of-type(3){
padding: calc(100vw / 999 * 16) 0 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 .box1 p:nth-of-type(3){
padding: calc(100vw / 750 * 20) 0 0;
}
}

.cinamoroll_cp .sec03 .box2{
width: 47.5%;
float: right;
text-align: left;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 .box2{
width: 100%;
float: none;
}
}

.cinamoroll_cp .sec03 h5{
margin: 30px auto 16px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03 h5{
margin: calc(100vw / 999 * 30) auto calc(100vw / 999 * 16);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 h5{
margin: calc(100vw / 750 * 40) auto calc(100vw / 750 * 20);
}
}

.cinamoroll_cp .sec03 .pa_illsut1{
width: 43%;
position: absolute;
top: -185px;
left: 200px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03 .pa_illsut1{
top: calc(100vw / 999 * -185);
left: calc(100vw / 999 * 200);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 .pa_illsut1{
width: 76%;
top: calc(100vw / 750 * -230);
left: calc(100vw / 750 * 35);
}
}

.cinamoroll_cp .sec03 .pa_illsut2{
width: 19%;
position: absolute;
top: 150px;
left: -40px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03 .pa_illsut2{
top: calc(100vw / 999 * 150);
left: calc(100vw / 999 * -40);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 .pa_illsut2{
width: 26%;
top: calc(100vw / 750 * 300);
left: calc(100vw / 750 * -60);
}
}

.cinamoroll_cp .sec03 .pa_illsut3{
width: 13%;
position: absolute;
top: 125px;
right: -20px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03 .pa_illsut3{
top: calc(100vw / 999 * 125);
right: calc(100vw / 999 * -20);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 .pa_illsut3{
width: 17%;
top: calc(100vw / 750 * 290);
right: calc(100vw / 750 * -40);
}
}

.cinamoroll_cp .sec03 .pa_illsut4{
width: 30%;
position: absolute;
bottom: -90px;
right: -40px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec03 .pa_illsut4{
bottom: calc(100vw / 999 * -90);
right: calc(100vw / 999 * -40);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec03 .pa_illsut4{
width: 51%;
bottom: calc(100vw / 750 * -140);
right: calc(100vw / 750 * -20);
}
}

/* ===========================================
* sec04
* ======================================== */
.cinamoroll_cp .sec04{
margin: 0 auto;
padding: 0 0 60px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec04{
padding: 0 0 calc(100vw / 999 * 60);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec04{
margin: 0 auto;
padding: 0 0 calc(100vw / 750 * 80);
text-align: center;
}
}

.cinamoroll_cp .sec04 h3{
margin: -125px auto 0;
padding: 0;
width: 56%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec04 h3{
margin: calc(100vw / 999 * -125) auto 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec04 h3{
margin: calc(100vw / 750 * -360) auto 0;
padding: 0;
width: 100%;
}
}

.cinamoroll_cp .sec04 h4{
margin: 0 auto;
padding: 30px 0;
text-align: center;
font-size: 112.5%;
font-weight: 500;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec04 h4{
padding: calc(100vw / 999 * 30) 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec04 h4{
padding: calc(100vw / 750 * 30) 0;
font-size: 100%;
}
}

.cinamoroll_cp .sec04 ul.collabo {
width: 100%;
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.cinamoroll_cp .sec04 ul.collabo li {
width: 32%;
box-sizing: border-box;
margin-top: 30px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec04 ul.collabo li {
margin-top: calc(100vw / 999 * 30);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec04 ul.collabo li {
width: 49%;
margin-top: calc(100vw / 750 * 30);
text-align: center;
}
}

@media screen and (max-width: 768px) {
.cinamoroll_cp .sec04 ul.collabo li:last-child {
margin-left: auto;/* 最後の1つだけ右寄せ */
}
}

.cinamoroll_cp .sec04 ul.collabo li .item{
margin: -35px auto 0;
font-weight: 500;
font-size: 130%;
line-height: 1.4;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec04 ul.collabo li .item{
margin: calc(100vw / 999 * -35) auto 0;
font-size: 110% !important;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec04 ul.collabo li .item{
margin: calc(100vw / 750 * -40) auto 0;
font-size: 90%;
}
}

.cinamoroll_cp .sec04 ul li .item .price{
font-size: 150%;
font-family: 'Noto Sans JP', sans-serif;
}

.cinamoroll_cp .sec04 ul li .item .tax{
font-size: 75%;
}

.cinamoroll_cp .sec04 .pa_illsut1{
width: 102%;
position: absolute;
top: 115px;
left: 0;
right: 0; 
margin: auto;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec04 .pa_illsut1{
top: calc(100vw / 999 * 115);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec04 .pa_illsut1{
width: 98%;
position: static;
margin: 0 auto;
}
}

.cinamoroll_cp .sec04 .pa_illsut2{
width: 42%;
margin: 50px auto 0;
padding: 0;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec04 .pa_illsut2{
margin: calc(100vw / 999 * 50) auto 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec04 .pa_illsut2{
position: absolute;
width: 52%;
left: 0;
bottom: calc(100vw / 750 * -20);
margin: 0;
}
}

/* ===========================================
* sec05
* ======================================== */
.cinamoroll_cp .sec05{
margin: 0 auto;
padding: 0 0 90px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05{
padding: 0 0 calc(100vw / 999 * 90);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05{
padding: 0 0 calc(100vw / 750 * 110);
}
}

.cinamoroll_cp .sec05 h3{
margin: -120px auto 0;
padding: 0;
width: 56%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 h3{
margin: calc(100vw / 999 * -120) auto 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 h3{
margin: calc(100vw / 750 * -360) auto 0;
width: 100%;
}
}

.cinamoroll_cp .sec05 h4{
margin: 0 auto;
padding: 30px 0 10px;
text-align: center;
font-size: 112.5%;
font-weight: 500;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 h4{
padding: calc(100vw / 999 * 30) 0 calc(100vw / 999 * 10);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 h4{
padding: calc(100vw / 750 * 30) 0 0;
font-size: 100%;
}
}

.cinamoroll_cp .sec05 .pa_illsut1{
width: 70%;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 .pa_illsut1{
width: 96%;
margin: calc(100vw / 750 * -40) auto 0;
}
}

.cinamoroll_cp .sec05 ul.goods {
width: 100%;
margin: 0 auto 65px;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 ul.goods {
margin: 0 auto calc(100vw / 999 * 65);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 ul.goods {
margin: 0 auto calc(100vw / 750 * 65);
}
}

.cinamoroll_cp .sec05 ul.goods li {
width: 32%;
box-sizing: border-box;
margin-top: 30px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 ul.goods li {
margin-top: calc(100vw / 999 * 30);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 ul.goods li {
width: 49%;
margin-top: calc(100vw / 750 * 30);
text-align: center;
}
}

.cinamoroll_cp .sec05 ul.goods li.large {
width: 66%;
box-sizing: border-box;
margin-top: 30px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 ul.goods li.large {
margin-top: calc(100vw / 999 * 30);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 ul.goods li.large {
width: 100%;
margin-top: calc(100vw / 750 * 30);
}
}

.cinamoroll_cp .sec05 ul.goods li:last-child {
margin-right: auto;
margin-left:2%; 
}
/*
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 ul.goods li:last-child {
margin: auto;
}
}
*/

.cinamoroll_cp .sec05 ul.goods li .item{
margin: -35px auto 0;
font-weight: 500;
font-size: 130%;
line-height: 1.4;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 ul.goods li .item{
margin: calc(100vw / 999 * -35) auto 0;
font-size: 110% !important;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 ul.goods li .item{
margin: calc(100vw / 750 * -40) auto 0;
font-size: 90%;
}
}

.cinamoroll_cp .sec05 ul.goods li .item .price{
font-size: 150%;
font-family: 'Noto Sans JP', sans-serif;
}

.cinamoroll_cp .sec05 ul.goods li .item .tax{
font-size: 75%;
}

.cinamoroll_cp .sec05 ul.goods li p.cap{
margin: 0 auto !important;
text-align: center !important;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 ul.goods li p.cap{
font-size: 70%;
line-height: 1.5;
}
}

.cinamoroll_cp .sec05 .inner_wrap{
margin: 0 auto;
padding: 40px 50px;
text-align: center;
background: #ffffff;
border-radius: 20px;
box-shadow: 0px 6px 6px -4px #427bbf;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 .inner_wrap{
padding: calc(100vw / 999 * 40) calc(100vw / 999 * 50);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 .inner_wrap{
padding: calc(100vw / 750 * 50) calc(100vw / 750 * 40) calc(100vw / 750 * 60);
}
}

.cinamoroll_cp .sec05 .box1 h5{
margin: 0 auto 16px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 .box1 h5{
margin: 0 auto calc(100vw / 999 * 16);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 .box1 h5{
margin: 0 auto calc(100vw / 750 * 20);
}
}

.cinamoroll_cp .sec05 .box1 .sp_mb{}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 .box1 .sp_mb{
margin-bottom: calc(100vw / 750 * 20);
}
}

.cinamoroll_cp .sec05 .box2 h5{
margin: 30px auto 16px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 .box2 h5{
margin: calc(100vw / 999 * 30) auto calc(100vw / 999 * 16);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 .box2 h5{
margin: calc(100vw / 750 * 40) auto calc(100vw / 750 * 20);
}
}

.cinamoroll_cp .sec05 .box2 .shop_link{
width: 100%;
margin: 0 auto;
text-align: center;
}

.cinamoroll_cp .sec05 .box2 .shop_link .btn a {
position: relative;
display: inline-block;
width: 450px;
margin: 15px auto 0;
padding: 5px 0 5px 20px;
background-color: #ff6700;
border-radius: 30px;
font-size: 110%;
color: #ffffff;
text-align: left;
font-weight: 500;
text-decoration: none;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 .box2 .shop_link .btn a {
width: calc(100vw / 999 * 550);
margin: calc(100vw / 999 * 15) auto 0;
font-size: 105%;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 .box2 .shop_link .btn a {
width: 100%;
margin: calc(100vw / 750 * 24) auto 0;
padding: calc(100vw / 750 * 10) calc(100vw / 750 * 40) calc(100vw / 750 * 10) calc(100vw / 750 * 30);
font-size: 100%;
border-radius: 100px;
line-height: 1.3;
}
}

.cinamoroll_cp .sec05 .box2 .shop_link .btn-triangle-right a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 27px;
width: 0;
height: 0;
margin: auto;
border-top: 6px solid transparent;
border-right: 0 solid transparent;
border-left: 9px solid #fff;
border-bottom: 6px solid transparent;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 .box2 .shop_link .btn-triangle-right a::after {
right: calc(100vw / 750 * 27);
}
}


.cinamoroll_cp .sec05 .box3 h5{
background: #427bbf;
color: #ffffff;
margin: 30px auto 16px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 .box3 h5{
margin: calc(100vw / 999 * 30) auto calc(100vw / 999 * 16);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 .box3 h5{
margin: calc(100vw / 750 * 40) auto calc(100vw / 750 * 20);
}
}

.cinamoroll_cp .sec05 .inner_wrap p{
text-align: left;
}

.cinamoroll_cp .sec05 .inner_wrap .box1 p:nth-of-type(2),
.cinamoroll_cp .sec05 .inner_wrap .box2 p:nth-of-type(2),
.cinamoroll_cp .sec05 .inner_wrap .box2 p:nth-of-type(3){
padding-top: 16px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec05 .inner_wrap .box1 p:nth-of-type(2),
.cinamoroll_cp .sec05 .inner_wrap .box2 p:nth-of-type(2),
.cinamoroll_cp .sec05 .inner_wrap .box2 p:nth-of-type(3){
padding-top: calc(100vw / 999 * 16);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec05 .inner_wrap .box1 p:nth-of-type(2),
.cinamoroll_cp .sec05 .inner_wrap .box2 p:nth-of-type(2),
.cinamoroll_cp .sec05 .inner_wrap .box2 p:nth-of-type(3){
padding-top: calc(100vw / 750 * 24);
}
}

/* ===========================================
* sec06
* ======================================== */
.cinamoroll_cp .sec06{
margin: 0 auto;
padding: 0 0 60px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06{
padding: 0 0 calc(100vw / 999 * 60);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06{
padding: 0 0 calc(100vw / 750 * 80);
}
}

.cinamoroll_cp .sec06 .inner_wrap{
margin: -100px auto 0;
padding: 100px 50px 40px;
text-align: center;
background: #ffffff;
border-radius: 20px;
box-shadow: 0px 6px 6px -4px #427bbf;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .inner_wrap{
margin: calc(100vw / 999 * -100) auto 0;
padding: calc(100vw / 999 * 100) calc(100vw / 999 * 50) calc(100vw / 999 * 40);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .inner_wrap{
margin: calc(100vw / 999 * -180) auto 0;
padding: calc(100vw / 750 * 130) calc(100vw / 750 * 40) calc(100vw / 750 * 60);
}
}

.cinamoroll_cp .sec06 h3{
margin: -150px auto 0;
padding: 0 0 35px;
width: 50%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 h3{
margin: calc(100vw / 999 * -150) auto 0;
padding: 0 0 calc(100vw / 999 * 35);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 h3{
margin: calc(100vw / 750 * -340) auto 0;
padding: 0 0 calc(100vw / 750 * 35);
width: 100%;
}
}

.cinamoroll_cp .sec06 .box1 h4{
background: #ff6700;
border-radius: 20px;
color: #ffffff;
font-weight: 700;
padding: 25px 0 20px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .box1 h4{
padding: calc(100vw / 999 * 25) 0 calc(100vw / 999 * 20);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box1 h4{
padding: calc(100vw / 750 * 30) 0 calc(100vw / 750 * 25);
font-size: calc(100vw / 750 * 25);
}
}

.cinamoroll_cp .sec06 .box1 h4 span{
font-size: 140%;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box1 h4 span{
font-size: calc(100vw / 750 * 30);
}
}

.cinamoroll_cp .sec06 .box1 p{
color: #ff6700;
padding: 10px 0 30px;
font-size: 100%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .box1 p{
padding: calc(100vw / 999 * 10) 0 calc(100vw / 999 * 30);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box1 p{
padding: calc(100vw / 750 * 20) 0 calc(100vw / 750 * 30);
text-align: left;
font-size: 100%;
}
}

.cinamoroll_cp .sec06 .box2 p{
text-align: left;
}

.cinamoroll_cp .sec06 .course_a,
.cinamoroll_cp .sec06 .course_b{
background: #ffffff;
border: solid 2px #ff6700;
border-radius: 20px;
margin: 70px auto 0;
position: relative;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_a,
.cinamoroll_cp .sec06 .course_b{
margin: calc(100vw / 999 * 70) auto 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_a,
.cinamoroll_cp .sec06 .course_b{
margin: calc(100vw / 750 * 160) auto 0;
}
}

.cinamoroll_cp .sec06 .course_a h4,
.cinamoroll_cp .sec06 .course_b h4{
background: #ff6700;
color: #ffffff;
margin: 0;
padding: 10px 0 10px 130px;
text-align: left;
font-size: 160%;
line-height: 1.7;
border-radius: 18px 18px 0 0;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_a h4,
.cinamoroll_cp .sec06 .course_b h4{
padding: calc(100vw / 999 * 10) 0 calc(100vw / 999 * 10) calc(100vw / 999 * 130);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_a h4,
.cinamoroll_cp .sec06 .course_b h4{
padding: calc(100vw / 750 * 15) 0 calc(100vw / 750 * 15) calc(100vw / 750 * 115);
font-size: 120%;
}
}

.cinamoroll_cp .sec06 .course_a .course_inner,
.cinamoroll_cp .sec06 .course_b .course_inner{
padding: 0 35px 60px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_a .course_inner,
.cinamoroll_cp .sec06 .course_b .course_inner{
padding: 0 calc(100vw / 999 * 35) calc(100vw / 999 * 60);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_a .course_inner,
.cinamoroll_cp .sec06 .course_b .course_inner{
padding: 0 calc(100vw / 750 * 30) calc(100vw / 750 * 40);
}
}

.cinamoroll_cp .sec06 .course_a .course_inner h5{
text-align: left;
font-weight: 500;
font-size: 125%;
line-height: 1.7;
padding: 30px 0 10px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_a .course_inner h5{
padding: calc(100vw / 999 * 30) 0 calc(100vw / 999 * 10);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_a .course_inner h5{
font-size: 100%;
line-height: 1.7;
padding: calc(100vw / 750 * 30) 0 calc(100vw / 750 * 10);
}
}

.cinamoroll_cp .sec06 .course_a .course_inner h6{
background: #ff6700;
border-radius: 10px;
color: #ffffff;
font-weight: 500;
text-align: center;
margin: 40px auto 30px;
font-size: 125% !important;
width: 250px;
line-height: 2;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_a .course_inner h6{
margin: calc(100vw / 999 * 40) auto calc(100vw / 999 * 30);
width: calc(100vw / 999 * 250);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_a .course_inner h6{
margin: calc(100vw / 750 * 50) auto calc(100vw / 750 * 40);
font-size: 120% !important;
width: calc(100vw / 750 * 280);
}
}

.cinamoroll_cp .sec06 .course_a .course_inner h6 + div{
width: 60%;
margin: 0 auto 20px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_a .course_inner h6 + div{
margin: 0 auto calc(100vw / 999 * 20);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_a .course_inner h6 + div{
width: 96%;
margin: 0 auto calc(100vw / 750 * 20);
}
}

.cinamoroll_cp .sec06 .course_a p:last-child{
text-align: center;
}

.cinamoroll_cp .sec06 .course_b .course_inner h5{
padding: 30px 0 0;
text-align: center;
margin: 0 auto;
width: 72%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_b .course_inner h5{
padding: calc(100vw / 999 * 30) 0 calc(100vw / 999 * 10);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_b .course_inner h5{
padding: calc(100vw / 750 * 30) 0 calc(100vw / 750 * 10);
width: 100%;
}
}

.cinamoroll_cp .sec06 .course_b .course_inner h6{
text-align: center;
font-weight: 500;
font-size: 125%;
line-height: 1.7;
padding: 10px 0 30px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_b .course_inner h6{
padding: calc(100vw / 999 * 10) 0 calc(100vw / 999 * 30);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_b .course_inner h6{
font-size: 100%;
line-height: 1.7;
padding: calc(100vw / 750 * 10) 0 calc(100vw / 750 * 30);
}
}

.cinamoroll_cp .sec06 .course_b .course_inner h6 + div{
width: 70%;
margin: 0 auto 10px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_b .course_inner h6 + div{
margin: 0 auto calc(100vw / 999 * 10);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_b .course_inner h6 + div{
width: 100%;
margin: 0 auto calc(100vw / 750 * 10);
}
}

.cinamoroll_cp .sec06 .course_b p.cap{
text-align: center !important;
}

.cinamoroll_cp .sec06 .course_b h6:last-child{
padding: 20px 0 0;
color: #ff6700;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_b h6:last-child{
padding: calc(100vw / 999 * 20) 0 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_b h6:last-child{
padding: calc(100vw / 750 * 20) 0 0;
}
}

.cinamoroll_cp .sec06 .box3{
padding: 30px 0 0;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .box3{
padding: calc(100vw / 999 * 30) 0 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box3{
padding: calc(100vw / 750 * 60) 0 0;
}
}

.cinamoroll_cp .sec06 .box4 h5{
margin: 30px auto 16px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .box4 h5{
margin: calc(100vw / 999 * 30) auto calc(100vw / 999 * 16);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box4 h5{
margin: calc(100vw / 750 * 40) auto calc(100vw / 750 * 20);
}
}

.cinamoroll_cp .sec06 .box4 p{
text-align: left;
padding-top: 16px !important;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box4 p{
padding-top: calc(100vw / 750 * 20) !important;
}
}

.cinamoroll_cp .sec06 .box4 li p{
padding-top: 0 !important;
}

.cinamoroll_cp .sec06 .box5 h5{
margin: 30px auto 16px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .box5 h5{
margin: calc(100vw / 999 * 30) auto calc(100vw / 999 * 16);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box5 h5{
margin: calc(100vw / 750 * 40) auto calc(100vw / 750 * 20);
}
}

.cinamoroll_cp .sec06 .box6 h5{
margin: 30px auto 30px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .box6 h5{
margin: calc(100vw / 999 * 30) auto calc(100vw / 999 * 30);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box6 h5{
margin: calc(100vw / 750 * 50) auto calc(100vw / 750 * 40);
}
}

.cinamoroll_cp .sec06 .box6 h5 + div{
margin: 0 auto 0;
text-align: center;
width: 78%;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box6 h5 + div{
width: 94%;
}
}

.cinamoroll_cp .sec06 .box7{
margin: 50px auto 0;
border-top:#cccccc dashed 2px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .box7{
margin: calc(100vw / 999 * 50) auto 0;
border-top:#cccccc dashed 2px;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box7{
margin: calc(100vw / 750 * 50) auto 0;
}
}

.cinamoroll_cp .sec06 .box7 h5{
margin: 40px auto 30px;
text-align: center;
width: 54%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .box7 h5{
margin: calc(100vw / 999 * 40) auto calc(100vw / 999 * 30);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box7 h5{
margin: calc(100vw / 750 * 40) auto calc(100vw / 750 * 30);
width: 94%;
}
}

.cinamoroll_cp .sec06 .box7 .pop_image{
margin: 0 auto;
text-align: center;
width: 74%;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .box7 .pop_image{
width: 100%;
}
}

.cinamoroll_cp .sec06 .app_dl{
margin: 60px auto 0;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .app_dl{
margin: calc(100vw / 999 * 60) auto 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .app_dl{
margin: calc(100vw / 750 * 80) auto 0;
}
}

.cinamoroll_cp .sec06 .app_dl h5{
margin: 0 auto 35px;
text-align: center;
width: 41%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .app_dl h5{
margin: 0 auto calc(100vw / 999 * 35);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .app_dl h5{
margin: 0 auto calc(100vw / 750 * 45);
width: 72%;
}
}

.cinamoroll_cp .sec06 .app_dl ul{
width: 52%;
margin: 0 auto;
text-align: center;
display:flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .app_dl ul{
width: 92%;
}
}

.cinamoroll_cp .sec06 .app_dl li:nth-child(1){ width: 43%;}
.cinamoroll_cp .sec06 .app_dl li:nth-child(2){ width: 48%;}

.cinamoroll_cp .sec06 .pa_illsut1{
width: 35%;
position: absolute;
top: -125px;
left: 220px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .pa_illsut1{
top: calc(100vw / 999 * -125);
left: calc(100vw / 999 * 220);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .pa_illsut1{
width: 60%;
position: absolute;
top: calc(100vw / 750 * -160);
left: calc(100vw / 750 * 60);
}
}

.cinamoroll_cp .sec06 .course_a .pa_txt,
.cinamoroll_cp .sec06 .course_b .pa_txt{
width: 10%;
position: absolute;
top: -12px;
left: 38px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_a .pa_txt,
.cinamoroll_cp .sec06 .course_b .pa_txt{
width: 10%;
position: absolute;
top: calc(100vw / 999 * -12);
left: calc(100vw / 999 * 38);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_a .pa_txt,
.cinamoroll_cp .sec06 .course_b .pa_txt{
width: 17.5%;
top: calc(100vw / 750 * -16);
left: calc(100vw / 750 * 25);
}
}

.cinamoroll_cp .sec06 .course_a .pa_illsut{
width: 28%;
position: absolute;
top: -70px;
right: -15px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_a .pa_illsut{
width: 28%;
position: absolute;
top: calc(100vw / 999 * -70);
right: calc(100vw / 999 * -15);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_a .pa_illsut{
width: 50%;
top: calc(100vw / 750 * -140);
right: calc(100vw / 750 * -60);
}
}

.cinamoroll_cp .sec06 .course_b .pa_illsut{
width: 31%;
position: absolute;
top: -95px;
right: -40px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec06 .course_b .pa_illsut{
top: calc(100vw / 999 * -95);
right: calc(100vw / 999 * -40);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec06 .course_b .pa_illsut{
width: 55%;
top: calc(100vw / 750 * -120);
right: calc(100vw / 750 * -70);
}
}


/* ===========================================
* sec99
* ======================================== */
.cinamoroll_cp .sec99{
margin: 50px auto 150px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec99{
margin: calc(100vw / 999 * 50) auto calc(100vw / 999 * 150);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec99{
margin: calc(100vw / 750 * 50) auto calc(100vw / 750 * 180);
}
}

.cinamoroll_cp .sec99 .cr{
width: 100%;
text-align: center;
margin: 30px auto 0;
padding: 0;
border-top: solid 2px #ccc;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec99 .cr{
margin: calc(100vw / 999 * 30) auto 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec99 .cr{
margin: calc(100vw / 750 * 40) auto 0;
}
}

.cinamoroll_cp .sec99 .cr p{
font-size: 87.5%;
padding: 25px 0 0;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .sec99 .cr p{
padding: calc(100vw / 999 * 25) 0 0;
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .sec99 .cr p{
padding: calc(100vw / 750 * 40) 0 0;
}
}


/* ===========================================
* slider
* ======================================== */
.cinamoroll_cp .slider-box{
display: block;
margin: 0 auto;
width: 100%;
position: relative;
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .slider-box{
width: 90%;
}
}

.cinamoroll_cp .slider-box ul{
width: 62%;
margin: 0 auto 40px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .slider-box ul{
margin: 0 auto calc(100vw / 999 * 40);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .slider-box ul{
width: 100%;
margin: 0 auto calc(100vw / 750 * 60);
}
}

.cinamoroll_cp .slider-box ul li img{
margin: 0 auto;
text-align: center;
width: 80%;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .slider-box ul li img{
width: calc(100vw / 999 * 500);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .slider-box ul li img{
width: 100%;
}
}

/* スライダーの設定 ① */
.cinamoroll_cp .ekiben_slider .slick-prev{
left: -150px;
background: url(/jrplus-cinamoroll_2025/image/sd_prev.png)top center/contain no-repeat;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .ekiben_slider .slick-prev{
left: calc(100vw / 999 * -150);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .ekiben_slider .slick-prev{
left: -13vw;
}
}

.cinamoroll_cp .ekiben_slider .slick-next{
right: -150px;
background: url(/jrplus-cinamoroll_2025/image/sd_next.png)top center/contain no-repeat;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .ekiben_slider .slick-next{
right: calc(100vw / 999 * -150);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .ekiben_slider .slick-next{
right: -13vw;
}
}

.cinamoroll_cp .ekiben_slider .slick-prev,
.cinamoroll_cp .ekiben_slider .slick-next{
width: 60px;
height: 60px;
z-index: 100;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .ekiben_slider .slick-prev,
.cinamoroll_cp .ekiben_slider .slick-next{
width: calc(100vw / 999 * 60);
height: calc(100vw / 999 * 60);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .ekiben_slider .slick-prev,
.cinamoroll_cp .ekiben_slider .slick-next{
width: calc(100vw / 750 * 60);
height: calc(100vw / 750 * 60);
}
}

.cinamoroll_cp .ekiben_slider .slick-prev::before,
.cinamoroll_cp .ekiben_slider .slick-next::before {
content: "";
}

.cinamoroll_cp .ekiben_slider .slick-disabled{
display: none!important;
}

.cinamoroll_cp .ekiben_slider .slick-dots{
width: 100%;
}

.cinamoroll_cp .ekiben_slider .slick-dots li{
margin: 0 5px;
bottom: -50px;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .ekiben_slider .slick-dots li{
bottom: calc(100vw / 999 * -50);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .ekiben_slider .slick-dots li{
margin: 0 calc(100vw / 750 * 5);
bottom: calc(100vw / 750 * -50);
}
}

.cinamoroll_cp .ekiben_slider .slick-dots li button::before{
content: "";
width: 16px;
height: 16px;
border-radius: 20px;
background: #bfbfbf;
}
@media (min-width: 769px) and (max-width: 999px) {
.cinamoroll_cp .ekiben_slider .slick-dots li button::before{
width: calc(100vw / 999 * 16);
height: calc(100vw / 999 * 16);
}
}
@media screen and (max-width: 768px) {
.cinamoroll_cp .ekiben_slider .slick-dots li button::before{
width: 1.6vw;
height: 1.6vw;
border-radius: 10px;
}
}

.cinamoroll_cp .ekiben_slider .slick-dots li.slick-active button::before{
background: #808080;
}

