@charset "utf-8";

@media print, screen and (min-width: 701px) {
	.display-sp {
		display:none !important;
	}
}
@media screen and (max-width: 700px) {
	.display-pc {
		display:none !important;
	}
}

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	list-style-type:none;
	font-size: medium;
	color: #000;
	font-family: "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Helvetica Neue", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 300;
	line-height: 1.65em;
}

html {
	scroll-behavior: smooth;
}

a {
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}

* {
	box-sizing:border-box;
	margin: 0;
	padding: 0;
	transition: 0.4s ease-in-out;
}

img {
	vertical-align:bottom;
	width:100%;
}

/* -----------------------------------------------------------------------
　ヘッダー
--------------------------------------------------------------------------*/
.header-wrap {
	background:#f4f2ed;
}

.top-title {
	margin:0 auto;
}

@media print, screen and (min-width:1201px) {
	.header-wrap {
		padding:55px 30px 45px;
		position:relative;
	}
	.event-logo {
		position:absolute;
		width:250px;
		top:10px;
		left:22px;
	}
	.top-title {
		max-width:740px;
	}
}

@media screen and (min-width:1001px) and ( max-width:1200px) {
	.header-wrap {
		padding:90px 30px 45px;
		position:relative;
	}
	.event-logo {
		position:absolute;
		width:250px;
		top:10px;
		left:22px;
	}
	.top-title {
		max-width:740px;
	}
}

@media screen and (min-width:871px) and ( max-width:1000px) {
	.header-wrap {
		padding:110px 30px 45px;
		position:relative;
	}
	.event-logo {
		position:absolute;
		width:240px;
		top:10px;
		left:22px;
	}
	.top-title {
		max-width:700px;
	}
}

@media screen and (max-width: 870px) {
	.header-wrap {
		padding:5px 8px 25px;
	}
	.event-logo {
		position:relative;
		width:190px;
		margin-bottom:10px;
	}
	.top-title {
		max-width:600px;
		width:90%;
	}
}

@media screen and (max-width: 500px) {
	.top-title {
		width:93%;
	}
}

/* -----------------------------------------------------------------------
　トップ書籍リンク
--------------------------------------------------------------------------*/
.top-books-wrap {
	padding:70px 10px 65px;
}

.top-books-inner {
	max-width:1300px;
	margin:0 auto;
}

.top-book {
	text-align:center;
}

.top-book-img {
	max-width:450px;
	margin:0 auto 12px;
	padding-right:15%;
}

@media print, screen and (min-width:1031px) {
	.br-tb-nv01,
	.br-tb-nv03 {
		display:none !important;
	}
}

@media print, screen and (min-width:801px) {
	.br-tb-nv02,
	.br-tb-aa02 {
		display:none !important;
	}
}

@media print, screen and (min-width:701px) {
	.top-books-inner {
		display:flex;
		justify-content: space-between;
	}
	.top-book {
		width:47%;
	}
	.br-tb-aa03 {
		display:none !important;
	}
}

@media screen and (min-width:521px) and ( max-width:700px) {
	.br-tb-nv01,
	.br-tb-nv02,
	.br-tb-aa03,
	.br-tb-aa02,
	.br-tb-nv03 {
		display:none !important;
	}
}

@media screen and (max-width: 700px) {
	.top-books-wrap {
		padding:45px 5% 5px;
	}
	.top-book {
		margin-bottom:50px;
	}
	.top-book-img {
		margin:0 auto 7px;
	}
}

@media screen and (max-width: 500px) {
	.top-book-img {
		width:85%;
	}
}

.top-book-title {
	font-size:21px;
	font-weight:bold;
	line-height:1.5;
	margin-bottom:16px;
}

.top-book-title-sub {
	max-width:460px;
	font-size:17.5px;
	line-height:1.5;
	padding-bottom:9px;
	border-bottom:1px solid #333;
	margin:0 auto 9px;
}

.top-book-title-en {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size:16.5px;
	font-weight:bold;
	line-height:1.45;
	margin-bottom:20px;
}

.top-book-price {
	font-size:16px;
}

.top-book-price span.large {
	font-size:1.1em;
	margin-right:2px;
}

.top-book-price span.small {
	font-size:0.8em;
}

.top-book-price-small {
	font-size:15px;
	line-height:1.5;
}

@media screen and (max-width: 1200px) {
	.top-book-title {
		font-size:19px;
	}
	.top-book-title-sub  {
		max-width:420px;
		font-size:16px;
	}
	.top-book-title-en {
		font-size:15.5px;
	}
	.top-book-price {
		font-size:14px;
	}
	.top-book-price-small {
		font-size:13.5px;
	}
}

