@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
body{
    margin: 0;
}

h1{
    font-size:2rem;
    text-align: left;
    text-transform: uppercase;
    padding: 20px;
}

h2{
    font-size:1.2rem;
    text-align: center;
    margin: 0 0 30px 0;
}

p{
    margin-top:20px;  
}

/* ==凄麺ロゴ== */
img.rogo{
    width:100px;
    margin-left:20px;
    margin-top:10px;
}

/* ==ローディングアイコン== */
.wrapper{
    width:200px;
    height:60px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}
.circle{
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: #db1e1e;
    left:15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}
@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
    left:45%;
    animation-delay: .2s;
}
.circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}
@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.wrapper span{
    position: absolute;
    top:75px;
    font-family: 'Lato';
    font-size: 20px;
    letter-spacing: 12px;
    color: #db1e1e;
    left:15%;
}


/* ==ロードされたタイミングで処理実行==*/
.load-fade1 {
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
    }
    .load-fade1.is-show {
    opacity: 1;
    visibility: visible;
    }
.load-fade2 {
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
}
.load-fade2.is-show {
    opacity: 1;
    visibility: visible;
}
.load-fade3 {
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
}
.load-fade3.is-show {
    opacity: 1;
    visibility: visible;
}

/* ポップアップ========================================== */
/* モーダルウィンドウ */
.modal {
    display: none;
    width:60%;
    height: 70%;
    background-color: #ffffff;
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    margin: auto;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
    overflow-y: scroll;
    text-align: center;
    z-index:30; /*一番上*/
}
/* ×ボタン */
div.position_modalbutton{
    position: absolute;
    top: 0.5rem;
    right: 3rem;
}
.close {
    display: block;
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;  /* 丸みの度合い */
    background: #333; /* ボタンの背景色 */

    z-index:9999;
}
.close::before, .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 21px;
    background: #fff; /* バツ印の色 */
}
.close::before {
    transform: translate(-50%,-50%) rotate(45deg);
}
   
.close::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}
/* ×ボタンをhover時カーソルを指にかえる */
label {
    cursor:pointer;
}




