@charset "utf-8";
@import url("global.css");

/*---------------------------------------------------------------------------------------
	トップページ
----------------------------------------------------------------------------------------*/
/*メイン固定*/
.top-main {
	position: relative;
	margin: 1em 1% 3em;
	width: 98%;
	height: 90vh;
}
.top-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.top-main div{
	position: absolute;
	bottom: 2em;
	right: 1em;
	background: rgba(255, 255, 255, 1);
	padding: 1em;
}
.top-main div h2{
	font-family: var(--gochic);
}
.top-main div p{
	font-weight: 300;
}

/*メインスライド*/


/*一覧BOX*/
.top-box {
	display: grid;
	grid-template-columns: 8em 1fr;
	/*align-items: center;*/
	gap: 3em;
	position: relative;
}
/* 列の境界に線 */
.top-box::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(8em + 1.5em); /* 10em + gapの半分 */
	width: 1px;
	background-color: var(--line1);
}
.top-box h2 {
	font-family: var(--mincho);
	font-size: var(--x-large);
	writing-mode: vertical-rl;
	justify-self: center;
	align-self: start;
	inline-size: max-content;
	display: flex;
	 flex-direction: column-reverse;
}
.top-box h2 span.num {
  text-combine-upright: all;
  display: inline-block;
  position: relative;
  left: -5px;
}
.top-box h2 span.en {
	display: block;
	font-size: var(--x-small);
}

.top-soten-box {
	background: var(--back3);
	padding: 2em 0;
}
.top-exhibition-box {
	background: var(--back2);
	padding: 2em 0;
}
.top-soten {
	background: var(--back1);
	display: grid;
	grid-template-columns: 30% 1fr;
	align-items: start;
	gap: 1em;
}
.top-soten figure {
	background: var(--white);
	padding: 2em;
}
.top-soten div {
	padding:  1em;
	color: var(--white);
}
.top-soten div h2 {
	font-size: var(--xx-large);
	margin-bottom: .5em;
}
.top-soten div .btn1 {
	text-align: left;
}
/*------------------------------ responsive ------------------------------*/

@media screen and (max-width:1400px){
	.top-soten {
		grid-template-columns: 40% 1fr;
	}
}

@media screen and (max-width:959px){
	.top-main {
		margin: 1em 1% 2em;
		width: 98%;
		height: 90vh;
	}
	.top-soten {
		display: block;
	}
	.top-box {
		display: block;
	}
	/* 列の境界に線 */
	.top-box::after {
		display: none;
	}
	.top-box h2 {
		writing-mode: horizontal-tb;
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 1em;
	}
	.top-box h2 span.num {
	  left: 0;
	}
	.top-soten figure {
		background: var(--white);
		padding: 3em 20%;
	}
	.top-soten div h2 {
		font-size: var(--x-large);
	}
	.top-soten div .btn1 {
		text-align: center;
	}
}
/*---------------------------------------------------------------------------------------
	下層共通
----------------------------------------------------------------------------------------*/
 /* ニュース一覧 */
ul.news-list li {
	display: grid;
	grid-template-columns: minmax(7em, 9em) minmax(6em, 8em) 1fr; /* 日付 / カテゴリ / 本文 */
	gap: 1em;
	align-items: start;
	margin-bottom: 1em;
}
ul.news-list li .date {
	white-space: nowrap;
}
ul.news-list li .tag {
	white-space: nowrap;
}
ul.news-list li .title {
	word-break: break-word;
}
ul.news-list li a {
	text-decoration: none;
}
@media screen and (max-width: 959px) {

  ul.news-list li{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .6em;
    row-gap: .25em;
  }

  /* 1行目：日付 */
  ul.news-list li .date{
    white-space: nowrap;
  }

  /* 1行目：タグ（右に飛ばさない・位置指定を無効化） */
  ul.news-list li .tag{
   min-width: 100px;
  }

  /* 2行目：タイトル（必ず改行） */
  ul.news-list li .title{
    flex-basis: 100%;  /* ←これが改行の核 */
    word-break: break-word;
  }
}


 /* 創展一覧 */
