@charset "UTF-8";
/* 
CSS Document 
ページ共通CSS
ヘッダ, フッタ, サイド
*/

:root {
  --root-font-size: 26.5px;
  --text-color: #222222;
  --color-white: #fcfcfc;
  --color-orange: #E88B00;
  --color-red: #D51919;
  --color-darkgray: #404040;
}

@media(max-width:1920px) {
  :root {
    --root-font-size: 1.375vw;
  }
}

html {
  font-size:var(--root-font-size);
}

body {
	/*ゴシック*/
  font-family: "Noto Sans JP", sans-serif;
	color:var(--text-color);
	font-size:1rem;
  font-weight: 600;
	line-height:1.5;
	letter-spacing: 0;
	-webkit-text-size-adjust: 100%;
  background: #F4F4F4;
	}

@media(max-width:560px) {
  :root {
    --root-font-size: 3.58vw;
  }
}

/*recaptcha*/
.grecaptcha-badge {display:none;}

/*english font*/
/*
600 semibold
750 bold
800 extra bold
900 black
*/
.en {
  font-family: "Montserrat", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", "游ゴシック体", "Yu Gothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.en.fw-<uniquifier> {
  font-weight: <weight>;
}

/*デバイス 表示切り替え*/
@media(min-width:561px) {
  .hide_pc {display:none !important;}
}
@media(max-width:560px) {
  .hide_sp {display:none !important;}
}

/*テキスト選択*/
/*::selection {
  color:#6c9bd1;
  background:#f19601;
}*/

/*テキストカラー*/
.col_orange {color:var(--color-orange);}
.col_red {color:var(--color-red);}
	
/*テキストリンク*/
a {
  color: inherit;
  color:#2459EB;
  text-decoration: underline;
	}
a[href^='#'] {
	-webkit-touch-callout: none;
}
	
a:hover {
	}

/*ボタン*/
.btn {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", "游ゴシック体", "Yu Gothic", sans-serif;
  
  display:flex;
  justify-content: center;
  align-items:center;
  width:fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  background:var(--color-darkgray);
  color:#fff;
  padding:1em 5em;
  text-decoration: none;
  text-align: center;
}
.btn:not(.fs_base) {
  font-size: 0.8em;
}

.btn.mid {
  font-size: 0.9rem;
  padding:1.3rem 2rem;
  width:17.5rem;
}

.btn.full {
  width:auto;
  font-size: 0.9rem;
  padding:2.2em 0;
}

/*hover オブジェクト*/
.hover_caption {
  position:relative;
  font-feature-settings: "palt";
}
.hover_caption > figcaption {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.6);
  opacity:0;
  transition:opacity 0.3s linear;
  color:#fff;
}

@media(max-width:560px) {
  .btn.full_sp, .btn.full {
    width:auto;
    font-size:4vw;
    padding:1.2em 0;
    margin-top:3em;
  }
}

.hover_caption.icon > figcaption::after {
  content:"";
  position: absolute;
  top:0.8em;
  left:0.8em;
  background-repeat: no-repeat;
  background-size:auto 100%;
  width: 100%;
  height: 3rem;
}
.hover_caption.icon.nyusen > figcaption::after {background-image:url(../images/icon_nyusen.svg);}
.hover_caption.icon.nyusho > figcaption::after {background-image:url(../images/icon_nyusho.svg);}
.hover_caption.icon.yushu > figcaption::after {background-image:url(../images/icon_yushu.svg);}
.hover_caption.icon.saiyushu > figcaption::after {background-image:url(../images/icon_saiyushu.svg);}

.hover_caption > figcaption .inner {
  position: absolute;
  bottom:0;
  width:100%;
  padding:0 0.2rem 0.3rem;
  text-align: right;
  letter-spacing: 0em;
}
.hover_caption > figcaption .inner .tit {
  font-size:2em;
  line-height: 1.2;
  padding:0 0.2rem;
}
.hover_caption > figcaption .inner .sub {
  font-size:0.76rem;
  margin-top:0.3em;
}

@media(min-width:561px) {
 .hover_caption:hover  > figcaption {opacity:1;} 
}



/*コンテナ*/
#wrapper {
  overflow: hidden;
}

#container {
  padding-top:3.6rem;
  /*! background:rgba(219,219,221,1); */
}

@media(max-width:560px) {
  #container {
    padding-top:15vw;
  }
}

.constbox {
  /*max-width:calc(1600px + 8vw);*/
  max-width:1600px;
  margin-left:auto;
  margin-right:auto;
}