/* ==1300px以上のウィンドウ幅の場合の処理============= */
@media screen and (min-width: 1300px) {
    div.container{
        position: relative;
        padding-bottom: 80px;
        min-height: 90vh;
    }

    /*========= ナビゲーションドロップダウンのためのCSS ===============*/
    /* ==ヘッダー全体の設定== */
    header{
        height:42px;/*高さ指定*/
        width:100%;/*横幅指定*/
        border-bottom:1px solid #cccccc;
    }
    /*==ナビゲーション全体の設定*/
    nav{
        background:#ffffff;
        color:#ff2121;
        text-align: center;
    }
    /*ナビゲーションを横並びに*/
    nav ul{
        list-style: none;
        display: flex;
        justify-content: left;
        margin:0;
    }

    /*下の階層のulや矢印の基点にするためliにrelativeを指定*/
    nav ul li{
        position: relative;
    }

    /*ナビゲーションのリンク設定*/
    nav ul li a{
        display: block;
        text-decoration: none;
        color: #ff1717;
        font-weight: bold;
        padding:10px 35px 5px 35px;
        transition:all .3s;
    }

    nav ul li a:hover{
        color: #ff1717;
        font-weight: bold;
    }

    nav ul li a::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #ff1717;
        bottom: -3px;       /*アンダーラインが位置する、各リストの下端からの高さ　ヘッダーの下端に合わせています*/
        visibility: hidden; /*ホバー前に、アンダーラインを可視化しない*/
        }

    nav ul li a:hover::after{
        visibility: visible; /*ホバー後、アンダーラインを可視化する*/
    }
    
    /* ==神社背景== */
    img.shrine1{
        display: block;
        width:75%;
        text-align: center;
        margin:auto;
        position: relative;
        border-radius: 5px;
        border: 4px solid #3f3f3f;
    }
    img.shrine2{
        display: none;
    }


    div.omikuzi{
        text-align: center;
    }
    
    /* ==おみくじを引くボタン== */
    .button-041 {
        position: absolute;
        width: 20%;
        height: 50px;
        top:78%;
        left:50%;
        transform: translate(-50%, -50%);
        transform-origin: center bottom;
        border: none;
        border-radius: 5px;
        background-color: #ff2b2b;
        color: #fff;
        font-weight: 600;
        font-size:1em;
    }
    .button-041:hover {
        cursor:pointer;
        color: #fff;
        background: #000;
    }
    
    /* ==おみくじ画像==*/
    img.omikuzi_img{
        position: absolute;
        width: 20%;
        height: auto;
        opacity: 100%;
        top: 30%;
        left:40%;
        transform: translate(-50%, -50%);
        transform-origin: center;
        display:none;
    }
    

    /* ==おみくじ結果画像==*/  
    /* UPDATE 2023/11/29 750px以上の時  */
    div.omikuzi_all{
        width:100%;
        position:relative;
    }

    div.kuji_position{
        text-align: center;
    }

    img.kuji {
        width: 45%;
        height: auto;
        opacity: 100%;
        margin: 0 auto;
        margin-top:20px;
    }
    
    img.green{
        position: absolute;
        width:12%;
        height:auto;
        opacity: 100%;
        top:62%;
        left:30%;
        transform: translate(-50%, -50%);
    }
    
    img.yellow{
        position: absolute;
        width:12%;
        height:auto;
        opacity: 100%;
        top:62%;
        left:70%;
        transform: translate(-50%, -50%);
    }

    /* ハンバーガーメニュー非表示 */
    div.openbtn1{
        display: none;
    }

    /* モーダルウィンドウ もう一度引くボタン */
    button.modal_button{
        border: none;
        border-radius: 5px;
        width: 20%;
        height: 50px;
        background-color: #ff2b2b;
        color: #fff;
        font-weight: 600;
        font-size:16px;    
        cursor:pointer;
    }
    button.modal_button:hover{
        background-color: #ff6565;
    }
    button.modal_button2{
        border: none;
        border-radius: 5px;
        width: 20%;
        height: 50px;
        background-color: #e0e0e0;
        color: #000000;
        font-weight: 600;
        font-size:1em;    
        cursor:pointer;
    }
    button.modal_button2:hover{
        background-color: #c5c5c5;
    }

    /* ==文字を1つずつ表示== */
    .txt {
        display: block;
        display: flex;
        overflow: hidden;
        position: absolute;
        top:30%;
        left:50%;
        transform: translate(-50%, -50%);
    }
    .txt p {
        color: rgb(255, 255, 255);
        font-size: 32px;
        font-weight: bold;
        letter-spacing: .06em;
        margin: 0;
        -webkit-text-fill-color: white; /* （順序に関係なく）色を上書きする */
        -webkit-text-stroke: 1px rgb(255, 0, 0);
        text-shadow: 0px 2px 4px red;

        /* ここからアニメーション関係 */
        transform: translateY(2em);
        animation: textanimation 1s forwards;
    }
    /* 1文字目 */
    .txt p:nth-child(1) {
        animation-delay: 1s
    }
    /* 2文字目 */
    .txt p:nth-child(2) {
        animation-delay: 1.2s
    }
    /* 3文字目 */
    .txt p:nth-child(3) {
        animation-delay: 1.4s
    }
    /* 4文字目 */
    .txt p:nth-child(4) {
        animation-delay: 1.6s
    }
    /* 5文字目 */
    .txt p:nth-child(5) {
        animation-delay: 1.8s
    }
    /* 6文字目 */
    .txt p:nth-child(6) {
        animation-delay: 2.0s
    }
    /* 7文字目 */
    .txt p:nth-child(7) {
        animation-delay: 2.2s
    }
    @keyframes textanimation {
        0% {
            transform: translateY(2em);
        }
        100% {
            transform: translateY(0);
        }
    }

    /* ==フッター== */
    footer{
        position: absolute;
        margin-top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: #ff2121;
        color:#fff;
    }
    p.footer_info{
        padding-top:10px;
        text-align: center;
        margin:auto; 
    }
}