.soten-list li {
	margin-bottom: 1.5em;
}
.soten-list li a {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 30px;
	align-items: start;
    text-decoration: none;
}
.soten-list li a:hover {
    background: var(--white);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    color: var(--base);
}
.soten-list li a figure {
	position: relative;
	border: 1px solid var(--line3);
}
.soten-list li div {
	padding: .5em;
}
.soten-list li div h3 {
	line-height:  1.2;
	margin: 0 0 .3em;
	font-size: var(--x-large);
}
.soten-list li div .cate{
    display: inline-block;
    min-width: 6em;
    padding: .5em 1em;
    margin-bottom: .5em;
    color: var(--white);
    font-size: var(--x-small);
    text-align: center;
    vertical-align: middle;
    background: var(--back1);
    border-radius: 20px;
    line-height: 1;
}
/*------------------------------ responsive ------------------------------*/

@media screen and (max-width:959px){
	.soten-list li a {
		grid-template-columns: 100px 1fr;
		gap: 10px;
	}
	.soten-list li div {
		padding: 0;
	}
	.soten-list li div h3 {
		font-size: var(--large);
		margin: 0 0 .3em;
	}
	.soten-list li div p {
		font-size: var(--small);
	}
}

 /* 会員展覧会一覧 */
.ex-list li {
	margin-bottom: 1.5em;
}
.ex-list li a {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 30px;
	align-items: start;
	text-decoration: none;
}
.ex-list li a:hover {
    background: var(--white);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    color: var(--base);
  }
.ex-list li a figure {
	position: relative;
}
.ex-list li div {
	padding: .5em;
}
.ex-list li div h3 {
	line-height:  1.2;
	margin: .5em 0 .3em;
	font-size: var(--large);
}
.ex-list li div .ex-date{
	font-size: var(--large);
	font-weight: 300;
}
.ex-tag {
    display: inline-block;
    min-width: 6em;
    padding: .5em 1em;
    margin-right: .5em;
    color: var(--white);
    font-size: var(--x-small);
    text-align: center;
    vertical-align: middle;
    background: var(--back1);
    border-radius: 20px;
    line-height: 1;
}
.ex-tag.now {
	background: var(--key);
}
.ex-tag.next {
	background: var(--back1);
}
.ex-tag.end {
	background: var(--back2);
	color: var(--base);
}
.ex-tag.soon,
.ex-tag.next-soon,
.ex-tag.today-only,
.ex-tag.today,
.ex-tag.today-end {
	background: var(--white);
	border: 1px solid var(--line2);
	color: var(--base);
}


/*------------------------------ responsive ------------------------------*/

@media screen and (max-width:959px){
	.ex-list li a {
		grid-template-columns: 100px 1fr;
		gap: 10px;
	}
	.ex-list li div {
		padding: 0;
	}
	.ex-list li div h3 {
		font-size: var(--large);
		margin: .3em 0 .3em;
	}
  .ex-list li div h3 {
    display: flex;
    flex-direction: column;  /* ←タグ→タイトルの順で縦に積む */
    align-items: flex-start; /* ←タグを横いっぱいにしない */
    gap: .3em;               /* 任意：行間 */
  }

  .ex-list li div h3 > .tag.mr1em {
    margin-right: 0 !important; /* 既に入ってるけど念のため */
  }
	.ex-list li div p.ex-date,
	.ex-list li div p.ex-place{
		font-size: var(--small);
		line-height: 1.3;
	}
}

 /* ギャラリー */
.gallery-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 1em;
  list-style: none;
  padding: 0;
}

/* figure：正方形の表示枠 */
.gallery-list li figure{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--back2);
  box-sizing: border-box;
  overflow: hidden; /* 余白はOK、はみ出しは防ぐ */
}

/* imgを枠内に完全に収める（トリミングなし） */
.gallery-list li figure a{
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-list li figure img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;        /* ←トリミングなしで収める */
  object-position: center;    /* 中央寄せ */
  display: block;
}

.gallery-list li p.caption {
	font-size: var(--small);
}
.gallery-list li p.text {
	font-size: var(--x-small);
}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
  .gallery-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ←ここが重要 */
    gap: 12px;
    margin-bottom: 1em;
  }

  .gallery-list li{
    min-width: 0; /* ←これも重要（中身が押し広げるのを防ぐ） */
  }

  .gallery-list li figure,
  .gallery-list li figure a{
    width: 100%;
  }
}

