@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap&family=Roboto:wght@400;700&display=swap');



html{
  font-size: 16px;
  min-height: 100%;
}
body *{
  box-sizing:border-box;
}
body{
  font-family: Roboto, "Noto Sans JP", sans-serif;
	font-weight: 400;
  background-color: #EEE;
  color: #434343;
  margin: 0;
  padding: 0;
}
main{
  position: relative;
  z-index: 50;
}
img{
  max-width: 100%;
}
a{
  color: #000;
  text-decoration: underline;
}

h1,h2,h3,h4,h5,p{
  margin: 0 0 20px;
  padding: 0px;
  font-size: inherit;
  font-weight: bold;
}
p{
  font-weight: normal;
}
p:last-child{
  margin-bottom: 0px;
}

@media (max-width: 767px){
  .spsm{
    font-size: 0.8em
  }
}
img{
  max-width: 100%;
  height: auto;
}
ul,li{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
li{
  margin: 0 0 8px;
}
ul.disc{
  padding-left: 20px;
}

ul.disc li{
  list-style-type: disc;
}
p{
  line-height: 1.8;
}
hr{
  border-top: 1px solid rgba(0,0,0,0.35);
  border-bottom: 0px;
}
@media(min-width:801px){
  .sp{
    display: none;
  }
}
@media(max-width:800px){
  .pc{
    display: none;
  }
}
.mt40{
  margin-top: 40px !important;
}
.mt20{
  margin-top: 20px !important;
}
.mt10{
  margin-top: 10px !important;
}
.mb0{
  margin-bottom: 0px !important;
}
.mb40{
  margin-bottom: 40px !important;
}
.mb60{
  margin-bottom: 60px !important;
}
.mb20{
  margin-bottom: 20px !important;
}
.mb10{
  margin-bottom: 10px !important;
}
.my40{
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.my20{
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.my10{
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.mxauto{
  margin-right: auto;
  margin-left: auto;
}
.mx20{
  margin-right: 20px;
  margin-left: 20px;
}
.mx10{
  margin-right: 10px;
  margin-left: 10px;
}
.p20{
  padding:20px;
}
@media (max-width:800px){
  .p20{
    padding: 10px;
  }
}

.bold{
  font-weight: bold;
}
.normal{
  font-weight: normal;
}
.center{
  text-align: center;
}
.left{
  text-align: left;
}
.right{
  text-align: right;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.nowrap{
  white-space: nowrap;
}
.underline{
  border-bottom: 1px solid #999;
}
.bgwhite{
  background-color: #FFF;
}
.f-small{
  font-size: 12px;
}
.f-regular{
  font-size: 14px;
}
.f-medium{
  font-size: 16px;
}
.f-large{
  font-size: 18px;
}
.f-xlarge{
  font-size: 21px;
}
.f-xxlarge{
  font-size: 24px;
}
.f-xxxlarge{
  font-size: 32px;
}
.f-larger{
  font-size: 1.5em;
}
@media(max-width: 600px){
  .f-regular{
    font-size: 12px;
  }
  .f-large{
    font-size: 18px;
  }
  .f-xlarge{
    font-size: 18px;
  }
  .f-xxlarge{
    font-size: 21px;
  }
  .f-xxxlarge{
    font-size: 21px;
  }
}
@media (min-width: 801px){
  .flex{
    display: flex;
    gap:20px;
  }
  .flex.div4 > div{
    flex:0 0 calc((100% - 60px) / 4);
  }
}
@media(max-width: 800px){
  .flex.sp{
    display: flex;
    gap:10px;
  }
}

.flex-auto{
  flex:1 1 auto;
}
.flex-wrap{
  flex-wrap:wrap;
}
.justify-between{
  justify-content:space-between;
}
.justify-evenly{
  justify-content:space-evenly;
}
.justify-center{
  justify-content:center;
}
.justify-start{
  justify-content:flex-start;
}
.justify-end{
  justify-content:flex-end;
}
.items-center{
  align-items:center;
}
.items-start{
  align-items:flex-start;
}
.items-end{
  align-items:flex-end;
}
.flex-reverse{
  flex-direction:row-reverse;
}
.flex-column{
  flex-direction:column;
}
.relative{
  position: relative;
}
.absolute{
  position: absolute;
}

.inner{
  max-width: 1120px;
  margin: auto;
}

.biz-red{
  color: #ED1846;
}
.biz-orange{
  color: #F2792C;
}
.biz-blue{
  color: #009BDF;
}
.biz-green{
/*  color: #4DB848;*/
  color: #319f2c;
}
.biz-purple{
  color: #A1499C;
}

.bg-biz-red{
  background-color: #ED1846 !important;
  color: #FFF;
}
.bg-biz-orange{
  background-color: #F2792C !important;
  color: #FFF;
}
.bg-biz-blue{
  background-color: #009BDF !important;
  color: #FFF;
}
.bg-biz-green{
/*  color: #4DB848;*/
  background-color: #319f2c !important;
  color: #FFF;
}
.bg-biz-purple{
  background-color: #A1499C !important;
  color: #FFF;
}

.button{
  background-color: #0173a3;
  border:none;
  color: #FFF;
  padding: 10px 20px;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.button.cancel{
  background-color: #999;
}
.headnavi{
  position: fixed;
  z-index: 500;
  width: 100%;
  padding: 10px;
  background-color: #EEE;
}
.headnavi .inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headnavi h1{
  margin: 0;
}
.headnavi .mypage a{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}
.headnavi .mypage a{
  text-decoration: none;  
}
.headnavi .mypage .avatar{
  width: 40px;
  border-radius: 100%;
  background-color: #CCC;
  position: relative;
  overflow: hidden;
  border:2px solid #a0c9dc;
}
.headnavi .mypage .avatar:before{
  content: "";
  display: block;
  padding-top: 100%;
}
.headnavi .mypage .avatar img{
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

@media(min-width:601px){

  .headnavi .spmenu,.headnavi .sp{
    display: none;
  }
  .headnavi .flex{
    display: flex;
    gap: 20px;
  }
  .headnavi nav{
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
  }
  .headnavi nav li{
    margin-bottom: 0px;
  }
}
@media(max-width:600px){
  .headnavi .spmenu{
    display: block;
    position: absolute;
    right: 15px;
    top: calc(50% - 15px);
    width: 40px;
    height: 30px;
    border:3px solid #58595c;
    border-width: 3px 0;
    z-index: 2;
    cursor: pointer;
  }
  .headnavi .spmenu:before{
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #58595c;
    position: absolute;
    top: calc(50% - 1.5px);
  }
  .headnavi .spmenu.open{
    border-width: 0;
  }
  .headnavi .spmenu.open:before,.headnavi .spmenu.open:after{
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #58595c;
    position: absolute;
    top: calc(50% - 1.5px);
    transform: rotate(45deg);
  }
  .headnavi .spmenu.open:after{
    transform: rotate(-45deg);
  }
  .headnavi nav{
    position:fixed;
    width: 100%;
    height: 100%;
    display: block;
    left: 100%;
    top: 0%;
    background-color: #FFF;
    padding: 50px 30px 0;
    z-index: 1;
    transition: left ease 0.5s;
  }
  .headnavi nav.open{
    left: 0%;
  }
  .headnavi nav li{
    padding: 8px 0;
  }
  .headnavi .mypage a{
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 20px;
  }
}
footer{
  margin-top: 80px;
  background-color: #58595c;
  color: #FFF;
}
footer .inner{
  padding: 40px 0 60px;
}
footer a{
  color: #FFF;
}
footer .flex{
  gap: 40px;
}
.ic.onedrive:before {
  background: url(/assets/icon-onedrive-8a0976ed3a4a21ee1a2417afe40ae1ded43043083ab664c343a7c77636bade2b.svg) no-repeat;
  background-size: 100%;
  vertical-align: baseline;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *




 */