/**********↓CSS変数↓**********/
:root {
    --color_main2:#8D1BF7;
    --color_dark:#222222;
}
/**********↑CSS変数↑**********/
html{scroll-behavior: smooth;}

/**********↓ヘッダー↓**********/
/*ナビゲーション*/
#oshikoiheader_menu_container {
    margin:0;
    position:fixed;
    top:0;
    right:-250px;
    width:250px;
    height:100%;
    z-index:1;
    background:var(--color_dark);
    color:#FFFFFF;
    transition:0.5s ease;
    z-index:100;
}

#oshikoiheader_menu_container.open {
    top:0;
    right:0;
    visibility:visible;
}

#oshikoiheader_menu{
    position:fixed;
    top:60px;
    right:-250px;
    width:250px;
    transition:0.5s;
}

#oshikoiheader_menu_container.open #oshikoiheader_menu{
    right:0px;
}

nav {
    margin:0px auto;
    width:100%;
} 

#oshikoinav_list {
    margin-top:0px;
}

#oshikoinav_list li{
    margin:0;
    padding:10px;
    font-weight:900;
    text-align:left;
    vertical-align:middle;
}

.nav_list_item_eng {
    font-size:0.875rem;
    color:var(--color_main);
    font-weight:normal;
}

.oshikoinav_sns_link{
    padding:0 10px;
    font-weight:900;
    text-align:left;
    vertical-align:middle;
}

.sns_link_container{
    padding:10px;
}

.sns_logo{
    width:40px;
    height:40px;
}

.sns_id{
    padding-left:10px;
}

#oshikoiheader_menu_togglebutton {
    position:fixed;
    top:0;
    right:0;
    width: 60px;
    height: 60px;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    background:var(--color_dark);
    color:#FFFFFF;
    padding-top:15px;
    z-index:100;
    font-size:10px;
    font-family:"M PLUS 1";
    font-weight:600;
    cursor: pointer;
    transition:0.5s ease;
}

#oshikoiheader_menu_togglebutton.open{
    right:249px;
}

#oshikoiheader_menu_togglebutton div{
    margin:0 auto;
    width: 30px;
    height: 2px;
    background-color:#FFFFFF;
    transition: transform .5s, opacity .5s;
}

#oshikoiheader_menu_togglebutton div:nth-child(4) {
    height:16px;
    background-color:initial;
    position:relative;
}

#oshikoiheader_menu_togglebutton div:nth-child(4)::after {
    position:absolute;
    content:"MENU";
}

#oshikoiheader_menu_togglebutton.open div:nth-child(4)::after {
    position:absolute;
    content:"CLOSE";
}

#oshikoiheader_menu_togglebutton.open div:nth-child(1) {
    transform: translateY(10px) rotate(-225deg);
}

#oshikoiheader_menu_togglebutton.open div:nth-child(2) {
    opacity: 0;
}

#oshikoiheader_menu_togglebutton.open div:nth-child(3) {
    transform: translateY(-5px) rotate(225deg);
}
/**********↑ヘッダー↑**********/
/**********↓メイン↓**********/
main {
    margin-top:0px;
    font-family:"M PLUS 1" ;
    font-weight:600;
    overflow:hidden;
}

/**********↓メインビジュアル↓**********/
/*共通*/
#mainvisual {
    width:100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top right;
    display:flex;
    justify-content:center;
    background-color: #ffffff;
}

/*スマホ向け*/
.pconly{
    display:none;    
}

.mobileonly{
    display:revert;
}

#mainvisual {
    aspect-ratio:8/11;
    background-image:url("../img/oshikoi_mv_mobile.webp");
}


#mainvisual_text {
    width:100%;
    background:var(--color_dark);
    padding-bottom:20px;
    text-align : center
}

.mainvisual_textimg {
    width:90%;
    max-width:1000px;
}

/**********↑メインビジュアル↑**********/
.oshikoisection_wraper{
    width:100%;
}

.oshikoisection_container{
    width:var(--container_width);
    max-width:var(--container_max-width);
    margin:0 auto;
}

.oshikoisection_titlearea{
    display:flex;
    justify-content:center;
    font-weight:900;
    color:#FFFFFF;
}

.oshikoisection_title {
    position:relative;
    margin:10px 0 40px 0;
    padding:0px 40px;
    display:inline-block;
    font-size:3rem;
}

