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

	subject_style

	01. forPC Layout

	02. forSP Layout

--------------------------------------------------------*/




/********************************************************************************

	01. forPC Layout

********************************************************************************/

.title_wrap {
    background: #c7d5fc;
}
.title_suject:after {
    background: #264fd6;
}
.box .box_inner {
    background: #c7d5fc;
}

.box .box_inner a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
/*    padding: 0;*/
/*    width: 100%;*/
    background: none;
}
.substance {
    position: relative;
    display: flex;
    align-items: center;
/*    height: 200px;*/
/*    width: 288px;*/
    background: #fff;
/*border : 1px #000 solid ;*/
}
.substance img {
    margin: 0 auto;
    border: 1px solid #999 !important;
}


/* ============================================================ 追加クラス */
.connect_1, .connect_2, .connect_3 {
  position: absolute;
  background: #fff;
}
.connect_1 {
  left: 288px;
  width:20px ;
  height:200px ;
}
.connect_2 {
  top: 212px;
  left: 288px;
  width: 20px;
  height: 200px;
}
.connect_3 {
  top: 424px;
  left: 288px;
  width: 20px;
  height: 200px;
}


.substance_inner .year_latest_r8 {
    max-width: 178px;
    margin: 0 auto;
}

.substance_inner_dlx2 .textbook_title {
    height: 22px;
    width: 60px;
    padding: 0 0 3px;
}

.substance_inner .textbook_detail_row {
    flex-flow: row;
}

.substance_inner .textbook_number_in {
    width: 100%;
}

.substance .substance_inner_imgx2 {
    margin: 5px auto 0;
}

.substance_imgx2_wide a {
    width: 464px;
}

.substance .substance_inner_wide {
    width: 178px;
}

.substance_imgx2_wide_ex a {
    width: 514px;
}

.substance .substance_inner_wide_ex {
    width: 228px;
}

.substance_inner_wide_ex .textbook_title {
    width: 110px;
}

.substance_inner > dl > dd.textbook_number_wrap_wide {
    min-width: 120px;
}

.textbook_slogan {
    margin: 0 0 10px;
    padding: 2px 0;
    border-bottom: 1px dotted #aaa;
    border-top: 1px dotted #aaa;
    font-size: 16px;
}

.subtitle_suject {
    width: 100%;
}

.box_already_wrap {
    display: flex;
    width: 100%;
}

.box.box_already {
    display: flex;
    flex-wrap: wrap;
/*    align-items: flex-start;*/
}

@media screen and (min-width: 0px) and (max-width: 1026px) {
.subtitle_suject {
/*    max-width: 607px;*/
}
.box.box_already {
/*    max-width: 607px;*/
}
}

.box.box_already  a {
/*    width: 168px;*/
  margin: 0 1.5% 0 0;
}

.box.box_already_communication {
    width: 40%;
}

.box_already_communication a {
    display: flex;
}

.box.box_already_logic {
    width: 60%;
    min-width: 230px;
}

.box_already_logic_inner {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 607px;
    padding: 10px 0 10px 10px;
    background: #efefef;
}

.box.box_already .box_inner {
    /*min-height: 274px;
    background: #fff;*/
}

.box_already .substance {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    height: auto;
    width: 140px;
    padding: 10px 0;
    background: transparent;
}

.box_already_communication .substance {
    width: 120px;
}

.box_already .substance_x2 {
    flex-flow: row;
    width: 266px;
}

.box_already .substance .substance_inner {
    width: 198px;
    margin: 5px 0 0;
}

.box_already_logic .substance .substance_inner {
    width: 230px;
}

.box_already .substance_inner .textbook_title {
    height: auto;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -.03em;
}

/* ============================================================ wide_btn_banner01 */
.wide_btn_banner01_wrap{
}
#wide_btn_banner01{
  width: 520px;
  margin: 0 auto;
  padding: 1px;
  background: #ccc;
}

#wide_btn_banner01 a{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 3px 18px;
  height: 70px;
  background: #fff;
  color: #555;
  font-size: 22px;
  line-height: 1.05;
  text-align: center;
}

#wide_btn_banner01 a:after{
  content: "";
  height: 24px;
  width: 24px;
  background: url(../img/common/nav_arrow_disc01.svg);
  background-size: 24px 24px;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translate(0, -50%);
}
#wide_btn_banner01_in {
    display: block;
    background: #fff;
}
#wide_btn_banner01_in .nav_text{
  width: 100%;
}

.btn_shadow_blue {
    box-shadow: 3px 3px 0 #264fd6;
    border: 1px solid #264fd6;
}