@media screen and (max-width: 1030px) {
	.top-book-title-sub  {
		max-width:380px;
	}
}

@media screen and (max-width: 800px) {
	.top-book-title-sub  {
		max-width:300px;
	}
}

@media screen and (max-width: 700px) {
	.top-book-title-sub  {
		max-width:420px;
	}
}

@media screen and (max-width: 520px) {
	.top-book-title-sub  {
		max-width:300px;
	}
}

@media screen and (max-width: 650px) {
	.top-book-title {
		font-size:20px;
	}
	.top-book-title-sub {
		font-size:16.5px;
	}
	.top-book-title-en {
		font-size:16px;
	}
}

/* -----------------------------------------------------------------------
　リンクボタン
--------------------------------------------------------------------------*/
.detail-link {
	display:block;
	width:170px;
	height:50px;
	border-radius:25px;
	font-size:19px;
	font-weight:bold;
	line-height:50px;
	letter-spacing:6px;
	text-align:center;
	position:relative;
	margin:20px auto 0;
	transition: 0.2s ease-in-out;
}

.detail-link:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 8px 0 8px;
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	margin: auto;
}

@media screen and (max-width: 650px) {
	.detail-link {
		width:140px;
		height:42px;
		font-size:17px;
		line-height:42px;
		padding-right:5px;
	}
}

.btn-y:after {
	border-color: #3a8abb transparent transparent transparent;
}

.btn-b:after {
	border-color: #fff transparent transparent transparent;
}

.btn-y {
	background:#e8e700;
	color:#3a8abb;
}

.btn-b {
	background:#3a8abb;
	color:#fff;
}

.detail-link:hover {
	transform:scale(1.03,1.03);
	opacity:0.8;
	transition: 0.2s ease-in-out;
}

/* -----------------------------------------------------------------------
　書籍詳細
--------------------------------------------------------------------------*/
.books-detail-section-y {
	background:#e8e700;
	padding:90px 30px;
}

.books-detail-section-b {
	background:#3a8abb;
	padding:90px 30px;
}

.book-detail-box {
	max-width:1100px;
	margin:0 auto;
	background:#fff;
	padding:55px 20px 35px;
}

.book-detail-title-01 {
	font-size:33px;
	font-weight:bold;
	line-height:1.4;
	text-align:center;
	margin-bottom:40px;
}

.book-detail-title-02 {
	max-width:620px;
	font-size:22px;
	line-height:1.4;
	text-align:center;
	padding-bottom:12px;
	border-bottom:1px solid #333;
	margin:0 auto 12px;
}

.book-detail-title-en {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size:21px;
	font-weight:bold;
	line-height:1.4;
	text-align:center;
}

@media print, screen and (min-width:901px) {
	.br-bd-nv01 {
		display:none !important;
	}
}

@media print, screen and (min-width:501px) {
	.br-bd-02 {
		display:none !important;
	}
}

@media print, screen and (min-width:701px) {
	.book-detail-main-wrap {
		margin:70px 0 40px;
		display:flex;
		padding:0 7% 0 0;
	}
	.book-detail-book-img {
		width:40%;
	}
	.book-detail-text-wrap {
		width:60%;
		padding-left:6%;
	}
}

@media screen and (max-width: 1100px) {
	.books-detail-section-y,
	.books-detail-section-b {
		padding:60px 5%;
	}
	.book-detail-title-01 {
		font-size:30px;
	}
	.book-detail-title-02 {
		max-width:560px;
		font-size:20px;
	}
	.book-detail-title-en {
		font-size:18px;
	}
}

@media screen and (max-width: 870px) {
	.books-detail-section-y,
	.books-detail-section-b {
		padding:40px 5%;
	}
	.book-detail-box {
		padding:40px 0;
	}
}

@media screen and (max-width: 700px) {
	.books-detail-section-y,
	.books-detail-section-b {
		padding:20px 5%;
	}
	.book-detail-box {
		padding:40px 5% 35px;
	}
	.book-detail-main-wrap {
		padding-top:35px;
	}
	.book-detail-book-img {
		width:90%;
		margin:0 auto 15px;
		padding-right:19%;
	}
	.book-detail-title-01 {
		font-size:27px;
		margin-bottom:30px;
	}
	.book-detail-title-02 {
		max-width:440px;
		font-size:18px;
	}
	.book-detail-title-en {
		font-size:17px;
	}
}

@media screen and (max-width: 500px) {
	.book-detail-box {
		padding:35px 5% 35px;
	}
	.book-detail-title-01 {
		font-size:18px;
		margin-bottom:20px;
	}
	.book-detail-title-02 {
		max-width:290px;
		font-size:16px;
		padding-bottom:9px;
		margin:0 auto 9px;
	}
	.book-detail-title-en {
		font-size:16.5px;
	}
}

