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



/* ==============================================
font
============================================== */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:100,300,400,500,600,700,900&display=swap');

@font-face {
font-family: "BahnsChrift";
font-style: normal;
font-weight: 300;
src: url('../font/BahnsChrift.woff') format('woff');
}

/* ==============================================
setting
============================================== */

* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,p,th,td,dt,dd,li {
font-family:"Noto Sans JP";
font-weight:300;
font-size: 15px;
line-height: 28px;
letter-spacing: 1px;
margin:0;
padding:0;
color:#000;
}
h1,h2,h3,h4,h5,div,table,th,td,dl,dt,dd,ul,li,p,a,strong,span {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
border:none;
vertical-align:bottom;
}
table {
border-collapse:collapse;
border-spacing:0;
}
ul {
list-style:none;
}
/*
ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
*/
* html ul { display:inline-block; }
*:first-child+html ul { display:inline-block; }

a:link {color:#000000; text-decoration:underline;}
a:visited {color:#000000; text-decoration:none;}
a:hover {color:#000000; text-decoration:none;}
a:active {color:#007832; text-decoration:none;}
a{
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
a:hover{
opacity: 0.7;
}



.sp{
display:none!important;
}


main ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
header ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
footer ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }


/* ==============================================
header
============================================== */


header{
position: relative;
padding: 0 0 86px 0;
}
header h1,
header .logo{
text-align: center;
padding: 80px 0 0 0;
}
header h1 a,
header .logo a{
}
header h1 a img,
header .logo a img{
max-width: 168px;
}



header .menu{
position: fixed;
top:80px;
right: 80px;
width: 60px;
height: 60px;
border-radius: 30px;
display: block;
background: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
z-index: 1200;
cursor: pointer;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
@media screen and (max-width:1024px) { /* iPad Pro */
header .menu{
right: 40px;
}
}
header .menu:hover{
opacity: 0.7;
}
header .menu span{
display: block;
width: 20px;
height: 1px;
position: absolute;
top:29px;
left: 0;
right: 0;
margin: auto;
background: #FFF;
cursor: pointer;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
header .menu span::before{
content: "";
display: block;
width: 20px;
height: 1px;
position: absolute;
top:-8px;
left: 0;
right: 0;
margin: auto;
background: #FFF;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
header .menu span::after{
content: "";
display: block;
width: 20px;
height: 1px;
position: absolute;
top:8px;
left: 0;
right: 0;
margin: auto;
background: #FFF;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
header .menu.on span{
display: block;
width: 20px;
height: 1px;
position: absolute;
top:29px;
left: 0;
right: 0;
margin: auto;
background: #FFF;
cursor: pointer;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
header .menu.on span::before{
top:1px;
left: -1px;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
header .menu.on span::after{
display: none;
}



header #menu .inner{
position: fixed;
top:0;
right: -400px;
width: 400px;
height: 100%;
background: #FFF;
z-index: 1100;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
header #menu .bg{
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
header #menu.on .inner{
right: 0;
}
header #menu.on .bg{
content: "";
position: fixed;
top:0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
cursor: pointer;
}



header #menu p{
padding: 90px 0 0 35px;
}
header #menu p a{
}
header #menu p a img{
width: 112px;
}
header #menu .link ul{
padding: 40px 40px 0 5px;
}
header #menu .link ul li{
float: left;
width: 50%;
padding: 10px 0 10px 0;
text-align: center;
}
header #menu .link ul li a{
text-decoration: none;
}
header #menu .follow{
background: url("../images/common/cmn_dln.png") repeat-x;
background-size: 9px auto;
margin: 40px 0 0 0;
}
header #menu .follow h2{
font-size: 13px;
line-height: 20px;
letter-spacing: 1.5px;
text-align: center;
padding: 40px 0 0 0;
}
header #menu .follow h2 img{
max-width: 218px;
display: block;
margin: 0 auto 4px auto;
}
header #menu .follow ul{
display: table;
margin: auto;
padding: 25px 0 0 0;
}
header #menu .follow ul li{
float: left;
margin: 0 12px;
}
header #menu .follow ul li a{
}
header #menu .follow ul li a img{
width: 36px;
}



header #sns{
position: absolute;
top:98px;
left: 100px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
header #sns{
left: 40px;
}
}
@media screen and (max-width:1023px) { /* narrow */
header #sns{
display: none;
}
}
header #sns ul{
}
header #sns ul li{
float: left;
margin: 0 40px 0 0;
}
header #sns ul li a{
}
header #sns ul li a img{
max-width: 30px;
}



/* ==============================================
main
============================================== */

main{
border-bottom: 1px solid #ebebeb;
}
main article{
max-width: 1200px;
margin: auto;
padding: 0 80px 120px 80px;
position: relative;
}
@media screen and (max-width:1024px) { /* iPad Pro */
main article{
padding: 0 40px 120px 40px;
}
}
main article .inner{
margin: 0 380px 0 0;
}
@media screen and (max-width:1024px) { /* iPad Pro */
main article .inner{
margin: 0 340px 0 0;
}
}



main article #bottom-news{
position: relative;
border-top: #ebebeb solid 1px;
margin: 120px 0 0 0;
}
main article #bottom-news .inner{
margin: 0;
}
main article #bottom-news h2{
text-align: center;
padding: 80px 0 0 0;
}
main article #bottom-news h2 img{
max-width: 156px;
}
main article #bottom-news ul{
padding: 45px 0 0 0;
}
main article #bottom-news ul li{
width: 30.65%;
float: left;
margin: 0 4% 0 0;
}
@media screen and (max-width:1024px) { /* iPad Pro */
main article #bottom-news ul li{
width: 100%;
float: none;
margin: 0 0 40px 0;
}
}
main article #bottom-news ul li:last-child{
margin: 0;
}
main article #bottom-news ul li a{
display: block;
position: relative;
padding: 0px 0 0 70px;
font-size: 13px;
line-height: 20px;
text-decoration: none;
}
main article #bottom-news ul li a img{
width: 60px;
height: 60px;
object-fit: cover;
position: absolute;
top:0;
left: 0;
border-radius: 30px;
}
main article #bottom-news ul li a span{
display: block;
font-family: "BahnsChrift";
font-size: 16px;
font-weight: bold;
}



main article #bottom-tv{
position: relative;
}
main article #bottom-tv h2{
text-align: center;
padding: 80px 0 0 0;
}
main article #bottom-tv h2 img{
max-width: 234px;
}
main article #bottom-tv .inner{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
max-width: 1200px;
margin: auto;
}
main article #bottom-tv .inner:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html main article #bottom-tv .inner { display:inline-block; }
*:first-child+html main article #bottom-tv .inner { display:inline-block; }

