@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&display=swap');
/* CSS Document */

/***　font　***/

.font_li{
	font-family: 'Libre Baskerville', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

/***　全ページ　***/

*:focus {outline:none;}
html, body{
	font-size: 12px
}
body{
	-webkit-text-size-adjust: 100%
}
#wrap{
	transition: 0.3s;
	transition-property: opacity
}

input[type="submit"], input[type="button"], input[type="text"], textarea{
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="text"], textarea{
	cursor: inherit
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

#page-top a{
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
#page-top a:hover{
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
}
textarea{overflow: auto}

#left_wrap, #header{
	width: 300px;
	box-sizing: border-box
}
#right_wrap{
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	width: calc(100% - 300px);
	box-sizing: border-box
}

/***　ヘッダー　***/

#header{
	top: 0;
	left: 0;
	z-index: 2
}

#head_nav li.active a, #head_nav li a:hover{
	padding-left: 20px
}
#head_nav li a::before{
	position: absolute;
	content: "";
	width: 0;
	height: 1px;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: currentColor;
	transition: 0.3s
}
#head_nav li.active a::before, #head_nav li a:hover::before{
	width: 10px
}

/***　フッター　***/

#page_top a::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	left: 0;
	bottom: -1px;
	background-color: currentColor;
}

.modal_bt{
	cursor: pointer
}
footer .modal_bt::before, footer .modal_bt::after{
	position: absolute;
	content: "";
	width: 10px;
	height: 1px;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: currentColor
}
footer .modal_bt::after{
	transform: rotate(90deg)
}
.modal_box{
	top: 0;
	left: 0;
	pointer-events: none;
	transition-property: opacity;
	z-index: 3;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.modal_box > div{
	overflow-y: auto
}
.modal_box.active{
	pointer-events: auto;
	opacity: 1;
}
.modal_box .close{
	top: 30px;
	right: 30px;
	cursor: pointer
}

 .sns_link a::before{
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	right: -5px;
	top: -5px;
	transform: rotate(45deg);
	background-color: currentColor
}

#footer_txt .modal_title1::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 1px;
	left: 0;
	bottom: 0;
	background-color: currentColor
}

/***　index　***/

#top_gallery .box_title1::before, #page03 .box_title1::before, #page04 .box_title1::before, #page05 .box_title1::before{
	position: absolute;
	content: "";
	width: 10px;
	height: 1px;
	left: -30px;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: currentColor
}
#top_gallery .swiper-container .swiper-pagination, #page03 .swiper-container .swiper-pagination, #page04 .swiper-container .swiper-pagination{
	text-align: left;
	position: static;
	padding-top: 10px
}
#top_gallery .swiper-container .swiper-pagination .swiper-pagination-bullet, #page03 .swiper-container .swiper-pagination .swiper-pagination-bullet, #page04 .swiper-container .swiper-pagination .swiper-pagination-bullet{
	background-color: transparent!important;
	width: 20px;
	height: 20px;
	position: relative;
	margin: 0;
	border-radius: 0;
	transition: 0.3s;
	transition-property: opacity
}
#top_gallery .swiper-container .swiper-pagination .swiper-pagination-bullet::before, #page03 .swiper-container .swiper-pagination .swiper-pagination-bullet::before, #page04 .swiper-container .swiper-pagination .swiper-pagination-bullet::before{
	position: absolute;
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 10px;
	background-color: #1a1a1a!important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}
#top_gallery .txt_wrap, #page03 .txt_wrap, #page04 .txt_wrap, #page05 .txt_wrap{
	padding-left: 7%
}

/***　page_title pager cate_title accordion　***/

#page_title h2::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 1px;
	left: 0;
	bottom: 0;
	background-color: currentColor
}

