@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;
}
body {
-webkit-text-size-adjust: 100%;
}
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;
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:active {color:#007832; text-decoration:none;}
a{
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}



.pc{
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{
height: 80px;
position: relative;
}
header .logo{
text-align: center;
padding: 20px 0 0 0;
}
header .logo a{
}
header .logo a img{
width: auto;
height: 40px;
}



header .menu{
position: fixed;
top:0;
right: 0;
width: 80px;
height: 80px;
display: block;
z-index: 1200;
cursor: pointer;
}
header .menu span{
display: block;
width: 20px;
height: 1px;
position: absolute;
top:38px;
left: 0;
right: 0;
margin: auto;
background: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
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: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
-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: -moz-linear-gradient(left, #96dcff, #ffbee6); 
background: -webkit-linear-gradient(left, #96dcff, #ffbee6); 
background: linear-gradient(to right, #96dcff, #ffbee6); 
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
header .menu.on span{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
header .menu.on span::before{
top:0;
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: -90%;
width: 90%;
height: 100%;
background: #FFF;
z-index: 1100;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
@media screen and (min-width:768px) { /* iPad */
header #menu .inner{
right: -40%;
width: 40%;
}
}
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: 50px 0 0 25px;
}
header #menu p a{
}
header #menu p a img{
width: auto;
height: 32px;
}
header #menu .link ul{
padding: 40px 0 0 0;
}
header #menu .link ul li{
}
header #menu .link ul li a{
display: block;
text-decoration: none;
padding: 5px 0 5px 30px;
}
header #menu .follow{
background: url("../images/common/cmn_dln.png") repeat-x;
background-size: 9px auto;
margin: 50px 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{
width: auto;
height: 20px;
display: block;
margin: 0 auto 6px auto;
}
header #menu .follow ul{
display: table;
margin: auto;
padding: 15px 0 0 0;
}
header #menu .follow ul li{
float: left;
margin: 0 14px;
}
header #menu .follow ul li a{
}
header #menu .follow ul li a img{
width: auto;
height: 28px;
}



header #sns{
display: none;
}
header #sns ul{
}
header #sns ul li{
}
header #sns ul li a{
}
header #sns ul li a img{
}



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

main{
}
main article{
position: relative;
}
main article .inner{
}



main article #bottom-news{
padding: 0 20px;
border-top: #ebebeb solid 1px;
margin: 80px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
main article #bottom-news{
padding: 0 40px;
}
}
main article #bottom-news h2{
text-align: center;
padding: 40px 0 0 0;
}
main article #bottom-news h2 img{
width: auto;
height: 64px;
}
main article #bottom-news ul{
padding: 10px 0 0 0;
}
main article #bottom-news ul li{
height: 88px;
margin: 20px 0 0 0;
}
main article #bottom-news ul li a{
display: block;
position: relative;
padding: 12px 0 0 108px;
font-size: 13px;
line-height: 20px;
text-decoration: none;
}
main article #bottom-news ul li a img{
width: 88px;
height: 88px;
object-fit: cover;
position: absolute;
top:0;
left: 0;
border-radius: 44px;
}
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;
padding: 0 20px;
overflow: hidden;
}
@media screen and (min-width:768px) { /* iPad */
main article #bottom-tv{
padding: 0 40px;
}
}
main article #bottom-tv h2{
text-align: center;
padding: 40px 0 0 0;
}
main article #bottom-tv h2 img{
width: auto;
height: 52px;
}
main article #bottom-tv .inner{
padding: 10px 0 0 0;
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;
}
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: 48%;
text-decoration: none;
position: relative;
margin: 20px 4% 0 0;
}
@media screen and (min-width:768px) { /* iPad */
main article #bottom-tv .inner a{
width: 47%;
margin: 20px 6% 0 0;
}
}
main article #bottom-tv .inner a:nth-child(2n){
margin: 20px 0 0 0;
}
main article #bottom-tv .inner a div{
}
main article #bottom-tv .inner a h3{
padding: 61% 0 18px 0;
font-size: 13px;
line-height: 20px;
}
main article #bottom-tv .inner a .image{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: inherit;
margin: auto;
background: none;
padding: 0;
}
main article #bottom-tv .inner a p{
position: absolute;
right: 0;
bottom: 0;
font-family: "BahnsChrift";
font-size: 12px;
line-height: 14px;
letter-spacing: 0;
background: linear-gradient(transparent 50%, #c8ebfa 50%);
padding: 0 2px;
}
article #bottom-tv .inner a .image img.play{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 40px;
height: 40px;
object-fit:contain;
opacity: 0.8;
}



