.box {
    border-radius: 1px;
    padding: 2px;
    font-size: 150%;
}

.border_wrap{
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.border_wrap_2{
  width: 100%;
  padding-top: 100%;
}

.custom_ul {
  display: flex;
  display: -ms-flexbox;
  justify-content: start;
  -ms-flex-pack: start;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  list-style:none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.custom_ul.border > .custom_li{
   padding:8px;
   border: 1px solid #ddd;
}

.title_block {
  text-align: center;
  margin-block-end:0px;
  margin-block-start:8px;
}

.custom_ul.border .custom_li {
  position: relative;
  width: calc((100% - 73px) / 3);
  margin:3px;
}

.custom_ul .custom_li {
  position: relative;
  width: calc((100% - 19px) / 3);
  margin:3px;
}

.custom_ul .custom_li.border_none:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.custom_ul .custom_li img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

 .custom_ul.shadow > .custom_li{
   box-shadow: 0 0px 10px 2px #ddd;
}


.custom_ul2 {
  display: flex;
  display: -ms-flexbox;
  justify-content: start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  list-style:none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.custom_ul2.border .custom_li {
  position: relative;
  width: calc((100% - 96px) / 4);
  margin:3px;
}

.custom_ul2 .custom_li {
  position: relative;
  width: calc((100% - 24px) / 4);
  margin:3px;
}


 .custom_ul2.border > .custom_li{
   padding:8px;
   border: 1px solid #ddd;
 }

 .custom_ul2.shadow > .custom_li{
   box-shadow: 0 0px 10px 2px #ddd;
}

.custom_ul2 .custom_li.border_none:before {
  content: "";
  display: block;
  padding-top: 100%;
  left: -10px;
}

.custom_ul2 img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

.custom_ul3 {
  display: flex;
  display: -ms-flexbox;
  justify-content: start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  list-style:none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.custom_ul3 .custom_li:first-child{
  flex: 100%; 
  margin:3px;
}

 .custom_ul3.border > .custom_li{
   padding:8px;
   border: 1px solid #ddd;
 }

 .custom_ul3.shadow > .custom_li{
   box-shadow: 0 0px 10px 2px #ddd;
}

.custom_ul3 .border_wrap_first{
  position: relative;
  width: 100%;
}

.custom_ul3.border .custom_li:not(:first-child){
  position: relative;
  width: calc((100% - 73px) / 3);
  margin:3px;
}

.custom_ul3 .custom_li:not(:first-child){
  position: relative;
  width: calc((100% - 19px) / 3);
  margin:3px;
}

.custom_ul3 .custom_li.border_none:not(:first-child):before {
  content: "";
  display: block;
  padding-top: 100%;
  left: -10px;
}

.custom_ul3 .custom_li img {
  position: absolute;
  max-width: 100%;
  height:100%;
  top: 0;
  left: 0;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

.custom_ul3 .custom_li:first-child img{
  position:relative;
  height:auto;
  max-width: 100%;
  vertical-align: bottom;
}

.custom_ul4 {
  display: flex;
  display: -ms-flexbox;
  justify-content: start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  list-style:none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.custom_ul4 .custom_li:first-child{
  flex: 100%;
  margin:3px;
}

 .custom_ul4.border > .custom_li{
   padding:8px;
   border: 1px solid #ddd;
 }

 .custom_ul4.shadow > .custom_li{
   box-shadow: 0 0px 10px 2px #ddd;
}

.custom_ul4.border .custom_li:not(:first-child){
  position: relative;
  width: calc((100% - 96px) / 4);
  margin:3px;
}

.custom_ul4 .custom_li:not(:first-child){
  position: relative;
  width: calc((100% - 24px) / 4);
  margin:3px;
}

.custom_ul4 .custom_li.border_none:not(:first-child):before {
  content: "";
  display: block;
  padding-top: 100%;
  left: -10px;
}

.custom_ul4 .custom_li:first-child img{
  position:relative;
  height:auto;
  max-width: 100%;
  vertical-align: bottom;
}


.custom_ul4 .custom_li img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

.custom_ul5 {
  display: flex;
  display: -ms-flexbox;
  justify-content: start;
  -ms-flex-pack: start;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  list-style:none;
  width: 100%;
  margin: 0;
  padding: 0;
}


.custom_ul5 > li:nth-child(odd) {
  position: relative;
  -webkit-flex: 2 2 auto;
  -ms-flex: 2 2 auto;
  flex: 2 2 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

.custom_ul5 > li:nth-child(even) {
  position: relative;
  -webkit-flex: 1 2 auto;
  -ms-flex: 1 2 auto;
  flex: 1 2 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.custom_ul5.border .custom_li {
  position: relative;
  /*width: calc((100% - 73px) / 3);*/
  margin:3px;
}

/*.custom_ul5 .custom_li {
  position: relative;
  width: calc((100% - 19px) / 2);
  margin:3px;
}*/

.custom_ul5 .custom_li.border_none:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.custom_ul5 .custom_li img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

 .custom_ul5.shadow > .custom_li{
   box-shadow: 0 0px 10px 2px #ddd;
}






 .grid5{
 	display: -webkit-flex;
 	display: flex;
  display: -ms-flexbox;
   margin:0;
   padding:0;
 }

 .grid_child {
  margin: 3px;
  padding: 0px;
  line-height: 1;
  /*height:200px;*/
}

 .grid_child.border {
   padding:8px;
   border: 1px solid #ddd;
  }
 .grid_child.shadow {
     box-shadow: 0 0px 10px 2px #ddd;
  }

.grid_block:nth-child(2n){
  display: flex;
  display: -ms-flexbox;
  flex-direction: row-reverse;
 }

.grid_block > div:nth-child(odd) {
	flex:1;
	width:100%;
  display: grid;
}

.grid_block > div:nth-child(even) {
	flex:2;
	width:100%;
  display: grid;
}

 

 .grid_block{
  display: flex;
  display: -ms-flexbox;
 }

.grid_block img {
  object-fit: cover;
  width: 100%;
  height: 30vh;
  font-family: 'object-fit: cover;';
}


.inner {
  position: absolute;
  height:100%;
}


  .wrapper {
  	display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-bottom: 1em;
    list-style: none;
    background-color: #ddd;
  }

  .wrapper li {
  /*position: relative;*/
  	margin: 5px;
	width: calc((100% - 72px) / 6);
    margin-bottom: 1em;
    padding: 20px;
    border-radius: 4px;
    background-color: #fff;
  }



    /*　画面サイズが480pxからはここを読み込む　*/
.title_block { font-size: 0.8em;}