@charset "UTF-8";

/*
Theme Name:
Theme URI:
Author:			O-GOE
*/

/* --------------------------------------------------------------------------------
	main
-------------------------------------------------------------------------------- */
main{
  width: 100%;
  padding-top: 80px;
}
.main__wrap{
  width: 100%;
  & h2{
    font-size: 5.2rem;
    line-height: 1em;
    font-weight: 900;
    margin-top: 30px;
  }
  & h3{
    font-family: "Poppins", sans-serif;
    font-size: 3.2rem;
    line-height: 1em;
    margin-top: 25px;
    font-weight: bold;
    display: flex;
  	align-items: center;
    &::before{
      content: '・';
      color: var(--color-bl);
      margin-right: 5px;
    }
    &::after {
    	content: "";
    	flex-grow: 1;
    	height: 1px;
    	display: block;
      margin-left: .4em;
	    background: #ccc;
    }
  }
}
.main__imgbox{
  width: 100%;
  margin-top: 50px;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(245,250,252,1) 50%, rgba(245,250,252,1) 100%);
  & img{
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    border-radius: 10px;
  }
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  main{
    width: 100%;
    padding-top: 60px;
  }
  .main__wrap{
    & h2{
      font-size: 2.4rem;
      margin-top: 20px;
    }
    & h3{
      font-size: 1.6rem;
      margin-top: 20px;
    }
  }
  .main__imgbox{
    margin-top: 30px;
    & img{
      aspect-ratio: 1 / 1;
    }
  }
}
/* --------------------------------------------------------------------------------
	common
-------------------------------------------------------------------------------- */
.cnt__wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cnt__ttlbox{
  width: 30%;
  & h2{
    font-size: 3.2rem;
    line-height: 1.2em;
    font-weight: bold;
  }
  & h3{
    font-family: "Poppins", sans-serif;
    line-height: 1em;
    font-weight: bold;
    margin-top: 10px;
  }
}
.cnt__cntbox{
  width: 70%;
}
section:nth-of-type(odd){
  background-color: #f5fafc;
  & .cnt__ttlbox{
    & h3{
      color: var(--color-bl);
    }
  }
}
section:nth-of-type(even){
  & .cnt__ttlbox{
    & h3{
      color: var(--color-rd);
    }
  }
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .cnt__ttlbox{
    width: 100%;
    & h2{
      font-size: 2.6rem;
    }
    & h3{
      font-size: 1.4rem;
      margin-top: 10px;
    }
  }
  .cnt__cntbox{
    width: 100%;
    margin-top: 30px;
  }
}
/* --------------------------------------------------------------------------------
	company
-------------------------------------------------------------------------------- */
.company__wrap{
  width: 100%;
  & ul{
    width: 100%;
    & li{
      width: 100%;
      border-bottom: 1px dotted #ccc;
      padding-bottom: 15px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 30px;
      &:first-child{
        margin-top: 0;
      }
    }
  }
}
.company__ttl{
  width: 12em;
  font-weight: bold;
}
.company__cnt{
  width: calc(100% - 12em);
}
.origin__wrap{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  margin-top: 50px;
  & h2{
    background-color: var(--color-bl);
    text-align: center;
    color: #fff;
    font-size: 2.8rem;
    line-height: 1em;
    font-weight: bold;
    padding: 15px 0 17px 0;
  }
}
.origin__cntbox{
  width: 100%;
  padding: 30px 50px;
}
.origin__imgbox{
  width: 100%;
}
.origin__txtbox{
  width: 100%;
  margin-top: 30px;
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .company__wrap{
    & ul{
      & li{
        padding-bottom: 10px;
        margin-top: 20px;
      }
    }
  }
  .company__ttl{
    width: 100%;
  }
  .company__cnt{
    width: 100%;
    margin-top: 5px;
  }
  .origin__wrap{
    margin-top: 50px;
    & h2{
      font-size: 2rem;
      padding: 10px 0 12px 0;
    }
  }
  .origin__cntbox{
    width: 100%;
    padding: 20px 30px;
  }
  .origin__imgbox{
    width: 50%;
    margin-right: auto;
  }
  .origin__txtbox{
    width: 100%;
    margin-top: 30px;
  }
}
/* --------------------------------------------------------------------------------
	company
-------------------------------------------------------------------------------- */
.history__cntbox{
  width: 100%;
  & ul{
    width: 100%;
  }
  & ul li{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: 30px;
    position: relative;
    overflow: hidden;
    &::before{
      content: "";
      width: 2px;
      height: 200px;
      background-color: var(--color-rd);
      position: absolute;
      top: 0;
      left: 149px;
    }
    &:first-child::before{
      position: absolute;
      top: 10px;
      left: 149px;
    }
    &:last-child{
      padding-bottom: 0;
    }
    &:last-child::before{
      height: 10px;
    }
  }
}
.history__year{
  width: 90px;
  font-size: 2rem;
  line-height: 1.2em;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--color-rd);
}
.history__deco{
  width: 120px;
  font-size: 15px;
  color: var(--color-rd);
  text-align: center;
  position: relative;
}
.history__txt{
  width: calc(100% - 210px);
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .history__cntbox{
    & ul li{
      width: 100%;
      padding-bottom: 20px;
      &::before{
        content: "";
        width: 2px;
        height: 500px;
        background-color: var(--color-rd);
        position: absolute;
        top: 0;
        left: 7px;
      }
      &:first-child::before{
        position: absolute;
        top: 10px;
        left: 7px;
      }
    }
  }
  .history__year{
    width: calc(100% - 30px);
    font-size: 2rem;
    order: 2;
  }
  .history__deco{
    width: 30px;
    font-size: 16px;
    order: 1;
    text-align: left;
  }
  .history__txt{
    width: calc(100% - 30px);
    order: 3;
    padding-left: 30px;
  }
}
/* --------------------------------------------------------------------------------
	message
-------------------------------------------------------------------------------- */
.message__wrap{
  width: 100%;
}
.message__ttlwrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.message__imgbox{
  width: 60%;
  border-radius: 10px;
  overflow: hidden;
  & img{
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
  }
}
.message__ttlbox{
  width: 35%;
  display: flex;
  align-items: center;
}
.message__namebox{
  width: 100%;
  border-bottom: 1px solid #333;
  padding-bottom: 30px;
}
.message__post{
  width: 100%;
  font-weight: bold;
  color: var(--color-bl);
}
.message__name{
  width: 100%;
  margin-top: 20px;
  font-size: 3.2rem;
  font-weight: bold;
}
.message__engname{
  width: 100%;
  margin-top: 20px;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
  color: #ccc;
}
.message__catch{
  width: 100%;
  color: var(--color-bl);
  font-size: 2.8rem;
  font-weight: bold;
  margin-top: 30px;
}
.message__txt{
  width: 100%;
  margin-top: 20px;
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .message__imgbox{
    width: 100%;
    & img{
      width: 100%;
      aspect-ratio: 5 / 3;
      object-fit: cover;
    }
  }
  .message__ttlbox{
    width: 100%;
    margin-top: 20px;
  }
  .message__namebox{
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .message__post{
    width: 100%;
    font-weight: bold;
    color: var(--color-bl);
  }
  .message__name{
    width: 5em;
    margin-top: 20px;
    font-size: 2.4rem;
    font-weight: bold;
  }
  .message__engname{
    width: 9em;
    margin-top: 20px;
    font-size: 1.4rem;
    padding-top: 14px;
  }
  .message__catch{
    font-size: 2.4rem;
    margin-top: 20px;
  }
  .message__txt{
    margin-top: 15px;
  }
}
/* --------------------------------------------------------------------------------
	safe
-------------------------------------------------------------------------------- */
.safe__imgbox{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  & img{
    width: 100%;
    aspect-ratio: 17 / 6;
    object-fit: cover;
  }
}
/*----- Tab メニュー -----*/
.tabs__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  margin-top: 30px;
  gap: 10px;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}
