@charset "utf-8";

/****************************************
        import
*****************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700;900&family=Tilt+Warp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/****************************************
               Reset CSS
*****************************************/
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
article,aside,dialog,figure,footer,header,hgroup,hr,nav,section{display:block}a,hr{border:0;padding:0}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1;}nav ul li{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0;transition:.3s}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}input[type=button],input[type=submit]{border-radius:0;-webkit-box-sizing:content-box;-webkit-appearance:button;appearance:button;border:none;box-sizing:border-box;cursor:pointer}input[type=button]::-webkit-search-decoration,input[type=submit]::-webkit-search-decoration{display:none}input[type=button]::focus,input[type=submit]::focus{outline-offset:-2px}

/****************************************
                Common
*****************************************/
*{
    font-display: swap;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

*::-webkit-scrollbar{
    display:none;
}

/****************************************
        base setting
*****************************************/
html{
    font-size: 14px;
    min-height: 100vh;
}
body{
    font-family: "Work Sans","Noto Sans JP";
    font-size: 14px;
    background-color: #FEFEFE;
    min-height: 100vh;
}
a{
    color: #fff;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* タップ時の背景色 */
    text-decoration:none!important;
    transition: all 0.3s;
    outline:none;
}

li{list-style: none!important;}

.hide{display:none!important;}

.clearfix:after {
    display:block;
    clear:both;
    height:0px;
    visibility:hidden;
    content:".";
}
.clearfix {
    min-height: 1px;
}
* html .clearfix {
    height: 1px;
    height: auto;
    overflow: hidden;
}

textarea:read-only {
  background-color: #ccc;
}

/****************************************
         position
*****************************************/
.p-r{position:relative;}
.p-a{position:absolute;}
.p-f{position:fixed;}

/****************************************
        text
*****************************************/
.f10{font-size:10px;}
.f11{font-size:11px;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f24{font-size:24px;}
.f28{font-size:28px;}
.f28{font-size:32px;}

.lh100{line-height:1em}
.lh120{line-height:1.2em}
.lh140{line-height:1.4em}
.lh150{line-height:1.5em}
.lh200{line-height:2em}

.tc{text-align:center!important;}
.tl{text-align:left!important;}
.tr{text-align:right!important;}

.fwbold{font-weight: bold;}

.vtop{vertical-align: top;}
.vmid{vertical-align: middle;}
.vbtm{vertical-align: bottom;}

/****************************************
        size
*****************************************/
.w5{width:5%!important;}
.w10{width:10%!important;}
.w14{width:calc(100% / 7)!important;}
.w15{width:15%!important;}
.w16{width:calc(100% / 6)!important;}
.w20{width:20%!important;}
.w25{width:25%!important;}
.w30{width:30%!important;}
.w33{width:calc(100% / 3)!important;}
.w35{width:35%!important;}
.w40{width:40%!important;}
.w45{width:45%!important;}
.w50{width:50%!important;}
.w55{width:55%!important;}
.w60{width:60%!important;}
.w65{width:60%!important;}
.w66{width:calc(100% / 3 * 2)!important;}
.w70{width:70%!important;}
.w75{width:75%!important;}
.w80{width:80%!important;}
.w85{width:85%!important;}
.w90{width:90%!important;}
.w95{width:95%!important;}
.w100{width:100%!important;}

.ws80{width:80px;}
.ws100{width:100px;}
.ws120{width:120px;}
.ws140{width:140px;}
.ws180{width:180px;}
.ws240{width:240px;}
.ws320{width:320px;}

.h4{height:4rem!important;}
.h8{height:8px!important;}
.h10{height:20rem!important;}
.h100{height:100%!important;}

.mw450{max-width: 480px;}
.mh90{min-height: 90px;}

/****************************************
         margin/padding
*****************************************/
.ma{margin-right:auto;margin-left:auto;}

.m2{margin-top:2px;margin-bottom:2px;}
.m4{margin-top:4px;margin-bottom:4px;}
.m6{margin-top:6px;margin-bottom:6px;}
.m8{margin-top:8px;margin-bottom:8px;}
.m10{margin-top:10px;margin-bottom:10px;}
.m16{margin-top:16px;margin-bottom:16px;}
.m20{margin-top:20px;margin-bottom:20px;}
.m24{margin-top:24px;margin-bottom:24px;}
.m32{margin-top:32px;margin-bottom:32px;}

.ms2{margin-right:2px;margin-left:2px;}
.ms4{margin-right:4px;margin-left:4px;}
.ms6{margin-right:6px;margin-left:6px;}
.ms8{margin-right:8px;margin-left:8px;}
.ms10{margin-right:10px;margin-left:10px;}
.ms16{margin-right:16px;margin-left:16px;}
.ms20{margin-right:20px;margin-left:20px;}
.ms24{margin-right:24px;margin-left:24px;}
.ms32{margin-right:32px;margin-left:32px;}

.mt2{margin-top:2px!important;}
.mt4{margin-top:4px!important;}
.mt6{margin-top:6px!important;}
.mt8{margin-top:8px!important;}
.mt10{margin-top:10px!important;}
.mt16{margin-top:16px!important;}
.mt20{margin-top:20px!important;}
.mt24{margin-top:24px!important;}
.mt32{margin-top:32px!important;}

.mb0{margin-bottom:0px!important;}
.mb1{margin-bottom:1px!important;}
.mb2{margin-bottom:2px!important;}
.mb4{margin-bottom:4px!important;}
.mb6{margin-bottom:6px!important;}
.mb8{margin-bottom:8px!important;}
.mb10{margin-bottom:10px!important;}
.mb16{margin-bottom:16px!important;}
.mb20{margin-bottom:20px!important;}
.mb24{margin-bottom:24px!important;}
.mb32{margin-bottom:32px!important;}

.mr2{margin-right:2px!important;}
.mr4{margin-right:4px!important;}
.mr6{margin-right:6px!important;}
.mr8{margin-right:8px!important;}
.mr10{margin-right:10px!important;}
.mr16{margin-right:16px!important;}
.mr20{margin-right:20px!important;}
.mr24{margin-right:24px!important;}
.mr32{margin-right:32px!important;}

.ml0{margin-left:0px!important;}
.ml2{margin-left:2px!important;}
.ml4{margin-left:4px!important;}
.ml6{margin-left:6px!important;}
.ml8{margin-left:8px!important;}
.ml10{margin-left:10px!important;}
.ml16{margin-left:16px!important;}
.ml20{margin-left:20px!important;}
.ml24{margin-left:24px!important;}
.ml32{margin-left:32px!important;}

.pa2{padding:2px;}
.pa4{padding:4px;}
.pa6{padding:6px;}
.pa8{padding:8px;}
.pa10{padding:10px;}
.pa16{padding:16px;}
.pa20{padding:20px;}
.pa24{padding:24px;}
.pa32{padding:32px;}

.parem1{padding: 0.75rem;}
.parem2{padding: 1rem;}
.parem3{padding: 1.25rem;}

.p2{padding-top:2px;padding-bottom:2px;}
.p4{padding-top:4px;padding-bottom:4px;}
.p6{padding-top:6px;padding-bottom:6px;}
.p8{padding-top:8px;padding-bottom:8px;}
.p10{padding-top:10px;padding-bottom:10px;}
.p16{padding-top:16px;padding-bottom:16px;}
.p20{padding-top:20px;padding-bottom:20px;}
.p24{padding-top:24px;padding-bottom:24px;}
.p32{padding-top:32px;padding-bottom:32px;}

.ps2{padding-left:2px;padding-right:2px;}
.ps4{padding-left:4px;padding-right:4px;}
.ps6{padding-left:6px;padding-right:6px;}
.ps8{padding-left:8px;padding-right:8px;}
.ps10{padding-left:10px;padding-right:10px;}
.ps16{padding-left:16px;padding-right:16px;}
.ps17{padding-left:17px;padding-right:17px;}
.ps20{padding-left:20px;padding-right:20px;}
.ps24{padding-left:24px;padding-right:24px;}
.ps32{padding-left:32px;padding-right:32px;}

.pt2{padding-top:2px!important;}
.pt4{padding-top:4px!important;}
.pt6{padding-top:6px!important;}
.pt8{padding-top:8px!important;}
.pt10{padding-top:10px!important;}
.pt16{padding-top:16px!important;}
.pt20{padding-top:20px!important;}
.pt24{padding-top:24px!important;}
.pt32{padding-top:32px!important;}

.pb2{padding-bottom:2px!important;}
.pb4{padding-bottom:4px!important;}
.pb6{padding-bottom:6px!important;}
.pb8{padding-bottom:8px!important;}
.pb10{padding-bottom:10px!important;}
.pb16{padding-bottom:16px!important;}
.pb20{padding-bottom:20px!important;}
.pb20{padding-bottom:24px!important;}
.pb32{padding-bottom:32px!important;}

.flex {display: flex;}
.flex_col {flex-direction: column;}
.justify_row {justify-content: row;}
.justify_between {justify-content: space-between;}
.justify_column {justify-content: column;}
.justify_reverse {justify-content: column-reverse;}
.justify_left {justify-content: flex-start;}
.justify_center {justify-content: center;}
.justify_right {justify-content: flex-end;}

.items_center {align-items: center;}

.grid_cols1 {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid_cols2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid_cols3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid_cols4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid_cols5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid_cols6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid_cols7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid_cols8 {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));}

.gap1 {gap: 1rem;}
.gap2 {gap: 1.2rem;}
.gap3 {gap: 1.3rem;}
.gap4 {gap: 1.4rem;}
.gap5 {gap: 1.5rem;}
.gap6 {gap: 1.6rem;}
.gap7 {gap: 1.7rem;}
.gap8 {gap: 1.8rem;}

.col_span2 {grid-column: span 2 / span 2;}
.col_span3 {grid-column: span 3 / span 3;}
.col_span4 {grid-column: span 4 / span 4;}
.col_span5 {grid-column: span 5 / span 5;}
.col_span6 {grid-column: span 6 / span 6;}
.col_span7 {grid-column: span 7 / span 7;}
.col_span8 {grid-column: span 8 / span 8;}

.bg_gray {background-color: #EEEEEE;}
.bg_gray200 {background-color: #E5E7EB;}
.text_gray300 {color: #d5d1db;}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

/****************************************
                button
*****************************************/
/* btn width size */
.btn_s_ss{width: 64px;}
.btn_s_s{width: 180px;}
.btn_s_m{width: 210px;}
.btn_s_l{width: 300px;}
.btn_s_20{width: 20%;}
.btn_s_40{width: 40%;}
.btn_s_50{width: 50%;}
.btn_s_60{width: 60%;}
.btn_s_80{width: 80%;}
.btn_s_100{width: 100%;}

/* btn height size */
.btn_h_ll{height: 20px;font-size: 10px;font-weight: bold;line-height: 20px;}
.btn_h_l{height: 28px;font-size: 11px;font-weight: bold;line-height: 28px;}
.btn_h_m{height: 40px;}
.btn_h_h{height: 60px;}

/* btn position */
.btn_p_c{margin-right:auto;margin-left:auto;}
.btn_p_l{margin-right:auto;margin-left:0px;}
.btn_p_r{margin-right:0px;margin-left:auto;}


/****************************************
                box-shadow
*****************************************/
.box_shadow{box-shadow: 1px 1px 2px rgba(0,0,0,0.6)}

/****************************************
                border
*****************************************/
.border{border:solid 1px;}
.border_top{border-top:solid 1px;}
.border_left{border-left:solid 1px;}
.border_right{border-right:solid 1px;}
.border_bottom{border-bottom:solid 1px;}

.border_blue{border-color:#2563eb;}
.border_green{border-color:#4ade80;}
.border_cyan{border-color:#06B6D4;}
.border_yellow{border-color:#FACC14;}

.border_w_1 {border-width: 1px!important;}
.border_w_2 {border-width: 2px!important;}
.border_w_3 {border-width: 3px!important;}
.border_w_4 {border-width: 4px!important;}

.rounded {border-radius: 4px;}

.text-overflow {text-overflow: ellipsis;overflow: hidden;}