main article #bottom-tv .inner a{
display: block;
float: left;
width: 46.75%;
margin: 45px 6.5% 0 0;
text-decoration: none;
position: relative;
z-index: 100;
}
main article #bottom-tv .inner a:nth-child(2n){
margin: 45px 0 0 0;
}
main article #bottom-tv .inner a h3{
padding: 61% 90px 0 0;
font-size: 13px;
line-height: 20px;
}
main article #bottom-tv .inner a .image{
position: absolute;
top:0;
left: 0;
right: inherit;
border: solid 4px #000;
border-radius: 4px;
padding: 1px;
background: #FFF;
width: 100%;
}
main article #bottom-tv .inner a .image::before{
content: "";
position: absolute;
bottom:-10px;
left: -4px;
width: 4px;
height: 12px;
border-radius: 4px;
background: #000;
}
main article #bottom-tv .inner a .image::after{
content: "";
position: absolute;
bottom:-10px;
right: -4px;
width: 4px;
height: 12px;
border-radius: 4px;
background: #000;
}
main article #bottom-tv .inner a p{
position: absolute;
top:85%;
left: inherit;
right: -5px;
font-family: "BahnsChrift";
font-size: 17px;
line-height: 19px;
letter-spacing: 0;
background: linear-gradient(transparent 50%, #c8ebfa 50%);
padding: 0 5px;
}
main article #bottom-tv .inner a .image img{
}
main article #bottom-tv .inner a .image img.play{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 60px;
height: 60px;
object-fit:contain;
opacity: 0.8;
}



main article #side-menu{
position: absolute;
top:0;
right: 80px;
width: 300px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
main article #side-menu{
position: absolute;
top:0;
right: 40px;
width: 300px;
}
}
main article #side-menu .banner{
position: absolute;
top:0;
background: #FFF;
}
main article #side-menu .banner li{
margin: 0 0 50px 0;
}
main article #side-menu #floating-banner{
width: 300px;
}
main article #side-menu #floating-banner ul li{
padding: 40px 0 0 0;
margin: 0;
}



main .button a{
display: block;
background: url("../images/common/cmn_btn_m.png");
background-size: 234px 64px;
width: 234px;
height: 64px;
font-size: 16px;
line-height: 16px;
font-weight: 500;
text-align: center;
text-decoration: none;
margin: auto;
padding: 19px 0 0 0;
}




/* ==============================================
footer
============================================== */

footer{
max-width: 1200px;
margin: auto;
padding: 40px 80px 120px 80px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
footer{
padding: 40px 40px 120px 40px;
}
}



footer .banner{
padding: 80px 0 0 0;
}
footer .banner ul{
}
footer .banner ul li {
float: left;
width: 29%;
margin: 0 6.5% 0 0;
}
footer .banner ul li:last-child {
margin: 0;
}
footer .banner ul li a{
}
footer .banner ul li a img{
max-width: 348px;
}



footer #book{
position: relative;
margin: 80px 0 0 0;
padding: 0 0 90px 0;
background: -moz-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: -webkit-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: linear-gradient(to right, #d7f0ff, #ffe6f5); 
}
@media screen and (max-width:1023px) { /* narrow */
footer #book{
padding: 0 0 60px 0;
}
}
footer #book h2{
text-align: center;
padding: 90px 0 0 340px;
}
@media screen and (max-width:1023px) { /* narrow */
footer #book h2{
padding: 90px 0 0 260px;
}
}
footer #book h2 img{
max-width: 167px;
}
footer #book .image{
position: absolute;
top:60px;
left: 0;
width: 100%;
text-align: center;
}
footer #book .image a{
}
footer #book .image a img{
max-width: 233px;
margin: 0 340px 0 0;
}
footer #book .button{
padding: 40px 0 0 340px;
position: relative;
z-index: 100;
}
@media screen and (max-width:1023px) { /* narrow */
footer #book .button{
padding: 40px 0 0 260px;
}
}
footer #book .button a{
display: block;
background: url("../images/common/cmn_ft_btn_l.png");
background-size: 337px 64px;
width: 337px;
height: 64px;
font-size: 16px;
line-height: 16px;
font-weight: 500;
text-decoration: none;
margin: auto;
padding: 19px 0 0 0;
text-align: center;
}
@media screen and (max-width:1023px) { /* narrow */
footer #book .button a{
background: url("../images/common/cmn_btn_m.png");
background-size: 234px 64px;
width: 234px;
height: 64px;
}
}
footer #book ul{
display: table;
margin: auto;
padding: 16px 0 0 340px;
position: relative;
z-index: 100;
}
@media screen and (max-width:1023px) { /* narrow */
footer #book ul{
padding: 16px 0 0 260px;
}
}
footer #book ul li{
float: left;
margin: 0 10px 0 0;
}
@media screen and (max-width:1023px) { /* narrow */
footer #book ul li{
float: none;
margin: 0 auto 10px auto;
}
}
footer #book ul li a{
display: block;
background: url("../images/common/cmn_ft_btn_s.png");
background-size: 158px 32px;
width: 158px;
height: 32px;
font-size: 13px;
line-height: 13px;
letter-spacing: 0;
font-weight: 500;
text-decoration: none;
margin: auto;
padding: 8px 8px 0 0;
text-align: center;
}



footer .link{
position: relative;
}
footer .link h2{
position: absolute;
top:45px;
;empty-cells: 0;
}
footer .link h2 a{
}
footer .link h2 a img{
max-width: 112px;
}
footer .link ul{
padding: 53px 0 53px 160px;
}
footer .link ul li{
float: left;
margin: 0 39px 0 0;
}
footer .link ul li a{
font-size: 15px;
line-height: 15px;
text-decoration: none;
}



footer .follow{
background: url("../images/common/cmn_dln.png") repeat-x;
background-size: 9px auto;
}
footer .follow h2{
font-size: 13px;
line-height: 20px;
letter-spacing: 1.5px;
text-align: center;
padding: 60px 0 0 0;
}
footer .follow h2 img{
max-width: 218px;
display: block;
margin: 0 auto 4px auto;
}
footer .follow ul{
display: table;
margin: auto;
padding: 35px 0 0 0;
}
footer .follow ul li{
float: left;
margin: 0 20px;
}
footer .follow ul li a{
}
footer .follow ul li a img{
width: 52px;
}



footer #abj{
border: solid 1px #ebebeb;
margin: 37px 0 0 0;
position: relative;
}
footer #abj h2{
position: absolute;
top:14px;
left: 12px;
}
footer #abj h2 img{
max-width: 49px;
}
footer #abj p{
font-size: 10px;
line-height: 18px;
padding: 15px 20px 19px 76px;
}
footer #abj p a{
text-decoration: none;
}



footer #corporate{
}
footer #corporate ul{
display: table;
margin: auto;
padding: 52px 0 0 0;
}
footer #corporate ul li{
float: left;
margin: 0 20px;
}
footer #corporate ul li a{
font-size: 13px;
line-height: 20px;
text-decoration: none;
}
footer #corporate p{
font-size: 10px;
line-height: 10px;
text-align: center;
padding: 15px 0 0 0;
}



/* ==============================================
#page-index
============================================== */

/* #page-index #introduction
---------------------------------------------- */

