/*
Theme Name: Practive Theme
Author: 株式会社プラクティブ
Description: 青森の中小企業・個人事業主向けIT支援テーマ
Version: 1.0
*/

:root {
	--page-width:       1440px;
	--page-padding:     20px;
}

.page-area {
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 10rem;
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.9);
}

header > .page-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}



main {
  margin-top: 10rem;
  flex: 1;
}

footer {
  margin-top: 2em;
  padding: 1em 0;
  border-top: #CCC 1px solid;
  background-color: #036EB8;
  color: white;
  text-align: center;
}

footer * {
  margin: 0;
  padding: 0;
  line-height: 1;
}





/* siteid ------------------*/
#siteid * {
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* gnav --------------------*/
#gnav * {
  margin: 0;
  padding: 0;
  line-height: 1;
}

#gnav > ul {
  display: flex;
  gap: 2em;
}

/* レスポンシブ */
@media (max-width: 768px) {
 #gnav {
    display: none;
  }
}

/* slider ------------------*/
#slider * {
  margin-bottom: 0;
  line-height: 1;
}

/* front page --------------*/

#about,
#infomation,
#service,
#strength,
#company {
  padding-top: 10rem;
}

.home h2 {
  margin: 1em 0 1.5em;
  font-size: 2em;
  text-align: center;
}


.home h3 {
  margin: .5em 0 1em;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

.home .boxes {
  display: flex;
  gap: 1em;
}

.home .boxes > li {
  flex: 1;
  padding: 1em;
  border-radius: .5em;
  background-color: #CDD;
}

@media (max-width: 768px) {
 .home .boxes {
    flex-direction: column;
  }
}

#company > ul > li {
  padding: 1em;
  border-bottom: #CCC 1px solid;
}

#company > ul > li:first-child {
  border-top: #CCC 1px solid;
}

#company > ul > li > dl {
  display: flex;
}

#company > ul > li > dl > dt {
  width: 7em;
}

@media (max-width: 768px) {
 #company > ul > li > dl {
    flex-direction: column;
  }

  #company > ul > li > dl > dt {
    width: auto;
    margin-bottom: .5em;
  }
}