@charset "utf-8";
h2.cmn__til{font-size: 2em;}
/* ABOUT
----------------------------------------*/
.about__front{ overflow: hidden; clear: both; letter-spacing: -.4em; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; align-items: center;  padding: 0 0 0 0; margin: 40px auto 0 auto; }
.about__front__left{ flex-basis: 50%; padding: 0px 12.5%; letter-spacing: normal; vertical-align: middle; text-align: left; }
.about__front__right{ flex-basis: 50%; padding: 0px 4%; letter-spacing: normal; }
.about__front__left img{ display: block; margin: 0 auto 30px auto;}
.about__front__info{ clear: both; overflow: hidden; margin: 60px 0 0 0;}
.about__front__left p{ text-align: center;}

.about__front__info ul{ clear: both;}
.about__front__info ul li { clear: both; overflow: hidden; margin: 0 0 30px 0;}
.about__front__point__left{ width: 38%; float: left; letter-spacing: -0.03em; margin: 0; font-size: 114%; text-align: center; color: #000; border: 2px solid #d3d1c4; border-radius: 10px; padding: 10px 5px;}
.about__front__point__right{ width: 60%; float: right; padding: 10px 0 0 0;}

/* 特典部 */
.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;}

.about__requirement{ font-size: 114%; text-align: center; }
.about__requirement dl{ display:inline-block; overflow: hidden;}
.about__requirement dl>*{padding:10px 0;}
.about__requirement dt{ clear: left; display: block; float: left; text-align:left; width: 20rem; }
.about__requirement dd{ display: block; float: left; text-align:right; width: 4rem;}

/* PCブラウザ（ディスプレイ幅1280px以下）より小さい画面 */
@media screen and (min-width: 960px) and (max-width: 1280px) {}
/* タブレット（ディスプレイ幅959px以下）より小さい画面 */
@media screen and (min-width: 600px) and (max-width: 959px) {}
/* 記事詳細ページ固定レイアウト幅以下へ移行の場合 */
@media screen and (max-width: 800px) {}
/* スマートフォン（ディスプレイ幅599px以下）より小さい画面 */
@media screen and (max-width: 599px) {
    .about__front>*{ flex-basis: 98%;}
    .about__front__right{ margin-top:50px;}
    .about__requirement dt, .about__requirement dd{ float:none;}
    .home__special01 li{ flex-basis: 98%; margin-bottom:10px;}
    .rank li{ flex-basis: 49%;}
}