#wide_btn_banner01 a.btn_h-kyozai {
    padding: 3px 58% 3px 1%;
    background: url(../img/index/img_btn_h-kyozai.png) #eef3ff no-repeat right 18% center;
    background-size: auto 100%;
}

/* ============================================================ wide_btn_qbank01 */
.wide_btn_qbank01_wrap{
  margin: 0 0 6px;
}
#wide_btn_qbank01{
  margin: 10px 5px;
  padding: 6px;
  background: #63afe2;
}

#wide_btn_qbank01 a{
  position: relative;
  width: 223px;
  padding: 0 23px 0 3px;
  background: #fff;
  color: #555;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.05;
  letter-spacing: -.08em;
  text-align: center;
}

#wide_btn_qbank01 a:after{
  content: "";
  height: 20px;
  width: 18px;
  background: url(../../../assets/img/common/icon_link_blank.svg) no-repeat;
  background-size: 18px auto;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translate(0, -50%);
}
#wide_btn_qbank01_in {
    display: flex;
    align-items: center;
    background: #fff;
    height: 46px;
}
#wide_btn_qbank01_in .nav_text{
  width: 100%;
  font-size: 15px;
}

#wide_btn_qbank01 .nav_text_wrap {
  position: relative;
  top: -4px;
}

#wide_btn_qbank01 .nav_text_logo {
  position: relative;
  z-index: 1;
}

#wide_btn_qbank01 .nav_text_logo img {
  position: relative;
  top: 7px;
}

#wide_btn_qbank01 .nav_text {
  position: relative;
  z-index: 5;
}

/* ============================================================ wide_btn_qbank02 */
.wide_btn_qbank02_wrap{
  margin: 0 0 6px;
}
#wide_btn_qbank02{
  margin: 10px 5px;
  padding: 6px;
  background: #63afe2;
}

#wide_btn_qbank02 a{
  position: relative;
  width: 223px;
  padding: 0 23px 0 3px;
  background: #fff;
  color: #555;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.05;
  letter-spacing: -.08em;
  text-align: center;
}

#wide_btn_qbank02 a:after{
  content: "";
  height: 26px;
  width: 22px;
  background: url(../../../assets/img/common/icon_download_pdf.svg) no-repeat;
  background-size: 22px auto;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translate(0, -50%);
}
#wide_btn_qbank02_in {
    display: flex;
    align-items: center;
    background: #fff;
    height: 46px;
}
#wide_btn_qbank02_in .nav_text{
  width: 100%;
  font-size: 15px;
}

#wide_btn_qbank02 .nav_text_wrap {
  position: relative;
  top: -4px;
}

#wide_btn_qbank02 .nav_text_logo {
  position: relative;
  z-index: 1;
}

#wide_btn_qbank02 .nav_text_logo img {
  position: relative;
  top: 7px;
}

#wide_btn_qbank02 .nav_text {
  position: relative;
  z-index: 5;
}

/* ============================================================ wide_btn_comparison */
.wide_btn_comparison_wrap{
}
#wide_btn_comparison{
  margin: 8px 5px;
  padding: 6px;
  background: #fff;
}

#wide_btn_comparison span.link_block,
#wide_btn_comparison a.link_block{
  position: relative;
  width: 590px;
  padding: 3px 23px 3px 3px;
  background: #fff;
  color: #555;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.05;
  /*letter-spacing: -.06em;*/
  text-align: center;
}

#wide_btn_comparison span.link_block:after{
  content: "（準備中）";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translate(0, -50%);
}
#wide_btn_comparison a.link_block:after{
  content: "";
  height: 26px;
  width: 22px;
  background: url(../../../assets/img/common/icon_download_pdf.svg) no-repeat;
  background-size: 22px auto;
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translate(0, -50%);
}
#wide_btn_comparison_in {
    display: flex;
    align-items: center;
    background: #fff;
    height: 46px;
}
#wide_btn_comparison_in .nav_text{
  width: 100%;
  font-size: 15px;
}

.substance_inner .textbook_number_wrap dd.publisher,
.substance_inner .textbook_number_wrap dd.textbook_number {
    word-break: keep-all;
}


/********************************************************************************

	02. forSP Layout
    *横幅が1025px以下の場合


********************************************************************************/

