/*学マス風入力欄*/
.inputbox-wrapper{
    display: inline-block;
    position: relative;
    height: calc(var(--scale) * var(--unit) * 56);
    /*width: calc(var(--scale) * var(--unit) * 379);*/
    width: 87%;
    margin-left: 6.5%;
    margin-top: calc(var(--scale) * var(--unit) * 14);
}

.inputbox-wrapper::after{
    content: "edit";
    font-family: "Material Symbols Outlined";
    font-size: calc(var(--scale) * var(--unit) * 28);
    color: var(--grey);

    display: inline-block;
    position: absolute;

    top: calc(var(--scale) * var(--unit) * 6);
    right: calc(var(--scale) * var(--unit) * 9);

    text-align: center;
    line-height: calc(var(--scale) * var(--unit) * 36);

    height: calc(var(--scale) * var(--unit) * 36);
    width: calc(var(--scale) * var(--unit) * 36);

    background-color: var(--white);
    border: calc(var(--scale) * var(--unit) * 3) solid var(--greybg);
    border-radius: 9999px;

    box-shadow: 0 calc(var(--scale) * var(--unit) * 2) calc(var(--scale) * var(--unit) * 3) var(--greyed);
}

.inputbox-default{
    display: inline-block;

    height: calc(var(--scale) * var(--unit) * 56);
    /*width: calc(var(--scale) * var(--unit) * 379);*/
    width: 100%;
    margin: 0;   

    background-color: var(--white);

    box-sizing: border-box;
    border: calc(var(--scale) * var(--unit) * 3) solid var(--bordercolor);
    border-radius: 0 calc(var(--scale) * var(--unit) * 16) 0 calc(var(--scale) * var(--unit) * 16);

    /*文字周り*/
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: var(--textcolor);
    
    /*文字サイズ調整*/
    font-size: calc(var(--scale) * var(--unit) * 22);

    padding-left: 1em;
}



/*入力中*/
.inputbox-default:focus{
    background-color: var(--focus);
    outline:none;
}

/*セレクトボックス*/
.selectbox-wrapper{
    display: inline-block;
    position: relative;
    height: calc(var(--scale) * var(--unit) * 56);
    /*width: calc(var(--scale) * var(--unit) * 379);*/
    width: 87%;
    margin-left: 6.5%;
    margin-top: calc(var(--scale) * var(--unit) * 14);
}

.selectbox-wrapper::after{
    content: "Keyboard_Arrow_Down";
    font-family: "Material Symbols Outlined";
    font-size: calc(var(--scale) * var(--unit) * 45);
    color: var(--grey);

    display: inline-block;
    position: absolute;

    top: calc(var(--scale) * var(--unit) * 13);
    right: calc(var(--scale) * var(--unit) * 15);

    text-align: center;
    line-height: calc(var(--scale) * var(--unit) * 36);

    height: calc(var(--scale) * var(--unit) * 36);
    width: calc(var(--scale) * var(--unit) * 36);

}

.select{
    background-color: rgb(255, 255, 255);

    display: inline-block;
    height: calc(var(--scale) * var(--unit) * 56);
    width: 100%;
    margin: 0;

    -webkit-appearance: none;
    appearance: none;

    border: calc(var(--scale) * var(--unit) * 3) solid var(--bordercolor);

    /*文字周り*/
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: var(--textcolor);
    
    /*文字サイズ調整*/
    font-size: calc(var(--scale) * var(--unit) * 22);

    padding-left: 1em;
}

.select:focus{
    background-color: var(--focus);
    outline:none;
}



/*小見出し*/
h3{
    display: block;
    position: relative;
    height: calc(var(--scale) * var(--unit) * 47);
    margin: 0;

    background: linear-gradient(135deg, var(--menurichorange) 0%, var(--menuorange) 75%, var(--menupaleorange) 75%);

    border-radius: 0 calc(var(--scale) * var(--unit) * 12) 0 0;

    /*文字周り*/
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: var(--white);
    
    /*文字サイズ調整*/
    font-size: calc(var(--scale) * var(--unit) * 26);
    line-height: calc(var(--scale) * var(--unit) * 52);

    padding-left: 1.5em;
}

