@charset "utf-8";

:root {
  --primary-Black: #121212;
  --primary-White: #FFF9EE;
  --primary-Red: #F9344C;
  --primary-Blue: #386CB0;
  --primary-yellow: #FFF231;
  --primary-Green: #33A65E;
  --contentWidth: 84%;
  --contentPadding: 4.2%;
}


#photoDisplay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%!important;
  height: 100%;
  background: rgba(0,0,0,0.45);
}

#photoDisplay img {
    border-radius: 10px;
    border-radius: 10px;
    background-color: #FFF9EE;
    border: 5px solid #121212;
    position: absolute;
    padding: 25px 15px 135px 15px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: 92%;
}

/* ======================================= */
#videoDisplay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%!important;
  height: 100%;
  background: rgba(0,0,0,0.45);
}

#videoDisplay video {
    border-radius: 10px;
    border-radius: 10px;
    background-color: #FFF9EE;
    border: 5px solid #121212;
    position: absolute;
    padding: 25px 15px 135px 15px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: 92%;
}



/* ================================== */

.modal {
  display: none;
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}




/* ================モーダルウィンドウのカラー別実装================== */


.modal-content {
    border-radius: 10px;
    padding: 25px 15px;
    position: fixed;
    top: 15%;
    left: 3%;
    max-width: 94vw;
    height: 110vw;
    background-color: #FFF9EE;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
    animation-name: modalopen;
    animation-duration: 0.6s;
}

.modal-red,
.modal-wred {
  border: 5px solid var(--primary-Red);
}

.modal-green {
  border: 5px solid var(--primary-Green);
}

.modal-blue {
  border: 5px solid var(--primary-Blue);
}

.modal-white {
  border: 5px solid var(--primary-White);
}

.modal-black {
  border: 5px solid var(--primary-Black);
}

.modal-yellow {
  border: 5px solid var(--primary-yellow);
}

/* ================モーダルウィンドウの外枠カラー別実装================== */
#framebox__item {
  position: relative;
  overflow: hidden;
}

#framebox__item video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 半透明の枠を擬似要素で重ねる */
.framebox__item__red::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 15px solid rgba(249, 52, 76, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}


.framebox__item__yellow::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 15px solid rgba(255, 242, 49, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}

.framebox__item__green::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 15px solid rgba(49, 255, 107, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}

.framebox__item__blue::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 15px solid rgba(56, 108, 176, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}


.framebox__item__white::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 15px solid rgba(255, 249, 238, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}


.framebox__item__black::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 15px solid rgba(18, 18, 18, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}





/* ==============more============== */
.framebox__item__redsub::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 5px solid rgba(249, 52, 76, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}

.framebox__item__yellowsub::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 5px solid rgba(255, 242, 49, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}

.framebox__item__greensub::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 5px solid rgba(49, 255, 107, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}

.framebox__item__bluesub::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 5px solid rgba(56, 108, 176, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}


.framebox__item__whitesub::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 5px solid rgba(255, 249, 238, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}


.framebox__item__blacksub::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 5px solid rgba(18, 18, 18, 0.30); /* 半透明の青い枠 */
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: 2;
  border-radius: 5px; /* 任意で角丸 */
}




#modal33Open,
#modal31Openm {
  border: 15px solid var(--primary-Black);
}







#modal33Open,
#modal31Openm {
  border: 5px solid var(--primary-Black);
}







/* ================モーダルウィンドウの内枠カラー別実装================== */
.modal-content__mod {
    border-radius: 10px;
    padding: 25px 15px;
    position: fixed;
    top: 15%;
    left: 3%;
    max-width: 94vw;
    height: 84vw;
    background-color: #FFF9EE;
    border: 5px solid var(--primary-Green);
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
    animation-name: modalopen;
    animation-duration: 0.6s;
}

@keyframes modalopen {
  from {opacity: 0}
  to {opacity: 1}
}

.modal-header h1 {
  margin: 1rem 0;
}


.modalClose:hover {
  cursor: pointer;
}

.modal-body {
  margin-top: 30px;
}

.dfkokoko {
    align-items: end;
    gap: 9px;
    display: flex;
}

.sdfifhdsiodfaos img{
  max-width: 100%;
}

.kokodfsio {
color: var(--primary-Black);
font-family: "BIZ UDPGothic";
font-size: 2rem;
}

.owjreo {
font-family: Montserrat;
font-size: 1.2rem;
font-weight: 500;
line-height: 150%;
}



.owjreo__red,
.otoa__red {
  color: var(--primary-Red);
}

.owjreo__yellow,
.otoa__yellow {
  color: var(--primary-yellow);
  -webkit-text-stroke-width: 0.02em;
  -webkit-text-stroke-color: black;
}


.owjreo__Black,
.otoa__Black {
  color: var(--primary-Black);
}


.owjreo__blue,
.otoa__blue {
  color: var(--primary-Blue);
}

.owjreo__green,
.otoa__green {
  color: var(--primary-Green);
}










.otoa {
margin-left: 10px;
font-family: "BIZ UDPGothic";
font-size: 0.8rem;
font-weight: 700;
line-height: 150%;
letter-spacing: 8px;
}


.sdfaogh {
    margin-top: 20px;
    color: var(--primary-Black);
    font-family: "BIZ UDPGothic";
    font-size: 1.6rem;
    letter-spacing: 16px;
}

.modalClose, .modal2Close, .modal4Close,
.modal5Close, .modal6Close, .modal7Close,
.modal8Close, .modal9Close, .modal10Close,
.modal11Close, .modal12Close, .modal13Close,
.modal14Close, .modal15Close, .modal16Close,
.modal17Close, .modal18Close, .modal19Close,
.modal20Close, .modal21Close, .modal30Close,
.modal31Close, .modal32Close, .modal33Close,
.modal34Close, .modal35Close, .modal36Close,
.modal1Close, .modal3Close {
    position: absolute;
    right: 15px;
    margin-top: 20px;
    width: 73px;
    display: flex;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    box-shadow: 2px 5px 5px 0px rgba(0, 0, 0, 0.65);
    border-radius: 40px;
    border: 1.5px solid #000;
}



.closeIonoa{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.fdmsolkokk {
font-family: Montserrat;
font-size: 1rem;
font-weight: 700;
line-height: 100%;
}

.tinnoo {
font-family: "BIZ UDPGothic";
font-size: 0.4rem;
font-weight: 700;
line-height: 150%; /* 6px */
letter-spacing: 4px;
}


/*********************************************************************/
/*********************************************************************/
/******************************* media *******************************/
/*********************************************************************/
@media screen and (min-width: 769px) {
  .modal-content {
    left: 44%;
    top: 5%;
    max-width: 54vw;
    height: 45vw;
  }

.modal-content__mod {
    top: 15%;
    left: 44%;
    max-width: 54vw;
    height: 45vw;
}


}