#page-index #introduction{
max-width: 1200px;
margin: auto;
padding: 0 80px;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
@media screen and (max-width:1360px) { /* responsive */
#page-index #introduction{
padding: 0 40px;
}
}
@media screen and (max-width:1240px) { /* responsive */
#page-index #introduction{
padding: 0 20px;
}
}
@media screen and (max-width:1200px) { /* responsive */
#page-index #introduction{
padding: 0 10px;
}
}
#page-index #introduction .inner{
position: relative;
}
#page-index #introduction .inner:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #page-index #introduction .inner { display:inline-block; }
*:first-child+html #page-index #introduction .inner { display:inline-block; }



#page-index #introduction #topics{
float: left;
width: 820px;
position: relative;
}
@media screen and (max-width:1160px) { /* responsive */
#page-index #introduction #topics{
float: none;
margin: auto;
}
}
#page-index #introduction #topics #slider{
}
#page-index #introduction #topics #slider li{
}
#page-index #introduction #topics #slider li a{
display: block;
text-decoration: none;
font-size: 14px;
line-height: 20px;
}
#page-index #introduction #topics #slider li a img{
max-width: 820px;
display: block;
margin: 0 0 15px 0;
}
#page-index #introduction #topics #slider li a span{
font-family: "BahnsChrift";
font-weight: bold;
letter-spacing: 0;
margin: 0 15px 0 0;
}
#page-index #introduction #topics #navigation{
position: absolute;
bottom:2px;
right: -6px;
}
#page-index #introduction #topics #navigation li{
float: left;
}
#page-index #introduction #topics #navigation li a{
display: block;
width: 20px;
height: 20px;
font-size: 0;
line-height: 0;
position: relative;
}
#page-index #introduction #topics #navigation li a::after{
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #dddddd;
position: absolute;
top:6px;
left: 6px;
}
#page-index #introduction #topics #navigation li.here a::after{
background: #000;
}



#page-index #introduction #side-banner{
float: right;
width: 300px;
}
@media screen and (max-width:1160px) { /* responsive */
#page-index #introduction #side-banner{
display: none;
}
}
#page-index #introduction #side-banner ul{
}
#page-index #introduction #side-banner ul li{
}
#page-index #introduction #side-banner ul li img{
}



#page-index #introduction .banner{
position: absolute;
top:0;
right: 0;
width: 300px;
}
@media screen and (max-width:1160px) { /* responsive */
#page-index #introduction .banner{
position: inherit;
top:inherit;
right: inherit;
width: 760px;
margin: auto;
}
}
#page-index #introduction .banner ul{
padding: 0 0 40px 0;
}
@media screen and (max-width:1160px) { /* responsive */
#page-index #introduction .banner ul{
padding: 40px 0 0 0;
}
}
#page-index #introduction .banner ul li {
margin: 0 0 40px 0;
}
@media screen and (max-width:1160px) { /* responsive */
#page-index #introduction .banner ul li {
float: left;
margin: 0 40px;
}
}
#page-index #introduction .banner ul li a{
}
#page-index #introduction .banner ul li a img{
}



/* #page-index #pickup
---------------------------------------------- */

#page-index #pickup{
max-width: 1200px;
margin: auto;
padding: 0 80px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-index #pickup{
padding: 0 40px;
}
}
#page-index #pickup h2{
text-align: center;
padding: 100px 0 0 0;
}
#page-index #pickup h2 img{
max-width: 250px;
}
#page-index #pickup .inner{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
margin: -9px 0 0 0;
}
#page-index #pickup .inner:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #page-index #pickup .inner { display:inline-block; }
*:first-child+html #page-index #pickup .inner { display:inline-block; }

#page-index #pickup .inner a{
display: block;
float: left;
width: 29%;
margin: 55px 6.5% 0 0;
position: relative;
text-decoration: none;
}
#page-index #pickup .inner a:nth-child(3n){
margin: 55px 0 0 0;
}
#page-index #pickup .inner a div{
}
#page-index #pickup .inner a div h3{
padding: 62.5% 0 0 0;
font-family: "BahnsChrift","Noto Sans JP";
font-size: 14px;
line-height: 18px;
font-weight: 500;
letter-spacing: 0;
}
#page-index #pickup .inner a div h3 span{
float: right;
padding: 0 4px;
background: linear-gradient(transparent 50%, #c8ebfa 50%);
}
#page-index #pickup .inner a div p{
font-size: 13px;
line-height: 20px;
padding: 10px 0 0 0;
}
#page-index #pickup .inner a div .image{
position: absolute;
top:0;
left: 0;
width: 100%;
}
#page-index #pickup .inner a div .image span{
position: absolute;
top:0;
left: 0;
padding: 56% 100% 0 0;
overflow: hidden;
}
#page-index #pickup .inner a div .image span img{
position: absolute;
top:0;
left: 0;
width: 100%;
z-index: 101;
}
#page-index #pickup .inner a div.instagram .image span img{
top:-20%;
}
#page-index #pickup .inner a div .image span img.play{
right: 0;
bottom: 0;
margin: auto;
width: 60px;
height: 60px;
object-fit:contain;
opacity: 0.8;
}
#page-index #pickup .inner a div .image::after{
content: "";
position: absolute;
top:8px;
left: 8px;
width: 100%;
padding: 56% 0 0 0;
background: -moz-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: -webkit-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: linear-gradient(to right, #d7f0ff, #ffe6f5);
}
#page-index #pickup .button{
padding: 55px 0 0 0;
}
#page-index #pickup .pickup-block:nth-child(n+2) {
display:none;
}

/* #page-index #tv
---------------------------------------------- */

#page-index #tv{
position: relative;
padding: 0 80px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-index #tv{
padding: 0 40px;
}
}
#page-index #tv::after{
content: "";
position: absolute;
bottom:33px;
left: 0;
width: 100%;
height: 200px;
background: #faf5f0;
}
#page-index #tv h2{
text-align: center;
padding: 100px 0 0 0;
}
#page-index #tv h2 img{
max-width: 234px;
}
#page-index #tv .inner{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
max-width: 1200px;
margin: auto;
}
#page-index #tv .inner:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #page-index #tv .inner { display:inline-block; }
*:first-child+html #page-index #tv .inner { display:inline-block; }

#page-index #tv .inner a{
display: block;
float: left;
width: 29%;
margin: 45px 6.5% 0 0;
text-decoration: none;
position: relative;
z-index: 100;
}
#page-index #tv .inner a:nth-child(3n){
margin: 45px 0 0 0;
}
#page-index #tv .inner a h3{
padding: 61% 90px 0 0;
font-size: 13px;
line-height: 20px;
}
#page-index #tv .inner a .image{
position: absolute;
top:0;
left: 0;
right: inherit;
border: solid 4px #000;
border-radius: 4px;
padding: 1px;
background: #FFF;
}
#page-index #tv .inner a .image::before{
content: "";
position: absolute;
bottom:-10px;
left: -4px;
width: 4px;
height: 12px;
border-radius: 4px;
background: #000;
}
#page-index #tv .inner a .image::after{
content: "";
position: absolute;
bottom:-10px;
right: -4px;
width: 4px;
height: 12px;
border-radius: 4px;
background: #000;
}
#page-index #tv .inner a p{
position: absolute;
top:85%;
left: inherit;
right: -5px;
font-family: "BahnsChrift";
font-size: 17px;
line-height: 19px;
letter-spacing: 0;
background: linear-gradient(transparent 50%, #c8ebfa 50%);
padding: 0 5px;
}
#page-index #tv .inner a .image img{
}
#page-index #tv .inner a .image img.play{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 60px;
height: 60px;
object-fit:contain;
opacity: 0.8;
}
#page-index #tv .button{
position: relative;
padding: 55px 0 0 0;
z-index: 100;
}



