@charset "utf-8";
h2.cmn__til{font-size: 2em;}
/* HOME
----------------------------------------*/
.home__front{ padding: 120px 0; background: url(../../images/index/main02.jpg) no-repeat center center / cover;}
.home__front__form{ margin: 0 auto; width: 65%; overflow: hidden; clear: both; letter-spacing: -.4em; }
.home__front__form__left{ width: 50%; height: 100%; padding: 100px 4% 0 4%; background: rgba(255,255,255,0.9); position: relative; display: inline-block; letter-spacing: normal; vertical-align: top; }
.home__front__form__right{ width: 50%; padding: 20px 4%; display: inline-block; letter-spacing: normal;background: rgba(255,255,255,0.9); }
.home__front__form__left h1{ margin: 0; padding: 0; font-size: 0; text-align: center;}
.home__front__form__left span{ position: absolute; left: 8%; bottom: 20px; display: block; text-align: left; color: #000; font-weight: bold; font-size: 107%; }

.home__front__form__another{ margin: 0 auto; width: 50%; background: rgba(255,255,255,0.8); overflow: hidden; clear: both; letter-spacing: -.4em; }
.home__front__form__left__only{ width: 100%; height: 100%; padding: 70px 4% 70px 4%; position: relative; display: inline-block; letter-spacing: normal; vertical-align: top; }
.home__front__form__left__only h1{ margin: 0 0 40px 0 ; padding: 0; font-size: 0; text-align: center; }
.home__front__form__left__only span{ display: block; text-align: center; color: #000; font-weight: bold; font-size: 107%; }

.home__front__form__inner{ background: #fff; width: 100%; padding: 10px 2%;}
.home__front__form__til{ padding: 20px 0 10px 0; text-align: center; color: #000; font-size: 148%; line-height: 1.4;}
.home__front__form__inner form{ padding: 0 2%; margin: 0 auto;}
.home__front__form__body input{ display: block; width: 100%; padding: 0 2%; border: 2px solid #d9d9d9; background: #f9f9f9; padding: 10px 6px; margin: 0 auto 20px auto; text-align: left; color: #959595;
-webkit-appearance:none; border-radius:none;} 
.home__front__form__body input:last-child{ margin: 0 auto 5px auto;}
.rememberme{ text-align: left;}
.home__front__form__btnarea{ margin: 20px auto 10px auto; text-align: center;}
.home__front__form__btnarea button{ cursor: pointer; width: 100%; border: none; margin: 0 auto 10px auto; padding: 15px 0; background: #d3d1c4; color:#fff; font-size: 142%; font-weight: bold;
-webkit-appearance:none; border-radius:none;}
.home__front__form__btnarea button:before{ content:""; display:inline-block; width:24px; height:17px; background:url(../../images/common/icon_enter.png) no-repeat left center / contain;}
.home__front__form__forgot{ font-size: 85%; text-align: center; padding: 0 0 0 22px; display: inline-block; background: url(../../images/common/icon_question.png) no-repeat left center;}
.home__front__form__newaccount{ border: 2px solid #d9d9d9; padding: 14px 4%; overflow: hidden; clear: both; }
.home__front__form__newaccount__left{ float: left; text-align: center; padding: 10px 0;} 
.home__front__form__newaccount__right{ float: right; background: #d3d1c4; text-align: center; font-size: 114%;} 
.home__front__form__newaccount__right a{ color: #fff; display: block; padding: 10px 26px; }

/* HOMEセクション */
.home__info{ width: 75%; margin: 0 auto; padding: 50px 0; clear: both;}
.home__info__link{ text-align: right; color: #222; font-size: 107%; margin: 0 auto 10px auto;}
.home__info__link a{ color: #222; padding: 0 0 0 18px; background: url(../../images/common/arw_bk.png) no-repeat left center;}
.home__info ul{ border-top: double #333;}
.home__info ul li{ border-bottom: double #333; clear: both; overflow: hidden;}
.home__info ul li a{  display: flex; flex-wrap: wrap; align-items: center; padding: 12px 10px; text-align: left; font-size: 107%; color: #222; overflow: hidden;}
.home__info__left{ width:220px; position: relative;}

.home__catebox__cate01{ font-size: 107%; position: absolute; z-index: 3; top:0px; right: 10px; width: 120px; padding: 2px 5px; text-align: center; color: #fff; background: #000;}
.home__catebox__cate02{ font-size: 107%; position: absolute; z-index: 3; top:0px; right: 10px; width: 120px; padding: 2px 5px; text-align: center; color: #fff; background: #00a73c;}
.home__catebox__cate03{ font-size: 107%; position: absolute; z-index: 3; top:0px; right: 10px; width: 120px; padding: 2px 5px; text-align: center; color: #fff; background: #f39800;}

/* 特典部 */
.home__special{ width: 100%; margin: 0 auto; padding: 50px 0; clear: both;}
.home__special01{ clear: both; overflow: hidden; letter-spacing: -.4em; margin: 0 0 50px 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between;  -ms-flex-pack: justify; justify-content: space-between;}
.home__special01 li{ background: #fff; display: inline-block; flex-basis: 32%; letter-spacing: normal; vertical-align: top; border-radius: 10px; border: 1px solid #333; padding: 13px;}
.home__special01 li h3{ margin: 0 0 10px 0; color: #000; font-size: 128%;}
.home__special01 li p{ font-size: 114%;}
.home__special__more{ font-size: 212%; text-align: left; color: #000; font-weight: bold; margin: 0 0 30px 0; }

/* ランク一覧 */
.rank{ clear: both; overflow: hidden; letter-spacing: -.4em; margin: 0 0 30px 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between;  -ms-flex-pack: justify; justify-content: space-between; }
.rank li{ display: inline-block; flex-basis: 24%; letter-spacing: normal; vertical-align: top;}
.rank li h3{ font-size: 164%; text-align: center; padding: 0 2%; margin: 0; line-height: 1.4;}
.rank li h4{ font-size: 128%; margin: 20px 0 20px 0; text-align: left; color: #000;}
.rank li p{ font-size: 114%;}
.rank li p span{ font-size: 80%;}
.rank li img{ display:block; margin:10px auto;}
.special__box{ border-radius: 10px; padding: 15px 0;}

.home__gallery{ width: 100%; margin: 0 auto; padding: 50px 0; clear: both;}
.home__info__link02{ width: 75%; margin: 0 auto 20px auto; clear: both; text-align: right;}
.home__info__link02 a{ color: #222; padding: 0 0 0 18px; background: url(../../images/common/arw_bk.png) no-repeat left center;}

/* スマートフォン（ディスプレイ幅599px以下）より小さい画面 */
@media screen and (max-width: 599px) {
    .home__front__form__another, .home__front__form{ width:90%;}
    .home__front__form__left, .home__front__form__right{ width:100%; }
    .home__info{width:90%;}
    .home__info__right{ width:100%; margin-top:10px;}
    .home__special01 li{ flex-basis: 98%; margin-bottom:10px;}
    .rank li{ flex-basis: 49%;}
 }