@charset "UTF-8";
/*
  module.css
  流用可能なモジュール
*/

/*------------------------------------------------
  layout
------------------------------------------------*/
.layout_contents {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 1px;
}
@media screen and ( max-width: 767px ){ /* SP */
  .layout_contents {
    padding-top: 20px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .layout_contents {
    padding-top: 85px;
  }
  .layout_contents.col {
    display: flex;
  }
  .layout_contents_main {
    flex-shrink: 1; flex-grow: 1;
    width: 100%;
    margin-right: 3.3333%;
  }
  .layout_contents_side {
    flex-shrink: 0; flex-grow: 0;
    width: 300px;
  }
}

/*------------------------------------------------
  headline
------------------------------------------------*/
/* hl_orangebox */
.hl_orangebox {
  display: flex;
  align-items: flex-start;
  border: solid #1F1F1F;
  background: #FF986A;
  color: #fff;
  font-weight: bold;
}
.hl_orangebox::before {
  flex-shrink: 0; flex-grow: 0;
  display: inline-block; content: '';
  width: 1em; height: 1em;
  margin-top: 0.2em;
  background: #FF986A;
  border: 3px solid #1F1F1F;
  border-radius: 50%;
  box-shadow: 0 0 0 .2em inset #fff;
}
@media screen and ( max-width: 767px ){ /* SP */
  .hl_orangebox {
    margin-bottom: 30px;
    padding: 10px;
    border-radius: 4px;
    font-size: 1.8rem;
  }
  .hl_orangebox::before {
    margin-right: 10px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .hl_orangebox {
    margin-bottom: 50px;
    padding: 15px;
    border-radius: 7px;
    font-size: 3.2rem;
  }
  .hl_orangebox::before {
    margin-right: 15px;
  }
}

/* hl_orangebox_small */
.hl_orangebox_small {
  display: table;
  padding: 6px 20px;
  border: solid #1F1F1F;
  background: #FF986A;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
.hl_orangebox_small.full {
  width: 100%;
}
@media screen and ( max-width: 767px ){ /* SP */
  .hl_orangebox_small {
    margin-bottom: 30px;
    border-radius: 4px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .hl_orangebox_small {
    margin-bottom: 50px;
    border-radius: 7px;
  }
}

.hl1 {
  font-weight: bold;
}
.hl1_date {
  display: inline-block;
  color: #F95B38;
  font-weight: normal;
}
@media screen and ( max-width: 767px ){ /* SP */
  .hl1 {
    font-size: 1.8rem;
  }
  .hl1_date {
    display: block;
    margin-top: 4px;
    font-size: 1rem;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .hl1 {
    font-size: 2.4rem;
  }
  .hl1_date {
    font-size: 1.4rem;
  }
}
/*------------------------------------------------
  marker
------------------------------------------------*/
/* marker_orange */
.marker_orange {
  display: inline;
  position: relative;
  z-index: 0;
}
.marker_orange::before {
  display: inline-block; content: '';
  height: 0.45em;
  background: #FF986A;
  border-radius: 3px;
  position: absolute;
  left: 0; right: 0;
  bottom: -.2em;
  z-index: -1;
}
/*------------------------------------------------
  bottom_mark
------------------------------------------------*/
.bottom_mark::after {
  display: block; content: '';
  background: no-repeat url(/img_2021/logomark_asagaku.png) center bottom;
  background-size: contain;
}
@media screen and ( max-width: 767px ){ /* SP */
  .bottom_mark::after {
    height: 63px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .bottom_mark::after {
    height: 107px;
  }
}

/*------------------------------------------------
  box_style
------------------------------------------------*/
.box_style-orange,
.box_style-sky {
  background: #fff;
  border: 3px solid #1F1F1F;
  border-radius: 4px;
}
.box_style-orange {
  box-shadow: 6px 6px 0 #FF986A;
}
.box_style-sky {
  box-shadow: 6px 6px 0 #5FC1E0;
}
.box_style-gray {
  background: #F5F5F1;
  border-radius: 10px;
}
.box_style-line {
  background: #fff;
  border: 3px solid #1F1F1F;
  border-radius: 4px;
}
.box_style-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  background: #F5F5F1;
  border-radius: 10px;
  font-weight: bold;
}
@media screen and ( max-width: 767px ){ /* SP */
  .box_style-lead {
    margin-bottom: 10px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .box_style-lead {
    min-height: 70px;
    margin-bottom: 40px;
  }
}
/*------------------------------------------------
  background_style
------------------------------------------------*/
/* triangle */
.background_style-triangle {
  background: #fff no-repeat;
  background-image:
  url(/img_2021/bg_triangle_sky.svg),
  url(/img_2021/bg_triangle_orange.svg),
    linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 20px)
  ;
  background-position: top left, bottom right, center;
}
@media screen and ( max-width: 767px ){ /* SP */
  .background_style-triangle {
    background-size: 200px auto, 200px auto, auto;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .background_style-triangle {
    background-size: 450px auto, 450px auto, auto;
  }
}

/* tile_orange */
.background_style-tile_orange {
  background: #FAF2E8 center;
  background-image: repeating-linear-gradient(
    90deg,
    #fff ,
    #fff 1px,
    transparent 1px,
    transparent 12px
    ),
    repeating-linear-gradient(
    0deg,
    #fff ,
    #fff 1px,
    transparent 1px,
    transparent 12px
    );
}

/* beige */
.background_style-beige {
  background-color: #FAF2E8;
}

/* pc_only */
@media screen and ( max-width: 767px ){ /* SP */
  .background_style-pc_only {
    background: none;
  }
}

/*------------------------------------------------
  btn
------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #F3F3EB;
  border: 2px solid #1F1F1F;
  border-radius: 6px;
  font-size: 1.4rem;
  font-weight: bold;
  position: relative;
}
/* 幅 */
.btn.w280 { width: 280px;}
.btn.maxw400 { width: 100%; max-width: 400px;}
.btn.minw140 { min-width: 140px;}
.btn.full { width: 100%;}

/* サイズ */
.size_m {
  padding: 10px 16px;
  font-size: 1.8rem;
}
/* 位置 */
.btn.center { justify-content: center;}
.btn.right { justify-content: flex-end;}

/* アイコン */
.btn.arw::before,
.btn.search::before {
  display: block;
  content: '';
  background: #FC8A57 no-repeat center;
  border-radius: 4px 0 0 4px;
  position: absolute;
  top: 0; bottom: 0; left: 0;
}
.btn.arw { padding-left: 32px;}
.btn.search { padding-left: 44px;}
.btn.arw::before {
  width: 20px;
  background-image: url(/img_2021/arw_left_white.svg);
  background-size: 10px 16px;
}
.btn.search::before {
  width: 32px;
  background-image: url(/img_2021/ic_search.svg);
}
/* 色 */
.btn.red { border-color: #F95B38;}
.btn.red::before { background-color: #F95B38;}
.btn.revColor {
  background: #FC8A57;
  color: #fff;
}
.btn.green {
  background: #8DCC71;
  color: #fff;
}
.btn.violet {
  background: #777ABF;
  color: #fff;
}

.btn.revColor::before { background-color: #F3F3EB;}
.btn.revColor.arw::before {
  background-image: url(/img_2021/arw_left_orange.svg);
}

/* 状態 */
.btn:hover { opacity: .7;}
.btn:disabled,
.btn.disabled {
  background-color: #d0d0c4;
  opacity: .6;
  pointer-events: none;
}

/*------------------------------------------------
  btn_unit
------------------------------------------------*/
.btn_horizUnit {
  display: flex;
}
.btn_horizUnit .btn:last-child {
  margin-right: 0;
}
.btn_horizUnit.center {
  justify-content: center;
}

@media screen and ( max-width: 767px ){ /* SP */
  .btn_horizUnit .btn {
    margin-right: 20px;
  }
  .btn_horizUnit.sp_vert {
    flex-direction: column;
  }
  .btn_horizUnit.sp_vert .btn {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .btn_horizUnit.sp_vert .btn:last-child {
    margin-bottom: 0;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .btn_horizUnit .btn {
    margin-right: 30px;
  }
}

/*------------------------------------------------
  breadcrumb
------------------------------------------------*/
@media screen and ( max-width: 767px ){ /* SP */
  .breadcrumb_wrapper {
    background: #F5F5F1;
    box-shadow: 0 8px 12px rgba(0,0,0,0.16);
    z-index: 1;
    position: relative;
  }
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    padding: 10px 20px;
    font-size: 1rem;
  }
  .breadcrumb li:nth-child(n+2)::before {
    display: inline-block; content: '>';
    margin: 0 5px;
  }
  .breadcrumb a:hover {
   text-decoration: underline;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .breadcrumb_wrapper {
    background: #F5F5F1;
    box-shadow: 0 8px 12px rgba(0,0,0,0.16);
    z-index: 1;
    position: relative;
  }
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    padding: 10px 20px;
    font-size: 1.6rem;
  }
  .breadcrumb li:nth-child(n+2)::before {
    display: inline-block; content: '>';
    margin: 0 5px;
  }
  .breadcrumb a:hover {
    text-decoration: underline;
  }
}
/*------------------------------------------------
  youtube_wrapper
------------------------------------------------*/
.youtube_wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_wrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/*------------------------------------------------
  bulletList
------------------------------------------------*/
.bulletList_diamond > :last-child {
  margin-bottom: 0;
}
.bulletList_diamond > li {
  margin-bottom: 1em;
  padding-left: 1.2em;
  position: relative;
}
.bulletList_diamond > li::before {
  display: inline-block; content: '◆';
  position: absolute;
  left: 0; top: -.05em;
}
/*------------------------------------------------
  thumb_link
------------------------------------------------*/
.thumb_link {
  display: inline-block;
  width: 100%;
  position: relative;
}
.thumb_link img {
  display: block;
  width: 100%;
}
.thumb_link::after {
  display: inline-block; content: '';
  width: 30px; height: 30px;
  background: #FC8A57 url(/img_2021/ic_search.svg) no-repeat center;
  border-radius: 5px;
  position: absolute;
  bottom: 2px; right: 2px;
}
@media screen and ( max-width: 767px ){ /* SP */
}
@media screen and ( min-width: 768px ){ /* PC */
  .thumb_link:hover {
    opacity: 0.7;
  }
}

/* thumb_link_unit */
.thumb_link_unit {
  display: flex;
  flex-wrap: wrap;
}
@media screen and ( max-width: 767px ){ /* SP */
  .thumb_link_unit.sp_col2 li {
    width: calc(50% - 10px);
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .thumb_link_unit.sp_col2 > :nth-child(2n) {
    margin-right: 0;
  }

}
@media screen and ( min-width: 768px ){ /* PC */
  .thumb_link_unit.pc_col3 li {
    width: 25%;
    margin-right: 12.5%;
    margin-bottom: 30px;
  }
  .thumb_link_unit.pc_col3 > :nth-child(3n) {
    margin-right: 0;
  }
}

/*------------------------------------------------
  lead_unit
------------------------------------------------*/
.lead_unit {}
.lead_unit .hl_orangebox_small {
  margin-bottom: -20px;
  margin-left: auto; margin-right: auto;
  position: relative;
  z-index: 1;
}
.lead_unit__body {
  padding: 30px 10px 10px;
}
@media screen and ( max-width: 767px ){ /* SP */
  .lead_unit {
    margin-bottom: 20px
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .lead_unit {
    margin-bottom: 40px
  }
  .lead_unit__body {
    display: table;
    margin: auto;
  }
}

/*------------------------------------------------
  mediaVart
------------------------------------------------*/
.mediaVart {
  display: block;
}
.mediaVart > :last-child {
  margin-bottom: 0;
}
.mediaVart__img {
  width: 100%;
  padding-top: 75%;
  margin-bottom: 20px;
  background: no-repeat url(/img_2021/noimage_400.png) center;
  background-size: contain;
}
.mediaVart__hl {
  margin-bottom: 25px;
  font-size: 1.8rem;
  font-weight: bold;
}
.mediaVart__txt {
  margin-bottom: 10px;
  font-weight: bold;
}
@media screen and ( min-width: 768px ){ /* PC */
  a.mediaVart:hover {
    opacity: .7;
  }
}

/*------------------------------------------------
  mediaHoriz
------------------------------------------------*/
.mediaHoriz_body {
  font-weight: bold;
}
.mediaHoriz_img {
  display: block;
}
@media screen and ( max-width: 767px ){ /* SP */
  .mediaHoriz {
    margin-bottom: 40px
  }
  .mediaHoriz_body {
    font-size: 1.4rem;
  }
  .mediaHoriz_img {
    margin-bottom: 30px;
    text-align: center;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .mediaHoriz {
    display: flex;
    align-items: center;
    margin-bottom: 80px
  }
  .mediaHoriz.reverse {
    flex-direction: row-reverse;
  }
  .mediaHoriz_img {
    flex-shrink: 0; flex-grow: 0;
    margin-right: 55px;
  }
  .reverse .mediaHoriz_img {
    margin-right: 0;
    margin-left: 55px;
  }
}

/*------------------------------------------------
  example_list
------------------------------------------------*/
.example_list > :last-child {
  margin-bottom: 0;
}
.example_item {
  position: relative;
}
.example_num {
  position: absolute;
  top: 0;left: 0;
}
@media screen and ( max-width: 767px ){ /* SP */
  .example_list {
    margin-bottom: 40px;
  }
  .example_item {
    margin-bottom: 50px;
  }
  .example_body {
    margin-bottom: 15px;
    padding-left: 65px;
  }
  .example_body .hl1 {
    margin-bottom: 20px;
  }
  .example_btn {
    width: 100%;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .example_list {
    margin-bottom: 80px;
  }
  .example_item {
    margin-bottom: 35px;
    padding-left: 110px;
  }
  .example_body {
    margin-bottom: 20px;
  }
  .example_body .hl1 {
    margin-bottom: 10px;
  }
}
/*------------------------------------------------
  label
------------------------------------------------*/
.label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 74px;
  padding: 3px 6px;
  background: #999;
  border-radius: 4px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
}
/* 色 */
.label.red { background-color: #F95B38;}
.label.green { background-color: #8DCC71;}
.label.violet { background-color: #777ABF;}
.label.orange { background-color: #FF986A;}
.label.pink { background-color: #f0529c;}
.label.gray { background-color: #666;}

/* label_list */
.label_list {
  display: flex;
  flex-wrap: wrap;
}
.label_list > :last-child {
  margin-right: 0;
}
.label_list > li {
  margin-right: 5px;
}
/*------------------------------------------------
  sharebtn_list
------------------------------------------------*/
.sharebtn_list {
  display: flex;
  justify-content: flex-end;
}

/*------------------------------------------------
  switcher
------------------------------------------------*/

/*------------------------------------------------
  table_def
------------------------------------------------*/
/* .table_def th,
.table_def td {
  padding: 5px;
  border: 1px solid #ccc;
}
.table_def th {
  background: #39b54a;
  color: #fff;
  font-weight: normal;
}
.table_def td { color: #8c6239;} */

@media screen and ( min-width: 768px ){ /* PC */
  /* .table_def th,
  .table_def td { padding: 10px;} */
}
/*------------------------------------------------
  modal
------------------------------------------------*/

/*------------------------------------------------
  topic_path
------------------------------------------------*/
/* .topic_path {
  display: flex;
  font-size: 1.4rem;
}
.topic_path,
.topic_path a { color: #926b44;}

.topic_path > :not(:last-child) {
  margin-right: 5px;
}
.topic_path > :not(:last-child)::after {
  display: inline-block; content: '＞';
  margin-left: 5px;
} */

/*------------------------------------------------
  context
------------------------------------------------*/
/* .context {
  display: none;
  padding: 10px 20px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgba(0,0,0, .2);
}
.context_item {
  margin: 5px auto;
  padding: 5px 0;
}
.context_item:not(:last-child) {
  border-bottom: 1px solid #ccc;
} */
/*------------------------------------------------
  pagin
------------------------------------------------*/
/* .pagin {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 1.4rem;
}
.pagin li { margin: 5px;}
.pagin a,
.pagin .current {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
}
.pagin a {
  border: 1px solid;
  background: #fff;
  font-weight: bold;
}
.pagin a:hover { text-decoration: none;}
.pagin .current {
  color: #fff;
  background: #ccc;
} */