/* #page-index #story
---------------------------------------------- */

#page-index #story{
max-width: 1200px;
margin: auto;
padding: 0 80px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-index #story{
padding: 0 40px;
}
}
#page-index #story h2{
text-align: center;
padding: 100px 0 0 0;
}
#page-index #story h2 img{
max-width: 228px;
}
#page-index #story .inner{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#page-index #story .inner a{
display: block;
float: left;
width: 29%;
margin: 45px 6.5% 0 0;
position: relative;
text-decoration: none;
}
#page-index #story .inner a:nth-child(3n){
margin: 45px 0 0 0;
}
#page-index #story .inner a div{
}
#page-index #story .inner a div h3{
font-family:"Noto Serif JP";
font-weight:400;
font-size: 24px;
line-height: 32px;
position: relative;
}
#page-index #story .inner a div h3 img{
width: 100px;
border-radius: 50px;
display: block;
margin: 0 auto 20px auto;
position: relative;
z-index: 100;
}
#page-index #story .inner a div h3::after{
content: "";
position: absolute;
top:0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
border-radius: 50px;
background: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
-ms-filter: blur(8px);
filter: blur(8px);
}
#page-index #story .inner a div h3 strong{
font-family:"Noto Sans JP";
font-weight:400;
font-size: 14px;
line-height: 14px;
display: block;
margin: 0 0 12px 0;
padding: 0 0 0 50px;
}
#page-index #story .inner a div h3 strong span{
font-family: "BahnsChrift";
font-size: 17px;
display: block;
position: absolute;
top:123px;
left: 0;
}
#page-index #story .inner a div h3 span{
font-family: "BahnsChrift";
font-size: 17px;
letter-spacing: 0;
display: block;
position: absolute;
top:114px;
right: 0;
}
#page-index #story .inner a div p{
font-size: 13px;
line-height: 24px;
padding: 12px 0 32px 0;
}
#page-index #story .inner a div::after{
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom:11px;
left: 0;
background: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
}
#page-index #story .inner a div p:last-child{
text-align: right;
position: absolute;
bottom:0;
right: 0;
background: #FFF;
padding: 0 0 0 10px;
z-index: 100;
}
#page-index #story .button{
padding: 55px 0 0 0;
}



/* #page-index #snap
---------------------------------------------- */

#page-index #snap{
position: relative;
}
#page-index #snap h2{
text-align: center;
padding: 100px 0 0 0;
}
#page-index #snap h2 img{
max-width: 300px;
}
#page-index #snap .inner{
position: relative;
}
#page-index #snap ul{
padding: 44px 0 0 0;
position: relative;
z-index: 100;
}
#page-index #snap ul li{
float: left;
width: 15.4%;
margin: 0 1.52% 0 0;
}
#page-index #snap .inner::before{
content: "";
position: absolute;
top:-38px;
right: 0;
width: 24%;
height: 63%;
background: -moz-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: -webkit-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: linear-gradient(to right, #d7f0ff, #ffe6f5); 
}
#page-index #snap .inner::after{
content: "";
position: absolute;
bottom:-40px;
left: 0;
width: 19.5%;
height: 52%;
background: -moz-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: -webkit-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: linear-gradient(to right, #d7f0ff, #ffe6f5); 
}
#page-index #snap ul li:last-child{
margin: 0;
}
#page-index #snap ul li img{
width: 100%;
height: 400px;
object-fit: cover;
}
#page-index #snap .button{
position: absolute;
bottom:-33px;
left: 0;
right: 0;
margin: auto;
z-index: 100;
}



/* #page-index #news
---------------------------------------------- */

#page-index #news{
position: relative;
margin: 120px 0 0 0;
}
#page-index #news h2{
position: absolute;
top:5px;
left: 40px;
}
#page-index #news h2 img{
max-width: 156px;
}
#page-index #news ul{
padding: 0 210px 0 230px;
}
#page-index #news ul li{
width: 30.65%;
float: left;
margin: 0 4% 0 0;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-index #news ul li{
width: 100%;
float: none;
margin: 0 0 45px 0;
}
}
#page-index #news ul li:last-child{
margin: 0;
}
#page-index #news ul li a{
display: block;
position: relative;
padding: 12px 0 0 108px;
font-size: 13px;
line-height: 20px;
text-decoration: none;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-index #news ul li a{
padding: 22px 0 0 108px;
}
}
#page-index #news ul li a img{
width: 88px;
height: 88px;
object-fit: cover;
position: absolute;
top:0;
left: 0;
border-radius: 44px;
}
#page-index #news ul li a span{
display: block;
font-family: "BahnsChrift";
font-size: 16px;
font-weight: bold;
}
#page-index #news .button{
position: absolute;
top:0;
right: 80px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-index #news .button{
top:inherit;
bottom: -25px;
right: 40px;
}
}
#page-index #news .button a{
background: url("../images/top/tp_nws_btn.png");
background-size: 96px 84px;
width: 96px;
height: 84px;
font-family: "BahnsChrift";
font-size: 18px;
line-height: 18px;
letter-spacing: 0;
padding: 32px 15px 0 0;
}



/* #page-index #instagram
---------------------------------------------- */

#page-index #instagram{
margin: 135px 0 0 0;
background: #000;
}
#page-index #instagram .inner{
position: relative;
}
#page-index #instagram h2{
text-align: center;
position: absolute;
top:40%;
left: 0;
right: 0;
margin: auto;
width: 14.2857142857%;
}
#page-index #instagram h2 img{
width: 80%;
max-width: 160px;
}
#page-index #instagram ul{
}
#page-index #instagram ul li{
width: 14.2857142857%;
float: left;
}
#page-index #instagram ul li:nth-child(10){
margin: 0 14.2857142857% 0 0;
}
#page-index #instagram ul li img{
}
#page-index #instagram .button{
}
#page-index #instagram .button a{
color: #FFF;
padding: 10% 0 4.2% 0;
background: none;
font-family: "BahnsChrift";
position: absolute;
top:33.5%;
left: 0;
right: 0;
margin: auto;
font-size: 17px;
width: 14.2857142857%;
}



/* ==============================================
#page-profile
============================================== */