.book-detail-lead {
	font-size:18px;
	font-weight:bold;
	line-height:1.75;
	text-align: justify;
	margin-bottom:15px;
}

.book-spec-wrap {
	margin-top:30px;
	border-top:1px solid #aaa;
	padding-top:20px;
}

.book-spec-text {
	font-size:17px;
	line-height:1.9;
}

@media screen and (max-width: 1100px) {
	.book-detail-lead {
		font-size:17px;
	}
	.book-spec-text {
		font-size:16px;
	}
}

@media screen and (max-width: 600px) {
	.book-detail-lead {
		font-size:16px;
	}
	.book-spec-text {
		font-size:15px;
	}
}

.hanmoto-btn {
	display:block;
	width:250px;
	background:#000;
	padding:8px 5px 8px 0;
	border-radius:6px;
	margin-top:15px;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	text-align:center;
	line-height:1.5;
	color:#fff;
	position: relative;
	transition: 0.4s ease-in-out;
}

.hanmoto-btn::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 14px;
  bottom: 0;
  margin: auto;
  transition: 0.4s ease-in-out;
}

.hanmoto-btn:hover {
	opacity:0.7;
	transition: 0.4s ease-in-out;
}

.hanmoto-btn:hover::after {
	right: 12px;
	transition: 0.4s ease-in-out;
}

@media screen and (max-width: 500px) {
	.hanmoto-btn {
		width:240px;
		padding:7px 6px 7px 0;
		font-size:13.5px;
	}
}

/* -----------------------------------------------------------------------
　詳細　下部
--------------------------------------------------------------------------*/
.book-detail-inner {
	width:86%;
	margin:30px auto;
}

@media screen and (max-width: 700px) {
	.book-detail-inner {
		width:100%;
		margin:30px auto 0;
	}
}

/* -----------------------------------------------------------------------
　予約ボタン
--------------------------------------------------------------------------*/
.yoyaku-link-wrap {
	border-top:1px solid #aaa;
	padding:35px 0 45px;
}

.yoyaku-text {
	font-size:16px;
	text-align:center;
	line-height:1.7;
	margin-bottom:40px;
}

@media screen and (max-width: 960px) {
	.yoyaku-text {
		font-size:15px;
	}
}
@media screen and (max-width: 700px) {
	.yoyaku-link-wrap {
		padding:30px 0;
	}
	.yoyaku-text {
		font-size:15px;
		text-align:left;
		margin-bottom:25px;
	}
}
@media screen and (max-width: 600px) {
	.yoyaku-text {
		font-size:14.5px;
		margin-bottom:25px;
	}
}

.link-btn {
	display:block;
	width:280px;
	background:#eb333d;
	padding:20px 0;
	border-radius:10px;
	margin:0 auto 20px;
	font-size:16px;
	font-weight:bold;
	letter-spacing:1px;
	text-align:center;
	line-height:1.5;
	color:#fff;
	transition: 0.4s ease-in-out;
}

.link-btn:hover {
	opacity:0.8;
	transform:scale(1.02,1.02);
	transition: 0.4s ease-in-out;
}

@media screen and (max-width: 960px) {
	.link-btn {
		width:70%;
		margin:0 auto 25px;
	}
}

@media screen and (max-width: 700px) {
	.link-btn {
		margin:0 auto 20px;
		font-size:15px;
	}
}

/* -----------------------------------------------------------------------
　目次
--------------------------------------------------------------------------*/
.mokuji-wrap {
	border-top:1px solid #aaa;
	padding:30px 0 0;
}

.mokuji-title {
	font-size:18px;
	font-weight:bold;
	margin-bottom:18px;
}

.mokuji-text {
	font-size:17.5px;
	text-align: justify;
	margin-bottom:10px;
}

.mokuji-text span.bold {
	font-size:17.5px;
	font-weight:bold;
}

.mokuji-text-bold {
	font-size:17.5px;
	font-weight:bold;
	text-align: justify;
	margin-bottom:5px;
}

.mokuji-text-01 {
	font-size:17.5px;
	text-align: justify;
	margin-bottom:20px;
}

.mokuji-text-01 span.bold {
	font-size:17.5px;
	font-weight:bold;
}

.mokuji-text-02 {
	font-size:17.5px;
	text-align: justify;
	margin-top:20px;
}

