@charset "UTF-8";
/*====================================
----------------------------------
	CSS contents
    767px
----------------------------------
	0.  General
	1.  Header
	1.1  General Header
	1.2 Mobile Header
	2.  Main(index)
	3.  Footer
	4.  Page
	4.1 message.html
	4.2 interview.html
	4.3 recruit.html

	5. Contact Form
	6. 404
====================================*/

@media (max-width: 767px) {
/*====================================

  0. General

====================================*/

/* body */
body {
  font-family: 'Noto Sans Japanese', serif;
  font-weight: 200;
  letter-spacing: 1.6px;
}

h2 {
  margin-bottom: 35px;
  font-size: 16px;
}

p {
  font-size: 13px;
  text-align: justify;
}

/*====================================

  1. Header

====================================*/
/*
1.1 General Header
====================================*/
#header {
  display: block;
  height:unset;
  left:0px;
  position:fixed;
  top:0px;
  width:100%;
  z-index:1;
}

#header > .logo {
  background: #E98400;
  text-align: center;
}

#header > .logo > a > img {
  max-width: 295px;
  width: 100%;
}

#header > .nav {
  text-align: center;
  margin-left: 10px;
}
#header > .nav > .list {
  margin: 10px 0px;
}

#header > .nav > .list > li {
  font-size: 12px;
  line-height: 40px;
}

#header > .nav > .list > li:not(.nav05) {
  margin-right: 10px;
}

/*====================================

  2.  Main(index)

====================================*/
#main {
    padding-top: 70px;
    width: 100%;
}

.content-top__bg {
  padding-top: calc(1000 / 1000 * 100%);
  background: url(../img/top/bg_sp.jpg) center center / cover no-repeat;
}

#main .contents {
  margin: 0 0 100px 0;
}

#main .contents section {
  padding: 40px 0;
}

/*   info message  */
#info, #message {
  margin-top: 0px;
  width: 100%;
}

.btn > .box {
  flex-wrap: wrap;
  width: 100%;
}

.btn > .box > .item {
  line-height: 60px;
  margin: 0px 10px;
  width: 80%;
}
.btn > .box > .item:not(.item:first-child) {
    margin-top: 25px;
}

#info > .box > .item {
  background-color: #E12D53;
}

#message > .box > .item {
  background-color: #2d6de1;
}

.btn > .box > .item > a {
  font-size:14px;
}

/*   staff   */
#staff .staffList {
  text-align: center;
}

#staff .staffList li,
#staff .staffList li a {
  height: 270px;
}

#staff .staffList li {
  position: relative;
  display: inline-block;
  width: 20%;
  margin: 0 5px;
  background-color: #ccc;
  overflow: hidden;
}

.staffList01,
.staffList02,
.staffList03,
.staffList04 {
  background-size: cover;
}

.staffList01 {
  background: url(../img/top/doi.png) no-repeat 50% 50%;
  background-size: cover;
  transition: 1s;
}

.staffList01:hover {
  background: url(../img/top/doi_hover.png) no-repeat 50% 50%;
  background-size: cover;
  transition: 1s;
}

.staffList02 {
  background: url(../img/top/matsui.png) no-repeat 50% 50%;
  background-size: cover;
  transition: 1s;
}

.staffList02:hover {
  background: url(../img/top/matsui_hover.png) no-repeat 50% 50%;
  background-size: cover;
  transition: 1s;
}

.staffList03 {
  background: url(../img/top/hujii.png) no-repeat 50% 50%;
  background-size: cover;
  transition: 1s;
}

.staffList03:hover {
  background: url(../img/top/hujii_hover.png) no-repeat 50% 50%;
  background-size: cover;
  transition: 1s;
}

.staffList04 {
  background: url(../img/top/utsumi.png) no-repeat 50% 50%;
  background-size: cover;
  transition: 1s;
}

.staffList04:hover {
  background: url(../img/top/utsumi_hover.png) no-repeat 50% 50%;
  background-size: cover;
  transition: 1s;
}

/*====================================

3. Footer

====================================*/
.footer {
  width: 100%;
}

.footer .copylight {
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* page top */
.pageTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.pageTop a {
  display: inline-block;
  padding: 15px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}


/*====================================

  4.  Page

====================================*/
/*
4.1 message.html
====================================*/
#president,
#hr {
  width: 100%;
  padding-top: 150px !important;
}

#president {
  margin-bottom: -120px;
}

.messageText,
.messageImg {
  vertical-align: top;
}

.messageImg {
  background-color: #ccc;
  float: unset;
  height: unset;
  margin: 0px auto;
  width: 90%;
}
.messageImg > img{
  max-width: 449px;
  width: 100%;
}

.messageText {
  box-sizing: border-box;
  float: unset;
  margin: 0px auto;
  padding-right: unset;
  width: 90%;
}

.messageText h3 {
  font-size: 15px;
  margin-bottom: 30px;
  line-height: 33px;
}

.messageText h3 span {
  font-size: 20px;
}

.messageText p {
  margin-bottom: 20px;
  line-height: 22px;
}

/*
4.2 interview.html
====================================*/
#interview01,
#interview02,
#interview03,
#interview04 {
  width: 100%;
  margin: 0 auto;
}

#interview01,
#interview02,
#interview03 {
  margin-bottom: 0px;
}

.interviewWrraper {
  margin-bottom: 0px;
}

.interviewImg {
  align-items: center;
  background: #ccc;
  display: flex;
  height: 150px;
  margin-bottom: 30px;
  position: unset;
  width: 100%;
}

.interviewImg h3 {
  display: block;
  font-size: 15px;
  line-height: 33px;
  text-align: center;
  width: 100%;
  position: unset;
  top: unset;
  margin-top: unset;
  padding: unset;
    
}

.interviewImg h3 span {
  font-size: 20px;
}

.interviewImg_r {
  background: #fff;
  height: unset;
  margin: 10px auto 25px auto;
  text-align: center;
  width: 90%;
}

.interviewImg_l {
    display: none;
}

.interviewImg_r > img {
  max-width: 320px;
  width: 100%;
}

.interviewImg_r,
.interviewText_r {
  float: unset;
}

.interviewImg_l,
.interviewText_l {
  float: unset;
}

.interviewText_r,
.interviewText_l {
  box-sizing: border-box;
  margin: 0px auto;
  width: 90%;
}

.interviewText_r {
  padding-left: unset;
}

.interviewText_l {
  padding-right: unset;
}

.interviewText_r p,
.interviewText_l p {
  margin-bottom: 20px;
  line-height: 22px;
}

.interviewText_r p.question,
.interviewText_l p.question {
  margin-bottom: 5px;
  font-weight: bold;
}

/*
4.3 recruit.html
====================================*/
#recruit {
  min-height: unset;
  padding-top: 150px !important;
  width: 100%;
}
#recruit > .box {
  flex-wrap: wrap;
  margin: 0px auto;
  width:95%;
}

#recruit > .box > .item {
  margin: 20px 10px 0px 10px;
}
#recruit > .box > .item:not(.item:first-child) {
  margin-top: 60px;
}

#recruit > .box > .item > h2 {
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 30px;
  text-align: center;
}

.dlBtn {
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
  background: #ccc;
}

.dlBtn a p {
  font-size: 14px;
  text-align: center;
  width: 100%;
}

.dlBtn a {
  display: inline-block;
  width: 100%;
  padding: 25px;
  box-sizing: border-box;
}

}