@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Marathi:ital@0;1&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

/*
赤 #8c2126
薄茶 #c7aa6a
濃赤 #620b0f
飾り背景 #efeee7
*/

body {color:#2e3133;}

nav {font-family:'Tiro Devanagari Marathi', serif !important; font-style:italic !important;} 
nav.navbar {padding-top:0.1rem; padding-bottom:0.0rem;} 
nav.navbar>.container-fluid {justify-content:center;}
.navbar-brand {font-size:1.5rem; margin-left:10px; margin-right:10px; color:#fff !important;}
.navbar-brand img {width:260px;}

.navbar-brand {margin-right:0rem; }

span.pc-nav img {display:block; width:600px; height:24px; margin:8px auto;}
span.sp-nav img {display:none;}

@media screen and (max-width: 576px) {
span.pc-nav img {display:none;}
span.sp-nav img {display:block; width:280px; height:38px; margin:8px auto;}
}

@media screen and (max-width: 370px) {
span.pc-nav img {display:none;}
span.sp-nav img {display:block; width:90%;}
}


.bg-main {background-color:#8c2126;}
.text-main {color:#2e3133;}

a:link {color:#2e3133; text-decoration:none !important;}
a:visited {color:#2e3133;}
a:hover {color:#c7aa6a; text-decoration:underline;}
a:hover img {opacity:0.7; transition-duration:0.3s;}
a:active {color:#2e3133;}

ol.breadcrumb {margin-left:5px;}
ol.breadcrumb li.active {color:#777777;}

.container {margin-top:90px; margin-bottom:110px;}
.container p {font-size:1.1rem; line-height:1.7em;}

h1 {font-family:'Tiro Devanagari Marathi',serif; font-style:italic; margin-top:25px; margin-bottom:25px; font-size:2.5rem; line-height:1.4em;}
h1 span {display:block; margin-top:15px; font-size:1.4rem; line-height:1.5em;}

h1.book-title-1 { margin: 0px; padding: 0px; display:block; position: relative; top:0; left:0; width:100%; z-index: 1; }
h1.book-title-2 { margin: 0px; padding: 0px; display:block; position: relative; top:0; left:0; width:100%; z-index: 1; }

h1.book-title-1 img {width:570px; margin-top:6%; margin-left:10%; filter: drop-shadow(0 0 0.8rem black);}
h1.book-title-2 img {width:350px; margin-left:10%; filter: drop-shadow(0 0 0.1rem black);}

h2.book-title-read {font-family:'Tiro Devanagari Marathi',serif; font-size:1.5rem; line-height:3rem; text-align:center; font-weight:400;}

.lead-style {margin-top: 5.5rem; margin-bottom: .5rem; text-align:center; line-height:2em;}

@media screen and (max-width: 992px) {
.lead-style {text-align:left; margin-top:2rem;}
.lead-style br {display:none;}
}

@media screen and (max-width: 768px) { 
.container {margin-top:60px; margin-bottom:70px;}
h1.book-title-1 img {width:300px; margin-left:20px;}
h1.book-title-2 img {width:300px; margin-left:20px;}
}

@media screen and (max-width: 576px) { 
h1.book-title-1 { margin: 0px; padding: 0px; display:block; position: relative; top:30%; left:0; width:100%; z-index: 1; }
h1.book-title-1 img {width:90%; margin:20px;}
h1.book-title-2 img {width:250px; margin-left:0px;}
}

/* chaoter number */
h2.back-image2 {
display: block;
align-items: center;
width:300px;
height:70px;
margin:20px auto 20px;
line-height: 1.6;
padding-top: 0;
padding-left:110px;
text-align: left;
background-image:url(../images/icon-movie2.svg);background-repeat:no-repeat;
background-position:center left;
background-size: 105px 70px;
font-family: 'Tiro Devanagari Marathi',serif;
font-size: 2.8rem;
font-style: italic;
}

h2.back-image2 span {font-size:1.9rem; margin-right:10px;}

.card-01 {border:none;}
.card-01 .row {--bs-gutter-x:1.0rem;}
.card-01 .card {border:none; padding: 1rem 0rem 1rem;}
.card-01 .card-body {position: relative;}
.card-01 .card-body img {width:100%; margin-bottom: 15px;}
.card-01 .card-body:hover {background-color:#f2f2f2;}
.card-01 .card-body:hover img {opacity:.8;}

.card-01 .unite-number {font-family:'Tiro Devanagari Marathi',serif; font-size:1.2rem; line-height:1.3; padding-top:0.1rem; font-style:normal;}
.card-01 h5.unit-title {font-family:'Tiro Devanagari Marathi',serif; font-style:italic; font-size:1.6rem; line-height:1.3; margin-top:18px;}

.card-01 .chapter-number {padding-top:0.1rem;}
.card-01 .chapter-number h5 {font-family:'Tiro Devanagari Marathi',serif; font-size:1.3rem; line-height:1; margin-bottom:0;}
.card-01 .chapter-number h5 span {font-size: 1.15rem; font-style: normal; margin-bottom: 5px;}
.card-01 .chapter-number h5 span::before {content: '-'; margin-left: 5px; margin-right: 5px;}

.card-01 p {font-size:0.9rem;eight:1.3rem; margin-top:13px;}
.card-01 .btn-light {line-hbackground:#c7aa6a; padding: 0.2rem 0.3rem 0.1rem; margin-left:10px; font-size:0.9rem; line-height:1.0; font-family:'Tiro Devanagari Marathi',serif; font-style:italic;}

/* btn-normal */
.card-01 .btn-light,
.card-01 .btn-light.disabled, .card-01 .btn-light:disabled {
color: #2e3133;
background-color:#c7aa6a;
border-color:#c7aa6a;
}

/* btn-focus */
.card-01 .btn-light:focus, .card-01 .btn-light.focus,
.card-01 .btn-light:not(:disabled):not(.disabled):active:focus, .card-01 .btn-light:not(:disabled):not(.disabled).active:focus,
.show > .card-01 .btn-light.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(199, 170, 106, 0.5);
}

/* btn-hover*/
.card-01 .btn-light:hover {
color: #2e3133;
background-color:#d4ae5a;
border-color:#d4ae5a;
text-decoration: none;
}

/* btn-active */
.card-01 .btn-light:not(:disabled):not(.disabled):active, .card-01 .btn-light:not(:disabled):not(.disabled).active,
.show > .card-01 .btn-light.dropdown-toggle {
color: #2e3133;
background-color:#d4ae5a;
border-color:#d4ae5a;
}


footer {background-color:#8c2126; padding:30px; color:#fff; font-size:.9rem;}
footer a:link {color:#fff; text-decoration:none !important;}
footer a:visited {color:#fff;}
footer a:hover {color:#c7aa6a; text-decoration:underline;}
footer a:hover img {opacity:0.7; transition-duration:0.3s;}
footer a:active {color:#c7aa6a;}
footer .logo img {width:90px; margin:20px auto 40px;}
@media screen and (max-width: 576px) {footer {padding:15px;}}




/* for movie */

.movie-bg {position:relative; z-index:0; margin:0; padding:0; width:100%; height:1000px; background-color:#000;}
.movie-screen {position:static; overflow:hidden; z-index:1; width: 57%; aspect-ratio: 4/3; margin:0 auto;}
.title-number {position:absolute; z-index:2; top:0px; width: 100%;}
.title-number span {display:inline-block; background-color:rgba(000,000,000,0.6); color:#fff; margin-top:10px; margin-left:10px; padding:2px 10px; font-family:'Tiro Devanagari Marathi',serif; font-style:italic; font-size:1.5rem;}
.title-number span em {margin-left:10px; font-style:normal; font-size:1.2rem;}

.control-ol {width:70%; margin:0 auto; height:100px; text-align: center; padding: 15px 0 40px;}
.control-ol i {font-size:55px; color:#4b4c42;}

@media screen and (max-width: 1400px) {.movie-bg {height:800px;} .movie-screen {width:55%;}}
@media screen and (max-width: 1200px) {.movie-bg {height:1200px;} .movie-screen {width:70%;}}

@media screen and (max-width: 992px) {
.movie-bg {height:800px;}
.movie-screen {width:85%}
.title-number span {margin-top:10px; margin-left:10px; padding:2px 10px; font-size:1.3rem;}
.title-number span em {margin-left:10px; font-size:1.0rem;}
.control-ol i {font-size:45px;}
}

@media screen and (max-width: 768px) {
.movie-bg {height:900px;}
.movie-screen {width:100%}
.title-number span {margin-top:10px; margin-left:10px; padding:2px 7px; font-size:1.2rem;}
.title-number span em {display:block; margin-left:0px; font-size:0.9rem;}
.control-ol {width:100%;}
.control-ol i {font-size:40px;}
}

@media screen and (max-width: 576px) {
.movie-bg {height:800px;}
.movie-screen {width:100%} 
.title-number span {font-size:1.0rem;}
.title-number span em {font-size:0.8rem;}
}