main article #side-menu{
margin: 80px 0 0 0;
padding: 0 20px;
}
@media screen and (min-width:768px) { /* iPad */
main article #side-menu{
padding: 0 40px;
}
}
main article #side-menu #side-banner{
display: none;
}
@media screen and (min-width:768px) { /* iPad */
main article #side-menu .banner ul {
width: 680px;
margin: auto;
}
}
main article #side-menu .banner ul li {
margin: 20px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
main article #side-menu .banner ul li {
float: left;
margin: 0 20px;
}
}
main article #side-menu .banner ul li div {
margin: auto!important;
}
main article #side-menu .banner ul li iframe {
margin: auto!important;
}


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{
padding: 30px 20px 50px 20px;
}
@media screen and (min-width:768px) { /* iPad */
footer{
padding: 30px 40px 50px 40px;
}
}



footer .banner{
}
footer .banner ul{
}
footer .banner ul li {
margin: 10px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
footer .banner ul li {
float: left;
width: 31.66%;
margin: 10px 2.5% 0 0;
}
footer .banner ul li:last-child {
margin: 10px 0 0 0;
}
}
footer .banner ul li a{
}
footer .banner ul li a img{
}


footer #book{
margin: 40px 0 0 0;
padding: 0 0 40px 0;
background: -moz-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: -webkit-linear-gradient(left, #d7f0ff, #ffe6f5); 
background: linear-gradient(to right, #d7f0ff, #ffe6f5); 
}
footer #book h2{
text-align: center;
padding: 40px 0 0 0;
}
footer #book h2 img{
max-width: 110px;
}
footer #book .image{
text-align: center;
padding: 30px 0 0 0;
}
footer #book .image a{
}
footer #book .image a img{
max-width: 233px;
}
footer #book .button{
padding: 20px 0 0 0;
}
footer #book .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-decoration: none;
margin: auto;
padding: 19px 0 0 0;
text-align: center;
}
footer #book ul{
display: table;
margin: auto;
padding: 6px 0 0 0;
position: relative;
z-index: 100;
}
footer #book ul li{
margin: 10px 0 0 0;
}
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{
}
footer .link h2{
text-align: center;
padding: 40px 0 0 0;
}
footer .link h2 a{
}
footer .link h2 a img{
width: auto;
height: 40px;
}
footer .link ul{
padding: 30px 0 0 0;
}
footer .link ul li{
text-align: center;
padding: 2px 0;
float: left;
width: 50%;
}
footer .link ul li a{
font-size: 14px;
text-decoration: none;
}



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



footer #abj{
border: solid 1px #ebebeb;
margin: 20px 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: 30px 0 15px 0;
position: relative;
text-align: center;
}
footer #corporate ul li{
display: inline-block;
margin: 0 10px;
}
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: 20px 0 0 0;
}



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

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



#page-index #introduction{
}
#page-index #introduction .inner{
}