/* ====================================== */
/* ====================================== */
/* 750px以上1300px未満のウィンドウサイズの時 */
/* ====================================== */
/* ====================================== */
@media screen and (min-width:750px) and (max-width:1300px) {
    div.container{
        position: relative;
        padding-bottom: 80px;
        min-height: 90vh;
    }

    /*========= ナビゲーションドロップダウンのためのCSS ===============*/
    /* ==ヘッダー全体の設定== */
    header{
        height:42px;/*高さ指定*/
        width:100%;/*横幅指定*/
        border-bottom:1px solid #cccccc;
    }
    /*==ナビゲーション全体の設定*/
    nav{
        background:#ffffff;
        color:#ff2121;
        text-align: center;
    }
    /*ナビゲーションを横並びに*/
    nav ul{
        list-style: none;
        display: flex;
        justify-content: left;
        margin:0;
    }

    /*下の階層のulや矢印の基点にするためliにrelativeを指定*/
    nav ul li{
        position: relative;
    }

    /*ナビゲーションのリンク設定*/
    nav ul li a{
        display: block;
        text-decoration: none;
        color: #ff1717;
        font-weight: bold;
        padding:10px 35px 5px 35px;
        transition:all .3s;
    }

    nav ul li a:hover{
        color: #ff1717;
        font-weight: bold;
    }

    nav ul li a::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #ff1717;
        bottom: -3px;       /*アンダーラインが位置する、各リストの下端からの高さ　ヘッダーの下端に合わせています*/
        visibility: hidden; /*ホバー前に、アンダーラインを可視化しない*/
        }

    nav ul li a:hover::after{
        visibility: visible; /*ホバー後、アンダーラインを可視化する*/
    }
    
    /* ==神社背景== */
    img.shrine1{
        display: block;
        width:75%;
        text-align: center;
        margin:auto;
        position: relative;
        border-radius: 5px;
        border: 4px solid #3f3f3f;
    }
    img.shrine2{
        display: none;
    }


    div.omikuzi{
        text-align: center;
    }
    
    /* ==おみくじを引くボタン== */
    .button-041 {
        position: absolute;
        width: 20%;
        height: 50px;
        top:78%;
        left:50%;
        transform: translate(-50%, -50%);
        transform-origin: center bottom;
        border: none;
        border-radius: 5px;
        background-color: #ff2b2b;
        color: #fff;
        font-weight: 600;
        font-size:1em;
    }
    .button-041:hover {
        cursor:pointer;
        color: #fff;
        background: #000;
    }
    
    /* ==おみくじ画像==*/
    img.omikuzi_img{
        position: absolute;
        width: 20%;
        height: auto;
        opacity: 100%;
        top: 30%;
        left:40%;
        transform: translate(-50%, -50%);
        transform-origin: center;
        display:none;
    }
    

    /* ==おみくじ結果画像==*/  
    /* UPDATE 2023/11/29 750px以上の時  */
    div.omikuzi_all{
        width:100%;
        position:relative;
    }

    div.kuji_position{
        text-align: center;
    }

    img.kuji {
        width: 45%;
        height: auto;
        opacity: 100%;
        margin: 0 auto;
        margin-top:20px;
    }
    
    img.green{
        position: absolute;
        width:12%;
        height:auto;
        opacity: 100%;
        top:62%;
        left:30%;
        transform: translate(-50%, -50%);
    }
    
    img.yellow{
        position: absolute;
        width:12%;
        height:auto;
        opacity: 100%;
        top:62%;
        left:70%;
        transform: translate(-50%, -50%);
    }

    /* ハンバーガーメニュー非表示 */
    div.openbtn1{
        display: none;
    }

    /* モーダルウィンドウ もう一度引くボタン */
    button.modal_button{
        border: none;
        border-radius: 5px;
        width: 20%;
        height: 50px;
        background-color: #ff2b2b;
        color: #fff;
        font-weight: 600;
        font-size:14px;    
        cursor:pointer;
    }
    button.modal_button:hover{
        background-color: #ff6565;
    }
    button.modal_button2{
        border: none;
        border-radius: 5px;
        width: 20%;
        height: 50px;
        background-color: #e0e0e0;
        color: #000000;
        font-weight: 600;
        font-size:1em;    
        cursor:pointer;
    }
    button.modal_button2:hover{
        background-color: #c5c5c5;
    }

    /* ==文字を1つずつ表示== */
    .txt {
        display: block;
        display: flex;
        overflow: hidden;
        position: absolute;
        top:30%;
        left:50%;
        transform: translate(-50%, -50%);
    }
    .txt p {
        color: rgb(255, 255, 255);
        font-size: 32px;
        font-weight: bold;
        letter-spacing: .06em;
        margin: 0;
        -webkit-text-fill-color: white; /* （順序に関係なく）色を上書きする */
        -webkit-text-stroke: 1px rgb(255, 0, 0);
        text-shadow: 0px 2px 4px red;

        /* ここからアニメーション関係 */
        transform: translateY(2em);
        animation: textanimation 1s forwards;
    }
    /* 1文字目 */
    .txt p:nth-child(1) {
        animation-delay: 1.0s
    }
    /* 2文字目 */
    .txt p:nth-child(2) {
        animation-delay: 1.2s
    }
    /* 3文字目 */
    .txt p:nth-child(3) {
        animation-delay: 1.4s
    }
    /* 4文字目 */
    .txt p:nth-child(4) {
        animation-delay: 1.6s
    }
    /* 5文字目 */
    .txt p:nth-child(5) {
        animation-delay: 1.8s
    }
    /* 6文字目 */
    .txt p:nth-child(6) {
        animation-delay: 2.0s
    }
    /* 7文字目 */
    .txt p:nth-child(7) {
        animation-delay: 2.2s
    }
    @keyframes textanimation {
        0% {
            transform: translateY(2em);
        }
        100% {
            transform: translateY(0);
        }
    }

    /* ==フッター== */
    footer{
        position: absolute;
        margin-top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: #ff2121;
        color:#fff;
    }
    p.footer_info{
        padding-top:10px;
        text-align: center;
        margin:auto; 
    }
}