.oshikoisection_title:before {
    /*背景用*/
    position:absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(90deg,var(--color_main) 0%, #F71F1B 100%);
    z-index:-1;
}

.oshikoisection_title:after {
    /*日本語タイトル用*/
    position:absolute;
    font-size:1.4rem;
    bottom:-1.5rem;
    right:0;
    content:attr(data-text);
    background:var(--color_dark);
    padding:0px 20px;
    clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}

/*↓イベント情報用↓*/
.eventlistitem_container{
    margin-bottom:50px;
}

.eventlistitem_hedding{
    margin:0;
    padding:0 10px ;
    font-weight:900;
    font-size:25px;
    display:inline-block;
    color:#FFFFFF;
    border-bottom:none;
    position:relative;
}

.eventlistitem_hedding:before{
    content:"";
    position:absolute;
    background:var(--color_dark);
    left:0;
    bottom:-1px;
    width:110%;
    height:100%;
    z-index:-1;
    clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
}

.eventlistitem_info_container{
    width:100%;
    background:white;
    color:var(--textcolor_dark);
    border:var(--color_dark) solid;
}

.eventlistitem_img{
    width:100%;
}


.eventlistitem_dl {
  width: 100%;
  margin: 0 auto;
  padding: 10px ;
}

.eventlistitem_dt {
  font-weight: bold;
  background-color:var(--color_main);
  color:#FFFFFF;
  padding: 0.3em 0.5em;
  border-radius: 3px;
  margin-bottom: 0.5em;
  display: inline-block;
}

.eventlistitem_dd {
  margin-left: 0;
  padding-left: 1em;
  margin-bottom: 1em;
  border-left: 3px solid #999999;
}

.material-symbols.woman {
  color:var(--gendercolor_woman);
}

.material-symbols.man {
  color:var(--gendercolor_man);
}

.material-symbols::before {
  font-family: "Material Symbols Outlined";
  content:  attr(data-text)"";
}

.reservebutton_area{
    width:100%;
    display:flex;
    justify-content:space-between;
}

.reservebutton{
    margin:10px auto;
    width:40%;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:5px;
}

.reservebutton.man{
    background-color:var(--gendercolor_man);
    color:var(--textcolor_light);
}

.reservebutton.man:hover{
    background-color:var(--bgcolor_secondary);
    color:var(--gendercolor_man);
    
}

.reservebutton.woman{
    background-color:var(--gendercolor_woman);
    color:var(--textcolor_light);
}

.reservebutton.woman:hover{
    background-color:var(--bgcolor_secondary);
    color:var(--gendercolor_woman);
}

.reservebutton.locked{
    background-color:var(--bgcolor_locked);
}
/*↑イベント情報↑*/



.oshikoisection_titlesub{
    position:relative;
    margin:15px auto 0 auto ;
    font-weight:900;
    max-width:600px;
    width:100%;
    aspect-ratio:10/3;
    height:165px;
}

/*最小320px、最大1000pxと仮定*/
.oshikoisection_titlesub_item{
    position:absolute;
    font-size:clamp(2.5rem, 0.357rem + 10.71vw, 4.375rem);/*最小:横幅320pxで40px 最大:横幅550pxで70px*/
}

.strongtext{
    font-size:1.3em;
}

.oshikoisection_titlesub_item:nth-of-type(1){
    top:0;
    left:0;
    transform:rotate(-7deg);
    z-index:2;
}

.oshikoisection_titlesub_item:nth-of-type(1):before{
    position:absolute;
    content:"";
    background:#F71BF4;
    background:linear-gradient(90deg, #f718f4, var(--color_main2));
    height:40%;
    width:120%;
    left:-10%;
    bottom:0;
    z-index:-1;
    clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}

.oshikoisection_titlesub_item:nth-of-type(2){
    bottom:0;
    right:0;
    transform:rotate(-5deg);
    z-index:2;
}


.oshikoisection_titlesub_item:nth-of-type(2):before{
    position:absolute;
    content:"";
    background:var(--color_main);
    background:linear-gradient(90deg, var(--color_main),#F71F1B);
    height:40%;
    width:120%;
    left:-10%;
    bottom:0;
    z-index:-1;
    clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}

.oshikoisection_titlesub_itemimg{
    position:absolute;
    top:30%;
    left:45%;
    height:calc(40% + (100vw / 320 ) * 10 );
    max-height:60%;
    transform:rotate(45deg);
    z-index:2;
}

.oshikoisection_hedding {
    margin:0;
    text-align:center;
    font-size:1.5rem;
    font-weight:900;
}

.oshikoisection_contentgroup {
    margin:50px 0 0 0;
}

.oshikoisection_contentgroup.top {
    margin:0;
}

.tags_container{
    position:relative;
    display:flex;
    justify-content:left;
    flex-wrap:wrap;
}

.tags_container.eventitem{
    margin-left:10px;
}

.tagitem{
    margin:10px 0;
    padding:10px;
    background-color: #d3d3d3;
    border-radius:10px;
}

.tagitem:not(:last-child){
    margin-right:10px;
}

.oshikoi_charactercontainer.character_1 {
    margin:50px 0 160px 0;
    position:relative;
}

.oshikoi_character_1 {
    position:absolute;
    top:-80px;
    right:0;
    
}

.oshikoisection_margin {
    width:100%;
    height:50px;
    position:relative;
}

.oshikoisection_margin:nth-of-type(1) {
    height:30px;
}

.oshikoisection_margin:nth-of-type(4):before {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    height:100%;
    width:100%;
    background:var(--color_main);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.oshikoisection_margin:nth-of-type(5) {
    background:var(--color_main2);
}

.oshikoisection_margin:nth-of-type(5):before {
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    height:100%;
    width:100%;
    background:var(--color_main);
    clip-path: polygon(100% 0%, 50% 100%, 0% 0%);
}

.oshikoisection_margin:nth-of-type(6):before {
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    height:100%;
    width:100%;
    background:var(--color_main2);
    clip-path: polygon(100% 0, 100% 100%, 0% 0%);
}

.eventfeaturessection{
    background:var(--color_main);
    color:#FFFFFF;
}

.eventflowsection{
    background:var(--color_main2);
    color:#FFFFFF;
}

/*イベントの特徴*/
.oshikoisection_featureitemgroup{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

.oshikoisection_featureitem{
    width:calc(50% - 20px);
    margin:10px;
}

.oshikoifeature_img{
    width:100%;
    border-radius:25%;
}

.oshikoisection_imgitem_text{
    text-align:center;    
    font-weight:900;
    font-size:25px; /*100px で25pxを最大とする*/
    font-size:1.5rem; /*100px で24pxを最大とする*/
    font-size:clamp(1rem, 0.765rem + 1.18vw, 1.5rem);
}




/*フローチャート*/
.oshikoisection_flowitemgroup{
    width:100%;
    flex-wrap:wrap;
    padding-bottom:10px;
}

.oshikoisection_flowitem{
    width:100%;
    display:flex;
    margin:30px 0;
}


.oshikoisection_flowitem:last-child{
    margin:0;
}

.oshikoiflow_imgbox{
    width:40%;
    height:100%;
    position:relative;
}

.oshikoiflow_step{
    position:absolute;
    top:0;
    right:10px;
    z-index:3;
    font-size:clamp(1rem, 0.624rem + 1.88vw, 1.8rem);
    color:var(--color_main2);
}

.oshikoiflow_img_shadow{
    position:absolute;
    width:100%;
    height:100%;
    top:5px;
    left:5px;
    background:var(--color_dark);
    clip-path: polygon(20% 0, 100% 0%, 80% 100%, 0% 100%);
}

.oshikoiflow_img{
    width:100%;
    clip-path: polygon(20% 0, 100% 0%, 80% 100%, 0% 100%);
}

.oshikoiflow_textbox{
    width:60%;
}

.oshikoiflow_stephedding{
    margin:0 0 0 10px; 
    font-size:1.2rem;
    text-align:left;
    font-size:clamp(1.2rem, 0.918rem + 1.41vw, 1.8rem);
}

.oshikoiflow_text{
    margin:0 0 0 10px; 
    font-size:1rem;
    text-align:left;
    font-size:clamp(1rem, 0.765rem + 1.18vw, 1.5rem);
}

/*イベント会場*/
.eventvenue_hedding{
    margin:0;
    padding:0 10px ;
    font-weight:900;
    font-size:25px;
    display:inline-block;
    color:#FFFFFF;
    border-bottom:none;
    position:relative;
}

.eventvenue_hedding:before{
    content:"";
    position:absolute;
    background:var(--color_dark);
    left:0;
    bottom:-1px;
    width:110%;
    height:100%;
    z-index:-1;
    clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
}

.redcolor{
    color:red;
}

.linkcolor{
    color:blue;
    text-decoration:underline;
}

.eventvenue_info_container{
    width:100%;
    padding:10px;
    background:var(--color_dark);
    color:#FFFFFF;
}

.eventvenue_img{
    width:100%;
}

.notpadding{
    padding:0;
}


.eventvenue_dl {
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
}

.eventvenue_dt {
  font-weight: bold;
  background-color:var(--color_main2);
  color:#FFFFFF;
  padding: 0.3em 0.5em;
  border-radius: 3px;
  margin-bottom: 0.5em;
  display: inline-block;
}

.eventvenue_dd {
  margin-left: 0;
  padding-left: 1em;
  margin-bottom: 1em;
  border-left: 3px solid #d3d3d3;
}

.oshikoi_charactercontainer.character_2 {
    margin:50px 0 80px 0;
    position:relative;
}

.oshikoi_character_2 {
    position:absolute;
    top:-70px;
    left:0;
    animation: stretch 5s linear 0s infinite;
}

/* アコーディオンメニュー */
.accordion_item.faq {
    border:solid var(--color_dark) 1px;
}

.accordion_header {
    cursor: pointer;
    width: 100%;
}

.accordion_header_button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:1rem;
    width: 100%;
    text-align: left;
    font-weight:600;
}

.accordion_header_button.open {
    background:var(--color_dark);
    color:white;
}

.accordion_icon {
    width: 1rem;
    height: 1rem;
    background:white;
    transition: transform 0.3s ease;
}

.accordion_icon.open {
    transform: rotate(180deg);
}

.accordion_content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.accordion_content.open {
    max-height: 100%;
}

.oshikoi_address {
  font-style: normal; /* イタリック体を解除 */
}

/*フロートコンテンツ*/
#floatsection_wraper{
    width:100%;
    position:fixed;
    bottom:0;
    background:var(--bgcolor_secondary);
    background:#99999999;
    display:none;
    z-index:50;
}

.floatsection_container{
    width:var(--container_width);
    max-width:var(--container_max-width);
    margin:0 auto;
    display:flex;
    justify-content:center;
}

.jumptoevents_button {
    margin:10px 0;
    padding:10px;
    height:100%;
    display:inline-block;
    background:var(--color_dark);
    color:#FFFFFF;
    border-radius:10px;
    font-size:1.5rem;
    font-weight:900;
}


@media screen and (min-width: 768px) {

    .mobileonly{
        display:none;
    }
    
    .pconly{
        display:revert;
    }
    
    /*ナビゲーション*/
    #oshikoiheader_menu_togglebutton {
        width: 80px;
        height: 60px;
        font-size:10px;
    }
    

    /*メインビジュアル*/
    #mainvisual {
        position:relative;
        aspect-ratio:16/9;
        max-height:1080px;
        height:initial;
        background-image:url("../img/oshikoi_mv_background.webp");
    }

    #mainvisual_container{
        position:relative;
        width:100%;
        max-width:1920px;
    }

    .mainvisual_titleimg ,.mainvisual_titlesubimg {
        width:100%;
    }

    #mainvisual_title {
        position:absolute;
        top:20%;
        left:3%;
        width:100%;
        max-width:45%;
        z-index:1;
    }

    #mainvisual_title:before{
        content:"";
        position:absolute;
        top:25%;
        left:7%;
        width:100%;
        height:80%;
        background:#FFFFFF;
        clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
        transform:rotate(-3deg);
        z-index:-1;
    }
    
    #mainvisual_titlesub {
        position:absolute;
        top:45%;
        left:10%;
        width:100%;
        max-width:50%;
        z-index:3;
    }

    #mainvisual_titlesub:before{
        content:"";
        position:absolute;
        top:25%;
        left:0%;
        width:100%;
        height:80%;
        background:var(--color_dark);
        clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
        transform:rotate(-3deg);
        z-index:-1;
    }

    #mainvisual_character01{
        position:absolute;
        bottom:0;
        right:-5%;
        width:auto;
        max-width:60%;
        max-height:100%;
        z-index:2;
    }

    #mainvisual_text_pc{
        position:absolute;
        bottom:5%;
        left:7%;
        width:100%;
        max-width:60%;
        z-index:2;
    }
 
    .mainvisual_textimg {
        width:100%;
        max-width:none;
    }
    
    .mainvisual_bottom {
        position:absolute;
        bottom:0;
        left:0;
        width:100vw;
        height:35%;
        background:var(--color_dark);
        clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
        z-index:1;
    }
    
    /*イベント情報*/
    .eventlistitemgroup_container{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }

    .eventlistitem_container{
        width:calc(50% - 20px);
        margin-left:10px;
        margin-right:10px;
    }

    /*イベントの特徴*/
    .oshikoisection_featureitem{
        width:calc(33% - 20px);
    }
    
    /*電話番号リンクを無効*/
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
    }
    
    .linkcolor.tel{
        color:initial;
        text-decoration:none;
    }
    
}

/*フェードアップ*/
.animated_fadeup {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s, transform 1s;
}

.animated_fadeup.show {
    opacity: 1;
    transform: translateY(0);
}

/*ポップアップ*/
.animated_popup {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
}

.animated_popup.show {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
 
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

/*スライドイン(左から右)*/
.animated_slidein_lr {
    transform: translateX(-20vw);
    opacity: 0;
}

.animated_slidein_lr.show {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(-20vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/*タイトル背景*/
.animated_bg_wrap:before {
  opacity :1;
  transition:clip-path 0.8s; 
  clip-path: polygon(10% 0%, 10% 0%, 0% 100%, 0% 100%);
}

.animated_bg_wrap.show:before {
  opacity :1;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

/*キャラクター2の伸びるアニメーション*/
@keyframes stretch {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  65%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  80%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  85%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  90%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  95%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}