@charset "UTF-8";

header {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  height: 60px;
  align-items: center;
}
navi{
  float:right;
  }
navi ul {
  max-width: 100%;
  display: flex;
  height: 40px;
}

navi ul li {
color: #333;
  padding: 0 10px;
  height: 100%;
}

navi ul li a {
  text-decoration: none;
  color: #333;
  display: block;
  height: 100%;
  display: flex;
  align-items: center;
  transition: .3s;
  font-weight: normal;
  position: relative;
  padding: 0 10px;
}

navi ul li a::after {
color: #333;
  content: '';
  display: block;
  height: 1px;
  width: 80%;
  background: Orange;
  position: absolute;
  bottom: 0;
  left: 10%;
  transform: scale(0, 1);
  transition: .3s;
}

navi ul li a:hover {
  color: Orange;
}

navi ul li a:hover::after {
  transform: scale(1, 1);
}
footer{
	background-color:#29a7e1;
	margin:50px 30px 0px 0px;
	padding:30px 0  30px  30px;
	text-align:left;
	color:#fff;
	font-size:15px;
}
footer div{
	text-align:center;
	margin:20px 0 0 0;
}

.tab-4 {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin:30px 0;
}

.tab-4 > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .7em 1em;
    background-color: #f2f2f2;
    color: #999;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-4 > label:hover,
.tab-4 label:has(:checked) {
    background-color: #2589d0;
    color: #fff;
}

.tab-4 label:has(:checked)::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #2589d0;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab-4 input {
    display: none;
}

.tab-4 > div {
    display: none;
    width: 100%;
    padding: 0;
}

.tab-4 label:has(:checked) + div {
    display: block;
}


.flexbox-container {

    margin:30px 0 0 0;
}

main {
    width: 380px;
    min-width: 380px;
    margin: auto;
    height: 300px;
}

aside {
    width: 375px;
    min-width: 375px;
    margin: auto;
    height: 300px;
}

.blue{
  margin:0 10px;
  border-radius: 10px;
  border:3px solid #29a7e1;
}
.blue img{
  border-radius: 0 0 0px 7px;
}
.blueTitle{
  background-color: #29a7e1;
  color:#ffffff;
  padding:5px 10px;
}
.blueText{
  color:#29a7e1;
  padding:10px 10px;
  float:right;
    width:75%;
}
.orange{
  margin:0 10px;
  border-radius: 10px;
  border:3px solid #f8b62a;
}
.orange img{
  border-radius: 0 0 0px 7px;
}
.orangeTitle{
  background-color: #f8b62a;
  color:#ffffff;
  padding:5px 10px;
}
.orangeText{
  color:#f8b62a;
  padding:10px 10px;
  float:right;
  text-align:left;
  width:75%;
}
.checkbox-label{
  font-size:14px;
}
:disabled {
  background-color: #29a7e1;
  color: inherit #29a7e1;
  cursor: not-allowed;
}
.breadcrumb-005 {
    display: flex;
    gap: 0 20px;
    list-style: none;
    padding: 0 0 10px 0px;
    font-size: .9em;
    margin:20px 0;
    border-bottom:3px solid #29a7e1;
}

.breadcrumb-005 li {
    display: flex;
    align-items: center;
}

.breadcrumb-005 li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

.breadcrumb-005 li:not(:last-child)::after {
    display: inline-block;
    width: .3em;
    height: .6em;
    margin-left: 12px;
    background-color: #333333;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

.breadcrumb-005 a {
    color: #333333;
    text-decoration: none;
}