@charset "UTF-8";
#open,#login {
    position: fixed;
    top:.1rem;
    right:.1rem;
    
    border-radius: 50%;
    /*角丸*/
    background-color: #A1796C;
    /*最前面に*/
    z-index: 9001;
    display: flex;
    text-align: center;
    justify-content: center;
    visibility: visible;
    color:white;
    width: 3.5rem;
    height: 3.5rem;
    font-size:1rem;
}

header span.text{
	font-size:1rem;
	align-items: center;
}
@media only screen and (max-width : 750px){
	header span.text{
		font-size:.6rem;
	}
}
#login {
    position: fixed;
    top:.1rem;
    right: 4rem;
}
header img{
	max-width: 80%;
	    margin: 0 auto;
}
#login a{
	display: flex;
	 justify-content: center;
	 align-items: center;

	 flex-direction: column; 
}

#open.down {
    bottom: 5px;
    top: unset;
}

#open.up,#login {
    top: 5px;
}


@media only screen and (min-width : 751px){
	#open,#login{
	width: 5rem;
    height: 5rem;
    line-height: 5rem;
    font-size:1.5rem;
	}
	
	#login {
    right: 6rem;
}
	
}

#open p {
    font-size: 15px;
    color:#A1796C;
    margin-block-start: 0;
    margin-block-end: 0;
   /* font-family: 'Playfair Display', 'M PLUS Rounded 1c', sans-seif;*/
}

#close {
    position: fixed;
    width:100%;
    height: 100vh;
    visibility: hidden;
    background-color: #A1796C;
    z-index: 9001;
    overflow: scroll;
    bottom: -1px;


}

#close > * {
  max-width: 100%;
  box-sizing: border-box;
}
header .close label{
	height: 40%;
}

#close.fade_in {
  visibility: visible;
  animation: shape-slide-in 0.3s ease-out forwards;
}

@keyframes shape-slide-in {
  0% {
    transform: translate(100%, -100%);
    opacity: 0;
    border-radius: 50%;
    visibility: hidden;
  }
  50% {
    transform: translate(50%, -50%);
    opacity: 0.5;
    border-radius: 25%;
    visibility: visible;
  }
  100% {
    transform: translate(0%, 0%);
    opacity: 1;
    border-radius: 4px;
    visibility: visible;
  }
}
#close.fade_out {
  animation: shape-slide-out 0.3s ease-in forwards;
}
@keyframes shape-slide-out {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
    border-radius: 4px;
    visibility: visible;
  }
  50% {
    transform: translate(50%, -50%);
    opacity: 0.5;
    border-radius: 25%;
  }
  100% {
    transform: translate(100%, -100%);
    opacity: 0;
    border-radius: 50%;
    visibility: hidden;
  }
}
/*
これだと右下に消える
@keyframes diagonal-slide-out {*/
/*  0% {*/
/*    transform: translate(0%, 0%);*/
/*    opacity: 1;*/
/*    visibility: visible;*/
/*  }*/
/*  50% {*/
/*    transform: translate(50%, 50%);*/
/*    opacity: 0.5;*/
/*  }*/
/*  100% {*/
/*    transform: translate(100%, 100%);*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*  }*/
/*}*/

.switch {
    display: none;
}

header .close {
    position: relative;
    top: 10px;
    color: white;
    box-sizing: border-box;
    right: 15px;
    font-size: 3rem;
    text-align: right;
    font-weight:bold;
    height:10%;
}

.main {
    height: 85%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 15% 0;
}

.main a ,
.main .q_list{
    font-size: 20px;
    color: white;
    text-decoration: none;
}

.accordion-button-color{
	background-color: #A1796C;
	color:white;
	font-size: 1rem;
	width:100%;
	padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
	border:0;
	align-items:center;
	text-align:left;
}


.accordion-body{
	background-color: #A1796C;
}

header label{
	/*width:100%;*/
	height: 90%;
	line-height: 1rem;
	display: flex;
	    flex-direction: column;
	    justify-content: center;
}

header .image img{
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width : 750px){
  header .image img { width: 2rem; }
  
  .close {font-size: 2rem;}
}
header .small{
    font-size: 0.8rem;
}
.image p {
    width: 100%;
    height: 100%;
}



hr{
	opacity:1;
	height: 0.02rem;
	margin:0;
	background-color:white;
	border: none;
}

div.col-3{
  padding: 0.5rem;
}
div.col-3 a{
	color: white;
  text-decoration: none;
	border-bottom: 2px dotted white;
}

#login a{
	text-decoration: none;
	color:white;
}

.collapse {
  display: none;
  transition: height 0.35s ease;
}

.collapse.show {
  display: block;
  height: auto;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.accordion-flush {
  border-top: 1px solid #ddd;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  padding: 1rem;
  font-weight: bold;
  background-color: transparent;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.accordion-header::-webkit-details-marker {
  display: none;
}

.accordion-body {
  padding: 1rem;/*
  background-color: #f9f9f9;
  border-top: 1px solid #eee;*/
}

.accordion-flush {
  border-top: 1px solid #ddd;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  margin: 0;
}

.accordion-button {
  width: 100%;
  background-color: transparent;
  border: none;
  text-align: left;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.accordion-item:hover:has(.accordion-button) {
  /* background-color: #f0f0f0; お好みの色 */
  }
.accordion-button.collapsed::after {
  content: '+';
  float: right;
  font-size: 1.5rem;
}

.accordion-button:not(.collapsed)::after {
  content: '−';
  float: right;
  font-size: 1.5rem;
}
.accordion-body.row{
	display: flex;
	  flex-wrap: wrap;
	  gap: 1rem;
}

.accordion-body.row .col-3{
  flex: 0 0 calc(33.333% - 1rem); /* 3つ分割 */
  /*background-color: #f5f5f5;border: 1px solid #ddd;border-radius: 6px;*/
  padding: 1rem;
  box-sizing: border-box;
}