@charset "utf-8";
/* CSS Document */
.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #ad3871;
  z-index: 555;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader .pic {
  font-size: 45px;
  font-weight: bold;
  color: rgb(30, 50, 93);
  display: none;
}

/*loader*/
*{
	font-family: 'M PLUS 2', sans-serif;
}

strong{
	font-weight: bold;
}

img {
  pointer-events: none;
}

h1{
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	color: #32323F;
}
h1::first-letter {
  color: #AD3871;
}
/*
h1:before, h1:after {
	content: '';
	position: absolute;
	top: 37%;
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50px;
	margin: 0 20px;
	background-color: #32323F;
}

h1:before {
  left:0;
}
h1:after {
  right: 0;
}
*/
#h1s h1{
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	padding: 10px 60px;
	color: #32323F;
	background-color: aliceblue;
	border-radius: 10px;
	filter: drop-shadow(0 5px 1px rgba(64,64,70,0.5));
}
#h1s{
	background-color: hotpink;
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	background:repeating-linear-gradient(
	-45deg,
	#ad3871,
	#ad3871 2px,
	#ECD2DE 0,
	#ECD2DE 29px
	);
	
	margin-bottom: 50px;
}
		
main h2::before {
	content: url("/material/img/flower.svg");
	margin-right: 10px;
	position: relative;
	display: inline-block;
	height: 25px;
	width: 24px;
	top: 4px;
	transform:rotate(20deg);
}
main h2 {
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	padding: 5px 10px;
	border-bottom: 2.5px solid #32323F;
	margin: 15px 15px 25px;
	color: #32323F;
}

footer h2 {
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	margin: 15px;
}

h3{
	font-size: 19px;
	font-weight: bold;
  position: relative;
  display: inline-block;
  padding: 0 30px;
	margin: 30px 30px 5px;
	color: #32323F;
}

h3:before, h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #32323F;
}

h3:before {
  left:0;
}
h3:after {
  right: 0;
}

h4{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}
h5{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}
a{
	display:inline-block
}
main a{
	color: #ad3871;
	transition: .3s;
	display: inline-block;
}

main a:hover{
	color: #DF85B7;
}

p:not(#logo) {
	margin: 0 0 10px;
	font-size: 15px;
	color: #32323F;
}

.btn::after{
  font-family: "Font Awesome 5 Free";
  content: '\f054';/*unicodeを使ってアイコンを挿入*/
  font-size: 16px;/*サイズは自由に変更*/
  font-weight: 900;/*SOLIDは900にしないと表示できない*/
  margin-left: 10px;/*文字との隙間を調整*/
  color: #000;/*色は自由に変更*/
}

.btn {
	display: inline-block;/*文字リンクをボタン化するおまじない*/
	color: #d35995;/*文字の色*/
	font-size: 18px;/*文字サイズ*/
	font-weight: bold; 
	text-align: center;/*メニューの文字を中央揃え*/
	position: relative;
	margin: 20px;
	padding: 15px 25px;
	text-decoration: none;
	background: #F1F1F1;
	transition: .3s;
	border-radius: 30px;
	user-select: none;
}

.btn:hover {
	background: #d35995;
	color: #F1F1F1;
	border-radius: 10px;
	
}

main{
	background-color: rgba(241,241,241,0.95);
	margin: 0 auto 50px;
	padding: 0 0 10px;
}

/*Video*/

