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




.lity-opened .answerPopup{width: 70%; margin: auto; display: block; position: relative; box-sizing: border-box; height: 80vh;}
.lity-opened .answerPopup .closeBtn{position: relative; bottom: -1vh; left: 50%; transform: translate(-50%, 0); display: block; margin: 0 auto; width: 100%; text-align: center;}
.lity-opened .answerPopup .popInner{overflow-y: auto;max-height: 80vh !important;display: block;height: auto;}

/*----------------------------------------------------------------------------
 ***                                                             seventoolsSec
----------------------------------------------------------------------------*/

.toolBox { display: block; width: 33%; position: relative; cursor: pointer; -webkit-tap-highlight-color:transparent; }
.toolBox.toolBox3{margin-left: 15%;}
.toolBox.toolBox4{margin-right: 15%;}

.toolBox.nomove {cursor: initial;}

/* 擬似要素とpadding-topでカードの高さを指定 */
.toolBox::before { content: ""; display: block; padding-top: 130%;}
/* カード内の画像 */
.toolBox img { width: 100%; }
/* カード裏面・表面の共通スタイル */
.toolBox .toolBack,
.toolBox .toolFront{ transition: all 0.6s; position: absolute; left: 0; top: 0; height: auto;width: 100%;backface-visibility: hidden;}
.toolBox .toolOther{position: absolute;  left: 0; top: 0; height: auto; width: 100%;}
/* カード表面のスタイル */
.toolBox .toolFront {transform: rotateY(-180deg);}
/* ホバー時のカード裏面 */
.toolBox:hover .toolBack {transform: rotateY(180deg);}
/* ホバー時のカード表面 */
.toolBox:hover .toolFront {transform: rotateY(0);}

.toolSentence{margin-top: 5px;}


@media screen and (max-width: 599px) {

.answerBtn img{width: 40%;}
.lity-opened .answerPopup{width: 90%;margin: auto;display: block;position: relative;box-sizing: border-box; overflow-y: initial; height: initial;}
.lity-opened .answerPopup .popInner{overflow-y: auto;max-height: 75vh !important;display: block;height: auto;}
.lity-opened .answerPopup .closeBtn{position: relative; bottom: -1vh; left: 50%; transform: translate(-50%, 0); display: block; margin: 0 auto; width: 100%; text-align: center;}
.lity-opened .answerPopup .closeBtn img{width: 30%;}

/*----------------------------------------------------------------------------
 ***                                                             seventoolsSec
----------------------------------------------------------------------------*/
.toolBox { width: 45%; order: 2; }
.toolBox.toolBox1{order: 0;}
.toolBox.nomove{order: 1;}
.toolBox.toolBox3{margin-left: 0;}
.toolBox.toolBox4{margin-right: 0;}

}