#page-profile #introduction{
background: #f9f9f9;
height: 320px;
}
#page-profile #introduction h1{
text-align: center;
padding: 80px 0 0 0;
}
#page-profile #introduction h1 img{
width: 316px;
}
#page-profile #introduction ul{
display: table;
margin: auto;
padding: 40px 0 0 0;
}
#page-profile #introduction ul li{
float: left;
margin: 0 10px;
}
#page-profile #introduction ul li a{
}
#page-profile #introduction ul li a img{
width: 166px;
}



#page-profile .list{
margin: -40px 0 0 0;
}
#page-profile .list h2{
text-align: center;
font-size: 15px;
line-height: 15px;
font-weight: 600;
padding: 100px 0 0 0;
}
#page-profile .list h2 img{
width: auto;
height: 56px;
display: block;
margin: auto;
}
#page-profile .list ul{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#page-profile .list ul li{
float: left;
width: 29.3%;
margin: 50px 6% 0 0;
}
@media screen and (max-width:1023px) { /* narrow */
#page-profile .list ul li{
width: 47%;
}
}
#page-profile .list ul li:nth-child(3n){
margin: 50px 0 0 0;
}
@media screen and (max-width:1023px) { /* narrow */
#page-profile .list ul li:nth-child(3n){
margin: 50px 6% 0 0;
}
#page-profile .list ul li:nth-child(2n){
margin: 50px 0 0 0;
}
}
#page-profile .list ul li a{
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
line-height: 30px;
letter-spacing: 8px;
}
#page-profile .list ul li a img{
margin: 0 0 12px 0;
}
#page-profile .list ul li a span{
display: block;
margin: 4px auto 0 auto;
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
}



#page-profile #side-menu{
position: absolute;
top:221px;
right: 80px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-profile #side-menu{
right: 40px;
}
}



#page-profile #profile{
position: relative;
padding: 0 0 0 57%;
}
#page-profile #profile #photo{
position: absolute;
top:0;
left: 0;
width: 50%;
}
#page-profile #profile #photo #slider{
}
#page-profile #profile #photo #slider li{
}


#page-profile #profile #photo #slider li img{
max-width: 600px;
}
#page-profile #profile #photo #navigation{
display: table;
margin: 14px auto 0 auto;
}
#page-profile #profile #photo #navigation li{
float: left;
}
#page-profile #profile #photo #navigation li a{
display: block;
width: 20px;
height: 20px;
font-size: 0;
line-height: 0;
position: relative;
}
#page-profile #profile #photo #navigation li a::after{
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #dddddd;
position: absolute;
top:6px;
left: 6px;
}
#page-profile #profile #photo #navigation li.here a::after{
background: #000;
}
#page-profile #profile h1{
font-size: 30px;
line-height: 30px;
letter-spacing: 15px;
font-weight: 200;
padding: 135px 0 0 0;
}
#page-profile #profile h1 span{
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
display: block;
margin: 10px 0 0 0;
}
#page-profile #profile .follow{
margin: 30px 0 0 0;
position: relative;
}
#page-profile #profile .follow h2{
}
#page-profile #profile .follow h2 img{
max-width: 254px;
}
#page-profile #profile .follow ul{
position: absolute;
top:2px;
left: 162px;
}
#page-profile #profile .follow ul li{
float: left;
margin: 0 4px 0 0;
}
#page-profile #profile .follow ul li a{
}
#page-profile #profile .follow ul li a img{
width: auto;
height: 18px;
}
#page-profile #profile .profile{
position: relative;
padding: 30px 0 0 0;
margin: 150px 0 0 0;
}
#page-profile #profile .profile::before{
content: "";
width: 100%;
height: 1px;
position: absolute;
top:0;
left: 0;
background: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
}
#page-profile #profile .profile ul{
float: left;
width: 50%;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-profile #profile .profile ul{
float: none;
width: 100%;
}
}
#page-profile #profile .profile ul li{
font-size: 13px;
line-height: 20px;
position: relative;
padding: 0 0 0 85px;
margin: 8px 0 0 0;
}
#page-profile #profile .profile ul li span{
display: block;
position: absolute;
top:0;
left: 0;
}
#page-profile #profile .profile p{
clear: both;
font-size: 13px;
line-height: 20px;
padding: 30px 0 0 0;
}



#page-profile #qa{
position: relative;
padding: 0 0 0 250px;
margin: 120px 0 0 0;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-profile #qa{
padding: 120px 0 0 0;
margin: -90px 0 0 0;
}
}
#page-profile #qa h2{
position: absolute;
top:0;
left: 0;
}
#page-profile #qa h2 img{
max-width: 218px;
}
#page-profile #qa h3{
font-size: 15px;
line-height: 24px;
font-weight: 500;
background: linear-gradient(transparent 50%, #c8ebfa 50%);
display: inline;
}
#page-profile #qa h3:nth-child(2),
#page-profile #qa h3:nth-child(6),
#page-profile #qa h3:nth-child(10),
#page-profile #qa h3:nth-child(14),
#page-profile #qa h3:nth-child(18),
#page-profile #qa h3:nth-child(22),
#page-profile #qa h3:nth-child(26),
#page-profile #qa h3:nth-child(30),
#page-profile #qa h3:nth-child(34),
#page-profile #qa h3:nth-child(38){
background: linear-gradient(transparent 50%, #fae6f0 50%);
}
#page-profile #qa p{
font-size: 15px;
line-height: 28px;
background: url("../images/common/cmn_dln.png") bottom repeat-x;
background-size: 9px auto;
padding: 2px 0 25px 0;
margin: 0 0 25px 0;
}



#page-profile #pager{
position: absolute;
top:0;
right: 80px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-profile #pager{
right: 40px;
}
}
#page-profile #pager p{
float: left;
padding: 2px 0 0 0;
}
#page-profile #pager p a{
font-size: 13px;
line-height: 13px;
text-decoration: none;
}
#page-profile #pager ul{
float: left;
}
#page-profile #pager ul li{
float: left;
margin: 0 0 0 8px;
}
#page-profile #pager ul li a{
}
#page-profile #pager ul li a img{
max-width: 34px;
}



#page-profile #letter{
background: #faf7f5;
padding: 0 0 70px 0;
}
#page-profile #letter h2{
font-size: 20px;
line-height: 20px;
font-weight: 600;
text-align: center;
padding: 60px 0 0 0;
}
#page-profile #letter h2 img{
max-width: 46px;
display: block;
margin: 0 auto 15px auto;
}
#page-profile #letter p{
font-size: 15px;
line-height: 28px;
text-align: center;
padding: 30px 0 0 0;
}



#page-profile .bottom-follow{
position: relative;
margin: 60px auto 0 auto;
display: table;
padding: 0 0 0 20px;
}
#page-profile .bottom-follow h2{
}
#page-profile .bottom-follow h2 img{
max-width: 254px;
}
#page-profile .bottom-follow ul{
position: absolute;
top:2px;
left: 182px;
}
#page-profile .bottom-follow ul li{
float: left;
margin: 0 4px 0 0;
}
#page-profile .bottom-follow ul li a{
}
#page-profile .bottom-follow ul li a img{
width: auto;
height: 18px;
}