@media screen and (max-width: 1100px) {
	.mokuji-title {
		font-size:17px;
	}
	.mokuji-text,
	.mokuji-text-bold,
	.mokuji-text span.bold,
	.mokuji-text-01,
	.mokuji-text-01 span.bold,
	.mokuji-text-02 {
		font-size:16.5px;
	}
}

@media screen and (max-width: 500px) {
	.mokuji-title {
		font-size:16px;
	}
	.mokuji-text,
	.mokuji-text-bold,
	.mokuji-text span.bold,
	.mokuji-text-01,
	.mokuji-text-01 span.bold,
	.mokuji-text-02 {
		font-size:15px;
	}
}

/* -----------------------------------------------------------------------
　建築家写真
--------------------------------------------------------------------------*/
.archi-photo-wrap {
	display:flex;
	flex-wrap: wrap;
	margin-top:50px;
}

@media screen and (max-width: 650px) {
	.archi-photo-wrap {
		margin-top:40px;
	}
}

.archi-name {
	font-size:14.5px;
	text-align:center;
	padding:2px 0 10px;
}

@media screen and (max-width: 650px) {
	.archi-name {
		font-size:13px;
	}
}

@media print, screen and (min-width: 901px) {
	.archi-photo-small {
		display:none !important;
	}
	.archi-photo-01 {
		width:20%;
		transition: 0.2s ease-in-out;
	}
	.archi-photo-02 {
		width:25%;
		transition: 0.2s ease-in-out;
	}
}

@media screen and (max-width: 900px) {
	.archi-photo-large {
		display:none !important;
	}
	.archi-photo-01,
	.archi-photo-02 {
		width:33.3333%;
		transition: 0.2s ease-in-out;
	}
}

/* -----------------------------------------------------------------------
　お問い合わせ
--------------------------------------------------------------------------*/
.contact-wrap {
	margin-top:60px;
	border-top:1px solid #aaa;
	padding:50px 0 0;
}

.contact-title {
	font-size:20px;
	font-weight:bold;
	text-align:center;
	margin-bottom:15px;
}

.contact-btn {
	display:block;
	border:2px solid #000;
	background:#fff;
	width:200px;
	height:54px;
	font-size:17px;
	font-weight:bold;
	color:#000;
	line-height:52px;
	letter-spacing:1px;
	text-align:center;
	position:relative;
	margin:30px auto 30px;
	transition: 0.2s ease-in-out;
}

.contact-btn:hover {
	background:#000;
	color:#fff;
}

.contact-note {
	font-size:15px;
	line-height:1.8;
	text-align:center;
}

@media screen and (max-width: 500px) {
	.contact-title {
		font-size:18px;
	}
	.contact-note {
		font-size:14px;
	}
}

/* -----------------------------------------------------------------------
　『ひろしま国際建築祭2025』とは
--------------------------------------------------------------------------*/
.exhibition-section {
	padding:90px 30px 60px;
}

.exhibition-box {
	max-width:1100px;
	margin:0 auto;
	background:#f4f2ed;
	padding:55px 6% 60px;
}

@media screen and (max-width: 1100px) {
	.exhibition-section {
		padding:60px 5%;
	}
	.exhibition-box {
		padding:40px 6.5% 50px;
	}
}

@media screen and (max-width: 870px) {
	.exhibition-section {
		padding:40px 5%;
	}
	.exhibition-box {
		padding:40px 7% 50px;
	}
}

@media screen and (max-width: 700px) {
	.exhibition-section {
		padding:20px 5% 40px;
	}
	.exhibition-box {
		padding:25px 5% 50px;
	}
}

.exhibition-logo {
	max-width:260px;
	margin:0 auto 40px;
}

.exhibition-title {
	font-size:25px;
	font-weight:bold;
	text-align:center;
	margin-bottom:60px;
}

.exhibition-text {
	font-size:17.5px;
	text-align: justify;
	line-height:1.9;
	margin-bottom:70px;
}

.exhibition-theme01 {
	font-size:17.5px;
	margin-bottom:17px;
}

.exhibition-theme02 {
	font-size:25px;
	letter-spacing:0.02em;
	line-height:1.6;
	margin-bottom:5px;
}

.exhibition-theme-en {
	font-size:23.5px;
	letter-spacing:0.1em;
	margin-bottom:65px;
}

@media screen and (max-width: 1100px) {
	.exhibition-logo {
		max-width:240px;
		margin:0 auto 30px;
	}
	.exhibition-title {
		font-size:20px;
	}
	.exhibition-text {
		font-size:17px;
		margin-bottom:50px;
	}
	.exhibition-theme01 {
		font-size:17px;
	}
	.exhibition-theme02 {
		font-size:23px;
	}
	.exhibition-theme-en {
		font-size:21px;
		margin-bottom:50px;
	}
}

