@charset "shift_jis";

/*------------------------------------
#main
------------------------------------*/
#main {
font-size:18px;
text-align:center;
color:#e7e7e7;
font-weight: bold;
}
#main span {
 opacity:0;
}

/*------------------------------------
#書籍用
------------------------------------*/

.book1 {
    position: relative;
}

.book1 .base_image {
position: relative;
left: 60%;
width: 40%;
transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
}

.book1 .cover_image {
position: relative;
width: 40%;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
}


/*------------------------------------
プロフィール
------------------------------------*/
.profileBox {
 margin: 0 auto 40px;
 width: 90%;
 background-image: url('/i.cgi?n=carol/05&m=jpg');
 background-repeat: no-repeat;
 background-size: 100%;
 overflow: hidden;
}
.profileBox .glass,
.profileBox .glass::before {
 width: 100%;
 height: 100%;
 overflow: hidden;
}
.profileBox .glass {
 position: relative;
 background-color: white;
 border-radius: 10px;
}
.profileBox .glass.down {
 border-radius: 0;
}
.profileBox .glass::before {
 z-index: -1;
 display: block;
 position: absolute;
 content: ' ';
 background-image: url('/i.cgi?n=carol/05&m=jpg');
 background-repeat: no-repeat;
 background-size: 100%;
 /* Prefix free isn't picking up this one */
 -webkit-filter: url('#blur');
 filter: url('#blur');
 -webkit-filter: blur(5px);
 filter: blur(5px);
 opacity: 0.3;
}
/* TRANSFORMATIONS */
.profileBox .glass.down {
 /* Fallback for browsers that don't support 3D Transforms */
 -webkit-transform: translateY(100%) translateY(-3rem);
 transform: translateY(100%) translateY(-3rem);
 -webkit-transform: translateY(100%) translateY(-3rem) translateZ(0);
 transform: translateY(100%) translateY(-3rem) translateZ(0);
}
.profileBox .glass.down::before {
 -webkit-transform: translateY(-100%) translateY(3rem);
 transform: translateY(-100%) translateY(3rem);
 -webkit-transform: translateY(-100%) translateY(3rem) translateZ(0);
 transform: translateY(-100%) translateY(3rem) translateZ(0);
}
.profileBox .glass.up,
.profileBox .glass.up::before {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 -webkit-transform: translateY(0) translateZ(0);
 transform: translateY(0) translateZ(0);
}
/* TRANSITIONS */
.preload .profileBox * {
 /* wait until document is loaded before transitioning */
 -webkit-transition: none !important;
 transition: none !important;
}
.profileBox .glass,
.profileBox .glass::before {
 -webkit-transition: -webkit-transform 0.5s ease-out;
 transition: transform 0.5s ease-out;
}
.profileBox h2 {
 font-size: 1.21rem;
 line-height: 3rem;
 font-weight: bold;
 text-align: center;
 padding: 0 0 0 2em;
 border-bottom: 2px solid rgba(0, 0, 0, 0.1);
 cursor: pointer;
 text-shadow: none;
 color: #333;
}
.profileBox h2::before {
 position: absolute;
 left: 0;
 top: 0;
 background-image: url('/css/icon_up_arrow_circle.svg');
 background-repeat: no-repeat;
 background-position: 50% 50%;
 -webkit-background-size: 50% auto;
 background-size: 50% auto;
 content: ' ';
 display: block;
 width: 3rem;
 height: 3rem;
 -webkit-transition: -webkit-transform 0.2s ease-out 0.5s;
 transition: transform 0.2s ease-out 0.5s;
}
.profileBox .up h2::before {
 -webkit-transform: rotate(180deg);
 transform: rotate(180deg);
}
.profileBox p {
 font-size: 1rem;
 line-height: 1.4;
 margin: 1.5em auto;
 padding: 0 1.5em;
 color: #333;
}