.tabs__menu-item {
  width: 5em;
  padding: 3px 0 5px 0;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1em;
  color: #fff;
  background: #ccc;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: 0.5s;
  font-weight: bold;
  user-select: none;
  border-radius: 5px;
  &:hover,&.is-active {
    background: var(--color-rd);
    border: 1px solid var(--color-rd);
  }
  &.is-active {
    cursor: default;
  }
}
/*----- Tab コンテンツ -----*/
.tabs__contain{
  width: 100%;
  margin-top: 20px;
}
.tabs__body {
  display: none;
}
.tabs__body.is-active {
  display: block;
}
.safe__txtbox{
  width: 100%;
  & p{
    margin-top: 20px;
  }
}
.safe__signbox{
  width: 100%;
  text-align: right;
  margin-top: 20px;
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .safe__imgbox{
    width: 100%;
    & img{
      aspect-ratio: 5 / 3;
    }
  }
  .tabs__menu {
    padding-bottom: 15px;
  }
  }
  /*----- Tab コンテンツ -----*/
  .tabs__contain{
    width: 100%;
    margin-top: 20px;
  }
  .tabs__body:nth-of-type(2){
    & .safe__txtbox{
      text-align: left;
    }
  }
  .safe__signbox{
    padding-bottom: 25px;
  }
}