@charset "UTF-8"
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*各ブロックの見出し*/

h1{
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color:  #334763;
}

h2,h3,h4,h5{
font-family: "Roboto", sans-serif;
font-weight: 700;
color:  #334763;
}

p,a{
font-family: "Roboto", sans-serif;
color:  #334763;
}

a:visited {
    color: #334763;
}

.title{
    font-size: 2rem;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color:  #334763;
  word-break: break-all;
  white-space: nowrap;
}

/*タイトルと検索バー*/
.hero-container{
    max-width: 3240px;
    margin: -4rem calc(50% - 50vw) 0rem !important; /*親要素をはみ出して横幅いっぱいに伸びるように*/
    width: 100vw;
}

/*検索バーのボタンを真横に*/
#search-form{
   display: flex;
}

#search-form input{
    height: 100%;
}
#search-form button{
    height: 100%;
}

.main-title h1{
    font-family: "Roboto", sans-serif;
    /*text-shadow: 1px 1px 2px #334763, 0 0 1em #334763, 0 0 0.2em #334763;*/
    color:  #F4F6F5;
}
#title-subtext{
    font-family: "Roboto' sans-serif;
    padding-left:5rem;
    color:  #F4F6F5;
}

/*ヘッダー*/
.main-header {
    background-color: #41BEA8;
}
.main-header__site-title a {
    font-family: "Roboto'" sans-serif;
    color:  #F4F6F5;
    word-break: keep-all;
}
.main-header__site-title a:visited {
    font-family: "Roboto", sans-serif;
    color:  #F4F6F5;
}

/*ナビゲーション*/
.main-navigation .navigation>li>a {
    color:#F4F6F5;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding-top: .3rem;
    padding-bottom: .3rem;
    margin: 30px 15px;
    position: relative;
}

/*メインコンテンツ*/
body{
background-color: #fefdf9;
}

/*フッター*/
.main-footer__top{
background-color: #41BEA8;
}
.main-footer__col3 a{
color: #F4F6F5;
}
.main-footer__col3 a:visited{
color: #F4F6F5;
}

.footer_site_info{
    
}

/* リストコンテナの要素*/
.list-links li {
    display:inline-block;  /* li要素をブロックにし、横並びに */
    margin-right: 20px;
    text-decoration: none;
     background-color: #FFFFFF;
     border-radius: 5px; /* 角丸の半径 */
     padding: 10px;/* 文字周りの余白 */
}

/*■■検索下メインメニュー関係■■*/

.main-menu{
  margin:0px;
}

/*検索下ボタン*/
.linkbtn{
    text-decoration: none;
    font-size:20px;
    font-weight: 700;
    color:#444444;
    padding:0px 10px;
}

/*現在選択されている検索下ボタン*/
.linkbtn__now{
    text-decoration: none;
    font-size:20px;
    color:#444444;
    padding:15px 10px;
}

/*newのアイコン*/
#linkbtn-new{
    display: inline-block;
    white-space: nowrap;/*改行しないようにする*/
}
#linkbtn-new::before{
  content: '\f015';  /*fontawsomeアイコンのユニコード*/
  font: var(--fa-font-solid); /* fontawsome使う */
  color: #41BEA8;
  padding:15px 5px;
}

/*galleryのアイコン*/
#linkbtn-gallary{
    display: inline-block;
    white-space: nowrap;/*改行しないようにする*/
}
#linkbtn-gallary::before{
  content: '\f87c';  /*fontawsomeアイコンのユニコード*/
  font: var(--fa-font-solid); /* fontawsome使う */
  color: #41BEA8;
  padding:15px 5px;
}

/*collectionsのアイコン*/
#linkbtn-collections{
    display: inline-block;
    white-space: nowrap;/*改行しないようにする*/
}
#linkbtn-collections::before{
  content: '\f468';  /*fontawsomeアイコンのユニコード*/
  font: var(--fa-font-solid); /* fontawsome使う */
  color: #41BEA8;
  padding:15px 5px;
}

/*typeのアイコン*/
#linkbtn-type{
    display: inline-block;
    white-space: nowrap;/*改行しないようにする*/
}

#linkbtn-type::before{
  content: '\f86d';  /*fontawsomeアイコンのユニコード*/
  font: var(--fa-font-solid); /* fontawsome使う */
  color: #41BEA8;
}

/*eraのアイコン*/
#linkbtn-era{
    display: inline-block;
    white-space: nowrap;/*改行しないようにする*/
}

#linkbtn-era::before{
  content: '\f017';  /*fontawsomeアイコンのユニコード*/
  font: var(--fa-font-solid); /* fontawsome使う */
  color: #41BEA8;
}

/*locationのアイコン*/
#linkbtn-location{
    display: inline-block;
    white-space: nowrap;/*改行しないようにする*/
}
#linkbtn-location::before{
  content: '\f5a0';  /*fontawsomeアイコンのユニコード*/
  font: var(--fa-font-solid); /* fontawsome使う */
  color: #41BEA8;
  padding:15px 5px;
}

/*networkのアイコン*/
#linkbtn-network{
    display: inline-block;
    white-space: nowrap;/*改行しないようにする*/
}
#linkbtn-network::before{
  content: '\e4e2';  /*fontawsomeアイコンのユニコード*/
  font: var(--fa-font-solid); /* fontawsome使う */
  color: #41BEA8;
  padding:15px 5px;
}
/*■■検索下メインメニュー関係ここまで■■*/