#page-profile #bottom-pager{
position: relative;
display: table;
margin: 40px auto 0 auto;
padding: 0 0 80px 0;
}
#page-profile #bottom-pager ul{
}
#page-profile #bottom-pager ul li{
position: absolute;
top:14px;
left: -58px;
}
#page-profile #bottom-pager ul li:last-child{
position: absolute;
top:14px;
left: inherit;
right: -64px;
}
#page-profile #bottom-pager ul li a{
}
#page-profile #bottom-pager ul li a img{
max-width: 34px;
}



/* ==============================================
#page-story
============================================== */

#page-story #introduction{
background: url("../images/story/stry_intr_bg.jpg") center no-repeat;
height: 320px;
margin: 0 0 80px 0;
}
#page-story #introduction h1{
text-align: center;
}
#page-story #introduction h1 img{
max-width: 412px;
margin: -40px 0 0 0;
}
#page-story #introduction h2{
text-align: center;
padding: 30px 0 0 0;
font-family:"Noto Serif JP";
font-weight:300;
font-size: 20px;
line-height: 20px;
letter-spacing: 4px;
}
#page-story #introduction p{
text-align: center;
padding: 30px 0 0 0;
}



#page-story #list{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#page-story #list a{
display: block;
float: left;
width: 45%;
margin: 0 10% 75px 0;
position: relative;
text-decoration: none;
}
@media screen and (max-width:1023px) { /* narrow */
#page-story #list a{
float: none;
width: 100%;
margin: 0 0 75px 0;
}
}
#page-story #list a:nth-child(2n){
margin: 0 0 75px 0;
}
#page-story #list a div{
}
#page-story #list a div h3{
font-family:"Noto Serif JP";
font-weight:400;
font-size: 24px;
line-height: 32px;
position: relative;
}
#page-story #list a div h3 img{
width: 100px;
border-radius: 50px;
display: block;
margin: 0 auto 20px auto;
position: relative;
z-index: 100;
}
#page-story #list a div h3::after{
content: "";
position: absolute;
top:0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
border-radius: 50px;
background: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
-ms-filter: blur(8px);
filter: blur(8px);
}
#page-story #list.model a div h3::after{
display: none;
}
#page-story #list a div h3 strong{
font-family:"Noto Sans JP";
font-weight:400;
font-size: 14px;
line-height: 14px;
display: block;
margin: 0 0 12px 0;
padding: 0 0 0 50px;
}
#page-story #list a div h3 strong span{
font-family: "BahnsChrift";
font-size: 17px;
display: block;
position: absolute;
top:123px;
left: 0;
}
#page-story #list a div h3 span{
font-family: "BahnsChrift";
font-size: 17px;
letter-spacing: 0;
display: block;
position: absolute;
top:114px;
right: 0;
}
#page-story #list.model a div h3 span{
position: inherit;
top:inherit;
right: inherit;
}
#page-story #list a div p{
font-size: 13px;
line-height: 24px;
padding: 12px 0 32px 0;
}
#page-story #list a div::after{
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom:11px;
left: 0;
background: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
}
#page-story #list a div p:last-child{
text-align: right;
position: absolute;
bottom:0;
right: 0;
background: #FFF;
padding: 0 0 0 10px;
z-index: 100;
}



#page-story #pager{
position: relative;
display: table;
margin: auto;
}
#page-story #pager ul{
display: table;
margin: auto;
}
#page-story #pager ul li{
float: left;
margin: 0 5px;
}
#page-story #pager ul li a{
display: block;
width: 32px;
height: 32px;
border-radius: 16px;
text-decoration: none;
font-family: "BahnsChrift";
font-size: 18px;
line-height: 34px;
text-align: center;
}
#page-story #pager ul li.here a{
color: #FFF;
background: #000;
}
#page-story #pager p{
}
#page-story #pager p a{
}
#page-story #pager p a img{
width: 34px;
}
#page-story #pager .prev{
position: absolute;
top:-1px;
left: -45px;
}
#page-story #pager .next{
position: absolute;
top:-1px;
right: -45px;
}



#page-story #cast{
}
#page-story #cast h2{
padding: 100px 0 0 0;
text-align: center;
}
#page-story #cast h2 img{
max-width: 286px;
}
#page-story #cast ul{
}
#page-story #cast ul:last-child{
border-top: 1px solid #000;
margin: 60px 0 0 0;
padding: 20px 0 0 0;
}
#page-story #cast ul li{
float: left;
margin: 40px 5.3% 0 0;
width: 12.2%;
}
#page-story #cast ul li:nth-child(6n){
margin: 40px 0 0 0;
}
#page-story #cast ul li a{
text-decoration: none;
font-size: 13px;
line-height: 18px;
display: block;
text-align: center;
}
#page-story #cast ul li a img{
max-width: 100px;
border-radius: 50%;
display: block;
margin: 0 0 8px 0;
}



#page-story #title{
position: relative;
padding: 0 0 0 180px;
}
@media screen and (max-width:1023px) { /* narrow */
#page-story #title{
padding: 0;
}
}
#page-story #title.model{
padding: 0 0 100px 180px;
}
@media screen and (max-width:1023px) { /* narrow */
#page-story #title.model{
padding: 0 0 60px 120px;
}
}
#page-story #title h1{
font-family:"Noto Serif JP";
font-weight:200;
font-size: 30px;
line-height: 40px;
letter-spacing: 4px;
padding: 40px 0 0 0;
}
#page-story #title.model h1{
padding: 60px 0 0 0;
}
@media screen and (max-width:1023px) { /* narrow */
#page-story #title h1{
padding: 150px 0 2px 0;
}
}
#page-story #title p{
font-size: 14px;
}
#page-story #title p:nth-child(2){
position: absolute;
top:0;
left: 0;
padding: 0 0 0 180px;
}
@media screen and (max-width:1023px) { /* narrow */
#page-story #title p:nth-child(2){
padding: 108px 0 0 0;
}
}
#page-story #title.model p:nth-child(2){
padding: 30px 0 0 180px;
}
@media screen and (max-width:1023px) { /* narrow */
#page-story #title.model p:nth-child(2){
padding: 30px 0 0 120px;
}
}
#page-story #title p:nth-child(2) span{
font-family: "BahnsChrift";
font-size: 17px;
letter-spacing: 0;
margin: 0 8px 0 0;
}
#page-story #title p:nth-child(2) img{
max-width: 140px;
border-radius: 70px;
position: absolute;
top:0;
left: 0;
z-index: 100;
}
@media screen and (max-width:1023px) { /* narrow */
#page-story #title p:nth-child(2) img{
max-width: 100px;
border-radius: 50px;
}
}
#page-story #title p:nth-child(2) ::after{
content: "";
position: absolute;
top:0;
left: 0;
margin: auto;
width: 140px;
height: 140px;
border-radius: 70px;
background: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
-ms-filter: blur(8px);
filter: blur(8px);
}
@media screen and (max-width:1023px) { /* narrow */
#page-story #title p:nth-child(2) ::after{
width: 100px;
height: 100px;
border-radius: 50px;
}
}
#page-story #title p:nth-child(4) {
text-align: right;
position: absolute;
top:0;
right: 0;
font-family: "BahnsChrift";
font-size: 16px;
letter-spacing: 0;
}
#page-story #title p:nth-child(4) a{
}
#page-story #title p:nth-child(4) a img{
max-width: 174px;
display: block;
margin: 0 0 2px 0;
}
#page-story #title.model p:nth-child(3) {
text-align: right;
position: absolute;
top:0;
right: 0;
font-family: "BahnsChrift";
font-size: 16px;
letter-spacing: 0;
}
#page-story #title.model p:nth-child(3) a{
}
#page-story #title.model p:nth-child(3) a img{
max-width: 174px;
display: block;
margin: 0 0 2px 0;
}



