@charset "utf-8";

/* :buttons
------------------------------ */

/* :basis
------------------------------ */
.btn{
background:#2693ff;
background:#0673df;
box-shadow:0 3px 0 #05a;
border:0;
border-radius:5px;
color:#fff;
width:auto;
font-size:14px;
font-weight:bold;
text-align:center;
padding:10px 0;
text-decoration:none;
position:relative;
transition:all 0.3s;
cursor:pointer;
}
.btn2{
background:#2693ff;
background:#fff;
box-shadow:0 3px 0 #007aff;
border:solid 2px #0673df;
border-radius:5px;
color:#05a;
width:auto;
font-size:14px;
font-weight:bold;
text-align:center;
padding:10px 0;
text-decoration:none;
position:relative;
transition:all 0.3s;
cursor:pointer;
}
/* ホバー時 */
.btn:hover, .btn2:hover{
box-shadow:none;
transform:translateY(3px);
}
.normal{
/* display:inline-block; */
box-sizing:border-box;
display: inline-flex; /* アイコンとテキストを横並びに */
align-items: center; /* 縦方向中央揃え */
justify-content: center; /* テキストを中央に配置 */
}
.flex{
display:flex;
align-items:center; /* アイコンとテキストを中央揃え */
justify-content:center; /* テキストも中央に */
gap:10px; /* アイコンとテキストの間隔 */
}
.btn_pdlr4{ /* ボタン内左右 */
padding-right:4px;
padding-left:4px;
}
.btn_pdlr8{ /* ボタン内左右 */
padding-right:8px;
padding-left:8px;
}
.btn_pdlr16{ /* ボタン内左右 */
padding-right:16px;
padding-left:16px;
}
.btn_pdlr24{ /* ボタン内左右 */
padding-right:24px;
padding-left:24px;
}
.btn_pdtb8{ /* ボタン内上下 */
padding-top:8px;
padding-bottom:8px;
}
.btn_pdtb16{ /* ボタン内上下 */
padding-top:16px;
padding-bottom:16px;
}
.btn_font14{font-size:14px;}
.btn_font16{font-size:16px;}
.btn_nwp{white-space:nowrap;}
.btn_w100{width:100%;}

/* ←→
--------------------------------------------------------- */
.btn_larw_icon{
padding-left:34px;
padding-right:16px;
}
.btn_larw_icon::before{
content:"\2190"; /* Unicode 左矢印 (←) */
font-size:20px;
position:absolute;
top:50%;
left:12px;
transform:translateY(-50%);
}
.btn_rarw_icon{
padding-left:16px;
padding-right:34px;
}
.btn_rarw_icon::after{
content:"\2192"; /* Unicode 右矢印 (→) */
font-size:20px;
position:absolute;
top:50%;
right:12px;
transform:translateY(-50%);
}

/* buttons with icons
--------------------------------------------------------- */
.btn_login_icon::before{
content:"";
background-image:url('../img/button_icons/login.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_login_icon2::before{
content:"";
background-image:url('../img/button_icons/login.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_logout_icon::before{
content:"";
background-image:url('../img/button_icons/logout.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_logout_icon2::before{
content:"";
background-image:url('../img/button_icons/logout.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_close_icon::before{
content:"";
background-image:url('../img/button_icons/close.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_close_icon2::before{
content:"";
background-image:url('../img/button_icons/close.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_calendar_icon::before{
content:"";
background-image:url('../img/button_icons/calendar.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_calendar_icon2::before{
content:"";
background-image:url('../img/button_icons/calendar.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_form_icon::before{
content:"";
background-image:url('../img/button_icons/form.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_form_icon2::before{
content:"";
background-image:url('../img/button_icons/form.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_confirm_icon::before{
content:"";
background-image:url('../img/button_icons/confirm.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_confirm_icon2::before{
content:"";
background-image:url('../img/button_icons/confirm.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_submit_icon::before{
content:"";
background-image:url('../img/button_icons/submit.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_submit_icon2::before{
content:"";
background-image:url('../img/button_icons/submit.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_talk_icon::before{
content:"";
background-image:url('../img/button_icons/talk.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}

.btn_reminder_icon::before{
content:"";
background-image:url('../img/button_icons/reminder.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_reminder2_icon::before{
content:"";
background-image:url('../img/button_icons/reminder2.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_reminder3_icon::before{
content:"";
background-image:url('../img/button_icons/reminder3.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_reminder3_icon2::before{
content:"";
background-image:url('../img/button_icons/reminder3.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_firstpage_icon::before{
content:"";
background-image:url('../img/button_icons/firstpage.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_firstpage_icon2::before{
content:"";
background-image:url('../img/button_icons/firstpage.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_trash_icon::before{
content:"";
background-image:url('../img/button_icons/trash.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}
.btn_trash_icon2::before{
content:"";
background-image:url('../img/button_icons/trash.0673df.svg');
background-size:20px 20px;
background-repeat:no-repeat;
width:20px;
height:20px;
margin-right: 8px;
}

/* wrapper
--------------------------------------------------------- */
.btn_wrapper_v{
display:flex;
flex-direction:column;
gap:1em;
width:fit-content;
}
.btn_wrapper_h{
display:grid;
grid-auto-columns: max-content;
grid-auto-flow:column;
gap:1rem;
width:fit-content;
}
.btn_wrapper_h_same_width{grid-auto-columns:1fr;}
.btn_wrapper_h_right{margin-left:auto;} /* 右寄せ */


.btn_wrapper_w_auto{
width:auto; /* width:fit-content解除 */
}
.btn_wrapper_w100{width:100%;}
.btn_wrapper_w80{width:80%;}
.btn_wrapper_w60{width:60%;}

.btn_wrapper_mgt8auto{margin:8px auto 0;}
.btn_wrapper_mgt16auto{margin:16px auto 0;}
.btn_wrapper_mgt24auto{margin:24px auto 0;}
.btn_wrapper_mgt32auto{margin:32px auto 0;}

.btn_wrapper_mgt8{margin-top:8px;}
.btn_wrapper_mgt16{margin-top:16px;}
.btn_wrapper_mgt24{margin-top:24px;}
.btn_wrapper_mgt32{margin-top:32px;}

.btn_wrapper_mgb8{margin-bottom:8px;}
.btn_wrapper_mgb16{margin-bottom:16px;}
.btn_wrapper_mgb24{margin-bottom:24px;}
.btn_wrapper_mgb32{margin-bottom:32px;}

.btn_wrapper_pdlr20{padding-left:20px;padding-right:20px;}

.btn_sp_r{float:none;}

/* Responsive max-width:480px
--------------------------------------------------------- */
@media screen and (max-width:480px){
.btn_sp_r{float:right;margin-right:16px;}
.btn_sp_r::after {content:"";display:block;clear:both;}

}