@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&family=Zen+Old+Mincho:wght@500&display=swap');

/*infoエリアをはじめは非表示*/
#cae{
	display: none;
}
h2.modaaltitle{
	font-size:24px;
	color:#fff;
	font-family: 'Zen Old Mincho', serif;
	line-height:1.5;
	text-shadow:0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;
}
@media only screen and (max-width: 767px) {
	h2.modaaltitle{
		font-size:22px;
	}
	.sp_none {
		display:none;
	}
	p.modaalcoment.small{
		font-size:0.9em;
	}
}
p.modaalcoment{
	color:#fff;
	font-family: 'Zen Old Mincho', serif;
	text-shadow:0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;
}

/*
 * 角度の値を保持するCSS変数を定義
 * 対応ブラウザ: https://caniuse.com/?search=%40property
 */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.buttonOutlineGlow {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
  height: 32px;
  padding: 2px;
  font-family: sans-serif;
  font-size: 16px;
  color: #fff;
  text-align: center;
  overflow-wrap: anywhere;
  background-color: #939393;
  border-radius: 16px; /* (buttonの高さ / 2) の値 */
	text-decoration: none;
	font-family: 'Zen Old Mincho', serif;
	margin-top:16px;
}

.buttonOutlineGlow_bg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: conic-gradient(from var(--angle), #222, #939393, #222, #939393, #222);
  border-radius: 32px; /* (buttonの高さ / 2) の値 */
  opacity: 0;
  animation: gradient-spin 3s linear 0s infinite;
}

@keyframes gradient-spin {
  0% {
    --angle: 0deg;
  }

  100% {
    --angle: 360deg;
  }
}

.buttonOutlineGlow_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #222;
  border-radius: 32px; /* (buttonの高さ / 2) の値 */
}

@media (any-hover: hover) {
  .buttonOutlineGlow .buttonOutlineGlow_bg {
    transition: opacity 0.3s;
  }

  .buttonOutlineGlow:hover {
    background-color: #939393;
  }

  .buttonOutlineGlow:hover .buttonOutlineGlow_bg {
    opacity: 1;
  }
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
		min-height:30vh;
		background: url(img/cont01_bg01_pc.jpg) center bottom no-repeat;
    background-size: cover;
		text-align:center;
}
@media only screen and (max-width: 767px) {
	.modaal-container{
		min-height:40vh;
	}
}

.modaal-close {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #fff;
	cursor: pointer;
	opacity: 1;
	width: 30px;
	height: 30px;
	background: rgba(0, 0, 0, 0);
	border-radius: 100%;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before{
	background:#eee;
	top: 5px;
	left: 13px;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#ddd;

}