@charset "UTF-8";/* CSS変数の宣言 */
/* サブページで、テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */
html#sub-page{
  --accentColor-dark: #4D8433;
  --accentColor-darkRGB: 77, 132, 51;
  --SubColor: #702621;
  --SubColorRGB: 112, 38, 33; /*#702621のRGB*/
 }

main > h2{
  position:relative;
  padding-bottom:2rem;
}

.br::after{
  content:"\A";
  white-space:pre;
 }

span.eng {
  position:absolute;
  text-align: center;
  font-size:38%;
  top:7rem;
  left: 50%;
  transform: translate(-50%, -50%);
  width:auto;
  line-height:1.4;
/*  height:1.2rem;*/
  height:1.5rem;
  padding:1px 2.5em;
  letter-spacing :0.2rem;
  background:var( --accentColor-dark);
  color:#fff;
}

@media (max-width:575px) {
span.eng{
  font-size:30%;
  top:7rem;
  left: 50%;
  transform: translate(-50%, -50%);
  width:auto;
  line-height:1.0;
  letter-spacing :0.2rem;
}
}

[class^="list-design"], .container {
  background: #fff;
}

.container#intro {
  background: var(--backgroundColor);
}

.container#intro .intro-txt{
  width:100%;
  font-size:1.0rem;
  line-height:2;
  padding:0 2rem;
  padding-bottom:2.0rem;
  display: grid;
  place-content: center;
  }

.mb-0{
  padding-bottom:0 !important;
}

.container#intro .a-block{
  width:100%;
  font-size:1.0rem;
  line-height:2;
  margin-top:0;
  padding:0 2rem;
  padding-bottom:2.0rem;
  text-align: left;
}

@media (max-width:768px) {
  .container#intro .intro-txt,.container#intro .a-block{
    width:100%;
    padding:0;
  }
}

@media (max-width:575px) {
  #intro{
    padding:0;
    margin-top:3em;
  }
}

/*wide1280を解除*/
.container-open {
	width:100%;
	max-width:100%;
}

section.base-wrap {
  /*padding: 1rem 0;*/
  padding:4rem 1rem;
  background: #fff;
  border-radius: 12px;
}

section.base-wrap.br-top {
  border-radius: 12px 12px 0 0;
}

section.base-wrap.br-bottom {
  border-radius:  0 0 12px 12px;
}

h3{
  border-bottom:solid 3px var(--accentColor);
}

/*h3のないsectionとの余白を0にする*/
  .mbtm-zero{
    margin-bottom:0 !important;
 }

 /*h3のないsectionは上下余白を0にする*/
 .mp-zero{
    margin-top:0 !important;
    padding-top: 0!important;
 }

  /*リンクボタン*/
.multiple-link a.arrow{
  background:var(--accentColor-dark);
  border-radius: 12px;
}

  /*表記を中央寄せにし、幅を調整*/
.list-design3.multiple-link a.arrow{
  max-width:80%;
  margin-left:1.0rem;
}

.list-design4.multiple-link a.arrow{
  text-align: center;
  max-width:80%;
  margin-left:auto;
  margin-right:auto;
}


.list-design4 .contents-wrap {
  justify-content: center;
  gap:2rem;
}

.list-design4.column2 .item{
  overflow: hidden;
  width: calc(100% / 2 - 2rem);
}

.list-design4.column3 .item{
  overflow: hidden;
  width: calc(100% / 3 - 3rem);
}

.list-design4.inner-left .item h4{/* タイトルの配置：左から中央へ変更 */
  text-align: center;
  border-bottom:solid 1px var(--accentColor);
}

.list-design3.inner-left .item h4{
  border-bottom:solid 1px var(--accentColor);  
}



/*文字数の多いh4のフォントサイズ調整*/
.list-design4.inner-left .font-h4small h4{
  font-size:1.1rem;
  line-height:2.2rem;
  padding: 1rem 0rem;
}

/*文字数の多いリンクボタンのフォントサイズ調整*/
.list-design4.multiple-link a.atext-sm{
  font-size:0.8rem;
}

/*石器など画像が切れないようにする*/
.list-design4 .item img.contain{
  object-fit: contain;
  object-position:50% 0%;
  width: 100%;
 height: 100%;
 background: #999999;
 /* min-height: 240px;
  max-height: 320px;
  transition: transform .6s ease;*/
}

  /* @media (max-width:999px) {*/
  @media (max-width:1024px) {
    .list-design4 > .contents-wrap{
          gap:1rem;
        }
    .list-design4.column3 .item{
      overflow: hidden;
      width: calc(100% / 2 - 2rem);
    }

  }

@media (min-width: 768px) {
.list-design4.column2 .item{
  /*width: calc(100% / 2 - 1rem);*/
  overflow: hidden;
  width: calc(100% / 2 - 2rem);
}
}

  @media (max-width:768px) {
    .list-design4.column2 > .contents-wrap,
    .list-design4.column3 > .contents-wrap{
      display: block;
    }
    .list-design4.column2 .item,
    .list-design4.column3 .item{
      width: 90%;
      margin-left:auto;
      margin-right: auto;
    }
    .list-design3.column1 > .contents-wrap{
      display: block;
    }
    .list-design3.column1 .item{
      margin: 0.5rem;
      display: block;
      width: 90%;
      margin-left:auto;
      margin-right: auto;
      padding:0;
    }

    .list-design3.column1 .item >div{
      overflow: hidden;
      background: #999999;
    }
    .list-design3 .item img.contain{
      display:block;
      object-fit: contain;
      object-position:50% 0%;
      width: 100%;
      height: 100%;
      margin:0 auto;
    }
    .list-design3.angle-circle .item img{
      border-radius: 12px 12px 0 0;
    }
    .list-design3.inner-left .item h4{/* タイトルの配置：左から中央へ変更 */
    text-align: center;
  }

.list-design3.multiple-link a.arrow{
    text-align: center;
      margin-left:auto;
  margin-right:auto;
  }  
}

  /* @media (max-width:575px) {*/
    @media (max-width:630px) {
    .list-design4.column2 > .contents-wrap,
    .list-design4.column3 > .contents-wrap,
    .list-design4.column4 > .contents-wrap{
      display: block;
    }
    .list-design4.column2 .item,
    .list-design4.column3 .item,
    .list-design4.column4 .item{
      width: 90%;
    }
  }
/*.list-design4 .item > h4:hover{
  background:var(--accentColor-dark);
}*/

/*スマートフォンでの左右padding調整*/
@media (max-width:575px) {
  #intro > .intro-container{
  padding: 0 1rem!important;
}
[class^="list-design"]{
  padding: 0 !important;
}
     [class^="list-design1"].column3 .item,
     [class^="list-design1"].column4 .item,
     [class^="list-design1"].column5 .item{
      width: 80%;
      margin:1rem auto;
    }
    .list-design5.column3 li,
    .list-design5.column4 li,
    .list-design5.column5 li,
    .list-design5.column-auto > .contents-wrap{
      margin-left: auto;
      margin-right: auto;
    }
  }