/*header*/
header {
  padding:0 1.2rem;
  font-size: 0.8em;
  background: #f4f4f4;
  position: fixed;
  top:0;
  width:100%;
  z-index: 1000;
}

header .inner {
  gap: 3.6rem;
}
header .inner .logo {
  max-width:90px;
  width:5.6%;
}
header .inner .menu ul.flex {
  gap: 2.1rem;
}
header .inner .menu ul.flex a {
  text-decoration: none;
  color:inherit;
}

header nav.flex {
  width:100%;
  justify-content: space-between;
}
header nav.flex > div.menu > ul > li {
  padding:1.5em 0;
}
header nav.flex > div.menu  li.dropdown {
  position: relative;
}
header nav.flex > div.menu  li.dropdown .sub {
  position: absolute;
  left:-2em;
  margin-top:1em;
  z-index: 2;
  width:fit-content;
  background:#222222;
  padding:3em;
  color:#fff;
  border-radius: 6px;
  display: none;
}
header nav.flex > div.menu  li.dropdown::after {
  content:"";
  background:#222222;
  width:2em;
  aspect-ratio:1 / 1;
  position: absolute;
  top:3.5em;
  left:50%;
  border-radius: 6px;
  transform:translateX(-50%) scaleX(0.7) rotate(45deg);
  display: none;
}
header nav.flex > div.menu  li.dropdown .sub li a {
  white-space: nowrap;
  font-size: 0.9rem;
}
header nav.flex > div.menu  li.dropdown .sub li:not(:last-child) {
  margin-bottom:2em;
}

header nav.flex li.no-public-page > a {
  pointer-events:none;
}
header nav.flex ul.sub li.no-public-page {display:none;}


@media(min-width:561px) {
  header nav.flex > div.menu  li.dropdown:hover::after,
  header nav.flex > div.menu  li.dropdown:hover .sub {
    display:block;
  }
}

header nav.flex .sns .flex {
  gap:1rem;
}
header nav.flex .sns .flex > li {
  width:2.7em;
}
header nav.flex .typo {
  display: none;
}

@media(max-width:560px) {
  
  header {
    padding:3vw 4vw 3vw;
    font-size:1.7rem;
  }
  header .inner .logo {
    width:11vw;
  }
  
  header nav.flex {
    background:#3C3C40 no-repeat center top;
    background-size:100% auto;
    width:100vw;
    height:calc(100dvh - 14vw);
    position: absolute;
    top:14vw;
    left:0;
    color:#fff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding:0 0 5vw;
    transform:translateX(100%);
    transition:transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    overflow: auto;
  }
  
  
  
  /*スマホアコーディオンのため有効化*/
  header nav.flex li.no-public-page > a {
    pointer-events:auto;
  }
  
  header .inner .menu,
  header .inner .sns {
    padding-left:10vw;
    padding-right:10vw;
  }
  
  header .inner .menu {
    padding-top:14vw;
  }
  header .inner .menu ul.flex {
    flex-direction: column;
    align-items: flex-start;
    gap:2.3rem;
  }
  header .inner .menu ul.flex > li {
    padding:0;
  }
  header nav.flex > div.menu li.dropdown > a {
    display:flex;
    align-items: center;
    gap:0.5em;
  }
  header nav.flex > div.menu li.dropdown > a::after {
    content:"";
    display:block;
    background:url(../images/icon_arrow.svg) no-repeat center center;
    background-size:contain;
    width:0.9em;
    aspect-ratio: 1 / 1;
    transform:rotate(90deg);
  }
  
  header nav.flex > div.menu li.dropdown > a.open::after {
    transform:rotate(270deg);
  }
  
  header nav.flex > div.menu li.dropdown .sub {
    position: static;
    background:none;
    padding: 0 0 0 1.4rem;
    margin-top: 0.5em;
  }
  header nav.flex > div.menu li.dropdown .sub li {
    line-height: 1;
  }
  header nav.flex > div.menu li.dropdown .sub li a {
    font-size:1.05rem;
  }
  header nav.flex > div.menu li.dropdown .sub li:nth-child(n+2) {
    margin-top:1.3rem;
  }
  
  header nav.flex .sns {
    margin-top:2.5rem;
  }
  header nav.flex .sns .flex {
    gap:1.4rem;
  }
  header nav.flex .sns .flex > li {
    border:3px solid #fff;
    width:21vw;
  }
  header nav.flex .sns .flex > li  a {display:block;}
  header nav.flex .sns .flex > li a img {width:100%;}
  header nav.flex .typo {
    background: no-repeat center top;
    background-size:100% auto;
    display: block;
    width:fit-content;
    margin:auto auto 0;
    padding:44vw 0 0;
    font-size:11.5vw;
    line-height: 1;
  }
  
  .is_menuopen header nav.flex {
    background-image: url("../images/bg_menu_01.png");
  }
  
  .is_menuopen header nav.flex .typo {
    background-image: url("../images/bg_menu_02.png");
  }
  
  .is_menuopen header nav.flex {
    transform:translateX(0);
  }
}

