*{/*すべての要素*/
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{/*全体の色、フォント*/
    margin:0;/*デフォの余白を消す*/
    background-color:#FFF8C3;
    color: #754821;
    font-family: "M PLUS Rounded 1c", sans-serif;/*読み込めない時にsan-serif*/
    font-weight: 500;
}
h2,/*見出し、ボタンを太くする*/
h3,
.main-menu a,
.back,
.next,
.mo-summary a {
    font-weight: 800;
}
header{
    display:flex; /*横に並べる、デフォは縦*/
    justify-content: space-between;/*左右の端に追いやる*/
    align-items: center;/*縦の、センターに揃える*/

    min-height:150px;
    padding: 18px 24px 55px;/*上、左右、下*/
    background-color: transparent;
    background-image: url("../images/header.png");/*なみヘッダーの画像*/
    background-repeat:no-repeat;/*画像繰り返さない*/
    background-position:top center;
    background-size: 100% 100%;/*画像をヘッダーの横、縦に合わせる*/
}
.mo-main {
    transform: translateY(-20px);
    text-align: center;
}
.main-title{
    margin:0 auto 24px;
    padding: 0 20px;
}
.main-title img{
    display:block;
    width:100%;
    max-width:1200px;
    height:auto;
    margin:0 auto;
}
.mo-about{
    min-height:500vh;/*can change the height if i add text later, compared to fixed "height"*/
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding: 0;
    text-align:center;
}
.about-text{/*aboutの文字をスクロールしてても固定したい*/
    position:sticky;
    top:50%;
    transform: translateY(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;/*段落の間*/
}
.about-text p{
    margin:0;
    font-size:15px;
    line-height:1.8;
}
.mo-top{/*地図セクション*/
    padding: 80px 24px 160px;/*top, side, bottom*/
    text-align: center;
    min-height:160vh;
}
.mo-top h2{
    margin: 0 0 10px;
    font-size: 32px;
}
.map-area {
    position: sticky;
    top:60px;

    width: 100%;/*横いっぱいに使ってね*/
    max-width: 900px;/*最大*/
    margin: 0 auto;  
}
.map-image{
    display:block;
    width:100%;
}
.map-location{
    position: absolute;
    padding: 0;
    border:none;
    background:transparent;
}
/*ここからピン(クリック可能な透明ボックス)ごとの位置*/
.location-mac{
    top:30%;/*上から０％*/
    left:23.5%;/*左から0%*/
    width:8%;
    height: 12%;
}
.location-cake{
    top:55%;
    left:72.5%;
    width: 8%;
    height:12%;
}
.location-turn{
    top:19%;
    left:63.5%;
    width: 8%;
    height:12%;
}
.location-haribo{
    top:64%;
    left:40%;
    width: 8%;
    height:12%;
}
.location-chips{
    top:44%;
    left:36%;
    width: 8%;
    height:12%;
}
.location-milk{
    top:66%;
    left:61%;
    width: 8%;
    height:12%;
}
.location-ice{
    top:30%;
    left:70%;
    width: 8%;
    height:12%;
}
.location-pancake{
    top:17%;
    left:33%;
    width: 8%;
    height:12%;
}
.location-banana{
    top:52%;
    left:25.5%;
    width: 8%;
    height:12%;
}
.location-spicy{
    top:42%;
    left:56%;
    width: 8%;
    height:12%;
}
.map-pin-image {
    position: absolute;
    top:10%;
    left:50%;

    max-width:25px;
    width:35%;
    height:auto;

    transform:translate(-50%, -100%);
    transform-origin:center bottom;/*回るアニメーション*/
}
/*回るアニメーション*/
@keyframes pin-spin-bounce{
    0%{/*はじめ：上下移動、回転なし*/
        transform:translate(-50%,-100%)
        translateY(0)
        rotateY(0deg);
    }
    35%{/*上に８、120度回転*/
        transform: translate(-50%,-100%)
        translateY(-8px)
        rotateY(120deg);
    }
    70%{/*下に戻り280ど*/
        transform:translate(-50%, -100%)
        translateY(-4px)
        rotateY(280deg);
    }
    100%{/*元の高さで１回転*/
        transform: translate(-50%, -100%)
        translateY(0)
        rotateY(360deg);
    }
}
.map-location:hover .map-pin-image{/*上のやつをホバー時に再生*/
    animation: pin-spin-bounce 0.8s ease-in-out;
}
.map-popup{/*ポップアッぷ共通事項*/
    position:fixed;/*スクロールした位置じゃなくて、画面を基準にするから、どこでも同じ中央に配置される*/
    inset:0;
    margin:auto;

    width:90%;
    max-width: 900px;
    max-height:90vh;

    padding:0;
    border:none;
    border-radius: 30px;
    background: transparent;
}
body.modal-open{
    overflow:hidden;/*後ろのページスクロール不可能にする*/
}
.map-popup::backdrop{
    background-color: rgba(0,0,0,0.55)/*後ろを暗くする*/
}
.popup-image{/*ポップアップ画像表示*/
    display:block;
    width: 100%;
    height:auto;
    border-radius: 30px;
}
@keyframes popup-open{/*開くアニメ*/
    0%{/*小さく、透明*/
        opacity:0;
        transform:scale(0.7);
    }
    70%{/*ちょっとおおきい*/

        opacity:1;
        transform: scale(1.05);
    }
    100%{/*デフォサイズ*/
        opacity:1;
        transform: scale(1);
    }
}
@keyframes popup-close{/*閉じるアニメーション*/
    0%{
        opacity:1;
        transform:scale(1);
    }
    25%{
        opacity:1;/*transprency*/
        transform: scale(1.05);
    }
    100%{
        opacity:0;
        transform:scale(0.1);
    }
}
.map-popup.is-opening{
    animation:popup-open 0.35s ease-out forwards;
}
.map-popup.is-closing{
    animation:popup-close 0.35s ease-in forwards;
}
.mo-choice{/*カルーセルならぬ、猫紹介*/
    min-height:160vh;
    padding-top:40px;
    text-align: center;
}
.mo-choice h2{
    margin:0 0 20px;
    font-size: 40px;
}
.mo-insidechoice{/*見える画面*/
    position:sticky;
    top:40px;

    width:100%;
    overflow: hidden;/*見えてるのいがい隠す*/
}
.card-container{/*５枚分横に並べる*/
    display: flex;
    transition: transform 0.5s ease;/* animate, take half a second, smoothly*/
}
.mo-hacard {/*猫ごとの背景色*/
  background-color: #FCC;
}

.mo-mocard {
  background-color: #FDDEBF;
}

.mo-yucard {
  background-color: #FFB09E;
}

.mo-ricard {
  background-color: #ACC6EA;
}

.mo-wacard {
  background-color: #C0DCBD;
}
.card{/*５枚のカードの共通事項*/
    min-width:100%;/*すべてのカードは大きくあるべきだ*/
    min-height:600px; /*gives all the card same min.height*/
    padding: 30px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;/*ボタンとの距離*/
}
.cat-link{
    display:block;
}
.cat-link img{/*変化の速度透明度*/
    transition:opacity 0.2s;
}
.cat-link:hover img,
.cat-link:focus-visible img{
    opacity:0.6;
    animation:cat-hover-bounce 0.4s ease-out forwards;
}
@keyframes cat-hover-bounce{/*猫のバウンス*/
    0%{/*通常サイズ*/
        transform:translateY(0)scale(1);
    }
    40%{/*上に80ジャンプ*/
        transform:translateY(-60px)scale(1.08);
    }
    70%{/*元のサイズ*/
        transform:translateY(0)scale(1);
    }
    100%{/*上にちょい浮く*/
        transform:translateY(-22px) scale(1.04);
    }
}
.cat-info{/*カードの説明文*/
    flex:none;
    text-align: center;
    width:60%;
    max-width: 500px;
}
.cat-info img{
    width:100%;
    margin:1px;
}
.back, .next{/*共通事項ボタン*/
    padding: 20px 50px;
    border: 2px solid #ffb75a;
    border-radius: 30px;
    background-color: #fff8c3;
    color:#754821;

    font-size:14px;
    font-weight:800;

    cursor: pointer;
    flex-shrink:0;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;

}
.back::before{/*左矢印*/
    content:"←";
    margin-right:10px;
}
.next::after{/*右矢印*/
    content:"→";
    margin-left: 10px;
}
.cat-info h3{/*猫名前大きさ*/
    margin:0 0 30px;
    font-size:60px;
}
@media (max-width: 900px) {/*画面小さい時*/
    .cat-info h3 {
        font-size: 36px;
    }

    .back,
    .next {
        padding: 8px 12px;
        font-size: 14px;
    }
    .card {/*ボタン横並びにする*/
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "info info"
            "back next";

        gap: 24px;
        padding: 40px 24px;
    }

    .cat-info {
        grid-area: info;
        width: 80%;
        max-width: 500px;
        justify-self: center;
    }

    .back {
        grid-area: back;
        justify-self: end;
    }

    .next {
        grid-area: next;
        justify-self: start;
    }

}
.cat-info p{
    margin:4px 0;
    font-size:20px;
    line-height: 1.7;
}
.cat-info p:first-of-type{/*最初の<p>だけ*/
    margin-bottom:10px;
    font-weight:700;
}
.back:hover, .next:hover{/*apply when the cursoe is over a button*/
    background-color:#ffb75a;
    color:white;
    transform:scale(1.08);
}
.mo-summary{/*答え合わせのボタン*/
    padding:160px 24px 80px;
    text-align: center;
    min-height:50vh;
}
.mo-summary a{
    display: block;
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
    padding: 18px;
    border: 3px solid #ffb75a;
    border-radius: 50px;
    background-color: white;
    color:#754821;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2;
}
.mo-summary a:hover{
    background-color: #fff3d6;
    transform:scale(1.05);
}
footer {
  min-height: 150px;
  padding: 75px 24px 25px;

  background-color: transparent;
  background-image: url("../images/footer.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}

footer p {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
}

.creators {
  margin-bottom: 6px;
  line-height: 1.6;
}