.pager li a{
	width: 50px;
	height: 40px;
	line-height: 40px;
}
.pager li.page-selection a, .pager li.prev a, .pager li.next a{
	opacity: 1!important
}
.pager li.page-selection a::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 1px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: currentColor
}
.pager li.prev, .pager li.next{
	margin: 0 30px
}
.pager li.prev:hover a{
	transform: translateX(-5px)
}
.pager li.next:hover a{
	transform: translateX(5px)
}
.pager li.prev a::before, .pager li.next a::before{
	position: absolute;
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: solid 1px;
	border-right: solid 1px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 5px;
	margin: auto;
	transform: rotate(45deg);
}
.pager li.prev a::before{
	right: 0;
	left: 5px;
	transform: rotate(-135deg);
}

.cate:last-of-type, .cate_box:last-of-type{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none
}

.cate_list li a::before{
	position: absolute;
	content: "";
	border-radius: 50%;
	width: 5px;
	height: 5px;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border: solid 1px #ccc;
	transition: 0.3s;
	transition-property: border-color, background-color
}
.cate_list li a:hover::before, .cate_list li.trans a::before{
	border-color: currentColor;
	background-color: currentColor
}

.accordion_box::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100px;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
	left: 0;
	bottom: 0;
	pointer-events: none;
	transition: 0.3s
}
.accordion_box.trans::before{
	opacity: 0
}
.accordion_box .more_btn{
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer
}
.accordion_box .more_btn span::before, .accordion_box .more_btn span::after{
	position: absolute;
	content: "";
	width: 10px;
	height: 1px;
	background-color: currentColor;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
.accordion_box .more_btn span::after{
	transform: rotate(90deg)
}
.accordion_box.trans .more_btn span::before{
	transform: rotate(45deg)
}
.accordion_box.trans .more_btn span::after{
	transform: rotate(135deg)
}

/***　page02　***/

#page02 .cate_box{
	width: calc(50% - 25px);
}

/***　page05　***/

#page05 .box_img1.modal_bt:hover .thumbnail{
	opacity: 0.6
}
#page05 .share_box{
	width: 25px
}

/***　page06　***/

#page06 .box_title1::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	left: 1px;
	top: 1em;
	background-color: #ccc
}

/***　page07　***/

#page07 #submit input{
	border-bottom: solid 1px
}
#page07 input[type="text"], textarea{
	background-color: #f2f2f2;
	transition: 0.3s;
	transition-property: border, background
}
#page07 input[type="text"]{
	border-bottom: solid 1px #f2f2f2
}
textarea{
	border: solid 1px #f2f2f2
}
#page07 input[type="text"]:focus, textarea:focus{
	background-color: transparent;
	border-color: #1a1a1a
}

/***　page09　***/

#page09 li a::before{
	position: absolute;
	content: "";
	border-radius: 50%;
	width: 5px;
	height: 5px;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border: solid 1px #ccc;
	transition: 0.3s;
	transition-property: border-color, background-color
}
#page09 li a:hover::before{
	border-color: currentColor;
	background-color: currentColor
}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
}

.float_right{
	float: right
}
.float_left{
	float: left
}
.float_clear{
	float: none
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 1000px){
#wrap{
	min-width: 768px!important
}
#left_wrap, #header, #right_wrap{
	width: 100%;
}
.modal_box .close{
	top: 20px;
	right: 10px;
}
#top_gallery .txt_wrap, #page03 .txt_wrap, #page04 .txt_wrap, #page05 .txt_wrap{
	padding-left: 5%
}
#top_gallery .box_title1::before, #page03 .box_title1::before, #page04 .box_title1::before, #page05 .box_title1::before{
    width: 5px;
    left: -15px;
}
	
#pager li:not(.prev):not(.next){
	display: none;
}

.float_right_tb{
	float: right
}
.float_left_tb{
	float: left
}
.float_clear_tb{
	float: none
}
.clearfix_tb::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){

.float_right_sp{
	float: right
}
.float_left_sp{
	float: left
}
.float_clear_sp{
	float: none
}
.clearfix_sp::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}