/*ハンバーガー*/
#menu_button {
  display:none;
}

@media(max-width:560px) {
  #menu_button {
    display:block;
    position: relative;
    aspect-ratio:34 / 20;
    width:8.7vw;
    margin-left: auto;
  }
  #menu_button span,
  #menu_button::after,
  #menu_button::before {
    display:block;
    position: absolute;
    width:100%;
    height:2px;
    background: var(--text-color);
    transform:translateY(-50%);
  }
  #menu_button::after,
  #menu_button::before {
    content:"";
    transition:transform 0.3s cubic-bezier(0.76, 0, 0.24, 1),
      top 0.1s cubic-bezier(0.76, 0, 0.24, 1);
  }
  #menu_button span {
    top:50%;
  }
  #menu_button::before {
    top:0%;
  }
  #menu_button::after {
    top:100%;
  }
  
  .is_menuopen #menu_button span {display:none;}
  .is_menuopen #menu_button::before {
    top:50%;
    transform:rotate(30deg);
  }
  .is_menuopen #menu_button::after {
    top:50%;
    transform:rotate(-30deg);
  }
}


/*footer*/
footer {
  padding:2.6rem 5vw 2rem;
  background:var(--color-darkgray);
  color:#fff;
  border-radius: 0 4rem 0 0;
  margin-top:6.5rem;
}

footer .constbox {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer .constbox .footer_head {
  width:100%;
  font-size:2.35rem;
  margin-bottom: 6rem;
}
footer .internal {
  width:50%;
}
footer .internal ul li {
  font-size: 0.73rem;
}
footer .internal ul li a {text-decoration: none;color:inherit;}
footer .internal ul li:nth-child(n+2) {margin-top: 1em;}
footer .oth {
  width:40%;
  align-self: flex-end;
  display:flex;
  flex-direction: column;
  align-items: flex-end;
}
footer .oth a {
  display:block;
  width:15em;
  margin-bottom: 2rem;
}
footer .oth #cp {font-size: 0.68rem;}

@media(max-width:560px) {
  footer {
    margin-top:20vw;
    padding:10vw 10vw 5vw;
    border-radius: 0 7rem 0 0;
  }
  footer .constbox {
    
  }
  footer .constbox .footer_head {
    font-size:7.1vw;
    margin-bottom: 27vw;
  }
  footer .internal,
  footer .oth {
    width:100%;
    align-items: flex-start;
  }
  footer .internal ul li {font-size:1rem;}
  footer .oth {margin-top:15vw;}
  footer .oth a {
    width:16em;
  }
}

/*section*/
.sec {
  margin-top:7rem;
  padding: 0 8vw 0;
  position: relative;
}

@media(max-width:560px) {
  .sec {
    margin-top:2rem;
    padding:12vw 4.5vw;
  }
  .sec.full_sp {
    padding-left:0;
    padding-right:0;
  }
}

.sec .constbox > *:not(:first-child) {
  margin-top: 4.2rem;
}
.sec .constbox > .btn:not(.full):not(:first-child) {
  margin-top: 2rem;
}

@media(max-width:560px) {
  .sec .constbox > *:not(:first-child) {
    margin-top: 3rem;
  }
  .sec .constbox > .btn:not(:first-child) {
    margin-top: 3rem;
  }
}

/*見出し*/
.sec_tit {
  font-size: 2.3em;
  font-weight: 750;
  line-height: 1.3;
  margin-bottom:2.2rem;
}
.sec_head .sec_tit {margin-bottom: 0;}
.sec_tit .sub {
  display:block;
  font-size: 0.91rem;
}
.sec .sec_lead {
  font-size: 0.86em;
  line-height: 1.8;
}
.sec .sec_lead p {
  line-height: 1.8;
}
.sec .sec_lead p + p {
  margin-top: 1.5em;
}

.sec .constbox .sec_tit + .sec_lead {
  margin-top: 2rem;
}

@media(max-width:560px) {
  .sec_tit {
    font-size:9.3vw;
  }
  .sec_tit .sub {
    font-size: 1.15rem;
  }
  .sec .sec_lead {
    font-size:1em;
  }
}

.sec_head {
  position: absolute;
  left:0;
  align-items: center;
  height:12rem;
  color:#fff;
  width: 83.5%;
  top: 0;
}
.sec_head > .bg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit: cover;
}
.sec_head .sec_tit {
  position: absolute;
  left:50vw;
  z-index: 1;
  transform:translateX( max(-800px, calc(-50vw + 8vw)) );
}