/* ギャラリー */
.images-list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* PC 4列 */
  gap: 20px;
  margin-bottom: 1em;
  list-style: none;
  padding: 0;
}

.images-list li{
  min-width: 0;
}

/* 画像枠：3:2 */
.images-list li figure{
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--back2);
  overflow: hidden;   /* はみ出しはトリミング */
  margin: 0;
  position: relative;
}

.images-list li figure a{
  display: block;
  width: 100%;
  height: 100%;
}

/*
  横を必ず100%に合わせる
  → 縦が余れば上下トリミング
*/
.images-list li figure img{
  width: 100% !important;   /* 横を必ず合わせる */
  height: auto !important;  /* 縦は比率維持 */
  min-height: 100%;         /* 枠より低ければ引き伸ばす */
  object-fit: unset;        /* coverは使わない */
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* 上下中央基準でカット */
}

.images-list li p.caption{
  font-size: var(--small);
}
.images-list li p.text{
  font-size: var(--x-small);
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
  .images-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* スマホ 2列 */
    gap: 12px;
  }
}


/*---------------------------------------------------------------------------------------
	soten　創展
----------------------------------------------------------------------------------------*/
.soten-link {
	margin-bottom: 2em;
}
.soten-link h2 {
	font-size: var(--large);
	margin-bottom: .5em;
}
.soten-link ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 1em;
}
.soten-link ul li {
	border: 1px solid var(--line1);
	text-align: center;
}
.soten-link ul li a {
	padding:  .5em;
	text-decoration: none;
	display: block;
}
.soten-link ul li a:hover,
.soten-link ul li.current a {
	color: var(--key);
	background: var(--back1);
	color: var(--white);
}
.soten-box {
  text-align: center;
	border: 1px solid var(--line1);
	margin-bottom: 2em;
}
.soten-box h2 {
  font-size: var(--x-large);
  font-weight: 500;
  background: var(--back1);
  color: var(--white);
  padding: .5em 2em;
}
.soten-box .end {
	margin-top: .3em;
	color: var(--base-sub);
}
.soten-box .soten-lead {
	font-size: var(--x-large);
	font-weight: 500;
	text-align: center;
	padding: .5em;
}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
	.soten-link ul {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 10px;
	  margin-bottom: .7em;
	  font-size: var(--small);
	}
	.soten-link ul li a{
	  padding: .3em;
	}
	.soten-box h2 {
	  font-size: var(--large);
	}
	.soten-box .soten-lead {
		font-size: var(--medium);
	}
}


/*---------------------------------------------------------------------------------------
	news お知らせ 詳細
----------------------------------------------------------------------------------------*/
.news-ttl {
	font-family: var(--mincho);
	font-size: var(--xx-large);
	text-align: center;
	margin-bottom: 1.5em;
}
p.news-date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
p.news-date:first-child {
	font-size: 1.8rem;

}

.news-link-list {
	margin-top: 1em;
}
.news-link-list li{
	margin-top: .5em;
}

.news-note p {
	margin-bottom: 1em;
}
.news-note p.link{
	margin-top: 1em
}
.news-note p.link:before {
	content: "●";
	font-size: 1.2rem;
	margin-right: 10px;
	color: var(--subkey);
}
.news-note table{
	width: 100%;
	border-top: 1px solid var(--line2);
	border-left: 1px solid var(--line2);
}
.news-note th,
.news-note td{
	padding: .5em 1em;
	border-bottom: 1px solid var(--line2);
	border-right: 1px solid var(--line2);
}
.news-note th{
	background: var(--back2);
	vertical-align: top;
}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
	.news-ttl {
		font-size: var(--x-large);
	}
	p.news-date:first-child {
		font-size: 1.4rem;
	}
	.news-note{
		width: 100%;
		margin-bottom: 2em;
	}
	.news-note.news-photo{
		margin-bottom: 0;
	}
	.news-note table{
		font-size: var(--small);
	}
	.news-note th,
	.news-note td{
		padding: .5em;
	}

}
/*---------------------------------------------------------------------------------------
	soten 創展 詳細
----------------------------------------------------------------------------------------*/
.soten-ttl {
	font-family: var(--mincho);
	font-size: var(--xx-large);
	font-weight: 600;
	text-align: center;
	margin-bottom: 1.5em;
}
p.soten-date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
p.soten-date:first-child {
	font-size: 1.8rem;

}
.soten-note p {
	margin-bottom: 1em;
}
.soten-note table{
	width: 100%;
	border-top: 1px solid var(--line2);
	border-left: 1px solid var(--line2);
}
.soten-note th,
.soten-note td{
	padding: .5em 1em;
	border-bottom: 1px solid var(--line2);
	border-right: 1px solid var(--line2);
}
.soten-note th{
	background: var(--back2);
	vertical-align: top;
}

