@charset "UTF-8";

/* 共通部分 
------------------------------- */
html {
   font-size: 100%   /*ユーザが指定した文字サイズを正しく反映*/
}
body {
   font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
   line-height: 1.7;
   coler: #432;
}
a {
   text-decoration: none;   /*傍線の設定*/
}
img {
   max-width: 100%
}

/* HEADER 
------------------------------- */
.main-nav {
   display: flex;   /*ナビゲーションリストを横並び*/
   font-size: 1.1rem;
   text-transform: uppercase;
   margin-top: 34px;
   list-style: none;
}
.main-nav li {
   margin-left: 36px;
}
.main-nav a {
   color: #432
}
.main-nav a:hover {
   color: #0bd;
}
.page-header {
   display: flex;   /*ロゴとナビゲーションを横並び*/
   justify-content: space-between;   /*両端に設置*/
}
.wrapper {
   max-width: 1100px;
   margin: 0 auto;   /*中央に配置する指定*/
   padding: 0 4%;   /*スマートフォン向け余白の指定*/
}

/* HOME 
------------------------------- */
.home-content {
   text-align: center;
}

/* 見出し */
.page-title {
   font-size: 3rem;
   font-family: 'philosopher', serif;
   text-transform: uppercase;
   font-weight: normal;
   text-align: center;
   margin-top: 8%;
}

/* 大きな背景画像 */
.big-bg {
   background-size: cover;  /*縦横比率を保持したまま画面最大表示*/
   background-position: center top;
   background-image: url(../images/main-bg.jpg);
   height: 270px;
   margin-bottom: 40px;
}

#home .page-title {
   text-transform: none;
}

/* NEWS 
------------------------------- */
.news-contents {
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
}

/* INFORMATION 
------------------------------- */
.info-contents {
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
}

/* HISTORY 
------------------------------- */
.history-contents {
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
}

/* ACCESS 
------------------------------- */
.access-contents {
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
}
.access-info p {
   padding:12px 10px;
}
.address-info {
   position: relative;
   padding:12px 10px;
   margin-top: 30px;
   margin-bottom: 10px;
   }

/* CHERISH
------------------------------- */
.cherish-contents {
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
}

/* 記事部分 
------------------------------- */
article {
   width: 74%
}

.post-info {
}

.post-title {
   position: relative;
   margin-top: 30px;
   margin-bottom: 10px;
   font-family: "Yu Mincho", "YuMincho", serif;
   font-size: 1.5rem;
   border-bottom: 1.5px #0bd solid;
   font-weight: normal;
}

.post-sub-title {
   margin: 20px 50% 20px 0px;
   position: relative;
   background: #fff0d9;
   box-shadow: 0px 0px 0px 5px #fff0d9;
   border: dashed 2px white;
   padding: 0.2em 0.5em;
   color: #454545;
}

.post-sub-title:after {
   position: absolute;
   content: '';
   left: -7px;
   top: -7px;
   border-width: 0 0 15px 15px;
   border-style: solid;
   border-color: #fff0d9 #fff #fff0d9;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.post-cat {
   margin-left: 120px;
}
article img {
   margin-bottom: 20px;
}
article p {
   margin-bottom: 0.75rem;
}


/* サイドバー 
------------------------------- */
aside {
   width: 18%
}
aside p {
   padding: 12px 10px;
}
.sub-title {
   font-size: 1.375rem;
   padding: 0 8px 8px;
   border-bottom: 2px #0bd solid;
   font-weight: normal;
}
.sub-menu {
   margin-bottom: 60px;
   list-style: none;
}
.sub-menu li {
   border-bottom: 1px #ddd solid;
}
.sub-menu a {
   color: #432;
   padding: 10px;
   display: block;
}
.sub-menu a:hover {
   color: #0bd;
}

   
/* フッター 
------------------------------- */
footer {
   background: #432;
   text-align: center;
   padding: 26px 0;
}
footer p {
   color: #fff;
   font-size: 0.875rem;
}


/*メイン画像下に余白をつける*/
.gallery1,.gallery2 {
    margin:0 0 5px 0;
}

.gallery1 li,.gallery2 li{
    list-style:none;
}


/*画像の横幅を100%にしてレスポンシブ化*/
img{
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*選択するサムネイル画像の設定*/

.choice-btn1 li,.choice-btn2 li{
    cursor: pointer;
    outline: none;
    height: 30%;
    width: auto%;!important;
    list-style:none;
    background:#FFF;
}

.choice-btn1 li,.choice-btn2 li img{
    opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn1 li.slick-current,.choice-btn2 li.slick-current img{
    opacity: 1;/*選択されているものは透過しない*/
}

/* モバイル版
------------------------------- */
@media (max-width: 800px) {
   .page-title {
      font-size: 2.5rem;
      margin-top: 20%;
   }
   
   /* HEADER */
   .main-nav {
      font-size: 1rem;
      margin-top: 10px;
   }
   .main-nav li {
      margin: 0 20px;
   }
   
   /* h1 */
   .news-contents {
      flex-direction: column;
   }
   .access-contents {
      flex-direction: column;
   }
   .info-contents {
      flex-direction: column;
   }
   .history-contents {
      flex-direction: column;
   }
   .cherish-contents {
      flex-direction: column;
   }
   article,
   aside {
      width: 100%;
   }
   .page-title {
      margin-top: 30px;
   }
   aside {
      margin-top: 60px;
   }
   .post-info {
      margin-bottom: 30px;
   }
   .post-title {
      font-size:1.375rem;
   }
   
}