#page-index #introduction #topics{
position: relative;
}
#page-index #introduction #topics #slider{
}
#page-index #introduction #topics #slider div li{
}
#page-index #introduction #topics #slider div li a{
display: block;
text-decoration: none;
font-size: 13px!important;
line-height: 20px!important;
padding: 0 10px;
}
#page-index #introduction #topics #slider div li a img{
display: block;
margin: 0 0 8px -10px;
width: calc(100% + 20px);
}
#page-index #introduction #topics #slider div li a span{
font-family: "BahnsChrift";
font-weight: bold;
font-size: 14px;
letter-spacing: 0;
display: block;
}
#page-index #introduction #topics #navigation{
position: absolute;
bottom:42px;
right: 5px;
}
#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{
display: none;
}
#page-index #introduction #side-banner ul{
padding: 10px 20px 0 20px;
}
#page-index #introduction #side-banner ul li{
margin: 20px 0 0 0;
}
#page-index #introduction #side-banner ul li img{
}



#page-index #introduction .banner{
padding: 10px 20px 0 20px;
position: relative;
z-index: 100;
}
#page-index #introduction .banner ul{
}
@media screen and (min-width:768px) { /* iPad */
#page-index #introduction .banner ul {
width: 680px;
margin: auto;
padding: 20px 0 0 0;
}
}
#page-index #introduction .banner ul li {
margin: 20px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #introduction .banner ul li {
float: left;
margin: 0 20px;
}
}
#page-index #introduction .banner ul li a{
}
#page-index #introduction .banner ul li a img{
}
#page-index #introduction .banner ul li div {
margin: auto!important;
}
#page-index #introduction .banner ul li iframe {
margin: auto!important;
}



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

#page-index #pickup{
padding: 0 20px;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #pickup{
padding: 0 40px;
}
}
#page-index #pickup h2{
text-align: center;
padding: 45px 0 0 0;
}
#page-index #pickup h2 img{
width: auto;
height: 52px;
}
#page-index #pickup .inner{
margin: -5px 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;
position: relative;
text-decoration: none;
margin: 35px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #pickup .inner a{
float: left;
width: 47%;
margin: 35px 6% 0 0;
}
#page-index #pickup .inner a:nth-child(2n){
margin: 35px 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 .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.instagram .image span img{
top:-20%;
}
#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: 35px 0 0 0;
}
#page-index #pickup .pickup-block:nth-child(n+2) {
display:none;
}


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

#page-index #tv{
position: relative;
padding: 0 20px;
overflow: hidden;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #tv{
padding: 0 40px;
}
}
#page-index #tv h2{
text-align: center;
padding: 65px 0 0 0;
}
#page-index #tv h2 img{
width: auto;
height: 52px;
}
#page-index #tv .inner{
padding: 10px 0 0 0;
}
#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;
text-decoration: none;
position: relative;
margin: 20px 0 0 0;
padding: 0 0 20px 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #tv .inner a{
float: left;
width: 47%;
margin: 30px 6% 0 0;
padding: 0;
}
#page-index #tv .inner a:nth-child(2n){
margin: 30px 0 0 0;
}
}
#page-index #tv .inner a div{
position: relative;
z-index: 100;
}
#page-index #tv .inner a::after{
content: "";
position: absolute;
bottom:0;
left: -20px;
width: 120%;
height: 120px;
background: #faf5f0;
}
#page-index #tv .inner a:nth-child(3)::after{
content: "";
position: absolute;
bottom:-50px;
left: -20px;
width: 120%;
height: 170px;
background: #faf5f0;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #tv .inner a::after{
display: none;
}
}
#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: 0;
border: solid 4px #000;
border-radius: 4px;
padding: 1px;
background: #FFF;
margin: auto;
}
#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: 20px 0 0 0;
z-index: 100;
}



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

#page-index #story{
padding: 0 20px;
}
#page-index #story h2{
text-align: center;
padding: 65px 0 0 0;
}
#page-index #story h2 img{
width: auto;
height: 52px;
}
#page-index #story .inner{
}
#page-index #story .inner:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #page-index #story .inner { display:inline-block; }
*:first-child+html #page-index #story .inner { display:inline-block; }

