/* ===================================================================
  use second
=================================================================== */
/* ===================================================================
  _mixin.css
=================================================================== */
html { font-size: 10px; }
/*---------------------------------------------------------------------------*/
.contents { background-color: #fdf9ee; color: #562901; min-width: 1200px; padding: 24px 0 50px; }
.contents .wrap { margin: 0 auto; width: 1000px; }
.contents .wrap .box { background-color: #fff; border: #decea0 1px solid; -moz-border-radius: 10px; border-radius: 10px; margin-bottom: 45px; padding: 25px 40px 40px; }
.contents .wrap .box h2 { margin-bottom: 24px; }
.contents .wrap .box h2 a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.contents .wrap .box h2 a:hover { opacity: 0.7; }
.contents .wrap .box ul { font-size: 0rem; margin: 0 -15px; }
.contents .wrap .box ul li { display: inline-block; margin: 0 15px 20px; width: 285px; }
.contents .wrap .box ul li a { background: url(../images/icon_arrow.png) no-repeat 20px center; color: #562901; display: block; font-size: 1.6rem; -moz-border-radius: 8px; border-radius: 8px; overflow: hidden; padding: 20px 20px 20px 40px; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.contents .wrap .box ul li a:hover { opacity: 0.7; }
.contents .wrap .box.soramame ul li a { border: #c8dd9f 1px solid; background-color: #edf5df; }
.contents .wrap .box.everyday ul li a { border: #feced0 1px solid; background-color: #fff2f3; }
.contents .wrap .box.more ul li a { border: #fbd395 1px solid; background-color: #fcf4d8; }
.contents .wrap .btn { margin: 0 auto; width: 550px; }
.contents .wrap .btn a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.contents .wrap .btn a:hover { opacity: 0.7; }
@media screen and (max-width: 767px) { .contents { background-color: #fdf9ee; min-width: 320px; padding: 15px 0; }
  .contents .wrap { margin: 0 auto; max-width: 500px; width: 100%; }
  .contents .wrap .box { -moz-box-sizing: border-box; box-sizing: border-box; border: #decea0 1px solid; -moz-border-radius: 10px; border-radius: 10px; margin: 0 auto 15px; padding: 20px 10px 5px; width: 90%; }
  .contents .wrap .box h2 { margin: 0 auto 20px; max-width: 300px; width: 80%; }
  .contents .wrap .box ul { font-size: 0rem; margin: 0 auto; }
  .contents .wrap .box ul li { display: inline-block; margin: 0 2% 4%; width: 46%; }
  .contents .wrap .box ul li a { background: url(../images/icon_arrow.png) no-repeat 10px 11px; display: block; font-size: 1.1rem; -moz-border-radius: 8px; border-radius: 8px; overflow: hidden; padding: 10px 10px 10px 25px; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
  .contents .wrap .btn { margin: 0 auto; max-width: 500px; width: 90%; } }