@charset "UTF-8";
:root {
    --beige:#fafbe6;
    --white:#fcfcef;
    --skyblue:#98d2c0;
    --emeraldgreen:#059392;
    --navy:#215881;

}


body{
    margin: 0;
    background-color: var(--beige); 
    
 

}

main{

    display: flex;
    flex-direction: column;

   
}

.nakami{
    padding: 0 10%;
}

.panel {
    width: 100%;
    max-width: 375px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 45px;
    margin-bottom: 50px;
    margin-top: 20px;
    margin: 0 auto;
    
  
    
}


 .panel-card {
        background:var(--white);
        width:100%;
        aspect-ratio: 1 / 1; /*カードを正方形にする*/
        display: flex;/*カードの中身を配置しやすくする準備*/
        flex-direction: column;/*カードの中身を縦方向に並べる指定*/
        align-items: center;/*カードの中身を横方向の中央揃えにする*/
        justify-content: center;/*カードの中身を縦方向の中央揃えにする*/
        position: relative;
        text-decoration: none;/*カード全体がリンクになる場合、文字の下に出る線を消す*/
        box-sizing: border-box;/*高さや幅の計算にpaddingやborderを含める*/
        padding: 16px; 
        transition: transform 0.15s;/*カードが動く時に、0.15秒かけてなめらかに変化*/
        margin-top: 20px;
        margin-bottom: 20px;
        
        }
         .panel-card:hover {
            opacity:0.7;
            transform: translateY(3px);
            transform: translateX(3px);
            box-shadow: 0 0 0 var(--emeraldgreen);
        }
  
  .type-A {
        border: 10px solid var(--skyblue);
        box-shadow: 4px 4px 0px var(--navy);
        }
    
    .type-A::before {
            content: '';/*::before を表示するために必要*/
            position: absolute;
            top: -18px;
            left: -18px;
            width: 50%; 
            height: 50%;
            border-top: 3px solid var(--emeraldgreen);
            border-left: 3px solid var(--emeraldgreen);
        }

    .type-A::after {
            content: '';
            position: absolute;
            bottom: -20px; 
            right: -20px;
            width: 50%;
            height: 50%;
            border-bottom: 3px solid var(--emeraldgreen);
            border-right: 3px solid var(--emeraldgreen);
        }

 .type-B {
        border: 10px solid var(--emeraldgreen);
        box-shadow: 4px 4px 0px var(--navy); 
        }
        
   .type-B::before {
            content: '';
            position: absolute;
            top: -18px;
            left: -18px;
            width: 50%; 
            height: 50%;
            border-top: 3px solid var(--skyblue);
            border-left: 3px solid var(--skyblue);
        }
        
   .type-B::after {
            content: '';
            position: absolute;
            bottom: -20px; 
            right: -20px;
            width: 50%; 
            height: 50%;
            border-bottom: 3px solid var(--skyblue);
            border-right: 3px solid var(--skyblue);
        }

    .panel-title {
            font-size: 14px; 
            color: var(--black);
            letter-spacing: 0.08px;/*文字間隔*/
            text-align: center;
           
        }/*カード内の文字*/

    .panel-imgs {
            display: flex;           
            justify-content: center; 
            align-items: center;     
            gap: 15px;/*画像同士の間隔？？*/
            width: 100%;             
        }/*カード内の画像を並べるための箱*/
        
    .img-nyushi-info {
            width: 50px;/*アイコン画像の横幅*/
            height: 50px;
            object-fit: contain;
        }

    .img-kaiji{
            width: 50px;
            height: 50px;
            object-fit: contain;
     
        }