#page-index #story .inner a{
display: block;
position: relative;
text-decoration: none;
margin: 30px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #story .inner a{
float: left;
width: 30.5%;
margin: 30px 4% 0 0;
}
#page-index #story .inner a:nth-child(3n){
margin: 30px 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: 20px;
line-height: 30px;
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: 10px 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: 35px 0 0 0;
}



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

#page-index #snap{
position: relative;
}
#page-index #snap h2{
text-align: center;
padding: 65px 0 0 0;
}
#page-index #snap h2 img{
width: auto;
height: 52px;
}
#page-index #snap .inner{
position: relative;
}
#page-index #snap ul{
padding: 25px 0 0 0;
position: relative;
z-index: 100;
}
#page-index #snap ul li{
float: left;
width: 32%;
margin: 2% 2% 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#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:10px;
right: 0;
width: 40%;
height: 40%;
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:-30px;
left: 0;
width: 20%;
height: 40%;
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:nth-child(3n){
margin: 2% 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #snap ul li:nth-child(3n){
margin: 0 1.52% 0 0;
}
#page-index #snap ul li:last-child{
margin: 0;
}
}
#page-index #snap ul li img{
width: 100%;
height: 220px;
object-fit: cover;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #snap ul li img{
height: 280px;
}
}
#page-index #snap .button{
position: absolute;
bottom:-33px;
left: 0;
right: 0;
margin: auto;
z-index: 100;
}



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

#page-index #news{
padding: 0 20px;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #news{
padding: 0 40px;
}
}
#page-index #news h2{
text-align: center;
padding: 100px 0 0 0;
}
#page-index #news h2 img{
width: auto;
height: 52px;
}
#page-index #news ul{
padding: 10px 0 0 0;
}
#page-index #news ul li{
height: 88px;
margin: 20px 0 0 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;
}
#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{
padding: 35px 0 0 0;
}



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

#page-index #instagram{
margin: 80px 0 0 0;
background: #000;
}
#page-index #instagram .inner{
position: relative;
}
#page-index #instagram h2{
text-align: center;
position: absolute;
top:33.5%;
left: 0;
right: 0;
margin: auto;
width: 33.3333333333%;
padding: 6% 0 15% 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #instagram h2{
top:29%;
width: 20%;
}
}
#page-index #instagram h2 img{
width: 80%;
}
#page-index #instagram ul{
}
#page-index #instagram ul li{
width: 33.3333333333%;
float: left;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #instagram ul li{
width: 20%;
}
}
#page-index #instagram ul li:nth-child(7){
margin: 0 33.3333333333% 0 0;
}
#page-index #instagram ul li:nth-child(1),
#page-index #instagram ul li:nth-child(2),
#page-index #instagram ul li:nth-child(3),
#page-index #instagram ul li:nth-child(12),
#page-index #instagram ul li:nth-child(13),
#page-index #instagram ul li:nth-child(14),
#page-index #instagram ul li:nth-child(15),
#page-index #instagram ul li:nth-child(16),
#page-index #instagram ul li:nth-child(17),
#page-index #instagram ul li:nth-child(18),
#page-index #instagram ul li:nth-child(19),
#page-index #instagram ul li:nth-child(20){
display: none;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #instagram ul li:nth-child(10){
margin: 0 20% 0 0;
}
#page-index #instagram ul li:nth-child(1),
#page-index #instagram ul li:nth-child(7),
#page-index #instagram ul li:nth-child(8),
#page-index #instagram ul li:nth-child(13),
#page-index #instagram ul li:nth-child(14),
#page-index #instagram ul li:nth-child(20){
display: none;
}
#page-index #instagram ul li:nth-child(2),
#page-index #instagram ul li:nth-child(3),
#page-index #instagram ul li:nth-child(4),
#page-index #instagram ul li:nth-child(5),
#page-index #instagram ul li:nth-child(6),
#page-index #instagram ul li:nth-child(9),
#page-index #instagram ul li:nth-child(10),
#page-index #instagram ul li:nth-child(11),
#page-index #instagram ul li:nth-child(12),
#page-index #instagram ul li:nth-child(15),
#page-index #instagram ul li:nth-child(16),
#page-index #instagram ul li:nth-child(17),
#page-index #instagram ul li:nth-child(18),
#page-index #instagram ul li:nth-child(19){
display: block;
}
}
#page-index #instagram ul li img{
}
#page-index #instagram .button{
}
#page-index #instagram .button a{
color: #FFF;
padding: 22.5% 0 11% 0;
background: none;
font-family: "BahnsChrift";
position: absolute;
top:33.5%;
left: 0;
right: 0;
margin: auto;
font-size: 17px;
width: 33.3333333333%;
}
@media screen and (min-width:768px) { /* iPad */
#page-index #instagram .button a{
color: #FFF;
padding: 14% 0 6% 0;
background: none;
font-family: "BahnsChrift";
position: absolute;
top:33.4%;
left: 0;
right: 0;
margin: auto;
font-size: 17px;
width: 20%;
}
}



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