/* ==750px未満のウィンドウ幅の場合の処理============= */
@media screen and (max-width: 750px) {
    div.container{
        position: relative;
        min-height: 90vh;
    }

    div.omikuzi{
        text-align: center;
        justify-content:center;
        width:100%;
    }

    img.shrine1{
        display: none;
        /* height:100%;
        margin:auto 0;
        position: relative;
        object-fit: cover; */
    }
    img.shrine2{
        display: block;
        width:100%;
    }
    

    
    /* ==おみくじを引くボタン== */
    .button-041 {
        position: absolute;
        width: 60%;
        height: 50px;
        top:80%;
        left:50%;
        transform: translate(-50%, -50%);
        transform-origin: center bottom;
    
        border: none;
        border-radius: 5px;
        background-color: #ff2b2b;
        color: #fff;
        font-weight: 600;
        font-size:1em;
    }
    .button-041:hover {
        cursor:pointer;
        color: #fff;
        background: #000;
    }
    
    /* ==おみくじ画像==*/
    img.omikuzi_img{
        position: absolute;
        width: 45%;
        height: auto;
        opacity: 100%;
        top: 50%;
        left:30%;
        transform: translate(-50%, -50%);
        transform-origin: center;
        display:none;
    }
    
    /* ==おみくじ結果画像==*/  
    img.kuji {
        margin:auto;
        margin-top:40px;
        width: 80%;
        height: auto;
      }
    
    img.green{
        position: absolute;
        width:25%;
        height:auto;
        opacity: 100%;
        top:62%;
        left:30%;
        transform: translate(-50%, -50%);
    }
    
    img.yellow{
        position: absolute;
        width:25%;
        height:auto;
        opacity: 100%;
        top:62%;
        left:70%;
        transform: translate(-50%, -50%);
    }

    /* ==ハンバーガーメニュー== */
    .openbtn1{
        display: block;
        position:fixed;
        z-index: 9999;/*ボタンを最前面に*/
        top:10px;
        right: 10px;
        cursor: pointer;
        width: 50px;
        height:50px;
    }
        
    /*×に変化*/  
    .openbtn1 span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #666;
        width: 45%;
    }
      
    .openbtn1 span:nth-of-type(1) {
        top:15px; 
    }
      
    .openbtn1 span:nth-of-type(2) {
        top:23px;
    }
      
    .openbtn1 span:nth-of-type(3) {
        top:31px;
    }
      
    .openbtn1.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
      
    .openbtn1.active span:nth-of-type(2) {
        opacity: 0;
    }
      
    .openbtn1.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }

    #g-nav{
        /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
        position:fixed;
        z-index: -1;
        opacity: 0;/*はじめは透過0*/
        /*ナビの位置と形状*/
        top:0;
        width:100%;
        height: 100vh;/*ナビの高さ*/
        background:#999;
        /*動き*/
        transition: all 0.3s;
    }
    
    /*アクティブクラスがついたら透過なしにして最前面へ*/
    #g-nav.panelactive{
        opacity: 1;
        z-index:999;
    }
    
    /*ナビゲーションの縦スクロール*/
    #g-nav.panelactive #g-nav-list{
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /*ナビゲーション*/
    #g-nav ul {
        display: none;
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 999;
        top:50%;
        left:50%;
        padding:0;
        transform: translate(-50%,-50%);
    }
    #g-nav.panelactive ul {
        display: block;
    }
    
    /*リストのレイアウト設定*/
    #g-nav li{
        list-style: none;
        text-align: center; 
    }
    #g-nav li a{
        color: #333;
        text-decoration: none;
        padding:10px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
    }

    /* モーダルウィンドウ もう一度引くボタン */
    button.modal_button{
        border: none;
        border-radius: 5px;
        width: 80%;
        height: 50px;
        background-color: #ff2b2b;
        color: #fff;
        font-weight: 600;
        font-size:12px;    
        cursor:pointer;
    }
    button.modal_button:hover{
        background-color: #ff6565;
    }
    button.modal_button2{
        border: none;
        border-radius: 5px;
        width: 80%;
        height: 50px;
        background-color: #e0e0e0;
        color: #000000;
        font-weight: 600;
        font-size:1em;    
        cursor:pointer;
    }
    button.modal_button2:hover{
        background-color: #adadad;
    }

    .txt {
        display: none;
    }

    /* ==フッター== */
    footer{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: #ff2121;
        color:#fff;
        text-align: center;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    p.footer_info{
        text-align: center;
        margin:auto; 
        font-size: 12px;
    }    
}