@media screen and (max-width: 700px) {
	.exhibition-logo {
		max-width:200px;
		margin:0 auto 25px;
	}
	.exhibition-title {
		font-size:17px;
		margin-bottom:22px;
	}
	.exhibition-text {
		font-size:15px;
	}
	.exhibition-theme01 {
		font-size:15px;
	}
	.exhibition-theme02 {
		font-size:19px;
		margin-bottom:5px;
	}
	.exhibition-theme-en {
		font-size:18px;
		letter-spacing:0.05em;
		margin-bottom:50px;
	}
}

/* -----------------------------------------------------------------------
　出展者　写真
--------------------------------------------------------------------------*/
.exhibitors-title {
	font-size:17.5px;
	font-weight:bold;
	margin-bottom:15px;
}

.exhibitors-wrap {
	display:flex;
	flex-wrap: wrap;
}

.exhibitor-name {
	text-align:center;
	padding-top:2px;
}

@media print, screen and (min-width: 1001px) {
	.exhibitor-photo {
		width:23%;
		margin:0 1.3333% 20px;
	}
	.exhibitor-photo:nth-child(4n) {
    	margin-right:0;
	}
	.exhibitor-photo:nth-child(4n+1) {
    	margin-left:0;
	}
	.exhibitor-name {
		font-size:13px;
	}
}

@media screen and (min-width:551px) and ( max-width:1000px) {
	.exhibitor-photo {
		width:31%;
		margin:0 1.75% 20px;
	}
	.exhibitor-photo:nth-child(3n) {
    	margin-right:0;
	}
	.exhibitor-photo:nth-child(3n+1) {
    	margin-left:0;
	}
	.exhibitor-name {
		font-size:13px;
	}
}

@media screen and (max-width: 550px) {
	.exhibitors-title {
		font-size:16px;
		margin-bottom:12px;
	}
	.exhibitor-photo {
		width:48%;
		margin:0 2% 10px;
	}
	.exhibitor-photo:nth-child(2n) {
    	margin-right:0;
	}
	.exhibitor-photo:nth-child(2n+1) {
    	margin-left:0;
	}
	.exhibitor-name {
		font-size:12px;
	}
}

.link-hae-btn {
	display:block;
	background:#000;
	width:250px;
	padding:5px 0 8px;
	margin:60px auto 0;
	transition: 0.2s ease-in-out;
}

.link-hae-btn-text {
	width:100%;
	font-size:17.5px;
	color:#fff;
	line-height:1.5;
	letter-spacing:0.02em;
	text-align:center;
}

.link-hae-btn-text span {
	font-size:15px;
	color:#fff;
}

.link-hae-btn:hover {
	background:#444;
	transition: 0.2s ease-in-out;
}

@media screen and (max-width: 600px) {
	.link-hae-btn {
		width:216px;
		padding:5px 0 8px;
		margin:40px auto 0;
	}
	.link-hae-btn-text {
		font-size:16px;
	}
	.link-hae-btn-text span {
		font-size:13.5px;
	}
}

/* -----------------------------------------------------------------------
　フッター
--------------------------------------------------------------------------*/
.footer-title {
	font-size:17px;
	font-weight:bold;
	text-align:center;
	margin:50px 0 10px;
}

.footer-text {
	font-size:15.5px;
	text-align:center;
}

.footer-text a {
	font-size:15.5px;
	color:#000;
}

@media screen and (max-width: 500px) {
	.footer-title {
		font-size:16px;
		margin:30px 0 10px;
	}
	.footer-text,
	.footer-text a {
	font-size:15px;
	}
}

/* -----------------------------------------------------------------------
　TOPに戻るボタン
--------------------------------------------------------------------------*/
#page-top {
	all: unset;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#000;
    z-index:200;
    text-align:center;
    display: flex;
	align-items: center;
	cursor: pointer;
	/* 最初は非表示 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none; /* 非表示中はクリックできないようにする */
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

#page-top.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#page-top:focus-visible {
  outline: 3px solid #09f;   /* 好きな色に変更可 */
  outline-offset: 0;
}

.arrow-up {
  position: relative;
  width:3px;
  height: 20px;
  background: #fff;
  margin:0 auto;
}

.arrow-up::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(-45deg);
  transform-origin: top right;
  position: absolute;
  top: -0.05em;
  right: 50%;
  box-sizing: border-box;
}

#page-top:hover {
    background:#666;
    transition: 0.4s ease-in-out;
}

@media screen and (max-width: 600px) {
	#page-top {
		bottom: 20px;
    	right: 20px;
    	width:40px;
    	height:40px;
	}
}