@charset "UTF-8";
/* 202200404 max-width=<820の時実行(for Tablet/iPad air=820px) 20240801*/
body{background-color: cadetblue;}
.header{width: 800px;}
.nav{flex-direction: row;flex-wrap: wrap; width: 820px;}
.bot2{width: auto;}
.aside2{display:flex}
.layoutset-01 .container {
  display:grid; grid-template-columns: [l] 820px ;
  grid-template-rows: auto;
  grid-template-areas: "header" "nav" "wrapper" "aside2"    "footer";
  width: 820px; 
  }
.layoutset-01 .my-slick{width: 820px;}

.layoutset-02 .container {width:fit-content; }
.layoutset-02 .nav{width: auto;}
/*--------------------------------------------------------
  (3) レイアウト設定 01 Top-Page
--------------------------------------------------------*/
/* 背景設定 */
.layoutset-01 .aside{display:none}
.layoutset-01 .message{padding-left:30px;position: relative}
/*.layoutset-01 .photo{display:none} */
.layoutset-01 .headerLogo{display:none; width: 0px;}
.layoutset-01 .wrapper{width:auto}

/*--------------------------------------------------------
  (4) レイアウト設定 02 nav,aside 無し
--------------------------------------------------------*/
  /* 背景設定 */
/*.layoutset-02 .nav{display:none}*/
.layoutset-02 .aside{display:none}
.layoutset-02 .cont3{display:none}
.layoutset-02 .header{display:none}
.layoutset-02 .message{padding-left:30px;position: relative}
.layoutset-02 .photo{display:none}
.layoutset-02 .headerLogo{display:none; width: 0px;}

  table{width:auto;}
  td:nth-of-type(5){min-width:90px;}

.contact {display: inline;}

@media  (max-width:620px){
 .layoutset-01 {   width: 620px;}
 .layoutset-02 {   width: 620px;}
 .layoutset-01 .wrapper {   width: 620px;}
 .layoutset-01 .container {   width: 620px;}
 .layoutset-01 .title { width: 620px;}
 .layoutset-02 .container{ width: 620px;}
 .layoutset-02 .wrapper{ width: 620px; max-width:none; padding-left: 3px;}
  body{width: 620px;}
  main{width: 620px;}
 img{width: 100%;}
 .nav{width: 620px;}
}
@media  (max-width:430px){
 .layoutset-01 {   width: 430px;}
 .layoutset-02 {   width: 430px;}
 .layoutset-01 .wrapper {   width: 430px;}
 .layoutset-01 .container {   width: 430px;}
 .layoutset-01 .title { width: 430px;}
 .layoutset-02 .container{ width: 430px;}
 .layoutset-02 .wrapper{ width: 430px; max-width:none; padding-left: 3px;}
  body{width: 430px;}
  main{width: 430px;}
 img{width: 100%;}
 .nav{width: 430px;}
}

@media  (max-width:360px){
 .layoutset-01 {   width: 360px;}
 .layoutset-02 {   width: 360px;}
 .layoutset-01 .wrapper {   width: 360px;}
 .layoutset-01 .title { width: 360px;}
 .layoutset-01 .container {   width: 360px;}
 .layoutset-02 .container{ width: 360px;}
 .layoutset-02 .wrapper{ width: 360px; padding-left: 3px;}
  body{width: 360px;}
  main{width: 360px;}
  .nav{width: 360px;}
}