@charset "utf-8";
/* +++++++++++++++++++++++++++++++

tutorial.css

+++++++++++++++++++++++++++++++ */

/*----------------------------------------
 共通
----------------------------------------*/
#tutorial_image_wp ul li:hover,
#tutorial_image_wp .tutorial_btn:hover,
.tutorial_btn:hover,
.bnr_book:hover { opacity: 0.8; -webkit-transition: opacity .3s; transition: opacity .3s; }
/*----------------------------------------
 トップ
----------------------------------------*/
.tutorial-chara { width: 900px; display: block; margin: 0 auto; position: relative; top: -200px; }
.tutorial-chara img { position: absolute; }
.tutorial-chara img:first-child { top: 37px; left: 0; width: 179px; height: auto; }
.tutorial-chara img:last-child { top: 15px; right: 0; width: 207px; height: auto; }
#tutorial_image_wp { height: auto; padding-bottom: 50px; background-color: #EEEEEE; }
#tutorial_image_wp ul { width: 980px; margin: 0 auto; position: relative; }
#tutorial_image_wp ul li { width: 300px; height: 360px; display: inline-block; overflow: hidden; position: relative; top: 0; margin: 50px 10px 30px; padding: 15px 0; background: #fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.20); border-radius: 4px; cursor: pointer; text-align: center; box-sizing: border-box; }
#tutorial_image_wp ul li img { width: 270px; }
#tutorial_image_wp ul li span { width: 300px; height: 80px; display: block; color: #2980B9; text-align: center; position: absolute; top: 280px; background: url(/images/tutorial/btn-more-bg.png) repeat-x; background-size: auto 80px; padding-top: 45px; }
#tutorial_image_wp ul li.open { height: 830px; -webkit-transition: all 600ms; transition: all 600ms; cursor: inherit; }
#tutorial_image_wp ul li.open span { display: none; }
#tutorial_image_wp .tutorial_btn { width: 300px; height: 50px; background: #2980B9; border-radius: 3px; margin: 0 auto; color: #fff; line-height: 50px; padding: 0; text-align: center; }
#tutorial_image_wp .tutorial_btn p { padding: 0; background: url(../images/common/ico-right-w.png) no-repeat 280px center; }
#tutorial_image_wp ul li img { opacity: 0; transition: opacity .3s; }
#tutorial_image_wp ul li img.tutorial_loaded { opacity: 1; }
/*----------------------------------------
 チュートリアルページ
---------------------------------------*/
#tutorial_bg_wp .tutorial_form { position: relative; width: 960px; margin: 0 auto 40px; padding-top: 100px; text-align: left; }
#tutorial_bg_wp .tutorial_btn { position: absolute; right: 0; top: 105px; width: 220px; height: 40px; background: #2980B9; border-radius: 3px; text-align: center; }
#tutorial_bg_wp .tutorial_btn p { margin: .5rem 0; background: url(../images/common/ico-right-w.png) no-repeat 200px center; }
.bnr_book img { width: 960px; height: auto; margin-bottom: 20px; }
.tutorial_box_main { background: #EEEEEE; padding: 30px; text-align: center; }
.tutorial_box_main img { width: 600px; height: auto; }
.tutorial_box_4koma { background: #EEEEEE; width: 100%; overflow-x: scroll; }
.tutorial_box_4koma ul { width: 4600px; margin-left: 60px; }
.tutorial_box_4koma ul li { width: 300px; height: 800px; display: inline-block; margin: 50px 10px 30px; padding: 15px 0; background: #fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.20); border-radius: 4px; text-align: center; }
.tutorial_box_4koma ul li img { width: 270px; height: auto; }