/*---------------------------------------------------------------------------------------
	exhibition 構成員個展・グループ展情報 詳細
----------------------------------------------------------------------------------------*/
.ex-ttl {
	font-family: var(--mincho);
	font-size: var(--xx-large);
	font-weight: 600;
	text-align: center;
	margin-bottom: 1.5em;
}
.ex-end {
	background: var(--back2);
	padding:  .5em 1em;
	margin-bottom: 1em;
	text-align: center;
}
.single-exhibition p.ex-date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.single-exhibition p.ex-date:first-child {
	font-size: 1.8rem;
}
.single-exhibition .ex-date-range {
	font-size: var(--large);
	font-weight: 600;
	margin-bottom: 1em;
}
.single-exhibition .ex-wrap {
	margin-bottom: 3em;
}
figure.ex-main {
  height: 50vh;
  width: 100%;
  margin-bottom: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--back3);
}

figure.ex-main img{
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.catch {
	font-size: var(--x-large);
	font-weight: 600;
	text-align: center;
	margin-bottom: 1em;
}
.ex-note > p {
	margin-bottom: 1em;
}
ul.ex-photo {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC 4列 */
  gap: 20px; /* 均等スペース */
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.ex-photo p {
	font-size: var(--small);
}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
	.ex-ttl {
		font-size: var(--x-large);
	}
	.catch {
		font-size: var(--large);
	}
	ul.ex-photo {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 12px;
  }

}
/*---------------------------------------------------------------------------------------
	members 構成員
----------------------------------------------------------------------------------------*/
/*---一覧---*/
.members-list {
	margin-bottom: 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.members-list li {
	width: 48%;
	margin-bottom: 1em;
}
.members-list li a {
	text-decoration: none;
	display: grid;
	grid-template-columns: 80px auto 1fr auto;
	column-gap: 1em;
	align-items: center;
	white-space: nowrap;
}
.members-list li a:hover {
	background: var(--back2);
	color: var(--base);
}

.members-list .image {
  width: 80px;
  height: 80px;
  background: var(--back2);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0; /* 他要素に押されない */
}

.members-list .image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;

  display: block;
}
.members-list .name {
  font-weight: 600;
}
.members-list .name span.child {
	font-size: var(--small);
	font-weight: normal;
	margin-right: .5em;
}
.members-list .furigana {
  font-size: var(--small);
  color: var(--base-sub);
}

.members-list .ganre {
  font-size: var(--x-small);
  background: var(--back2);
  padding: .5em;
  line-height: 1;
  justify-self: end;      /* グリッドセルの右端へ */
  width: fit-content;     /* 背景は文字幅 */
  white-space: nowrap;
}
/*------------------------------ responsive ------------------------------*/

@media screen and (max-width:1280px){


  /* 左：画像 / 右：3行 */
  .members-list li a{
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto auto; /* ← 3行固定 */
    column-gap: 1em;
    row-gap: .25em;
    align-items: start;
    white-space: normal;               /* 全体nowrap解除 */
    line-height: 1;
  }

  /* 画像は左3行ぶち抜き */
  .members-list .image{
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
  }

  /* 1行目：会長＋氏名 */
  .members-list .name{
    grid-column: 2;
    grid-row: 1;
    font-weight: 600;
    min-width: 0;
  }

  /* 2行目：furigana */
  .members-list .furigana{
    grid-column: 2;
    grid-row: 2;
    font-size: var(--small);
    color: var(--base-sub);
    margin: 0;
    min-width: 0;
  }

  /* 3行目：ganre */
  .members-list .ganre{
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    text-align: left;
    width: fit-content;
  }
}


@media screen and (max-width:768px){

  .members-list{
    display: block;
  }
  .members-list li{
    width: 100%;
    margin-bottom: 1em;
  }
}

/*---詳細---*/
.members-info .furigana{
	font-size: var(--medium);
	margin-left: 1em;
	font-weight:  normal;
}
.members-info .tag.child {
	margin-left: .5em;
}
.members-info .ganre {
	display: inline-block;
	color: var(--white);
	font-size: var(--large);
	background: var(--base-sub);
	line-height: 1;
	padding: .5em 1em;
	margin-bottom: 1.5em;
}
.members-info article h1,
.members-info article h2,
.members-info article h3,
.members-info article h4 {
	margin-top: 1em;
	margin-bottom: .2em;
}

.members-info article h1 {
	font-size: var(--xxx-large);
}
.members-info article h2 {
	font-size: var(--xx-large);
}
.members-info article h3 {
	font-size: var(--x-large);
}
.members-info article h4 {
	font-size: var(--large);
}
.members-info article p {
	margin-top: .5em;
}

.members-info article table{
	width: 100%;
	table-layout: auto;
	text-align: left;
}

.members-info article table th,
.members-info article table td{
	vertical-align: top;
	padding: .5em;
	border: 1px solid var(--line2);
	word-break: break-all;
}
.members-info article table th{
	background: var(--back2);
	white-space: nowrap;
	width: 1%;
}
.members-info article li{
	list-style-type: disc;
	margin-left: 1.5em;
	line-height: 1.5;
	margin-bottom: .5em;
}
.members-info article ol li{
	list-style-type: decimal;
	margin-left: 1.5em;
	line-height: 1.5;
	margin-bottom: .5em;
}
.members-works {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}
.members-works li {
  width: calc((100% - 6em) / 4);
}
.members-works li a {
  aspect-ratio: 1 / 1;
  background: var(--back2);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
}
.members-works li a img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;

  display: block;
}
.members-works li h3 {
}
.members-works li p {
	font-size: var(--small);
}
.members-works li p.award {
	color: var(--white);
	background-image: url('../images/index/top-main-bk.jpg');
	background-size: cover;
	line-height: 1;
	padding: .3em 1em;
	text-align: center;

}
/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
	.members-works {
		gap: 1.5em;
	}
	.members-works li {
	  width: calc((100% - 1.5em) / 2);
	}
	.members-info article table{
		font-size: var(--small);
	}

}