#page-profile #introduction{
background: #f9f9f9;
height: 320px;
}
#page-profile #introduction h1{
text-align: center;
padding: 50px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-profile #introduction h1{
padding: 80px 0 0 0;
}
}
#page-profile #introduction h1 img{
width: auto;
height: 24px;
}
#page-profile #introduction ul{
padding: 30px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-profile #introduction ul{
display: table;
margin: auto;
padding: 40px 0 0 0;
}
}
#page-profile #introduction ul li{
text-align: center;
margin: 10px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#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: -55px 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: 44px;
display: block;
margin: auto;
}
#page-profile .list ul{
padding: 0 20px;
}
@media screen and (min-width:768px) { /* iPad */
#page-profile .list ul{
padding: 0 40px;
}
}
#page-profile .list ul li{
float: left;
width: 47%;
margin: 40px 6% 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-profile .list ul li{
width: 29.3%;
margin: 40px 6% 0 0;
}
}
#page-profile .list ul li:nth-child(2n){
margin: 40px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-profile .list ul li:nth-child(2n){
margin: 40px 6% 0 0;
}
#page-profile .list ul li:nth-child(3n){
margin: 40px 0 0 0;
}
}
#page-profile .list ul li a{
display: block;
text-align: center;
text-decoration: none;
font-size: 16px;
line-height: 24px;
letter-spacing: 8px;
}
#page-profile .list ul li a img{
margin: 0 0 10px 0;
}
#page-profile .list ul li a span{
display: block;
margin: 4px auto 0 auto;
font-size: 10px;
line-height: 10px;
letter-spacing: 1px;
}



#page-profile #side-menu{
}



#page-profile #profile{
position: relative;
}
#page-profile #profile #photo{
}
#page-profile #profile #photo #slider{
}
#page-profile #profile #photo #slider li{
}
#page-profile #profile #photo #slider li img{
}
#page-profile #profile #photo #navigation{
display: table;
margin: -35px 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: 55px 0 0 10px;
text-align: center;
}
#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: 25px 0 0 0;
position: relative;
}
#page-profile #profile .follow h2{
text-align: center;
padding: 0 30px 0 0;
}
#page-profile #profile .follow h2 img{
width: auto;
height: 40px;
}
#page-profile #profile .follow ul{
position: absolute;
top:3px;
left: 160px;
right: 0;
margin: auto;
width: 110px;
}
#page-profile #profile .follow ul li{
float: left;
margin: 0 8px 0 0;
}
#page-profile #profile .follow ul li a{
}
#page-profile #profile .follow ul li a img{
width: auto;
height: 24px;
}
#page-profile #profile .profile{
position: relative;
padding: 30px 0 0 0;
margin: 70px 20px 0 20px;
}
@media screen and (min-width:768px) { /* iPad */
#page-profile #profile .profile{
margin: 70px 40px 0 40px;
}
}
#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{
}
#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: 10px 0 0 0;
}



