@charset "UTF-8";

/* ==========================================================

title : 名古屋刀剣博物館 日本刀の豆知識トップページ
scope : 名古屋刀剣博物館 日本刀の豆知識トップページ

memo：

last modify : 2023/01/30 tanaka／WEB2TCI-32950 h1スタイル修正

2020/05/24 TCI五十嵐／WEB2TCI-21491
2020/05/19 TCI五十嵐／WEB2TCI-20695

========================================================== */

/*==================================
  共通
===================================*/
.wrap_all{
  background: url('../image/background.jpg') repeat;
  max-width: 1000px;
  margin: auto;
  width:100%;
}

/*==================================
  メインメニュー
===================================*/

/*==================================
  banner_h1
===================================*/
.banner_h1 .txth1 {
  background-color: transparent;
  font-size: 36px;
}
.txth1_inner > .txth1_inner_title {
  line-height: 1.4;
  padding: 0 1em 0.15em;
}
@media (max-width:767px) {
  .banner_h1 .txth1{
    font-size: 22px;
  }
}

/*==================================
  bg_wrap
===================================*/
.bg_wrap{
  max-width: 780px;
  margin: 30px auto;
}
.h2_icon_pattern{
  background-color: #fff;
  max-width: 904px;
  margin: auto;
  padding: 20px;
  width: 100%;
}
.h2_icon_pattern:not(:last-child){
  margin-bottom: 40px;
}
.h2_icon_pattern__wrapper{
  padding-bottom: 20px;
}
/*==================================
  QAリスト
===================================*/
.qa_list{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 25px 45px 25px 55px;

}
.qa_list li{
  align-items: center;
  display: flex;
  font-size: 18px;
  justify-content: flex-start;
  height: 100%;
  line-height: 1;
  margin-bottom: 30px;
  position: relative;
  text-align: left;
  width: 47%;
  z-index: 10;
}
.qa_list li:last-child,
.qa_list li:nth-last-child(2){
  margin-bottom: 0;
}
.qa_list2 ul li:nth-last-child(2),
.qa_list4 ul li:nth-last-child(2){
  margin-bottom: 30px;
}
.qa_list span{
  align-items: center;
  background: url('../image/bg-list-number.png') no-repeat center;
  color: #fff;
  display: flex;
  height: 40px;
  justify-content: center;
  margin-right: 18px;
  position: relative;
  transform: rotate(45deg);
  width: 40px;
}
.qa_list span.qa_text{
  align-items: center;
  background: none;
  display: block;
  display: flex;
  font-size: 16px;
  justify-content: center;
  margin: 0;
  text-align: center;
  transform: rotate(-45deg);
}
.qa_list li a{
  display: block;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  max-width: 100%;
}
/*==================================
  背景画像設定
===================================*/

.bg_01,
.bg_02,
.bg_03,
.bg_04,
.bg_05{
  position: relative;
}
.bg_01::before,
.bg_01::after,
.bg_02::before,
.bg_02::after,
.bg_03::before,
.bg_03::after,
.bg_04::before,
.bg_04::after,
.bg_05::before,
.bg_05::after{
  content: '';
  display: inline-block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 0;
}
.bg_01::before{
  background: url('../image/bg-qa_list-photo01.png') no-repeat bottom left;
  bottom: -20px;
  left: -20px;
}
.bg_01::after{
  background: url('../image/bg-qa_list-photo02.png') no-repeat right center;
  bottom: -40px;
  right: -20px;
}
.bg_02::before{
  background: url('../image/bg-qa_list-photo03.png') no-repeat bottom left;
  bottom: -20px;
  left: -20px;
}
.bg_02::after{
  background: url('../image/bg-qa_list-photo04.png') no-repeat bottom right;
  bottom: -20px;
  right: -20px;
}
.bg_03::before{
  background: url('../image/bg-qa_list-photo05.png') no-repeat bottom left;
  bottom: -20px;
  left: -20px;
}
.bg_03::after{
  background: url('../image/bg-qa_list-photo06.png') no-repeat center right;
  bottom: -20px;
  right: -20px;
}
.bg_04::before{
  background: url('../image/bg-qa_list-photo07.png') no-repeat bottom left;
  bottom: -20px;
  left: -20px;
}
.bg_04::after{
  background: url('../image/bg-qa_list-photo08.png') no-repeat bottom right;
  bottom: -20px;
  right: -20px;
}
.bg_05::before{
  background: url('../image/bg-qa_list-photo09.png') no-repeat bottom left;
  bottom: -20px;
  left: -20px;
}
.bg_05::after{
  background: url('../image/bg-qa_list-photo10.png') no-repeat bottom right;
  bottom: -20px;
  right: -20px;
}

/*==================================
  レスポンシブ対応
===================================*/
@media screen and (max-width:768px) {
  .bg_wrap{
    margin: 20px auto;
  }
  .bg_wrap p{
    padding: 0 20px;
  }
  .h2_icon_pattern{
    padding: 10px;
  }
  .qa_list li span{
    height: 30px;
    margin-right: 20px;
    width: 30px;
  }
  .qa_list{
    display: block;
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
  }
  .qa_list li{
    width: 100%;
  }
  .qa_list li a{
    max-width: none;
  }
  .qa_list li:nth-last-child(2){
    margin-bottom: 30px;
  }
  /* 背景画像 */
  .bg_01::before,
  .bg_02::before,
  .bg_02::after,
  .bg_03::before,
  .bg_03::after,
  .bg_04::before,
  .bg_04::after,
  .bg_05::before,
  .bg_05::after{
    bottom: -10px;
  }
}