@charset "utf-8";
/* font ------------------------*/
.gf-garamond{ font-family: 'EB Garamond', serif; }
.wf-hannari { font-family: "Hannari"; }

/* base ------------------------*/
body{ background:#FFF; }
#wrapper{ width:100%; position:relative; overflow:hidden; }
.inner{ max-width:1100px; margin:0 auto; }
main{ position:relative; display:block; padding-top:70px;
  -webkit-transition:all .3s; transition:all .3s; }
a:hover{ text-decoration:none; }
.tel a{ text-decoration:none; color:#4175c3; }
.bg_g{ background:#edeff2; }
.fixed{ top:0; left:0; }

::selection { background:#DDD; }
::-moz-selection { background:#DDD; }

/* common ------------------------*/
.title_c{ position:relative; z-index:1; padding-bottom:0.4em; font-size:1.9em; 
  color:#b5c2d4; letter-spacing:0.1em; }
.title_c::before{ position:absolute; z-index:-1; content:""; width:2.8em; height:2.8em;
  top:-0.5em; left:-1.5em; background:url(../img/circle_b.svg) no-repeat 0 0 / 100%; }
.bg_g .title_c::before{ top:0; left:-1em;
  background-image:url(../img/circle.svg); }

.a_link{ position:relative; height:1.6em; padding:0.3em 2em 0.6em 1.8em; line-height:1.0;
  text-decoration:none; color:#FFF !important; background:#9ba0a7; }
.a_link::before{ position:absolute; content:""; width:0; height:0; top:45%; left:0.8em;
  border-style: solid;
  border-width: 2px 0 2px 7px;
  border-color: transparent transparent transparent #FFF; }
.a_link:hover{ background:#8ea4c2; }

.t_box .title_c{ width:60%; }
.t_box .a_link{ margin-top:1em; }

/* header ------------------------*/
#header{ -webkit-transition:all .3s; transition:all .3s; }
#header .logo{ position:absolute; z-index: 3; width:18%; left:50%; top:0.7em; text-align:center;
  -webkit- transform: translateX(-50%); transform: translateX(-50%); }
#header .logo .logo_mark, #header .logo .logo_txt{ display:block; margin:0.6em auto; }
.logo_mark{ height: 33px; }

/* gnav ------------------------*/
#gmenu{ display:none; }
#gnav .main_menu li{ position:relative; }
#gnav .main_menu a{ text-decoration:none; }
.sub_menu li{ width:22px; height:22px; overflow:hidden; margin:0.2em 0.5em; }
.sub_menu img{ display:block; }

/* footer------------------------*/
.copyright { text-align:center; }
.copyright a{ text-decoration:none; }
.copyright a:hover{ color:#6698e8; }
.f-privacy{ position:relative;  z-index:10; letter-spacing:0.08em; }
.f-privacy a{ text-decoration:none; }

/* button */
.button { position:relative; z-index:2; display:inline-block; overflow:hidden; min-width:260px;
  padding:.7em 3em .6em 3em; text-align:center; }
.button.icon:before { content:""; display:inline-block; width:1.2em; height:1.2em; margin:.3em .5em 0 0; 
  vertical-align:top; background:no-repeat center / 100%; }

/* サムネイル */
.news_list{ margin-bottom:2em; border-bottom:1px solid #c0c4ca; }
.news_list p{ margin:0; }
.news_list li{ margin-bottom:2em; }
.news_list li a{ display:block; position:relative; overflow:hidden; z-index:1; 
  margin-bottom:0.5em; padding-top:75%; text-decoration:none; }
.news_list li .pic{ position:absolute; top:50%; left:50%;
  -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); }
.news_list .sub{ font-weight:500; }
.news_list .date{ text-align:right; }
.news_list .category{ display: inline-block; position:absolute; z-index:1; top:0; right:0; min-width:8em;
  text-align:center; color:#FFF; background:#404c5c;
  -webkit-transition:all .3s; transition:all .3s; }
.news_list .category .cat_txt{ opacity:1; -webkit-transition:all .3s; transition:all .3s; }
.news_list .category:hover{ background:#718fb5; -webkit-transition:all .3s; transition:all .3s; }
.news_list .category:hover .cat_txt{ opacity:0; }
.news_list .category:hover::before{ position:absolute; content:"read more"; top:0; right:0;
  width:100%; height:100%; }

/* ABOUT */
#about{ position:relative; z-index:5; }
#about .title_c{ margin-bottom:1em; }
#about .sub{ margin-bottom:1em; font-size:1.15em; font-weight:500; }
#about .statement{ margin-bottom:4em; }
#about .txt_jp{ font-size:0.95em; }
.bio_list{ margin-bottom:3em; }
.bio_list li{ display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;
  margin-bottom:1em; }
.bio_list li span{ display:block; width:5.5em; }
.bio_list li .txt{ -webkit-flex:1; flex:1; margin:0; }
.bio_list li .txt p{ margin:0; font-size:0.95em; }
.exhibition .news_list{ margin-bottom:0; border:0; }
#about .txt_en{ margin-top:2.5em; }


/* ================================================================
  レスポンシブ
=================================================================== */

/* 960以上(PC) */
@media screen and (min-width: 960px) {

  main{ padding-top:180px; }

  /* header ------------------------*/
  #header{ position:fixed; z-index:5; width:100%; padding:1em 2em; background:#FFF; }
  #header.is-fixed{ z-index:9999; }
  #header .logo .logo_mark, #header .logo .logo_txt{ 
    -webkit-transition:all .3s; transition:all .3s; }
  #header .logo .logo_txt{ opacity: 1; visibility: visible; 
    -webkit-transition:opacity .1s; transition: opacity 1s }
  #header .logo .logo_txt img{ width:100%; -webkit-transition:all .3s; transition:all .3s; }
  #header.is-fixed .logo .logo_mark{ margin-top:11px; -webkit-transition:all .3s; transition:all .3s; }
  #header.is-fixed .logo .logo_txt{ line-height: 1; 
    -webkit-transition:opacity .1s; transition: opacity 1s, visibility 1s;
    opacity:0; visibility: hidden; }

  /* gnav ------------------------*/
  #gnav a{ display:block; height:100%; text-decoration:none;
  color:#585858; letter-spacing:0.1em; }
  .main_menu{ float:left; }
  .main_menu a{ padding:0.5em 0.8em; }
  #gnav .main_menu a:hover{ color:#6698e8; }
  #gnav .main_menu ul{ display: none; position: absolute; z-index:100; top: 40px; left: 0; 
  width: 200px; text-align:left; overflow: hidden; background: rgba(255,255,255,0.6); }
  #gnav .main_menu ul a{ padding: 0.2em 0.8em; }
  .sub_menu{ float:right; }
  .sub_menu a:hover img{ margin:-22px 0 0 0; }

}

/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

  /* about */
  .profile_txt{ -webkit-box-flex:1; flex:1; }
  .pic_profile{ width:32%; margin-left:2.5em; }

  /* footer------------------------*/
  #footer { position:fixed; z-index:99; top:50%; left:-6em; }
  .copyright { position: absolute; top: 50%;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  margin:0; font-size:0.95em; font-weight:400;
  white-space: nowrap; letter-spacing: 0.07em; color:#585858;
  -webkit-transform: rotate(90deg); transform: rotate(90deg); line-height: 1; }

}

/*1190px 以下  -1190px */
@media screen and (max-width: 1190px) {
  .inner, .narrow { margin: 0 100px; }
  .title_c{ font-size: 1.6em; }
  .a_link{ padding:0.2em 1.5em 0.5em; }

  /* footer------------------------*/
  #footer { left:-8em; }
}

/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 959px) {
  body { font-size:15px; }
  .inner, .narrow { margin: 0 50px; }

  /* gnav */
  #gmenu{ display:block; }
  .c_menu{ width:70px; height:70px; position:fixed; top:15px; right:15px; padding:15px 0; 
    font-size:1.05em; font-weight:400;
    border-radius:50%; border:2px solid #638bca;
    text-align:center; text-decoration:none; color:#638bca; background:#FFF;
    cursor: pointer; z-index: 600; transition:all .3s; }
  .c_menu::before{ position:absolute; content:""; width:6px; height:6px; top:45px; left:50%; margin-left:-4px;
    border-top: 3px solid #638bca; border-right: 3px solid #638bca;
    -webkit-transform: rotate(135deg); transform: rotate(135deg); }
  .c_menu span{ display:block; letter-spacing:0.08em }
  .c_menu span:after{ content: attr(data-txt-menu); }
  .c_menu:hover{ color:#FFF; background:#638bca; }
  .c_menu:hover::before{ border-color:#FFF; }
  .open .c_menu span:after { content: attr(data-txt-close); }
  /* 開閉用ボタンがクリックされた時のスタイル */
  .open .g_nav { -webkit-transition: all .5s; transition: all .5s;
      visibility: visible; opacity: 1; }
  .open .c_menu::before{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* g_nav　モーダルメニュー　 */
  .g_nav { display: flex; flex-direction: column; justify-content: center; align-items: center;
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background:rgba(255,255,255,0.95); -webkit-transition: all .5s; transition: all .5s;
      visibility: hidden; opacity: 0; z-index:500; }
  #gnav{ width:100%; position: fixed; }
  .main_menu{ width:40%; margin:0 auto 1.5em; }
  .main_menu li{ width:100%; }
  .main_menu li a{ display: block; padding:0.5em; text-align:center; font-size:1.2em; }
  .sub_menu li{ width:28px; height:28px; margin:1em 0.6em; }
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  body { font-size:14px; }
  .wide_inner,
  .inner, .narrow { margin: 0 20px; }
  #header .logo{ width: auto; }

  /* gnav------------------------*/
  .c_menu{ width:56px; height:56px; padding: 10px 0; }
  .c_menu::before{ top: 35px; }

  .pic_profile{ width:80%; margin:0 auto 3em; }

}