/*---------------------------------------------------------------------------------------
	about 創展とは
----------------------------------------------------------------------------------------*/

table.history-table{
	width: 100%;
	text-align: left;
}

table.history-table th,
table.history-table td{
	vertical-align: top;
	padding: 1em 1em;
	border-bottom: 1px solid var(--white);
	word-break: break-all;
}
table.history-table th{
	white-space: nowrap;
	background: var(--back2);
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
	table.history-table th,
	table.history-table td{
		font-weight: normal;
		display: block;
		padding: .5em .5em 1.5em;
	}
	table.history-table th{
		padding-bottom: .5em;
		text-align: center;
	}
}
/*---------------------------------------------------------------------------------------
	inquiry contact form 7
----------------------------------------------------------------------------------------*/
/* 通常時はエラーメッセージを非表示にする（ラジオボタンを押すとバリデーションが発火して必須エラー表示を回避） */
.wpcf7-not-valid-tip {
    display: none;
}
/* メッセージが空のときは枠も出さない（ラジオボタンを押すとバリデーションが発火して入力不備メッセージエリアだけ表示され中にメッセージがなくラインだけ残る） */
.wpcf7-response-output:empty {
  display: none !important;
}

/* 送信ボタンが押され、フォームが「無効(invalid)」状態になった時だけ表示する */
.wpcf7 form.invalid .wpcf7-not-valid-tip {
    display: block;
}

/* エラーがある入力欄の枠線（赤くなる等）も、送信後のみ適用したい場合 */
.wpcf7-form-control.wpcf7-not-valid {
    border: 1px solid #ccc; /* 通常の枠線に戻す */
}
.wpcf7 form.invalid .wpcf7-not-valid {
    border: 1px solid var(--caution); /* 確認押下後のみエラーを赤くする */
}
.wpcf7 form.invalid .wpcf7-not-valid.wpcf7-radio {
    border: none; /* ラジオボタンの場合エラー枠を表示しない */
}

