/*　メイン　---------------------------------------------------*/
main{
	width:90%;
	margin:0 auto;
	max-width:1280px;

	font-size:18px;
	margin-bottom:100px;

	/*--変数--*/
	--border: #e5e7eb;
	--text_color: #333333;
	--shadow: 0 10px 25px rgba(0,0,0,0.08);
    --brand: #5b8def;      /* メインカラー */
    --brand-2: #8b5cf6;    /* アクセント（グラデ） */
    --warn: #f59e0b;
    --error: #ef4444;

	color:var(--text_color);

}

main h1{
	font-size:26px;
	font-weight:500;
}

.CTitleList{
    list-style-type:circle;
    margin-left:24px;
    line-height:1.6;
    margin-top:10px;
    margin-bottom:20px;
}

/*　カード　---------------------------------------------------*/
.CCard{
	border-radius:20px;
	border: 1px solid rgb(200 200 230);

	padding: 20px 20px 36px 20px;
}
.CCard_Input{
	display:grid;
	gap:14px;
	grid-template-columns: repeat(3, 1fr); /* 横幅があれば3列 */
}
.CCard_p{
	margin:10px 0;
}
.CCard input[type="number"],select{
    width: 100%;
    height:50px;
    font-size: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text_color);
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
    -webkit-appearance: none;
    appearance: textfield;

    text-align:center;
}
.CCard input:focus {
	border-color: #5b8def;
	box-shadow: 0 0 0 4px rgba(91, 141, 239, 0.45);
}

/* inputのスピンボタンを消す */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


@media only screen and (max-width:960px){/*スマホ対応*/
	.CCard_Input{
		grid-template-columns: repeat(1, 1fr); /* 横幅があれば3列 */
	}
}

.CPeopleInput{
    display:flex;
    gap:5px;
}
.CPeopleInput button{
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, white), color-mix(in srgb, var(--brand-2) 65%, white));
    color: white;
    border: none;
}

/*　固定額支払い----------------------------*/
.CFixed{
    border-top:1px dashed rgb(200 200 230);
    padding: 20px 20px 36px 20px;
    margin-top:30px;
}
.CFixedInput{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:20px;
}
.CFixedInput2{
    display:flex;
    gap:5px;
}
.CFixedInput2 button{
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, white), color-mix(in srgb, var(--brand-2) 65%, white));
    color: white;
    border: none;
}

.CFixedAmount{

}

.CBlockFixedAmount{/*固定額入力画面--*/
    width:80%;
    margin:5px auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    /*color:blue;*/

    /*display:grid;
    gap:14px;
    grid-template-columns: repeat(3, 1fr);*/ /* 横幅があれば3列 */
}
.CFixedAmount span{
    white-space:nowrap;/*改行させない*/
}
.CFixedAmount input[type="number"]{
    /*width:80%;*/
}


@media only screen and (max-width:960px){
    .CFixedInput{
        display:flex;
        flex-flow:column;
        gap:10px
    }
    .CBlockFixedAmount{
        width:100%;
    }
}



/*　端数設定-------------------------------*/
.CFraction{
    /*border-radius:20px;
    border: 1px solid rgb(200 200 230);*/
    border-top: 1px dashed rgb(200 200 230);

    padding: 20px 20px 36px 20px;
    margin-top:30px;
    /*line-height:1.5;*/
}
.CFractionTitle{
    display:flex;
    align-items:center;
}
.CFractionTitle .CLine{
    width:80%;
    margin:0 auto;
    height:2px;
    background-color:rgb(200 200 230);
}
.CFractionRadio{
    padding:10px 0px 20px 0px;
    /*background:rgb(230 230 230);*/
    display:flex;
    gap:30px;
}
.CFractionPeople{
    display:flex;
    align-items:center;
    margin-top:10px;
    gap:20px;

}
.CFractionPeople2{
    display:flex;
    gap:5px;
}
.CFractionPeople2 button{
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, white), color-mix(in srgb, var(--brand-2) 65%, white));
    color: white;
    border: none;
}
input[type="radio"]:focus {
    display:none;　/*ラジオボタン周りの青枠を消す*/
}

@media only screen and (max-width:960px){
    .CFractionRadio{
        display:flex;
        flex-flow:column;
        gap:10px;
    }
    .CFractionPeople{
        display:flex;
        flex-flow:column;
        gap:10px;
    }
}

/* ボタン---------------------------------*/
.CBu_Co{
    /*display: flex;
    gap: 10px;
    flex-wrap: wrap;*/
    margin-top: 20px;
    text-align:center;
}
.CBu{
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text_color);
    cursor: pointer;
    transition: transform .06s ease, box-shadow .15s ease, background .15s, opacity .15s;
    box-shadow: var(--shadow);
    font-size:18px;
    font-weight: 600;
}
.CBu:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}
/*.bu:active { transform: translateY(5px); }*/
button.pressed {
	transform: translateY(5px);
}

.CBu_Generate{
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, white), color-mix(in srgb, var(--brand-2) 65%, white));
    color: white;
    border: none;
}
/*.bu_copy{
	background: transparent;
	border: 1px solid var(--border);
}
.bu_clear{
	background: color-mix(in srgb, var(--warn) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
}*/



/* エラー表示---------------------------------*/
.CError{
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    /*font-size: 0.95rem;*/
    border: 1px solid var(--border);

    color: white;
    background: var(--error);
    border-color: transparent;
}

/* ブロック表示---------------------------------*/
.CBlock{
    width:80%;
    border-radius:20px;
    /*border: 1px solid rgb(200 200 230);*/
    /*border: 2px solid skyblue;*/
    border: 2px solid var(--brand);
    /*background-color:skyblue;*/
    margin: 8px auto;               /* 上下の間隔 */
    display: flex;               /* 横並び配置 */
    justify-content: space-between; /* 左右に分ける */
    align-items: center;         /* 縦方向中央揃え */
    padding: 12px 20px;             /* 左右の余白 */
    font-size: 20px;
    font-weight: bold;
}
.CBlockResultBasic{
    width:80%;
    border-radius:20px;
    border: 1px solid rgb(200 200 230);
    /*background-color:skyblue;*/
    margin: 8px auto;               /* 上下の間隔 */
    display: flex;               /* 横並び配置 */
    justify-content: space-between; /* 左右に分ける */
    align-items: center;         /* 縦方向中央揃え */
    padding: 12px 20px;             /* 左右の余白 */
    font-size: 20px;
    font-weight: bold;
}
.CResultTotal{
    border-top:1px dashed rgb(200 200 230);
    padding: 20px 20px 0px 20px;
    margin-top:30px;
    text-align:right;
    font-size:20px;
}
.CResultTotalYen{
    font-weight:bold;
}

@media only screen and (max-width:960px){
    .CBlock{
        width:100%;
    }
    .CBlockResultBasic{
        width:100%;
    }
}


/* iPhoneでボタンをダブルクリックすると画面が拡大アップされてしまう。--------------------------------*/
/*　とりあえず、これを追加することでボタンをダブルクリックしても拡大アップされないようだ。               */
/*　しかし、それ以外では、拡大アップされてしまうが、とりあえずボタンだけでもいいかな                    */
/*button, a, p, .tap-target {
  touch-action: manipulation;
}*/

html, .tap-target {
  touch-action: manipulation;
}

/*html { -webkit-text-size-adjust: 100%; }*/