h3::before{
    content: "";
    display: block;
    position: absolute;

    top: calc(var(--scale) * var(--unit) * 14.5);
    left: calc(var(--scale) * var(--unit) * 12);
    
    width: calc(var(--scale) * var(--unit) * 18);
    height: calc(var(--scale) * var(--unit) * 18);

    background-color: var(--shineorange);

    border-radius: calc(var(--scale) * var(--unit) * 8.5);
    corner-shape: scoop;
}

/*入力内容送信*/
.default-button-wrapper{
    display: block;
    position: relative;
    width: calc(var(--scale) * var(--unit) * 250);
    height: calc(var(--scale) * var(--unit) * 75);
    padding: calc(var(--scale) * var(--unit) * 4);

    border: none;

    margin: 0 auto;

    border-radius: 9999px;
    background: linear-gradient(180deg, var(--vividyellow), var(--vividorange));
}

.default-button{
    display: block;
    width: calc(var(--scale) * var(--unit) * 250);
    height: calc(var(--scale) * var(--unit) * 75);

    border: none;

    border-radius: 9999px;

    background: linear-gradient(135deg, var(--vividorange), var(--vividyellow));

    /*文字周り*/
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--white);
    
    /*文字サイズ調整*/
    font-size: calc(var(--scale) * var(--unit) * 26);
    line-height: calc(var(--scale) * var(--unit) * 80);

    letter-spacing: 0.025em;
}

/*レッスンボタン*/
.lesson-button{
    display: inline-block;
    position: relative;

    height: calc(var(--scale) * var(--unit) * 180);
    width: calc(var(--scale) * var(--unit) * 160);
    text-align: center;

    margin-right: calc(var(--scale) * var(--unit) * 10);
    margin-left: calc(var(--scale) * var(--unit) * 10);
    margin-top: calc(var(--scale) * var(--unit) * 25);
    margin-bottom: calc(var(--scale) * var(--unit) * 25);

    background-color: var(--white);
    border: none;
    border-radius: calc(var(--scale) * var(--unit) * 13);

    box-shadow: 0 calc(var(--scale) * var(--unit) * 5) 0 var(--shadow);

    /*文字周り*/
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: var(--grey);
    
    /*文字サイズ調整*/
    font-size: calc(var(--scale) * var(--unit) * 22);
    line-height: calc(var(--scale) * var(--unit) * 310);

    letter-spacing: 0.025em;
}

.camerakidow::after{
    content: "mode_off_on";
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-size: calc(var(--scale) * var(--unit) * 75);
    line-height: calc(var(--scale) * var(--unit) * 125);
    color: var(--white);

    display: block;
    position: absolute;
    left: calc(var(--scale) * var(--unit) * 8);
    top: calc(var(--scale) * var(--unit) * 8);
    width: calc(var(--scale) * var(--unit) * 144);
    height: calc(var(--scale) * var(--unit) * 120);

    border: none;
    border-radius: calc(var(--scale) * var(--unit) * 8);

    background: linear-gradient(to right, #f33a8a, #fe85df)
}

.shashin::after{
    content: "photo_camera";
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-size: calc(var(--scale) * var(--unit) * 75);
    line-height: calc(var(--scale) * var(--unit) * 125);
    color: var(--white);

    display: block;
    position: absolute;
    left: calc(var(--scale) * var(--unit) * 8);
    top: calc(var(--scale) * var(--unit) * 8);
    width: calc(var(--scale) * var(--unit) * 144);
    height: calc(var(--scale) * var(--unit) * 120);

    border: none;
    border-radius: calc(var(--scale) * var(--unit) * 8);

    background: linear-gradient(to right, #178bed, #17ebed)
}