.inquiry-wrap{
  position: relative;
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--white);
}

.inquiry-wrap::before{
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 250px;
  background: var(--back2);
  pointer-events: none;
}

.inquiry-wrap > p,
.inquiry-wrap > label{
  grid-column: 1;
  margin: 0;
  padding: .5em 1em;
  white-space: nowrap;
  position: relative; /* 背景より前に出す */
  z-index: 1;
}
.inquiry-wrap > div{
  grid-column: 2;
  margin: 0;
  padding: .5em 1em;
  position: relative;
  z-index: 1;
}

.inquiry-wrap > div > p{
  margin: 0;
}
.sr-only{
  display: none;
}
.inquiry-wrap > div.inquiry-address > div {
	margin: .3em 0;
}
.wpcf7-list-item.first {
	margin-left: 0!important;
}
/* 確認画面用 */
.inquiry table{
  width: 100%;
  border-collapse: collapse;
}

/* 罫線 */
.inquiry th,
.inquiry td{
  border: 1px solid var(--white);
}

.inquiry tr{
  display: grid;
  grid-template-columns: 250px 1fr;
}

.inquiry th{
  background: var(--back2);
  padding: .5em 1.5em;
  white-space: nowrap;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inquiry td{
  padding: .5em 1em;
  margin: 0;
}
div[data-class="wpcf7cf_group"] {
	display: contents;
}
.inquiry elect,
.inquiry input,
.inquiry input,
.inquiry textarea {
	margin: 0 .5em;
}

.p-country-name {
	display: none;
}
input.input-s {
	width: 30%;
}
input.input-m {
	width:50%;
}
input.input-l {
	width:100%;
}
.inquiry textarea {
	width:100%;
}

div.wpcf7cp-btns,
.submit { text-align:center; margin: 1.5em 0;}
/*送信後のローディング画像を消す*/
.wpcf7-spinner {
    display: none !important;
}
.wpcf7cp-btns button,
.submit input {
	border:solid 1px solid var(--key);
	background: var(--key);
	color: var(--white);
	margin-right: 8px;
	margin-left: 8px;
	padding:8px 32px;
	border-radius: 8px;
	font-size: var(--large);
	height: auto;
	line-height: 1.8em;
	text-transform:uppercase;
	cursor:pointer;
}
.wpcf7cp-btns button.wpcf7cp-cfm-edit-btn {
		background: var(--back2);
	color: var(--base);
}
.submit input.historyback {
	border:solid 1px solid var(--line2);
	background: var(--line2);
	color: var(--base);
	padding:8px 16px;
	font-size:1.6rem;
}
.wpcf7 form .wpcf7-response-output {
    margin: 1em 0.5em 1em;
    padding: 0.2em 1em;
    border: none;
    background: var(--caution);
    color: var(--white);
}

@media screen and (max-width: 768px) {
	.inquiry-wrap{
	  position: relative;
	  display: block;
	}

	.inquiry-wrap::before{
	  display: none;
	}

	.inquiry-wrap > p,
	.inquiry-wrap > label{
	  background: var(--back2);
	}
	.inquiry-wrap > div{
	  padding: .5em 0;
	}

  .inquiry tr{
    display: block;
  }
  .inquiry th,
  .inquiry td{
    display: block;
    width: 100%;
    padding: .5em 2%;
    box-sizing: border-box;
  }
	input.input-s {
		width: 20%;
	}
	input.input-m {
		width:80%;
		margin-bottom: .5em;
	}
	input.input-l {
		width:95%;
	}
	.inquiry textarea{
		font-size: var(--small);
		width:95%;
	}
	.inquiry file{
		width:95%;
	}
	.submit input {
		font-size: var(--medium);
	}
	.submit input.historyback {
		font-size: var(--small);
	}

	.file {
	    display: block;
	    overflow: hidden;
	    position: relative;
	    padding: 1em;
	    border: 1px solid #ffc000;
	    background: #ffc000;
	    color:#fff;
		margin-bottom: 16px;
	}

	.file input[type="file"] {
	    opacity: 0;
	    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	    position: absolute;
	    right: 0;
	    top: 0;
	    margin: 0;
	    font-size: 100px;
	    cursor: pointer;
	}

}