#page-profile #qa{
position: relative;
padding: 0 20px;
margin: 70px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-profile #qa{
padding: 0 40px;
}
}
#page-profile #qa h2{
padding: 0 0 20px 0;
}
#page-profile #qa h2 img{
}
#page-profile #qa h3{
font-size: 14px;
line-height: 20px;
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{
background: url("../images/common/cmn_dln.png") bottom repeat-x;
background-size: 9px auto;
font-size: 13px;
line-height: 24px;
padding: 7px 0 0 0;
padding: 7px 0 35px 0;
margin: 0 0 15px 0;
}



#page-profile #pager{
display: none;
}
#page-profile #pager p{
}
#page-profile #pager p a{
}
#page-profile #pager ul{
}
#page-profile #pager ul li{
}
#page-profile #pager ul li a{
}
#page-profile #pager ul li a img{
}



#page-profile #letter{
background: #faf7f5;
padding: 0 0 40px 0;
margin: -16px 0 0 0;
z-index: 100;
position: relative;
}
#page-profile #letter h2{
font-size: 16px;
line-height: 16px;
font-weight: 600;
text-align: center;
padding: 40px 0 0 0;
}
#page-profile #letter h2 img{
max-width: 46px;
display: block;
margin: 0 auto 12px auto;
}
#page-profile #letter p{
font-size: 13px;
line-height: 24px;
text-align: center;
padding: 12px 0 0 0;
}



#page-profile .bottom-follow{
margin: 50px 0 0 0;
position: relative;
}
#page-profile .bottom-follow h2{
text-align: center;
padding: 0 30px 20px 0;
}
#page-profile .bottom-follow h2 img{
width: auto;
height: 40px;
}
#page-profile .bottom-follow ul{
position: absolute;
top:3px;
left: 160px;
right: 0;
margin: auto;
width: 110px;
}
#page-profile .bottom-follow ul li{
float: left;
margin: 0 8px 0 0;
}
#page-profile .bottom-follow ul li a{
}
#page-profile .bottom-follow ul li a img{
width: auto;
height: 24px;
}



#page-profile #bottom-pager{
position: relative;
display: table;
margin: 30px auto 0 auto;
padding: 0 0 0 0;
}
#page-profile #bottom-pager ul{
}
#page-profile #bottom-pager ul li{
position: absolute;
top:14px;
left: -38px;
}
#page-profile #bottom-pager ul li:last-child{
position: absolute;
top:14px;
left: inherit;
right: -44px;
}
#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_sp.jpg") center no-repeat;
background-size:cover;
height: 320px;
}
#page-story #introduction h1{
text-align: center;
padding: 40px 0 0 0;
}
#page-story #introduction h1 img{
width: auto;
height: 107px;
}
#page-story #introduction h2{
text-align: center;
padding: 20px 0 0 0;
font-family:"Noto Serif JP";
font-weight:300;
font-size: 14px;
line-height: 24px;
letter-spacing: 2px;
}
#page-story #introduction p{
display: none;
}



#page-story #list{
padding: 10px 20px 0 20px;
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:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #page-story #list { display:inline-block; }
*:first-child+html #page-story #list { display:inline-block; }

