@charset "UTF-8";



@media (max-width: 1000px) {

  :root {
    --colorText: #333;  /* font-colorの変数 */
    --colorMain: #00a8ff;  /* font-colorの変数 */
    --outline: #fff;
  }


  /* header
-------------------------------------*/
  header {
    height: 80px;
  }
  .header-contents {
    flex-flow: column;
    align-items: stretch;
  }
  .header-right>ul {
    padding-top: .5em;
    justify-content: space-between;
    gap: 0;
  }

  /* news
-------------------------------------*/
  .index .news-contents a:last-of-type {
    display: none;
  }
  .index .news-contents a{
    width: 30%;
  }

  /* footer
  -------------------------------------*/
  .footer-contents {
    flex-flow: column;
  }
  .footer-left {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1em;
    border-bottom: 2px solid #8ad7ff;
  }
  .footer-left ul,
  .footer-left div {
    flex: 1;
  }
  .index .inquiry-form a {
    margin: 0;
  }
  .footer-right {
    padding-top: 1em;
  }

  /* overview
  -------------------------------------*/
  .representative>div div:nth-of-type(2) {
    flex-flow: column;
  }
  .representative>div div:nth-of-type(2) div {
    width: 100%;
  }
  .overview .representative .container div:first-of-type h4 {
    text-align: center;
  }
  .overview .representative .container div:first-of-type h4 span {
    display: inline;
  }
  .representative>div div:nth-of-type(2) div:nth-of-type(2) {
    margin-top: 30px;
  }
  .overview h3 {
    font-size: 2.4em;
  }
  .overview h4 {
    font-size: 2.4em;
  }
  .overview .philosophy .container>div:nth-of-type(n+1) h4 {
    text-indent: 0;
  }
  .overview .philosophy .container>div:nth-of-type(n+1) h4 span {
    text-indent: 0;
  }
  .overview .each_base ul {
    flex-flow: column;
    justify-content: center;
    gap: 60px;
  }
}






@media (max-width: 700px) {
    /* 共通
  -------------------------------------*/
  h2 {
    font-size: 2em;
  }
  .title-text {
    padding-bottom: 1.5em;
    text-align: center;
}
  /* header
  -------------------------------------*/
  header {
    height: 60px;
  }
  .header-contents {
    flex-flow: row;
    align-items: center;
  }
  .sub-menu {
    display: none;
  }


  /* ハンバーガーメニュー
  -------------------------------------*/
  #Nav+label {
    display: flex;
    align-items: center;
    aspect-ratio: 1/1;
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 1;
  }
  #Nav+label span,
  #Nav+label span::before,
  #Nav+label span::after {
    content: "";   /* 疑似要素を活用する際は必要 */
    display: block;
    aspect-ratio: 1/1;
    width: 40px;
    height: 4px;
    border-radius: 9999px;
    background: var(--outline);
    transition: 0.5s;
  }
  #Nav+label span {
    position: relative;
  }
  #Nav+label span::before,
  #Nav+label span::after {
    position: absolute;
  }
  #Nav+label span::before {
    bottom: 10px;
  }
  #Nav+label span::after {
    top: 10px;
  }
  #Nav:checked+label span {
    background: transparent;
  }
  #Nav:checked+label span::before {  /* チェックが付いているときの疑似要素 */
    bottom: 0px;
    rotate:  -315deg;
    background: var(--colorMain);
  }
  #Nav:checked+label span::after {  /* チェックが付いているときの疑似要素 */
    top: 0px;
    rotate: 315deg;
    background: var(--colorMain);
  }
  body>header {
    /* position: fixed; */
    z-index: 9999;  /* headerを手前に */
  }
  body>header nav ul {
    font-size: 2.5em;
    gap: 1em;  /* 子要素同士の上下左右の余白 */
    flex-direction: column;
    align-items: center;
    background: #fffd;
    position: fixed;
    top: 0;
    right: 0;
    width: 75%;
    height: 100vh;
    translate: 100% 0;
    transition: .5s;
  }
  .header-right ul {
    justify-content: center;
    gap: 2em;
    align-items: center;
  }
  body>header nav #Nav:checked~ul {
    translate: 0;
  }
  body>header nav ul li {
    color: #333;
  }
  .sub-menu ul {
    color: var(--colorMain);
    position: absolute;
    top: 1.5em;
    visibility: hidden;
    background-color: #ffffffE6;
    width: 100vw;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 1em;
  }

  /* fv
  -------------------------------------*/
  .first-v img{
    width: 100%;
    height: 100vh;
  }
  .overview .first-v div:nth-of-type(1) h1 {
    font-size: 2em;
  }


  /*footer
  -------------------------------------*/
  .footer-left {
    flex-flow: column;
    padding-bottom: 0em;
    border-bottom: 0px;
  }
  .inquiry-form a {
    margin-top: 1em;
  }
  .footer-right {
    display: none;
  }

  /* internship-banner
  -------------------------------------*/
  .index .internship-banner img:first-of-type {
    display: none;
  }
  .index .internship-banner img:last-of-type  {
    display: block;
  }
  .index .internship-banner p {
    display: block;
    font-size: 1.8em;
    text-shadow: var(--outline) 3px 0 0, var(--outline) 2.83487px 0.981584px 0, var(--outline) 2.35766px 1.85511px 0, var(--outline) 1.62091px 2.52441px 0, var(--outline) 0.705713px 2.91581px 0, var(--outline) -0.287171px 2.98622px 0, var(--outline) -1.24844px 2.72789px 0, var(--outline) -2.07227px 2.16926px 0, var(--outline) -2.66798px 1.37182px 0, var(--outline) -2.96998px 0.42336px 0, var(--outline) -2.94502px -0.571704px 0, var(--outline) -2.59586px -1.50383px 0, var(--outline) -1.96093px -2.27041px 0, var(--outline) -1.11013px -2.78704px 0, var(--outline) -0.137119px -2.99686px 0, var(--outline) 0.850987px -2.87677px 0, var(--outline) 1.74541px -2.43999px 0, var(--outline) 2.44769px -1.73459px 0, var(--outline) 2.88051px -0.838247px 0;
    position: absolute;
    top: .5em;
    left: 50%;
    transform: translateX(-50%);
  }
  .index .internship-banner dl {
    position: absolute;
    top: 80%;
    right: 20%;
    transform: translate(20%, -80%);
    display: flex;
    flex-flow: column;
    text-align: center;
  }
  .index .internship-banner dl dt,
  .index .internship-banner dl dd {
    font-size: 1.6em;
    text-shadow: var(--outline) 3px 0 0, var(--outline) 2.83487px 0.981584px 0, var(--outline) 2.35766px 1.85511px 0, var(--outline) 1.62091px 2.52441px 0, var(--outline) 0.705713px 2.91581px 0, var(--outline) -0.287171px 2.98622px 0, var(--outline) -1.24844px 2.72789px 0, var(--outline) -2.07227px 2.16926px 0, var(--outline) -2.66798px 1.37182px 0, var(--outline) -2.96998px 0.42336px 0, var(--outline) -2.94502px -0.571704px 0, var(--outline) -2.59586px -1.50383px 0, var(--outline) -1.96093px -2.27041px 0, var(--outline) -1.11013px -2.78704px 0, var(--outline) -0.137119px -2.99686px 0, var(--outline) 0.850987px -2.87677px 0, var(--outline) 1.74541px -2.43999px 0, var(--outline) 2.44769px -1.73459px 0, var(--outline) 2.88051px -0.838247px 0;
  }
  .index .internship-banner dl dd:last-of-type {
    font-size: 1.4em;
  }


