{"name":"basic-1column-hawaii","html":"<div class=\"designportal designportal-basic\">\n    <section class=\"basic-container\">\n      <h3 class=\"basic-heading1 basic-heading1--white\">Apps</h3>\n      <ul class=\"basic-appSet\">\n        <!-- FAQ icon -->\n        <li class=\"basic-app\">\n          <a class=\"basic-app-link\" href=\"#\">\n            <div class=\"basic-app-icon basic-app-icon--blue\">\n              <svg class=\"basic-app-icon-img\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M22 9H12C10.895 9 10 9.895 10 11V17C10 18.105 10.895 19 12 19H19L22 22V19C23.105 19 24 18.105 24 17V11C24 9.895 23.105 9 22 9ZM16 7V6C16 4.895 15.105 4 14 4H4C2.895 4 2 4.895 2 6V12C2 13.105 2.895 14 4 14V17L7 14H8V10C8 8.343 9.343 7 11 7H16Z\" />\n              </svg>\n            </div>\n            <p class=\"basic-app-name\">FAQ</p>\n          </a>\n        </li>\n        <!-- Help icon -->\n        <li class=\"basic-app\">\n          <a class=\"basic-app-link\" href=\"#\">\n            <div class=\"basic-app-icon basic-app-icon--pink\">\n              <svg class=\"basic-app-icon-img\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13 2C6.925 2 2 6.925 2 13C2 19.075 6.925 24 13 24C19.075 24 24 19.075 24 13C24 6.925 19.075 2 13 2ZM14 21H12V19H14V21ZM15.988 13.988C15.988 13.988 13.997 15.258 14 17H12C12 17 11.92 16.114 12.498 14.949C12.869 14.2 13.51 13.338 14.627 12.519L15 12.221C15.61 11.672 16 10.885 16 10C16 8.343 14.657 7 13 7C11.343 7 10 8.343 10 10H8C8 7.239 10.239 5 13 5C15.761 5 18 7.239 18 10C18 11.637 17.205 13.077 15.988 13.988Z\" />\n              </svg>\n            </div>\n            <p class=\"basic-app-name\">Help</p>\n          </a>\n        </li>\n        <!-- Members icon -->\n        <li class=\"basic-app\">\n          <a class=\"basic-app-link\" href=\"#\">\n            <div class=\"basic-app-icon basic-app-icon--green\">\n              <svg class=\"basic-app-icon-img\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M17.3333 16.25H8.66668C7.46959 16.25 6.50001 17.2196 6.50001 18.4167V22.75H19.5V18.4167C19.5 17.2196 18.5304 16.25 17.3333 16.25ZM13 14.0833C14.1971 14.0833 15.1667 13.1138 15.1667 11.9167C15.1667 10.7196 14.1971 9.75 13 9.75C11.8029 9.75 10.8333 10.7196 10.8333 11.9167C10.8333 13.1138 11.8029 14.0833 13 14.0833ZM18.4167 7.58333C19.6138 7.58333 20.5833 6.61375 20.5833 5.41667C20.5833 4.21958 19.6138 3.25 18.4167 3.25C17.2196 3.25 16.25 4.21958 16.25 5.41667C16.25 6.61375 17.2196 7.58333 18.4167 7.58333ZM9.26901 14.0833C8.89634 13.4431 8.66668 12.7097 8.66668 11.9167C8.66668 11.1237 8.89634 10.3903 9.26901 9.75H3.25001C2.05293 9.75 1.08334 10.7196 1.08334 11.9167V16.25H4.93568C5.68751 14.9608 7.06984 14.0833 8.66668 14.0833H9.26901ZM7.58334 7.58333C8.78043 7.58333 9.75001 6.61375 9.75001 5.41667C9.75001 4.21958 8.78043 3.25 7.58334 3.25C6.38626 3.25 5.41668 4.21958 5.41668 5.41667C5.41668 6.61375 6.38626 7.58333 7.58334 7.58333ZM22.75 9.75H16.731C17.1037 10.3903 17.3333 11.1237 17.3333 11.9167C17.3333 12.7097 17.1037 13.4431 16.731 14.0833H17.3333C18.9302 14.0833 20.3125 14.9608 21.0643 16.25H24.9167V11.9167C24.9167 10.7196 23.9471 9.75 22.75 9.75Z\" />\n              </svg>\n            </div>\n            <p class=\"basic-app-name\">Members</p>\n          </a>\n        </li>\n        <!-- Vacations icon -->\n        <li class=\"basic-app\">\n          <a class=\"basic-app-link\" href=\"#\">\n            <div class=\"basic-app-icon basic-app-icon--purple\">\n              <svg class=\"basic-app-icon-img\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M22 6V4H20V6H6V4H4V6C2.895 6 2 6.895 2 8V20C2 21.105 2.895 22 4 22H22C23.105 22 24 21.105 24 20V8C24 6.895 23.105 6 22 6ZM22 20H4V10H22V20ZM8 12H6V14H8V12ZM12 12H10V14H12V12ZM16 12H14V14H16V12ZM20 12H18V14H20V12ZM8 16H6V18H8V16ZM12 16H10V18H12V16ZM16 16H14V18H16V16ZM20 16H18V18H20V16Z\" />\n              </svg>\n            </div>\n            <p class=\"basic-app-name\">Vacations</p>\n          </a>\n        </li>\n        <!-- Expenses icon -->\n        <li class=\"basic-app\">\n          <a class=\"basic-app-link\" href=\"#\">\n            <div class=\"basic-app-icon basic-app-icon--orange\">\n              <svg class=\"basic-app-icon-img\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M17 5L7 15L5 13L3 15L5.542 17.542C6.9 18.9 9.101 18.9 10.458 17.542L13 15L23 5C21.343 3.343 18.657 3.343 17 5ZM13 6L4 3L3 4L9 10L13 6ZM15 16L22 23L23 22L19 12L15 16Z\" />\n              </svg>\n            </div>\n            <p class=\"basic-app-name\">Expenses</p>\n          </a>\n        </li>\n      </ul>\n    </section>\n    <section class=\"basic-container\">\n      <h3 class=\"basic-heading1 basic-heading1--white\">Spaces</h3>\n      <ul class=\"basic-spaceSet\">\n        <!-- Sales space -->\n        <li class=\"basic-space\">\n          <a class=\"basic-space-link\" href=\"#\">\n            <div class=\"basic-space-img-container\">\n              <div class=\"basic-space-img basic-space-img--sales\"></div>\n            </div>\n            <p class=\"basic-space-name\">Sales</p>\n          </a>\n        </li>\n        <!-- Marketing space -->\n        <li class=\"basic-space\">\n          <a class=\"basic-space-link\" href=\"#\">\n            <div class=\"basic-space-img-container\">\n              <div class=\"basic-space-img basic-space-img--marketing\"></div>\n            </div>\n            <p class=\"basic-space-name\">Marketing</p>\n          </a>\n        </li>\n        <!-- Customer Service space -->\n        <li class=\"basic-space\">\n          <a class=\"basic-space-link\" href=\"#\">\n            <div class=\"basic-space-img-container\">\n              <div class=\"basic-space-img basic-space-img--customer-service\"></div>\n            </div>\n            <p class=\"basic-space-name\">Customer Service</p>\n          </a>\n        </li>\n        <!-- Human Resource space -->\n        <li class=\"basic-space\">\n          <a class=\"basic-space-link\" onkeyup=\"\" href=\"#\">\n            <div class=\"basic-space-img-container\">\n              <div class=\"basic-space-img basic-space-img--human-resource\"></div>\n            </div>\n            <p class=\"basic-space-name\">Human Resource</p>\n          </a>\n        </li>\n      </ul>\n    </section>\n        <section class=\"basic-container\">\n      <h3 class=\"basic-heading1 basic-heading1--white\"></h3>\n      <div class=\"basic-dataSet\">\n        <div class=\"basic-data\">\n          <h4 class=\"basic-heading2 basic-heading2--white\">Heading2</h4>\n          <p class=\"basic-text\">Please refer to the help to display graphs, table, and records of kintone.</p>\n          <!-- Unordered list -->\n          <h5 class=\"basic-heading3\">Unordered list</h5>\n          <ul class=\"basic-list\">\n            <li class=\"basic-list-item\">List item1</li>\n            <li class=\"basic-list-item\">List item2</li>\n            <li class=\"basic-list-item\">List item3</li>\n          </ul>\n          <!-- Ordered list -->\n          <h5 class=\"basic-heading3\">Ordered list</h5>\n          <ol class=\"basic-list\">\n            <li class=\"basic-list-item\">List item1</li>\n            <li class=\"basic-list-item\">List item2</li>\n            <li class=\"basic-list-item\">List item3</li>\n          </ol>\n        </div>\n      </div>\n    </section>\n  </div>","css":".designportal .basic-heading1 {\n  font-size: 2rem;\n  font-weight: bold;\n  margin-bottom: 15px;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-heading1 {\n    margin: 0;\n    padding: 0 15px 15px 15px;\n  }\n}\n\n.designportal .basic-heading1--white {\n  color: #FFFFFF;\n}\n\n.designportal .basic-heading2 {\n  font-size: 1.5rem;\n  font-weight: bold;\n  margin: 20px 0 10px 0;\n  color: white;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-heading2 {\n    padding: 10px 0 10px 0;\n    margin: 0;\n  }\n}\n\n.designportal .basic-heading3 {\n  margin: 20px 0 0 0;\n  font-size: 1.1rem;\n  font-weight: bold;\n  color: white;\n}\n\n.designportal .basic-app-name {\n  font-size: 0.9rem;\n  margin-top: 10px;\n  text-align: center;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-app-name {\n    font-size: 1rem;\n    text-align: left;\n    margin-top: 0;\n    margin-left: 10px;\n  }\n}\n\n.designportal .basic-space-name {\n  font-size: 0.9rem;\n  margin-top: 10px;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-space-name {\n    font-size: 1rem;\n    text-align: left;\n    margin-top: 0;\n    margin-left: 10px;\n  }\n}\n\n.designportal-basic {\n  display: block;\n  position: relative;\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n.designportal-basic h1, .designportal-basic h2, .designportal-basic h3, .designportal-basic ul, .designportal-basic ol, .designportal-basic p, .designportal-basic th, .designportal-basic td, .designportal-basic dl, .designportal-basic dt, .designportal-basic dd {\n  margin: 0;\n  padding: 0;\n}\n\n.designportal-basic ul {\n  list-style: disc;\n}\n\n.designportal-basic ol {\n  list-style: decimal;\n}\n\n.designportal {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)), \n  url(\"https://raw.githubusercontent.com/kintone/portal-design-templates/master/images/demo/hawaii.jpg\");\n  background-size: cover;\n  background-position: center;\n}\n\n.designportal .basic-heading1 {\n  font-size: 2rem;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-heading1 {\n    font-size: 2.4rem;\n    padding-bottom: 5px;\n  }\n}\n\n.designportal .basic-heading2 {\n  font-size: 1.6rem;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-heading2 {\n    font-size: 2rem;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-heading3 {\n    font-size: 1.6rem;\n  }\n}\n\n.designportal .basic-text {\n  font-size: 1rem;\n  color: white;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-text {\n    font-size: 1.6rem;\n  }\n}\n\n.designportal .basic-list-item {\n  font-size: 1rem;\n  color: white;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-list-item {\n    font-size: 1.6rem;\n  }\n}\n\n.designportal .basic-container {\n  width: 1080px;\n  margin: 0 auto;\n  padding: 20px 0 20px;\n}\n\n.designportal .basic-container:last-child {\n  padding-bottom: 40px;\n}\n\n@media screen and (max-width: 1160px) {\n  .designportal .basic-container {\n    width: 96vw;\n    margin: 0 2vw;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-container {\n    width: 100%;\n    margin: 0 auto;\n    padding: 20px 0 5px 0;\n  }\n}\n\n.designportal .basic-appSet, .designportal .basic-spaceSet, .designportal .basic-dataSet {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 20px;\n  background-color: rgba(0, 0, 0, 0.5);\n  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);\n  border-radius: 10px;\n  justify-content: center;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-appSet, .designportal .basic-spaceSet, .designportal .basic-dataSet {\n    display: block;\n    box-shadow: none;\n    border-radius: 0;\n    padding: 0;\n  }\n}\n\n.designportal .basic-dataSet {\n  justify-content: normal;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-dataSet {\n    padding: 15px 15px;\n  }\n}\n\n.designportal .basic-data {\n  display: block;\n  width: 100%;\n  list-style-type: none;\n  margin: 0 0 20px 0;\n}\n\n.designportal .basic-data-notifications {\n  margin: 0 0 10px 0;\n  text-align: left;\n}\n\n.designportal .basic-app {\n  display: block;\n  width: 168px;\n  margin: 20px;\n  list-style-type: none;\n}\n\n@media screen and (max-width: 1160px) {\n  .designportal .basic-app {\n    width: 16%;\n    margin: 2%;\n  }\n  .designportal .basic-app:first-child {\n    margin-left: 0;\n  }\n  .designportal .basic-app:last-child {\n    margin-right: 0;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-app {\n    width: auto;\n    margin: 0;\n    padding: 10px 15px;\n    border-bottom: solid 1px #dddddd;\n  }\n  .designportal .basic-app:last-child {\n    border-bottom: none;\n  }\n}\n\n.designportal .basic-app-link, .designportal .basic-space-link {\n  display: block;\n  color: #fff;\n  text-decoration: none;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-app-link, .designportal .basic-space-link {\n    display: flex;\n    align-items: center;\n  }\n}\n\n.designportal .basic-app-link:hover, .designportal .basic-space-link:hover, .designportal .basic-app-link:focus, .designportal .basic-space-link:focus {\n  text-decoration: underline;\n}\n\n.designportal .basic-app-link:focus, .designportal .basic-space-link:focus {\n  outline: #3498db solid 1px;\n}\n\n.designportal .basic-app-icon {\n  width: 100px;\n  height: 100px;\n  margin: 0 auto;\n  border-radius: 25px;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-app-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 12px;\n    margin: 0;\n  }\n}\n\n.designportal .basic-app-icon-img {\n  display: block;\n  width: 70px;\n  height: 70px;\n  padding: 15px;\n  fill: #FFFFFF;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-app-icon-img {\n    width: 30px;\n    height: 30px;\n    padding: 5px;\n  }\n}\n\n.designportal .basic-app-name {\n  font-size: 1rem;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-app-name {\n    font-size: 1.6rem;\n  }\n}\n\n.designportal .basic-space {\n  display: block;\n  width: 220px;\n  margin: 20px;\n  list-style-type: none;\n}\n\n@media screen and (max-width: 1160px) {\n  .designportal .basic-space {\n    width: 46%;\n    margin: 1.9%;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-space {\n    width: auto;\n    margin: 0;\n    padding: 10px 15px;\n    border-bottom: solid 1px #dddddd;\n  }\n  .designportal .basic-space:last-child {\n    border-bottom: none;\n  }\n}\n\n.designportal .basic-space-img-container {\n  height: 100px;\n  border-radius: 10px;\n}\n\n@media screen and (max-width: 1160px) {\n  .designportal .basic-space-img-container {\n    width: 100%;\n    height: 100px;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-space-img-container {\n    width: 40px;\n    height: 40px;\n    border-radius: 12px;\n  }\n}\n\n.designportal .basic-space-img {\n  display: block;\n  height: 100px;\n  border-radius: 10px;\n  width: 100%;\n  height: 100px;\n  border-radius: 10px;\n  background-size: cover;\n  background-position: center;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-space-img {\n    display: block;\n    width: 40px;\n    height: 40px;\n  }\n}\n\n.designportal .basic-space-name {\n  font-size: 1rem;\n}\n\n@media screen and (max-width: 768px) {\n  .designportal .basic-space-name {\n    font-size: 1.6rem;\n  }\n}\n\n.designportal .basic-space-img--sales {\n  background-image: url(https://static.cybozu.com/contents/k/image/ocean/cover/freshleaf.jpg);\n}\n\n.designportal .basic-space-img--marketing {\n  background-image: url(https://static.cybozu.com/contents/k/image/ocean/cover/questionmark.jpg);\n}\n\n.designportal .basic-space-img--customer-service {\n  background-image: url(https://static.cybozu.com/contents/k/image/ocean/cover/cappuccino.jpg);\n}\n\n.designportal .basic-space-img--human-resource {\n  background-image: url(https://static.cybozu.com/contents/k/image/ocean/cover/documents.jpg);\n}\n\n.designportal .basic-list {\n  margin: 18px 0 18px 30px;\n}\n\n.designportal .basic-app-icon--blue {\n  background: linear-gradient(180deg, #56CCF2 0%, #2F80ED 100%);\n}\n\n.designportal .basic-app-icon--pink {\n  background: linear-gradient(180deg, #FF6EA2 0%, #E71F00 100%);\n}\n\n.designportal .basic-app-icon--green {\n  background: linear-gradient(180deg, #6FCF97 0%, #219653 100%);\n}\n\n.designportal .basic-app-icon--purple {\n  background: linear-gradient(180deg, #D16EFF 0%, #5300BD 100%);\n}\n\n.designportal .basic-app-icon--orange {\n  background: linear-gradient(180deg, #F2C94C 0%, #EB5757 100%);\n}\n","js":"","headerColor":"","toolbarColor":"","hiddenPortalHeader":false,"portalHeaderColor":"#253754","customize_version":1}