@charset "utf-8";
@media print {
    body { display: none }
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

html{
	width:100%;
	height:100%;
}

body,p {
	color: #4a3f3b;
	font-family: Meiryo,"Oswald" sans-serif;
	font-size: 16px;
	margin: 0 auto;
}

main{
	display: block;
	background-image: url("../img/bg-01.jpg");
	background-repeat: repeat;
	background-size: 50%;
		width:100%;
	height:100%;
}

section{
	margin: 20px auto;
}

h2{
	margin: 0;
	padiing: 0;
}

a {
	text-decoration: none;
	color: #4a3f3b;
	cursor: pointer;
	transition: 0.3s;
}

a:hover{
	background color:  #e8e8e8;
}

img {
	max-width: 100%;
	/* PCの右クリック禁止 */
	pointer-events: none;
}

li {
	list-style: none;
}

.title{
	padding: 20px;
	margin: 0;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
.header {
	width: 1280px;
	height: 51px;
	display: flex;
	margin: 10px auto;
}

.header .site-title {
	width: 320px;
	padding: 0;
	margin: 0;
}

.header .site-title a {
	display: block;
}

.header .site-title img{
	width: 320px
}

/*--------------------------------
グローバルナビ
---------------------------------*/
.hdnav_list {
	display: flex;
	position: relative;
	margin: 15px 0;
	margin-left: 275px;
	padding: 0;
}

.hdnav_item {
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.05em;
	width: 136px;
	text-align: center;
}

.hdnav_item li {
	color: #383e45;
	text-decoration: none;
}

/*.hdnav_link-active:hover {
	color: #383e45;
}

 .hdnav_link-active {
	color: #383e45;
} */

.btn-menu {
	display: none;}

/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
.mv {
	width: 1280px;
	height: 450px;
	margin: 0 auto;
	background-color: #fff1c878;
		border-radius: 60px;
}

.kv{
	padding-top: 150px;
}

.kv p{
	font-family: fantasy;
	font-size: 110px;
	color: #4a3f3b;
	text-align: center;
	margin: 0;
}

/*--------------------------------
ニュース
---------------------------------*/
.news{
	width:860px;
	margin: 30px auto;
	background-color: #fff;
	background-size: cover;
}

.news .container{
	border: 3px solid #ffb020;
		border-radius: 30px;
	padding: 10px;
}

.news_inner {
	display: flex;
	flex-direction: column;
	/* column-gap: 90px; */
}

.news_heading{
	margin: 0 40px;
	padding: 20px 0;
}

.news_heading h2{
	margin: 0;
	padding: 0;
}

.news_body {
	flex: 1;
}

.news_list ul{
	padding: 0;
}

.news_list .link {
	text-decoration: underline;
}

.news_list_item {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e8e8e8;
}

.news_list_item:last-child {
	margin-bottom: 0;
}

.news_list_title {
	font-size: 15px;
	line-height: 1.8;
}

.news_list_date {
	margin-right: 20px;
}

.instagram_url a{
	display:flex
}

.instagram_url .instagram_icon{
	width: 30px;
    margin-right: 1%;
}

.news_history{
	margin: 0 auto;
}

.news_history_link{
	color: #4a3f3b;
}


/*-------------------------------------------
Art
-------------------------------------------*/
.art{
	width: 1280px;
	background-color: #fffcf3;
	background-size: contain;
		border-radius: 30px;
	margin: 30px auto;
}

.art .title{
	text-align: center;
}

.insta_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 20px 0;
	padding: 20px 0;
}

.insta_list li{
	position: relative;
	width: 400px;
}

.insta_list li::before{
	content: "";
	display: block;
	padding-top: 100%;
}

.insta_list a{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.insta_list img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.insta_btn{
	background-color: #4a3f3b;
	padding: .5em 1em;
	width: fit-content;
	margin: 0 auto;
	cursor: pointer;
	transition: .3s
}

.insta_btn a{
	color: #fff;
	text-decoration: none;
}
.insta_btn:hover{
	background-color: #999;
}

/*-------------------------------------------
About
-------------------------------------------*/
.about{
	width: 1280px;
	background-color: #fffcf3;
    background-size: contain;
    background-position: center;
    	border-radius: 4px;
}

.about .title{
	padding-left: 40px;
}

.profile{
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.profile-text{
	width: 600px;
	padding: 20px
}

.profile-img {
	width: 100px;
	height: 100px;
	margin-right: 30px;
}

.profile-img img{
	border-radius: 50%;
}

.profile-text .text-title, .profile-text .profile-detail{
	margin: 15px 10px;
}

.history{
	width: 650px;
	padding: 20px;
}

.history h4{
	margin: 0;
}

.history ul{
	padding: 0;
}

.history .history_year{
list-style:inside;
}

/*-------------------------------------------
footer
-------------------------------------------*/
.footer {
	padding: 10px 0;
	text-align: center;
}

.footer p {
	font-size: 10px
}

/*-------------------------------------------
お問い合わせ
-------------------------------------------*/
.information{
	background-color: #4a3f3b;
	color: #ffff;
	margin: 0 auto;
}

.information p{
	font-size: 16px
}

.information .container{
	padding: 10px;
}

.information_inner{
	width: 800px;
	margin: 0 auto;
}

.information_heading{
	text-align: center;
}

.information_body{
	margin: 0 auto;
	width: 630px;
}

	.information_body p{
		color: #ffff;
		margin: 14px;
	}

.info_form{
	width: 200px;
	margin: 0 auto;
	background-color: #ffff;
	text-align: center;
	border-radius: 4px;	
}

.info_form a{
	color: #4a3f3b
}

.riena_insta{
	width: 300px;
	margin: 0 auto;
	background-color: #ffff;
	text-align: center;
		border-radius: 4px;	
}

#popup {
	display: none; /* label でコントロールするので input は非表示に */
}

.popup-open {
    line-height: 1.6;
    display: inline-block;
    background: -webkit-linear-gradient(30deg,#065ef6,#bc65dc,#eb5234);
    -webkit-background-clip: text;/*背景をテキストでマスクする*/
    -webkit-text-fill-color: transparent;
    position: relative;
	cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

.popup-overlay {
	display: none; /* input にチェックが入るまでは非表示に */
}

#popup:checked ~ .popup-overlay {
	display: block;
	z-index: 99999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.popup-window {
	width: 90vw;
	max-width: 560px;
	padding: 20px;
	background-color: #ffffff;
	border-radius: 6px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup-text {
	margin: 0;
}

.popup-text:not(:last-of-type) {
	margin-bottom: 1em
}

.popup-close {
	cursor: pointer;
	position: absolute;
	top: -26px;
	right: 0;
}

/*-------------------------------------------
スマホ版
-------------------------------------------*/
@media screen and (max-width: 768px) {

	html{
	max-width: 768px !important;
	margin: 0 auto;
	}
	

	img{
	/* SPの長押し禁止 */
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	user-select:none;
}



/*-------------------------------------------
ヘッダー
-------------------------------------------*/
	.header {
		position: relative;
		width: 100%;
		height: 12vw;
	}

	.header .site-title{
		width: 100%;
	}

	.header .site-title a{
		width: 100%;
		heught: 100%;
	}

	.header .site-title img {
		width: 70vw;
		height: 100%;
	}

	.hdnav {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10;
		width: 40vw;
		/* height: 70vw; */
		background-color: #806f4efa;
		box-shadow: calc((-10/750)*100vw) 0 calc((35/750)*100vw) calc((-20/750)*100vw) rgb(0 0 0 / 25%);
	}

	.hdnav_list {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* width: 210vw; */
		margin: 15vw 0 10vw;
		padding: 0 2vw;
		row-gap: 25px;
	}

	.hdnav_list a{
		color: #ffff;
	}

	.hdnav_item a:hover {
		opacity: 0.6;
	}

	.btn-menu {
		display: flex;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 100;
		align-items: center;
		justify-content: center;
		width: 11vw;
		height: 11vw;
		text-align: center;
		border: none;
		outline: none;
		background: none;
		background-color: #ffffff00;
		cursor: pointer;
		appearance: none;
	}

	.btn-menu_line {
		display: block;
		position: relative;
		left: 0;
		width: 100%;
		height: 3px;
		transition: all 0.4s;
		border-radius: 4px;
		background-color: #4a3f3b;
	}

	.btn-menu_line::before,
	.btn-menu_line::after {
		display: block;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		transition: inherit;
		border-radius: calc((4/750)*100vw);
		background-color: #383e45;
	}

	.btn-menu_line::before {
		top: calc((-16/750)*100vw);
	}

	.btn-menu_line::after {
		top: calc((15/750)*100vw)
	}

	.btn-menu.active .btn-menu_line {
		background-color: transparent;
	}

	.btn-menu.active .btn-menu_line::before,
	.btn-menu.active .btn-menu_line::after {
		top: 0;
		background-color: #383e45;
	}

	.btn-menu.active .btn-menu_line::before {
		transform: rotate(45deg);
	}

	.btn-menu.active .btn-menu_line::after {
		transform: rotate(-45deg);
	}
	

	/*-------------------------------------------
	メインビジュアル
	-------------------------------------------*/
	.mv {
		width: calc((700/750)*100vw);
		height: calc((300/750)*100vw);;
	}

	.kv{
		padding-top: calc((95/750)*100vw);
	}

	.kv p{
		font-size: calc((65/750)*100vw);
	}

	/*--------------------------------
	ニュース
	---------------------------------*/
	.news{
		width:calc((700/750)*100vw);
		padding-top: calc((40/750)*100vw);
	}

	.news_body{
		width: calc((580/750)*100vw);
		margin: 0 auto;
	}
	
	.news_list_title a{
		color: #4a3f3b;
	}
	.news_history{
		margin: 0 auto;
	}

	.news_history_link{
		color: #4a3f3b;
	}

	/*-------------------------------------------
	Art
	-------------------------------------------*/
	.art{
		width: calc((700/750)*100vw);
		margin: calc((30/750)*100vw) auto;
	}

	.insta_list{
		margin: 0;
		padding: 0;
	}

	.insta_list li{
		position: relative;
		width: calc((300/750)*100vw);
	}

	.insta_btn{
		margin: calc((10/750)*100vw) auto;
	}

	/*-------------------------------------------
	About
	-------------------------------------------*/
	.about{
		width: calc((700/750)*100vw);
	}

	.title{
		padding: calc((20/750)*100vw) 0;
		text-align: center;
	}

	.profile {
		flex-direction: column;
		gap: calc((25/750)*100vw);
		justify-content: center; 
	}

	.profile-text {
		width: calc((600/750)*100vw);
		padding: calc((20/750)*100vw);
	}

	.history{
		width: calc((600/750)*100vw)
	}

	/*-------------------------------------------
	お問い合わせ
	-------------------------------------------*/
	.information {
		width: calc((750/750)*100vw);
		padding-top: calc((40/750)*100vw);
	}

	.information_inner{
		width: calc((700/750)*100vw);
	}

	.information_body {
		margin: 0 auto;
		width: calc((700/750)*100vw);
	}

.popup-window .instagram_comennte p{
		font-size: 13px;
}


	#popup:checked ~ .popup-overlay{
		height: 60vh;
		top: 20%;
	}

	.popup-window {
		max-width: calc((485/750)*100vw);
	}

	/*-------------------------------------------
	footer
	-------------------------------------------*/
	.footer {
		font-size: 0.8rem;
	}
}