@media screen and (min-width: 0px) and (max-width: 1026px) {


.box .box_inner a {
    justify-content: center;
}


/* ============================================================ 追加クラス */
.connect_1, .connect_2, .connect_3 {
  position: relative;
  top: 0;
  left: 0;
  margin: -15px 0 0 0;
  width: 288px;
  height: 15px;
  background: #fff;
}

.substance_inner_dlx2 .textbook_title {
    padding: 0 0 5px;
}

.substance_inner .textbook_number_in {
    min-width: 140px;
}

.substance .substance_inner_imgx2 {
    margin: 5px auto;
}

.substance_imgx2_wide a {
    width: 288px;
}

.substance .substance_inner_wide {
    margin: 0 0 10px;
    width: 200px;
}

.substance_imgx2_wide_ex a {
    width: 288px;
}

.substance .substance_inner_wide_ex {
    margin: 0 0 10px;
    width: 258px;
}

.substance_inner > dl > dd.textbook_number_wrap_wide {
    margin: 0 5% 0 0;
}

.box_already_wrap {
    flex-flow: column;
    width: 100%;
}

.box.box_already {
    padding: 5px 5px;
}

.box.box_already  a {
    width: 31.3%;
    margin: 5px 1%;
}

.box.box_already_communication {
    width: 100%;
}

.box.box_already_communication a {
    width: 100%;
    margin: 0;
}

.box.box_already_communication .box_inner {
    width: 33.3%;
}

.box_already .substance img {
    width: 98%;
    max-width: 117px;
}

.box.box_already_logic {
    height: auto;
    width: 100%;
    max-width: 607px;
    margin: 0 auto;
}

.box_already_logic_inner {
    padding: 10px 2%;
}

.box_already .substance .substance_inner {
    width: 175px;
}

/*.box.box_already_logic a:last-child {
        width: 64.6%;
        margin: 5px 1%;
}*/

.box_already .substance_x2 img {
    width: 49%;
}

.wide_btn_box {
    padding: 10px 2%;
}

/* ============================================================ wide_btn_banner01 */
#wide_btn_banner01{
  width: 272px;
}
#wide_btn_banner01 a{
  height: 40px;
  font-size: 13px;
}
#wide_btn_banner01 a:after{
  height: 18px;
  width: 18px;
  background-size: 18px 18px;
  right: 9px;
}
#wide_btn_banner01_in .nav_text{
  font-size: 11px;
}

/* ============================================================ wide_btn_qbank01 */
.wide_btn_qbank01_wrap{
  position: relative;
  margin: 0 0 5px;
}
#wide_btn_qbank01{
  position: relative;
  z-index: 5;
  height: 52px;
  width: 215px;
  padding: 6px;
  margin: 0 5px;
}
#wide_btn_qbank01 a{
  padding: 3px 0;
  height: 25px;
  font-size: 11px;
}
#wide_btn_qbank01 a:after{
  right: 3px;
}
#wide_btn_qbank01_in {
    height: 40px;
}
#wide_btn_qbank01_in .nav_text{
  font-size: 11px;
}

#wide_btn_qbank01 .nav_text_wrap {
  top: -12px;
}

#wide_btn_qbank01 .nav_text_logo img {
  height: 20px;
}

/* ============================================================ wide_btn_qbank02 */
.wide_btn_qbank02_wrap{
  position: relative;
  margin: 0 0 5px;
}
#wide_btn_qbank02{
  position: relative;
  z-index: 5;
  height: 52px;
  width: 215px;
  padding: 6px;
  margin: 0 5px;
}
#wide_btn_qbank02 a{
  padding: 3px 0;
  height: 25px;
  font-size: 11px;
}
#wide_btn_qbank02 a:after{
  right: 3px;
}
#wide_btn_qbank02_in {
    height: 40px;
}
#wide_btn_qbank02_in .nav_text{
  font-size: 11px;
}

#wide_btn_qbank02 .nav_text_wrap {
  top: -12px;
}

#wide_btn_qbank02 .nav_text_logo img {
  height: 20px;
}

/* ============================================================ wide_btn_comparison */
.wide_btn_comparison_wrap{
  position: relative;
  margin: 0 0 5px;
}
#wide_btn_comparison{
  position: relative;
  z-index: 5;
  height: 52px;
  width: 288px;
  padding: 6px;
  margin: 2px 5px;
}
#wide_btn_comparison span.link_block,
#wide_btn_comparison a.link_block{
  padding: 3px 0;
/*  height: 25px;*/
  font-size: 12px;
}
#wide_btn_comparison span.link_block{
  margin: -13px 0 0;
}
#wide_btn_comparison span.link_block:after{
  margin: 13px 0 0;
  right: 50%;
  transform: translate(50%, -50%);
}
#wide_btn_comparison a.link_block:after{
  right: 6px;
}
#wide_btn_comparison_in {
    height: 40px;
}
#wide_btn_comparison_in .nav_text{
  font-size: 11px;
}



}