@charset "utf-8";


body{
  
    margin:0;
    color:#304057; /*--#333333---*/
	list-style: none;
    background-color: #f5f5f0;
}
.color-g{
  color: #e6dcad;
}
a{
    color:#304057;
}
h3{
    margin:0.5vh auto;
}
.logo {
  font-size: 20rem;
}
.center{
 text-align: center;
}
.left{
 text-align: left;
}

.right{
	text-align: right;
}
.bold{
 font-weight: bold;
}
.t-none{
 text-decoration: none;
 color:#333333;
}
.margin0 p{
  margin:0;
}
.margin0{
  margin:0;
}

.flex{
  display: flex;
  justify-content: center;
  align-items: center;
} 
main{
  width: 100vw;
}
/*--------------------home-------------------------*/

.br-logo-container {
  font-family: 'Playfair Display', serif;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #304057;
}

.br-logo {
  font-weight: 700;
  display: flex;
  align-items: center;
}

.br-bar {
  border-left: 5px solid #e6dcad;
  height: 50%;
  margin-right: 20px;
}

.br-subtitle {
  font-size: 1.4rem;
  margin-top: -20px;
  letter-spacing: 0.5px;
}




header{
    width: 100%;
    position:fixed;
}
.flex-header > div > a {
  font-size:2rem;
}
.space{
  height:5vh;
}
.color-1{
  background-color: #304057;
}
.color-1-font{
  color: #ededed;;
}

article{
  width:100vw
}
section{
  padding:0vh 5vw;
}
.main-1{
  padding:0vw 0vw; /*--padding:0vw 0vw;---*/
}
.section-inside{
  margin:7vh 0vw;
}




.flex-mail{
  margin: 2vh 0vw;
}
.footer-flex{
    display: flex;
    justify-content: space-around;
}
footer{
    position: fixed;
    height:5vh+5vw;
    left: 0;
    bottom: 0;
    width: 100%;
}
.footer-font{
  font-size: 1.5rem;
}

.flame-1 {
  padding: 0.5em 1em;
  margin: 1em 0;
  margin-bottom: 5vh;
  border: solid 1.5px #304057;
}
.flame-1 p {
  margin: 0; 
  padding: 0;
}
.flame-2 {
  padding: 0.5em 0.5em;
  margin: 1em 0;
  margin-bottom: 5vh;
  border: solid 1.5px #304057;
}
.flame-2 p {
  margin: 0; 
  padding: 0;
  
}

.flex-mail a {
  color: #333; /* 落ち着いた色 */
  display: flex;
  align-items: center; /* アイコンとテキストを中央揃え */
}

.flex-mail a i {
  margin-right: 8px; /* アイコンとテキストの間隔 */
  color: #555; /* 少しグレーに */
}
.underline{
  text-decoration: underline;
  text-decoration-color: #304057; /* アンダーラインの色 */
  text-decoration-thickness: 1px; /* アンダーラインの太さ */
}


.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2em;
  font-family: sans-serif;
}
.custom-table th,
.custom-table td {
  border: 1px solid #aaa;
  padding: 2.5px;
  text-align: center;
}
.custom-table th {
  background-color: #333;
  color: white;
}
.baroque {
  background-color: #e45587;
  color: white;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
}
.romantic {
  background-color: #e89e3a;
  color: white;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
}
.classical {
  background-color: #2b64a5;
  color: white;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
}
.custom-table a {
  color: inherit;
}

/*--------------------img-------------------------*/

.container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.img-container {
  width: 12.5vw;
  height: 12.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-container img {
  width: 100%;
  height: 100%;
}
#main-1-img1 { transform: rotate(0deg); }
#main-1-img2 { transform: rotate(90deg); }
#main-1-img3 { transform: rotate(180deg); }
#main-1-img4 { transform: rotate(270deg); }
/*--------------------home-------------------------*/

@media (min-width: 768px) and (max-width: 1024px) {
  .show{
    display: block;
  }
  .logo {
    font-size: 30rem;
  }
  .br-subtitle {
    font-size: 3rem;
  }
  .flex-rp{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section{
    padding: 3vw 10vw;
  }
  .section-inside{
    margin:5vh 0vw;
  }
  .oubo-flex{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .flame-2{
    margin: 0.5vh;
  }
  .category{
    display:flex;
    justify-content: space-around;
  }
.custom-table {
  width: 35vw;
}

  .mail-flex{
    display: flex;
    justify-content: flex-start
    align-items: center;
    flex-wrap: wrap;
  }
  .flex-mail{
    width: 45%;  /* 各アイテムの幅を指定 */
    margin: 10px 2vw;  /* 上下の間隔を少し空ける */
  }
  .ipad-break {
      white-space: pre-line;  /* 改行を反映させる */
      text-align: center;
  }
}

@media screen and (min-width:1025px) {
  .logo {
    font-size: 35rem;
  }
  .br-subtitle {
    font-size: 3rem;
  }
  .flex-rp{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section{
    padding: 0vw 15vw;
  }
  .section-inside{
    margin:10vh 0vw;
  }
  .oubo-flex{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .flame-2{
    margin: 0.75vh;
  }
  .mail-flex{
    display: flex;
    justify-content: flex-start
    align-items: center;
  }
  
  .flex-mail{
    width: 45%;  /* 各アイテムの幅を指定 */
    margin: 10px 2vw;  /* 上下の間隔を少し空ける */
  }
  .ipad-break {
    white-space: pre-line;  /* 改行を反映させる */
    text-align: center;
}
  .img-container {
    width: 7.5vw;
    height: 7.5vw;
  }
}