/**
 * 説明部定義
 */
 /** エリア背景色 */
 .explanation-area {
    background : radial-gradient(
        ellipse ,
        rgba( 255 , 255 , 255 , 0.9 ) ,
        rgba( 238 , 238 , 238 , 0.9 ) ,
        rgba( 238 , 238 , 238 , 0.8 ) ,
        rgba( 196 , 196 , 196 , 0.0 ) );
}


/**
 * 回転view定義
 */
 .turn-view {
    line-height : 1.5;
    position : relative;
    display : block;
    display : inline-block;
    cursor : pointer;
    -webkit-user-select : none;
       -moz-user-select : none;
        -ms-user-select : none;
            user-select : none;
    -webkit-transition : all calc( var( --turn-view-sec ) / 2 );
            transition : all calc( var( --turn-view-sec ) / 2 );
    -webkit-transition-timing-function : linear;
            transition-timing-function : linear;
    text-align : center;
    /*vertical-align : middle;*/
    text-decoration : none;
    letter-spacing : 0.1em;
    width : var( --turn-view-width );
    height : var( --turn-view-height );
    margin : 0 auto;
    padding : 0;
    border-radius : 50%;
}

/**
 * 回転view内部定義
 */
.turn-view-content {
    display : block;
    line-height : var( --turn-view-height );
    width : var( --turn-view-width );
    height : var( --turn-view-height );
    border-radius : 50%;
    -webkit-transition : all var( --turn-view-sec );
            transition : all var( --turn-view-sec );
    -webkit-transform-style : preserve-3d;
            transform-style : preserve-3d;
    -webkit-transition-timing-function : linear;
            transition-timing-function : linear;
    -webkit-perspective : var( --turn-view-width );
            perspective : var( --turn-view-width );
}

/**
 * 回転view上カーソル遷移時の回転view状態
 */
.turn-view:hover .turn-view-content {
    -webkit-transform : rotateY( 0.5turn ) rotateX( -0.0turn );
            transform : rotateY( 0.5turn ) rotateX( -0.0turn );
}

/**
 * 回転view正面
 */
.turn-view-front {
    -webkit-transition-delay : calc( var( --turn-view-sec ) / 2 );
            transition-delay : calc( var( --turn-view-sec ) / 2 );
    -webkit-transition-duration : all calc( var( --turn-view-sec ) / 2 );
            transition-duration : all calc( var( --turn-view-sec ) / 2 );
    -webkit-transition-timing-function : linear;
            transition-timing-function : linear;
    opacity : 1;
    transform : scale( 1 , 1 );
}

/**
 * 回転view上遷移時の正面
 */
.turn-view:hover .turn-view-front {
    -webkit-transition-duration : all calc( var( --turn-view-sec ) / 2 );
            transition-duration : all calc( var( --turn-view-sec ) / 2 );
    -webkit-transition-timing-function : linear;
            transition-timing-function : linear;
    opacity : 0;
    transform : scale( 0.0 , 1 );
}

/**
 * 回転view裏面
 */
.turn-view-back {
    position : absolute;
    top : 3%;
    left : 14%;
    letter-spacing : 0;
    -webkit-transition-delay : calc( var( --turn-view-sec ) / 2 );
            transition-delay : calc( var( --turn-view-sec ) / 2 );
    -webkit-transition-duration : all calc( var( --turn-view-sec ) / 2 );
            transition-duration : all calc( var( --turn-view-sec ) / 2 );
    -webkit-transition-timing-function : linear;
            transition-timing-function : linear;
    transform : scale( 0.0 , 1 );
}

/**
 * 回転view上遷移時の裏面
 */
.turn-view:hover .turn-view-back {
    -webkit-transition-delay : calc( var( --turn-view-sec ) / 2 );
            transition-delay : calc( var( --turn-view-sec ) / 2 );
    -webkit-transition-duration : all calc( var( --turn-view-sec ) / 2 );
            transition-duration : all calc( var( --turn-view-sec ) / 2 );
    -webkit-transition-timing-function : linear;
            transition-timing-function : linear;
    transform : scale( -1.0 , 1 );
}