.roundbox_container {padding-top:5rem;padding-left: 0;padding-right: 0;}
.roundbox_container + .sec {margin-top:2.5rem;}
.roundbox_container + .roundbox_container {margin-top:3rem;}

.sec_head + .roundbox {
  background: var(--color-white);
  margin-top:0;
  padding: 11rem 6rem 5rem;
  border-radius: 0 5rem 0 5rem;
}

.sec_head.reverse {
  left:auto;
  right:0;
}
.sec_head.reverse .sec_tit {
  left:auto;
  right:50vw;
  transform:translateX( min(800px, calc(50vw - 4vw)) );
  white-space: nowrap;
}
.sec_head.reverse + .roundbox {
  border-radius: 5rem 0 5rem 0;
}

@media(max-width:560px) {
  .roundbox_container {margin-top:5.3rem;}
  .sec_head {
  height: 8.7rem;
  width: 96%;
  }
  .sec_head + .roundbox {
    margin-top:2rem;
    padding-left:4vw;
    padding-right:4vw;
    padding-top: 4.5rem;
    padding-bottom: 2rem;
    border-radius: 7vw;
  }
  .sec_head .sec_tit {
    transform:none !important;
    left:4.5vw;
  }
  .sec_head.reverse .sec_tit {
    left:auto;
    right:4.5vw;
  }
}

.sec_head2 {
  justify-content: space-between;
  align-items:flex-start;
}
.sec_head2 .left .sec_tit {
  margin-bottom:3.5rem;
}
.sec_head2 .left .btn {
  margin:0;
}

.sec_tit_s {
  font-size:1.9rem;
  line-height: 1.3;
  font-weight: 750;
  margin-bottom:2.2rem;
}
.sec .constbox .sec_tit_s + * {
  margin-top:0;
}
.sec .constbox > .sec_tit_s:not(:first-child) {
  margin-top: 2em;
}
@media(max-width:560px) {
  .sec_tit_s {
    font-size:6.3vw;
    margin-bottom:1.5rem;
  }
}

/*美術レポート*/

.report_list article {
  background: var(--color-white);
}
.report_list article a {text-decoration: none;color: inherit;}
.report_list article div.top > *:not(figure) {
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  color:#fff;
  font-size: 0.8rem;
  padding:0.3em 0.5em;
}
.report_list article div.top {
  position: relative;
}
.report_list article div.top .tit {
  top:0;
  left:0;
  font-size: 0.8rem;
}
.report_list article div.top .loc {
  right:0;
  bottom:0;
}
.report_list article div.bottom {
  padding:0.3rem 0.5rem;
}
.report_list article div.bottom .sub {
  font-size: 0.8rem;
}
.report_list article div.bottom .nm {
  font-size: 1.1rem;
}

.report_list.list_all {
  flex-wrap:wrap;
  gap:3rem 2rem;
}
.report_list.list_all article {
  width:calc((100% - 4rem) / 3);
}
.report_list.list_all article div.bottom {
  padding:0.8rem 1.4rem;
}

@media(max-width:560px) {
  .report_list article div.top figure {
    position: relative;
    height:26vw;
    overflow: hidden;
  }
  .report_list.list_all article div.top figure {
    height:auto;
    aspect-ratio:352 / 140;
  }
  .report_list article div.top figure img {
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .report_list article div.top .tit {
    font-size:1.3rem;
  }
  .report_list article div.top .loc {
    font-size:1.1rem;
    padding-left:1.2rem;
    padding-right:1.2rem;
  }
  .report_list article div.bottom .sub {
    font-size:1.2rem;
  }
  .report_list article div.bottom .nm {
    font-size:1.7rem;
  }
  
  .report_list.list_all article div.top figure img.def {
    object-fit: contain;
  }
}
/*QAページ 質問上部に追加した際はNewクラスつけて表示*/

.new::after{
    content: "NEW";
    background-color: #6d98cd;
    padding: 10px 25px;
	
}

/*お知らせ一覧*/

.report_list.list_all article{
	height: 15rem;
}

.report_list.list_all article div.bottom{
    overflow: hidden;
}

.report_list article div.bottom .sub{
	 display: -webkit-box;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  -webkit-line-clamp: 1; /* ここを2や3に変更することで、行数を指定 */
	  max-height: calc(1.5em * 1);
}