/* news-wrapper
-------------------------------------*/
.index .news-contents {
  flex-flow: column;
	justify-content: center;
  align-items: center;
	gap: 1em;
}
.index .news-contents>a {
  display: flex;
  width: 100%;
}
.index .news-contents img {
  width: 100px;
  height: auto;
  padding-left: 1em;
}
.index .news-contents dl {
  flex: 1; 
}
.index .news-contents>a dt {
	margin-top: .5em;
}
.index .news-contents a dd {
	margin-bottom: .5em;
}


  /* occupation-wrapper
  -------------------------------------*/
  .index .occupation-wrapper {
    height: auto;
  }
  .index .flow-diagram {
    flex: 1;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .index .flow-diagram dl {
   width: 50%;
   height: 50px;
  }
  .index .arrow {
    transform: rotate(90deg);
  }

  /* business-wrapper
  -------------------------------------*/
  .index .business-content {
    width: 45%;
  }
  .index .business-content p {
    font-size: 1.4em;
  }
  .index .business-content img {
    padding: 6px 6px;
  }

  /* employee-interview
  -------------------------------------*/
  .index .employee-interview {
    background-image: url(../images/11_employee-interview5.jpg);
  }
  .index .interview-contents {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 1em;
    gap: 3em;
  }
  .index .interview-contents div {
    width: 70%;
  }
  .index .interview-contents img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
  }
  .index .interview-contents div:nth-of-type(2) {
    margin-top: 0em;
  }
  .index .interview-contents div:nth-of-type(3) {
    margin-top: 0em;
  }
  .index .interview-detail {
    color: var(--colorText);
    display: flex;
    flex-flow: row-reverse;
    opacity: 1;
  }
  .index .interview-detail img:hover {
    opacity: 0.5;
  }

/* recruitment-information
-------------------------------------*/
  .index .recruitment-information img:first-of-type {
    display: none;
  }
  .index .recruitment-information img:last-of-type {
    display: block;
  }
  .index .saiyo-btn {
  position: absolute;
  top: 60%;
  right: 50%;
  transform: translateX(50%);
  width: auto;
 }
 .index .saiyo-btn ul {
   flex-flow: row;
   justify-content: center;
   align-items: center;
   gap: 5em;
 }
 .index .saiyo-banner a {
   font-size: 1.6em;
   padding: 0.5em 2em;
 }
}



/* overview
-------------------------------------*/
@media (max-width: 1000px) {
  .overview h3 {
    font-size: 1.8em;
  }
  .overview h4 {
    font-size: 1.8em;
  }
  .overview .company_information .container table th {
    font-size: 1.6em;
  }
  .overview .company_information .container table td {
    font-size: 1.4em;
  }
  .overview .each_base ul li figure figcaption:first-of-type {
    font-size: 1.8em;
    font-weight: 700;
    padding-bottom: 15px;
  }

}