@media screen and (min-width:768px) { /* iPad */
#page-story #list{
padding: 10px 40px 0 40px;
}
}
#page-story #list a{
display: block;
margin: 30px 0 0 0;
position: relative;
text-decoration: none;
}
@media screen and (min-width:768px) { /* iPad */
#page-story #list a{
float: left;
width: 47%;
margin: 75px 6% 0 0;
}
#page-story #list a:nth-child(2n){
margin: 75px 0 0 0;
}
}
#page-story #list a div{
}
#page-story #list a div h3{
font-family:"Noto Serif JP";
font-weight:400;
font-size: 20px;
line-height: 30px;
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: 10px 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: 35px auto 0 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{
padding: 0 20px;
}
@media screen and (min-width:768px) { /* iPad */
#page-story #cast{
padding: 0 40px;
}
}
#page-story #cast h2{
padding: 60px 0 0 0;
text-align: center;
}
#page-story #cast h2 img{
width: auto;
height: 52px;
}
#page-story #cast ul{
padding: 10px 0 0 0;
}
#page-story #cast ul:last-child{
border-top: 1px solid #000;
margin: 20px 0 0 0;
padding: 10px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-story #cast ul:last-child{
margin: 40px 0 0 0;
}
}
#page-story #cast ul li{
float: left;
margin: 17px 5.3% 0 0;
width: 21%;
}
@media screen and (min-width:768px) { /* iPad */
#page-story #cast ul li{
margin: 40px 5.3% 0 0;
width: 12.2%;
}
}
#page-story #cast ul li:nth-child(4n){
margin: 17px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-story #cast ul li:nth-child(4n){
margin: 40px 5.3% 0 0;
}
#page-story #cast ul li:nth-child(6n){
margin: 40px 0 0 0;
}
}
#page-story #cast ul li a{
text-decoration: none;
font-size: 11px;
line-height: 15px;
display: block;
text-align: center;
}
#page-story #cast ul li a img{
border-radius: 50%;
display: block;
margin: 0 0 5px 0;
}



#page-story #title{
position: relative;
margin: 0 20px 0 30px;
}
@media screen and (min-width:768px) { /* iPad */
#page-story #title{
margin: 0 30px 0 40px;
}
}
#page-story #title.model{
position: relative;
margin: 20px 20px 0 20px;
}
#page-story #title h1{
font-family:"Noto Serif JP";
font-weight:200;
font-size: 30px;
line-height: 40px;
letter-spacing: 4px;
padding: 150px 0 2px 0;
}
#page-story #title.model h1{
padding: 135px 0 2px 0;
}
#page-story #title p{
font-size: 14px;
}
#page-story #title p:nth-child(2){
position: absolute;
top:0;
left: 0;
padding: 108px 0 0 0;
}
#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{
width: 100px;
border-radius: 50px;
position: absolute;
top:0;
left: 0;
z-index: 100;
}
#page-story #title p:nth-child(2) ::after{
content: "";
position: absolute;
top:0;
left: 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 #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: 35px 30px 0 30px;
background: url("../images/common/cmn_dln.png") repeat-x;
background-size: 9px auto;
}
@media screen and (min-width:768px) { /* iPad */
#page-story #story{
margin: 35px 40px 0 40px;
}
}
#page-story #story p{
font-family:"Noto Serif JP";
font-weight:200;
font-size: 14px;
line-height: 24px;
padding: 80px 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 40px 0;
}
#page-story #like h2{
text-align: center;
padding: 25px 0 0 0;
}
#page-story #like h2 img{
width: auto;
height: 44px;
}
#page-story #like .button{
padding: 15px 0 0 0;
}
#page-story #like p{
padding: 15px 0 0 0;
text-align: center;
}



#page-story #storys{
margin: 40px 0 0 0;
position: relative;
padding: 0 20px;
}
@media screen and (min-width:768px) { /* iPad */
#page-story #storys{
padding: 0 40px;
}
}
#page-story #storys h2{
font-family:"Noto Serif JP";
font-weight:400;
font-size: 20px;
letter-spacing: 8px;
padding: 115px 0 0 0;
text-align: center;
}
#page-story #storys h2 img:first-child{
max-width: 100px;
border-radius: 50px;
position: absolute;
top:0;
left: 0;
right: 0;
margin: auto;
z-index: 100;
}
#page-story #storys h2 img:last-child{
width: auto;
height: 20px;
vertical-align: middle;
margin: -6px 0 0 0;
}
#page-story #storys h2::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 #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: 12px 0 40px 0;
text-decoration: none;
font-family:"Noto Serif JP";
font-weight:300;
font-size: 16px;
}
#page-story #storys ul li a span{
}
#page-story #storys ul li a span:first-child{
position: absolute;
bottom:12px;
left: 0;
font-family: "BahnsChrift";
font-size: 16px;
letter-spacing: 0;
}
#page-story #storys ul li a span:last-child{
position: absolute;
bottom:13px;
right: 0;
font-family:"Noto Sans JP";
font-size: 13px;
}