/*アイテムページ*/
.regions-container {
background-color: #F2F1EB;
}

/*■■追従メニュー関係■■*/
.sticky {
  position: sticky;
  top: 230px;
  border-radius: 10px;
  z-index: 10;
  height: fit-content;
  background-color:#EDB358;
}

.sticky a{
 color:#F4F5F6;
}

/*追従メニュー開閉式*/

/* メニューバーの装飾 */
ul.ddmenu {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
}

/* 追従メニュー項目の装飾 */
ul.ddmenu li {
   width: 125px;          /* メニュー項目の横幅(125px) */
   display: inline-block; /* 横並びに配置する */
   list-style-type: none; /* リストの先頭記号を消す */
   position: relative;    /* サブメニュー表示の基準位置にする */
}
ul.ddmenu a {
   background-color: #5C7C64; /* メニュー項目の背景色 */
   line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* 項目内全域をリンク可能にする */
}
ul.ddmenu a:hover {
   background-color: #41BEA8; /* メニュー項目にマウスが載ったときの背景色*/
   color: #EDE8E2;            /* メニュー項目にマウスが載ったときの文字色 */
}


/* サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
ul.ddmenu li:hover ul {
   display: block;      /* マウスポインタが載っている項目の内部にあるリストを表示する */
   position: absolute;  /* 絶対配置にする */
   top:0;
   right: 0;             /* サブメニューを親項目の左側に表示 */
   transform: translateX(100%);
}

/* サブメニューの装飾 */
ul.ddmenu ul {
   margin: 0px;         /* サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* サブメニュー内側の余白(ゼロ) */
   display: none;       /* 標準では非表示にする */
   position: absolute;  /* 絶対配置にする */
}

/* サブメニュー項目の装飾 */
ul.ddmenu ul li {
   width: 135px;               /* サブメニュー1項目の横幅(135px) */
   border-top: 1px solid #EDE8E2; /* 項目上側の枠線 */
}

ul.ddmenu ul li a {
   line-height: 35px;     /* サブメニュー1項目の高さ(35px) */
   text-align: left;      /* 文字列の配置(左寄せ) */
   padding-left: 5px;     /* 文字列前方の余白(5px) */
   font-weight: normal;   /* 太字にはしない */
}
ul.ddmenu ul li a:hover {
   background-color: #ffff80; /* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
   color: #005500;            /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
}

/*アンカーがリンク後にヘッダーに被らないようにする*/
.anchor{
    padding-top: 1px;
    margin-top:-200px;
      z-index:  -10;
}
/*■■追従メニュー関係ここまで■■*/

/*■■カテゴリーカード用■■*/
.catego {
  background-color: #FEFDF9;
}

.c-container {
  display:flex;
  scroll-snap-type: x;
  overflow-x: scroll;
  padding:20px;
  margin:0px;
}

.c-container::-webkit-scrollbar{
  width: 5px;
  height: 8px;
  background-color: #EDE8E2;
}

.c-container::-webkit-scrollbar-thumb {
  background: #334763;
}

.card {
  display:flex;
  flex-shrink: 0;
  flex-direction:column;
  height: 150px;
  width: 240px;
  background-color: #F2F1EB;
  border-radius: 10px;
  box-shadow: -1rem 0 1rem #666666;
/*   margin-left: -50px; */
  transition: 0.4s ease-out;
  position: relative;
  left: 0px;
  filter: brightness(0.90);
}

/*要素全体をリンクに（自動整形のせいでaタグによるdivタグ囲みが使えないため）*/
.card a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity:0;
}

#c-kouko{
  background-image:url("/themes/openOkurairi/asset/img/cardkouko.png");
}

.card:not(:first-child) {
    margin-left: 0px;
}

.card:hover {
  filter: brightness(1.05); /* 明るくする */
}

.card:hover ~ .card {
filter: brightness(0.90);
}

.c-title {
  height:40px;
  padding:5px 0 5px 1em;
  background-color: #EDB358;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size:20px;
  color: #FEFDF9;
  font-weight: 700;
}

.c-image{
  height:110px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #FEFDF9;
}

#c-nature{
  background-image: url('/themes/openOkurairi/asset/img/comingsoon.png');
  background-size: cover;
  background-position: center;
}

#c-archeology{
  background-image: url('/themes/openOkurairi/asset/img/cardarcheology.png');
  background-size: cover;
  background-position: center;
}

#c-history{
  background-image: url('/themes/openOkurairi/asset/img/comingsoon.png');
  background-size: cover;
  background-position: center;
}

#c-life{
  background-image: url('/themes/openOkurairi/asset/img/cardlife.png');
  background-size: cover;
  background-position: center;
}

#c-industry{
  background-image: url('/themes/openOkurairi/asset/img/comingsoon.png');
  background-size: cover;
  background-position: center;
}

#c-art{
  background-image: url('/themes/openOkurairi/asset/img/cardart.png');
  background-size: cover;
  background-position: center;
}

#c-publication{
  background-image: url('/themes/openOkurairi/asset/img/cardpublication.png');
  background-size: cover;
  background-position: center;
}

/*■■カテゴリーカードここまで■■*/