body:after {
	mix-blend-mode: color;
	background-color: rgba(194, 147, 170, 1);
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	content: "";
	z-index: -1;
	
	background: linear-gradient(143deg, #cc6396, #B769B6, #FBC2E3, #d9ded8, #cc6396);
    background-size: 1000% 1000%;

    -webkit-animation: AnimationName 54s ease infinite;
    -moz-animation: AnimationName 54s ease infinite;
    -o-animation: AnimationName 54s ease infinite;
    animation: AnimationName 54s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@keyframes AnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}




.video{
  width: 100%;
  height: 100vh;
  background: url("/video/back01.webp") no-repeat center/cover;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
	
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(16, 57, 75, .3);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
/*Video*/

/*main visual*/
.mv {
  position: relative;
  }

.mv #catch {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
  }
.mv h2{
	color: white !important;
	font-size: 35px !important;
	font-weight: bold;
	margin-bottom: 10px;
}
.mv p{
	color: white !important;
}

.mv img {
	/*filter: brightness(80%);*/
	width: 100%;
  }
/*main visual*/

/*flex*/

.column-wrapper {
	width: 85%;
	max-width: 1200px;
	display: flex;
	margin: 0 auto 50px;
	padding: 40px 20px;
	border-radius: 30px;
	background-color:rgba(173,56,113,0.17);
    backdrop-filter: blur(8px);
	justify-content: center;
}
:nth-of-type(even) {
flex-direction: row-reverse;
}
.column1, .column2 {
	flex: 0 1 50%;
	text-align:center;
	
}
.column1 p, .column2 p{
	text-align:left;
	
}
.column1 {
  padding: 0 60px;
  box-sizing: border-box;
}

.column1,.column2{
	display: flex;
	justify-content: center;
	align-items: center
}

.column-wrapper:nth-of-type(2n) .column1:nth-of-type(2){
}

.column2 img {
		margin: 0 auto 15px;
		filter: drop-shadow(5px 5px 5px rgba(64,64,70,0.5));
}

details{
	text-align: left;
}
summary{
	background: #ad3871;
	color: #F1F1F1;
	padding: 5px;
	margin-bottom: 5px;
	border-radius: 10px;
}
details>div{
	background: #F1F1F1;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
}

/*レスポンシブ*/
@media screen and ( max-width:900px ){
  .column-wrapper {
    flex-direction: column;
  }
  .column1, .column2 {
  width: 100%;
}
  .column1 {
  padding: 25px;
}
}
/*レスポンシブ*/
/*flex*/

/*info*/

.infod{
	text-align: center;
	width: 100%;
}
.kiyaku{
	padding: 20px;
}
.te-list{
	padding-left: 1em;
}

#info{
	margin: 0 auto;
	width: 70%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
#info dt, #info dd{
	text-align: center;
	border-bottom: dotted #000;
	margin-top: 10px;
	
}
#info dt{
	border-right: 3px solid #000;
	flex: 0 1 40%;
}
#info dd{
	flex: 0 1 60%;
}
/*info*/

/*footer*/
footer{
	background-color: rgba(171,57,114,0.85);
	text-align: left;
  	padding: 50px 15%;
	color: rgb(241,241,241);
    backdrop-filter: blur(8px);
	margin: 0;

}

#f-info li{
	list-style-type: circle;
	font-size: 14px;
	padding: 7px 0;
}

small{
	font-size: 12px;
	font-weight: bold;
}

#fcal{
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}
		
#fcal a:not(.fnav>li a)::before{
	font-family: "Font Awesome 5 Free";
	content: '\f054';
	font-size: 15px;
	font-weight: 900;
	margin-right: 4px;
	color: #2E302B;
}
		
.fnav{
	flex: 0 1 30%;
	white-space: nowrap;
	margin: 0 0 20px;
}
.fnav-m {
	font-weight: bold;
		}

.fnav a{
	font-size: 14px;
	display: inline-block;/*文字リンクをボタン化するおまじない*/
	color: #EBC1D6;/*文字の色*/
	position: relative;
	transition: .5s;
}

.fnav a:hover{
	color: #F3DFEF;
	transform: translate(1.5px,0px);
}

#social{
	display: flex;
	justify-content: center;
	margin: 0 0 30px;
}

#social *{
	margin: 0 10px;
}

#social a{
	vertical-align: middle;
	display: inline-block;
	color: #F1F1F1;
	margin: auto 0;
}
#social a:hover{
	color: #F0C8DC;
}

/*footer*/


/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="f-flex"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.flex-child { 
	margin-bottom: 30px; 
	text-align: center;
	transition: .3s;
	
}
.banner{
	transition: .5s;
}

.banner:hover{
	filter: brightness(130%);
}

/*sorry*/

.sorrymsby {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin-bottom: 25px;
}
.sorry {
	position: relative;
	display: inline-block;
	font-size: 25px;
	font-weight: bold; 
	vertical-align: top;
	margin: 1.5em 0;
	padding: 10px 30px;
	min-width: 120px;
	max-width: 100%;
	color: #2E302B;
	background: #F0ECF0;
	border-radius: 10px;
}
.sorry:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 15px solid #F0ECF0;
}
.sorry p {
	margin: 0;
	padding: 0;
}
.sorry {
    animation-name: sfw;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

@keyframes sfw {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}
.sorry img{
	margin: 0
}
f-flex::after,
.f-flex .flex-child { width: calc( (100% - 20px) / 3 ); }


@media screen and (max-width: 900px) {
	.f-flex .flex-child {
		width: calc( (100% - 10px) / 1 );
	}
}

@media screen and (max-width: 575px) {
	.f-flex .flex-child {
		width: 100%;
	}
}

/*footer*/

#pagetop img{
    animation-name: fry;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
	filter: brightness(100%);
	transition: 1.0s ;
	width: 75%;
}
@keyframes fry {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-5px)
    }
}
#pagetop img:hover{
	filter: brightness(150%);
}

#pagetop {
    position: fixed;
    bottom: 30px;
    right: 0px;
}
#pagetop a {
    text-align: center;
    text-decoration: none;
    padding: 3px  3px;
	border-radius: 50%;
}
#pagetop a:hover {
    text-decoration: none;
}