#page-story #story{
margin: 50px 0 0 180px;
background: url("../images/common/cmn_dln.png") repeat-x;
background-size: 9px auto;
}
@media screen and (max-width:1023px) { /* narrow */
#page-story #story{
margin: 35px 0 0 0;
}
}
#page-story #story p{
font-family:"Noto Serif JP";
font-weight:200;
font-size: 15px;
line-height: 24px;
padding: 120px 0 0 0;
}
#page-story #story p:first-child{
padding: 0;
}



#page-story #like{
background: -moz-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: -webkit-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: linear-gradient(to right, #d7f0ff, #ffe6f5); 
margin: 120px 0 0 0;
padding: 0 0 60px 0;
}
#page-story #like h2{
text-align: center;
padding: 40px 0 0 0;
}
#page-story #like h2 img{
max-width: 172px;
}
#page-story #like .button{
padding: 20px 0 0 0;
}
#page-story #like p{
padding: 20px 0 0 0;
text-align: center;
}



#page-story #storys{
margin: 120px 0 0 0;
position: relative;
padding: 0 0 0 180px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-story #storys{
padding: 0;
}
}
#page-story #storys h2{
font-family:"Noto Serif JP";
font-weight:400;
font-size: 30px;
letter-spacing: 8px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-story #storys h2{
font-size: 20px;
padding: 115px 0 0 0;
text-align: center;
}
}
#page-story #storys h2 img:first-child{
max-width: 140px;
border-radius: 70px;
position: absolute;
top:0;
left: 0;
z-index: 100;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-story #storys h2 img:first-child{
max-width: 100px;
border-radius: 50px;
right: 0;
margin: auto;
}
}
#page-story #storys h2 img.pc{
max-width: 228px;
vertical-align: middle;
margin: -10px 0 0 0;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-story #storys h2 img.pc{
width: auto;
height: 20px;
margin: -6px 0 0 0;
}
}
#page-story #storys h2::after{
content: "";
position: absolute;
top:0;
left: 0;
margin: auto;
width: 140px;
height: 140px;
border-radius: 70px;
background: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
-ms-filter: blur(8px);
filter: blur(8px);
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-story #storys h2::after{
right: 0;
width: 100px;
height: 100px;
border-radius: 50px;
}
}
#page-story #storys ul{
background: url("../images/common/cmn_dln.png") repeat-x;
background-size: 9px auto;
margin: 40px 0 0 0;
}
#page-story #storys ul li{
position: relative;
background: url("../images/common/cmn_dln.png") bottom repeat-x;
background-size: 9px auto;
}
#page-story #storys ul li:nth-child(n+11){
display: none;
}
#page-story #storys ul li a{
display: block;
padding: 11px 200px 14px 95px;
text-decoration: none;
font-family:"Noto Serif JP";
font-weight:300;
font-size: 16px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-story #storys ul li a{
padding: 12px 0 40px 0;
}
}
#page-story #storys ul li a span{
}
#page-story #storys ul li a span:first-child{
position: absolute;
top:12px;
left: 0;
font-family: "BahnsChrift";
font-size: 16px;
letter-spacing: 0;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-story #storys ul li a span:first-child{
top:inherit;
bottom:12px;
}
}
#page-story #storys ul li a span:last-child{
position: absolute;
top:11px;
right: 0;
font-family:"Noto Sans JP";
font-size: 13px;
}
@media screen and (max-width:1024px) { /* iPad Pro */
#page-story #storys ul li a span:last-child{
top: inherit;
bottom:13px;
}
}



#page-story #side-menu{
position: absolute;
top:0;
}



#page-story #side-menu #ranking{
}
#page-story #side-menu #ranking h2{
}
#page-story #side-menu #ranking h2 img{
}
#page-story #side-menu #ranking a{
display: block;
padding: 0 0 20px 45px;
background: url("../images/common/cmn_dln.png") bottom repeat-x;
background-size: 9px auto;
position: relative;
text-decoration: none;
}
#page-story #side-menu #ranking a div{
}
#page-story #side-menu #ranking a div h3{
font-family:"Noto Serif JP";
font-weight:300;
font-size: 16px;
line-height: 20px;
padding: 16px 0 0 0;
}
#page-story #side-menu #ranking a div h3 span{
position: absolute;
top:22px;
left: 0;
width: 32px;
height: 32px;
background: #FFF;
border: solid 1px #000;
border-radius: 50%;
text-align: center;
padding: 7px 0 0 1px;
font-family: "BahnsChrift";
font-size: 17px;
}
#page-story #side-menu #ranking a:nth-child(2) div h3 span{
background: #ddcca4;
}
#page-story #side-menu #ranking a:nth-child(3) div h3 span{
background: #d6d6d6;
}
#page-story #side-menu #ranking a:nth-child(4) div h3 span{
background: #ddb9af;
}
#page-story #side-menu #ranking a div p{
font-size: 13px;
line-height: 13px;
padding: 10px 0 0 0;
}
#page-story #side-menu #ranking a div p span{
font-family: "BahnsChrift";
font-size: 17px;
letter-spacing: 0;
margin: 0 10px 0 0;
vertical-align: middle;
}
#page-story #side-menu #ranking a div p:last-child{
position: absolute;
bottom: 22px;
right: 0;
}



#page-story #side-menu #offer{
background: url("../images/story/stry_offr_bg.png") no-repeat;
height: 300px;
margin: 50px 0 0 0;
position: relative;
}
#page-story #side-menu #offer h2{
position: absolute;
top:-20px;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
#page-story #side-menu #offer h2 img{
max-width: 232px;
}
#page-story #side-menu #offer p{
text-align: center;
padding: 170px 0 0 0;
font-size: 13px;
line-height: 24px;
}
#page-story #side-menu #offer .button{
position: absolute;
bottom:-30px;
left: 0;
right: 0;
margin: auto;
}