#page-story #side-menu{
}



#page-story #side-menu #ranking{
margin: 40px 0 0 0;
}
#page-story #side-menu #ranking h2{
text-align: center;
}
#page-story #side-menu #ranking h2 img{
}
@media screen and (min-width:768px) { /* iPad */
#page-story #side-menu #ranking h2 img{
max-width: 300px;
}
}
#page-story #side-menu #ranking a{
display: block;
padding: 0 0 18px 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: 15px 0 0 0;
}
#page-story #side-menu #ranking a div h3 span{
position: absolute;
top:20px;
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: 8px 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;
background-size: 100% auto;
margin: 50px 0 0 0;
position: relative;
padding: 0 0 75px 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-story #side-menu #offer{
background: url("../images/story/stry_offr_bg.png") no-repeat top center;
height: 300px;
margin: 40px 0 0 0;
}
}
#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: 190px 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-story #side-menu #floating-banner{
display: none;
}



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

#page-news #introduction{
background: #f9f9f9;
}
#page-news #introduction h1{
text-align: center;
padding: 50px 0 60px 0;
}
#page-news #introduction h1 img{
width: auto;
height: 24px;
}



#page-news #list{
}
@media screen and (min-width:768px) { /* iPad */
#page-news #list{
padding: 0 40px;
}
}
#page-news #list a{
display: block;
position: relative;
text-decoration: none;
margin: 45px 20px 0 20px;
}
@media screen and (min-width:768px) { /* iPad */
#page-news #list a{
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: 1px 90px 0 0;
min-height: 65px;
}
@media screen and (min-width:768px) { /* iPad */
#page-news #list a div h2{
padding: 4px 0 0 0;
min-height: inherit;
}
}
#page-news #list a div h2 img{
width: 70px;
height: 70px;
object-fit:cover;
position: absolute;
top:0;
right: 0;
border-radius: 35px;
}
@media screen and (min-width:768px) { /* iPad */
#page-news #list a div h2 img{
width: 88px;
height: 88px;
right: inherit;
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: 12px 0 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-news #list a div p{
padding: 10px 0 0 0;
}
}



#page-news #news{
padding: 0 20px;
}
@media screen and (min-width:768px) { /* iPad */
#page-news #news{
padding: 0 40px;
}
}
#page-news #news h1{
font-size: 20px;
line-height: 30px;
font-weight: 400;
}
#page-news #news h1 img{
display:block;
width: calc( 100% + 40px ) ;
margin: 0 -20px 40px -20px;
}
@media screen and (min-width:768px) { /* iPad */
#page-news #news h1 img{
width: calc( 100% + 80px ) ;
margin: 0 -40px 50px -40px;
}
}
#page-news #news h1 span{
float: right;
font-family: "BahnsChrift";
font-size: 17px;
line-height: 19px;
letter-spacing: 0;
margin: -30px -10px 0 0;
}
@media screen and (min-width:768px) { /* iPad */
#page-news #news h1 span{
margin: -20px -10px 0 0;
}
}
#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: 25px 30px 30px 30px;
}



#page-news .share{
position: relative;
display: table;
margin: 20px 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: 55px 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{
padding: 0 30px 10px 30px;
}
#form h1{
font-size: 24px;
line-height: 24px;
letter-spacing: 2px;
font-weight: 500;
text-align: center;
padding: 20px 0 0 0;
}
#form p{
padding: 30px 0 0 0;
}
#tayori-form{
padding: 0 30px 40px 30px;
}
#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;
cursor: pointer;
border: none;
margin: 30px auto 0 auto;
}