*{

    box-sizing:border-box;

}

body{

    margin:0;

    padding:0;

    background:#1b1b1b;

    color:white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}

.app{

    max-width:500px;

    margin:auto;

    min-height:100vh;

    padding:20px;

}

header{

    text-align:center;

    margin-bottom:30px;

}

h1{

    margin:0;

    font-size:36px;

}

.subtitle{

    margin-top:8px;

    color:#bbbbbb;

    font-size:16px;

}

.screen{

    width:100%;

}

.menuButton{

    width:100%;

    padding:18px;

    margin-bottom:15px;

    font-size:22px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    text-align:center;

}

.menuButton:hover{

    opacity:0.9;

}

.backButton{

    width:100%;

    padding:14px;

    margin-bottom:20px;

    font-size:18px;

    border:none;

    border-radius:10px;

    cursor:pointer;

}

.card{

    background:#2a2a2a;

    border-radius:10px;

    padding:20px;

}

.inputGroup{

    margin-bottom:18px;

}

.inputGroup label{

    display:block;

    margin-bottom:6px;

    font-size:16px;

}

.inputGroup input{

    width:100%;

    padding:12px;

    font-size:18px;

    border-radius:8px;

    border:none;

}

.inputGroup select{

    width:100%;

    padding:12px;

    font-size:18px;

    border-radius:8px;

    border:none;

}

.calcButton{

    width:100%;

    padding:12px;

    font-size:18px;

    border:none;

    border-radius:10px;

    cursor:pointer;

}

.result{

    margin-top:25px;

    padding:20px;

    background:#111111;

    border-radius:10px;

    text-align:center;

    font-size:30px;

    font-weight:bold;

}

.smallText{

    font-size:14px;

    color:#bbbbbb;

    margin-top:10px;

}

@media (max-width:500px){

    .app{

        padding:15px;

    }

    h1{

        font-size:30px;

    }

    .menuButton{

        font-size:20px;

    }

    .calcButton{

        font-size:20px;

    }

}

.menuTitle{

    display:block;

    font-size:24px;

    font-weight:bold;

}

.menuSubTitle{

    display:block;

    margin-top:6px;

    font-size:15px;

}

/* =====================================
   共通クラス
===================================== */

.hidden{

    display:none;

}

.left{

    text-align:left;

}

.center{

    text-align:center;

}

.right{

    text-align:right;

}


/* ---------- 幅 ---------- */

.w60{

    width:60px;

}

.w70{

    width:70px;

}

.w80{

    width:80px;

}

.w90{

    width:90px;

}

.w100{

    width:100px;

}

.w120{

    width:120px;

}

.w230{

    width:230px;

}

.w100p{

    width:100%;

}


/* ---------- 余白 ---------- */

.mt10{

    margin-top:10px;

}

.mb10{

    margin-bottom:10px;

}

.ml6{

    margin-left:6px;

}


/* ---------- テーブル ---------- */

.resultTable{

    width:100%;

}

.resultRight{

    text-align:right;

}


/* ---------- 文字 ---------- */

.resultLarge{

    font-size:28px;

}

.red{

    color:red;

}

/* 最下部に余白を追加（iPhoneで見やすくする） */
.app{
    padding-bottom: calc(250px + env(safe-area-inset-bottom));
}

/* 広告エリア */

#adArea{

    width:100%;

    min-height:250px;

    margin-top:40px;

    margin-bottom:20px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ---------- Native Ad ---------- */

#nativeAdArea{

    width:100%;

    min-height:120px;

    margin-top:24px;

    display:none;

}

/* ---------- Interstitial ---------- */

.interstitialAd{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.65);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.interstitialBox{

    width:90%;

    max-width:360px;

    background:#ffffff;

    border-radius:12px;

    padding:24px;

    text-align:center;

}

.interstitialTitle{

    font-size:20px;

    font-weight:bold;

    margin-bottom:18px;

}

.interstitialBody{

    height:180px;

    border:1px solid #cccccc;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:24px;

}

/* ---------- Header ---------- */

.titleBar{

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}

#settingsButton{

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:white;

    font-size:30px;

    cursor:pointer;

    padding:4px 8px;

}

#settingsButton:hover{

    opacity:0.8;

}

/* ---------- Settings ---------- */

.settingsModal{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(6px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.settingsBox{

    width:90%;

    max-width:420px;

    background:#1d1d1d;

    border-radius:18px;

    padding:24px;

    box-sizing:border-box;

    text-align:center;

    box-shadow:0 10px 40px rgba(0,0,0,0.4);

}

.settingsBox h2{

    margin-top:0;

    margin-bottom:24px;

}

.settingsBox .menuButton{

    margin-bottom:16px;

}

.settingsBox hr{

    margin:20px 0;

}

.settingsBox p{

    margin:8px 0;

}

/* ---------- Splash Screen ---------- */

#splashScreen{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:#111111;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:10000;

    transition:opacity 0.5s;

}

.splashContent{

    text-align:center;

    color:white;

}

.splashContent img{

    width:180px;

    height:180px;

    margin-bottom:28px;

}

.splashContent h1{

    margin:0;

    font-size:38px;

}

.splashContent p{

    margin:10px 0;

}

/* ---------- Footer ---------- */

.appFooter{

    margin-top:40px;

    margin-bottom:200px;

    text-align:center;

    color:#999;

    font-size:12px;

    line-height:1.6;

}

.appFooter p{

    margin:2px 0;

}

.aboutApp{

    width:90%;

    max-width:520px;

    margin:30px auto;

    text-align:left;

}

.aboutApp h2{

    text-align:center;

    margin-bottom:16px;

}

.aboutApp p{

    font-size:14px;

    line-height:1.8;

    margin-bottom:14px;

}

.computerBrand{

    text-align:left;

    margin-top:25px;

    margin-bottom:12px;

    font-size:22px;

    font-weight:bold;

}

.linkButton{

    display:block;

    width:100%;

    box-sizing:border-box;

    padding:18px;

    margin-top:12px;

    margin-bottom:12px;

    border-radius:12px;

    background:#ececec;

    color:#000;

    text-align:center;

    text-decoration:none;

    font-size:20px;

    font-weight:normal;

}

.gearModel{

    font-size:30px;

    font-weight:bold;

    margin-top:0;

    margin-bottom:5px;

}

.gearNote{

    width:90%;

    margin:16px auto;

    font-size:14px;

    line-height:1.6;

    text-align:left;

    color:#666;

}