#page-story #side-menu #cast{
}
#page-story #side-menu #cast h2{
padding: 70px 0 0 0;
}
#page-story #side-menu #cast h2 img{
}
#page-story #side-menu #cast ul{
}
#page-story #side-menu #cast ul:last-child{
margin: 25px 0 0 0;
padding: 0 0 0 0;
}
#page-story #side-menu #cast ul li{
float: left;
margin: 20px 6.6% 0 0;
width: 20%;
}
#page-story #side-menu #cast ul li:nth-child(6n){
margin: 20px 6.6% 0 0;
}
#page-story #side-menu #cast ul li:nth-child(4n){
margin: 20px 0 0 0;
}
#page-story #side-menu #cast ul li a{
font-size: 10px;
line-height: 15px;
letter-spacing: 0;
}
#page-story #side-menu #cast ul li a img{
max-width: 60px;
margin: 0 0 6px 0;
}



/* ==============================================
#page-news
============================================== */

#page-news #introduction{
background: #f9f9f9;
margin: 0 0 80px 0;
}
#page-news #introduction h1{
text-align: center;
padding: 80px 0 90px 0;
}
#page-news #introduction h1 img{
width: 141px;
}



#page-news #list{
}
#page-news #list a:first-child{
}
#page-news #list a{
display: block;
position: relative;
padding: 0 0 0 108px;
text-decoration: none;
margin: 45px 0 0 0;
}
#page-news #list a div{
}
#page-news #list a div h2{
font-size: 16px;
line-height: 22px;
font-weight: 400;
padding: 4px 0 0 0;
}
#page-news #list a div h2 img{
width: 88px;
height: 88px;
object-fit:cover;
position: absolute;
top:0;
left: 0;
border-radius: 44px;
}
#page-news #list a div h2 span{
display: block;
font-family: "BahnsChrift";
font-size: 16px;
font-weight: bold;
margin: 0 0 2px 0;
}
#page-news #list a div p{
font-size: 13px;
line-height: 24px;
padding: 10px 0 0 0;
}



#page-news #news h1{
font-size: 24px;
line-height: 36px;
letter-spacing: 2px;
font-weight: 400;
}
#page-news #news h1 img{
display:block;
margin: 0 0 50px 0;
}
#page-news #news h1 span{
float: right;
font-family: "BahnsChrift";
font-size: 17px;
line-height: 19px;
letter-spacing: 0;
margin: 7px 0 20px 50px;
}
#page-news #news h1:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #page-news #news h1 { display:inline-block; }
*:first-child+html #page-news #news h1 { display:inline-block; }

#page-news #news p:nth-child(2){
padding: 0;
}
#page-news #news h2{
font-size: 20px;
line-height: 30px;
font-weight: 400;
padding: 45px 0 0 0;
margin: 0;
}
#page-news #news h3{
font-size: 18px;
line-height: 28px;
font-weight: 400;
padding: 45px 0 0 0;
margin: 0;
}
#page-news #news h4{
font-size: 16px;
line-height: 24px;
font-weight: 400;
padding: 25px 0 0 0;
margin: 0;
}
#page-news #news p{
padding: 30px 0 0 0;
margin: 0;
}
#page-news #news .wp-block-image{
padding: 40px 0 0 0;
margin: 0;
}
#page-news #news figcaption{
font-size: 12px;
line-height: 20px;
color: #666;
padding: 10px 0 0 0;
}
#page-news #news .wp-block-embed__wrapper{
margin: 40px 0 0 0;
position: relative;
padding-bottom: 56.1%;
height: 0;
overflow: hidden;
background: #000;
}
#page-news #news .wp-block-embed-youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#page-news #news .wp-block-pullquote{
background: #f5f5f5;
margin: 40px 0 0 0;
padding: 0;
}
#page-news #news .wp-block-pullquote p{
font-size: 15px;
line-height: 28px;
text-align: left;
padding: 35px 40px 40px 40px;
}
#page-news #news .left{
width: 47.5%;
float: left;
margin: 0 40px 20px 0; 
}
#page-news #news .right{
width: 47.5%;
float: right;
margin: 0 0 20px 40px; 
}



#page-news .share{
position: relative;
display: table;
margin: 50px auto 0 auto;
}
#page-news .share h2{
font-family: "BahnsChrift";
font-weight: 600;
letter-spacing: 1px;
text-align: center;
}
#page-news .share ul{
display: table;
margin: auto;
padding: 5px 0 0 0;
}
#page-news .share ul li{
float: left;
margin: 0 8px;
}
#page-news .share ul li a{
}
#page-news .share ul li a img{
width: auto;
height: 22px;
}



#page-news #pager{
position: relative;
display: table;
margin: 80px auto 0 auto;
}
#page-news #pager ul{
display: table;
margin: auto;
}
#page-news #pager ul li{
float: left;
margin: 0 5px;
}
#page-news #pager ul li a{
display: block;
width: 32px;
height: 32px;
border-radius: 16px;
text-decoration: none;
font-family: "BahnsChrift";
font-size: 18px;
line-height: 34px;
text-align: center;
}
#page-news #pager ul li.here a{
color: #FFF;
background: #000;
}
#page-news #pager p{
}
#page-news #pager p a{
}
#page-news #pager p a img{
width: 34px;
}
#page-news #pager .prev{
position: absolute;
top:-1px;
left: -45px;
}
#page-news #pager .next{
position: absolute;
top:-1px;
right: -45px;
}
#page-news #pager .button{
margin: -13px 0 0 -10px;
}



/* ==============================================
#tayori-form
============================================== */

#form{
max-width: 640px;
margin: auto;
padding: 0 0 40px 0;
}
#form h1{
font-size: 24px;
line-height: 24px;
letter-spacing: 2px;
font-weight: 500;
text-align: center;
}
#form p{
padding: 50px 0 0 0;
}
#tayori-form{
max-width: 800px;
margin: auto;
padding: 0 80px 120px 80px;
position: relative;
}
#tayori-form div{
font-family:"Noto Sans JP";
font-weight:300;
font-size: 15px;
line-height: 28px;
letter-spacing: 1px;
margin: 20px 0 0 0;
}
#tayori-form input{
border: solid 1px #ddd;
border-radius: 4px;
width: 96%;
font-family:"Noto Sans JP";
font-weight:300;
font-size: 15px;
line-height: 28px;
padding: 1.2% 2% 1.5% 2%;
margin: -10px 0 0 0;
}
#tayori-form select{
border: solid 1px #ddd;
border-radius: 4px;
width: 100%;
font-family:"Noto Sans JP";
font-weight:300;
font-size: 15px;
line-height: 28px;
padding: 1.2% 2% 1.5% 2%;
margin: -10px 0 0 0;
}
#tayori-form textarea{
border: solid 1px #ddd;
border-radius: 4px;
width: 96%;
font-family:"Noto Sans JP";
font-weight:300;
font-size: 15px;
line-height: 28px;
padding: 1.2% 2% 1.5% 2%;
margin: -10px 0 0 0;
}
#tayori-form .submit{
display: block;
background: url("../images/common/cmn_btn_m.png") center top 8px no-repeat;
background-size: 234px 64px;
width: 234px;
height: 72px;
font-family:"Noto Sans JP";
font-size: 16px;
line-height: 16px;
font-weight: 500;
letter-spacing: 2px;
text-align: center;
text-decoration: none;
margin: auto;
cursor: pointer;
border: none;
margin: 20px auto 0 auto;
}