@charset "UTF-8";
.key_index { background: url(../img/index_key__bgdeco@2x.png) center bottom no-repeat, url(../img/key_bg.jpg) center bottom no-repeat; background-size: contain, cover; padding-top: 140px; padding-bottom: 6em; }
@media (max-width: 767px) { .key_index { padding-top: 80px; } }

.key_canvas { position: relative; display: grid; grid-template-columns: 40% 1fr; }
@media (min-width: 768px), print { .key_canvas { grid-template-areas: "areaA areaB" "areaC areaB"; } }
@media (max-width: 767px) { .key_canvas { grid-template-columns: 20% 1fr; grid-template-areas: "areaA areaB" "areaC areaB"; } }

.key_text { font-family: "Tsukushi A Round Gothic", "筑紫A丸ゴシック", "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", YuGothic, "Yu Gothic", sans-serif; font-weight: 700; grid-area: areaA; position: relative; }

.key_pic { position: relative; grid-area: areaB; }
@media (min-width: 768px), print { .key_pic { margin-left: 1em; } }

.key_pic2 { position: relative; grid-area: areaC; }
@media (max-width: 767px) { .key_pic2 div { position: absolute; width: 300%; top: 50%; transform: translateY(-50%); } }

.key_text { font-size: 2.4em; letter-spacing: .3em; padding: 0 0 1em; color: #29ABE2; line-height: 1.7; }
@media (max-width: 767px) { .key_text { font-size: 100%; position: relative; z-index: 1; } }
.key_text p { font-weight: bold; margin: 0; }
@media (max-width: 767px) { .key_text p { position: absolute; width: 300%; top: 1em; left: 1em; } }
.key_text p + p { text-indent: 1.3em; }
@media (max-width: 767px) { .key_text p + p { top: 2em; } }

.key_list { margin: 0; padding: 0; }

.info dd + dt { margin-top: 2em; }

.info dt { display: flex; flex-wrap: wrap; }

.info dt strong { display: block; width: 100%; font-size: 1.2em; order: 2; color: #29ABE2; }

.info dt .date { order: 0; color: #afafaf; font-size: 0.9em; }

.info dt .new { display: inline-block; order: 1; margin-left: 1em; color: #fb4375; font-size: 0.9em; }

.info dd { margin: 0; margin-top: .8em; }

.bnr_list { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; }

.bnr_list li { width: calc(50% - .5em); margin-bottom: 1em; }

/*# sourceMappingURL=index.css.map */