@charset "UTF-8";
/* CSS Document */

/*========================================
上書き
========================================*/
.pcNav {
right: 20px !important;
}

@media screen and (max-width: 750px) {
  .menuBtn {
  animation:menuBtn .4s ease-out 0s both;
  }
}

/*========================================
lower css
========================================*/
.lowerHeader {
width: 100%;
height: 30px;
position: relative;
}
.lowerHeader span {
width: 90px;
height: 30px;
background-color: #000;
position: absolute;
top: 0;
right: 0;
}
.lowerWrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.lowerTtl {
display: flex;
align-items: baseline;
justify-content: center;
padding: 65px 0;
}
.lowerTtl .en {
font-family: 'Cabin', sans-serif;
font-size: 55px;
line-height: 1.4em;
font-weight: 500;
}
.lowerTtl .ttl {
min-width: 50px;
text-align: center;
font-size: 13px;
line-height: 1.4em;
font-weight: 500;
color: #FFF;
background-color: #000;
padding: 1px 1em;
margin-left: 15px;
}

/*SP　共通*/
@media screen and (max-width: 750px) {
.lowerHeader {
width: 100%;
height: 34px;
position: relative;
}
.lowerHeader span {
width: 34px;
height: 34px;
}
.lowerTtl {
padding: 8% 0;
}
.lowerTtl .en {
font-family: 'Cabin', sans-serif;
font-size: 40px;
line-height: 1.4em;
font-weight: 500;
}
}

/*========================================
news css
========================================*/
.news {
max-width: 660px;
margin: 0 auto 10%;
border-top: #eaeaea 1px solid;
}
.news .newsList {
border-bottom: #eaeaea 1px solid;
padding: 8% 0;
}
/*.news .newsList:last-child {
border-bottom: none;
}*/
.news .newsTxt {
width: 100%;
margin-bottom: 20px;
}
.news .newsTxt .date {
font-size: 12px;
line-height: 1.2em;
margin-bottom: 0.5em;
}
.news .newsTxt .title {
font-size: 22px;
line-height: 1.2em;
font-weight: bold;
margin-bottom: 1.2em;
}
.news .txtArea p {
font-size: 14px;
line-height: 1.7em;
margin-bottom: 1.5em;
word-break: break-all;
}
.news .txtArea p:last-child {
margin-bottom: 0;
}
.news .txtArea a {
color: #333;
display: inline;
}
.news .backBtn {
width: 240px;
border: #333 1px solid;
margin: 6% auto 0;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.news .backBtn a {
width: 100%;
height: 100%;
padding: 9px 0;
font-size: 14px;
line-height: 1.4em;
color: #333;
text-decoration: none;
text-align: center;
}
.news .backBtn .backArw {
width: calc(100% - 15px);
text-align: left;
position: absolute;
left: 20px;
top: 8px;
pointer-events: none;
}
.news .backBtn .backArw span {
display: inline-block;
width: 48px;
height: 8px;
border-bottom: 1px solid #1a1a1a;
border-left: 1px solid #1a1a1a;
transform: skew(-45deg);
}
.news .backBtn:hover .backArw {
left: 10px;
}
.news .backBtn .backArw,
.news .backBtn .backArw::before,
.news .backBtn .backArw::after { 
-webkit-transition: all .4s;
transition: all .4s;
}
/*news*/
@media screen and (max-width: 750px) {
.news {
max-width: 88%;
margin: 0 auto 10%;
}
.news .newsTxt .date {
font-size: 12px;
line-height: 1.2em;
margin-bottom: 0.5em;
}
.news .newsTxt .title {
font-size: 22px;
line-height: 1.2em;
font-weight: bold;
margin-bottom: 1em;
}
.news .newsTxt {
width: 100%;
}
}

/*========================================
pagenation
========================================*/
.pagelink ul {
display: flex;
justify-content: center;
text-align: center;
padding: 6% 0 0;
}
.pagelink ul li {
width: 30px;
height: 30px;
font-family: 'Cabin', sans-serif;
margin: 0 0.5em;
}
.pagelink ul li a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border: #333 1px solid;
color: #333;
text-decoration: none;
font-size: 15px;
line-height: 1em;
}
.pagelink ul li a.inactive:hover {
background-color: #333;
color: #FFF;
}
.pagelink ul li a:not(.inactive) {
opacity: 0.5;
}
/*SP pankuzu*/
@media screen and (max-width: 750px) {
	.pagelink ul {
	display: flex;
	justify-content: center;
	text-align: center;
	padding: 8% 0 8%;
	}
}

/*========================================
contact css
========================================*/
.contact {
width: 800px;
margin: 0 auto 80px;
}
.contact h1 {
font-size: 26px;
line-height: 1.4;
font-weight: bold;
text-align: center;
padding-bottom: 1em;
}
.contact h4 {
font-size: 16px;
line-height: 2em;
font-weight: bold;
padding-bottom: 2.5em;
}
.contact table {
width: 100%;
margin: 0 auto;
}
.contact th {
width: 200px;
text-align: left;
text-indent: 45px;
font-size: 14px;
line-height: 1.4em;
letter-spacing: 0;
padding-right: 20px;
}
.contact th.free {
text-indent: 0;
}
.contact th .required {
width: 40px;
margin:0 10px 0 -45px;
font-size: 11px;
line-height: 1.4em;
padding: 2px 4px;
color: #fff;
}
.contact th .cap {
display: block;
font-size: 11px;
line-height: 1.2em;
padding-top: 0.4em;
}
.contact th .cap.noIndext {
text-indent: 0;
}
.contact th.sub {
white-space: nowrap;
}
.contact th.sub p {
text-indent: 0;
padding: 2em 0 1em;
}
.contact th.sub a {
display: inline;
color: #1a1a1a;
}
.contact td {
width: 100%;
padding: 10px 0;
font-size: 14px;
line-height: 1.2em;
display: flex;
align-items: center;
}
.contact td p {
width: 100%;
}
.contact td.short {
width: 50%;
}
.contact td .wpcf7-form-control-wrap {
width: 100%;
}
.contact td .wpcf7-not-valid-tip {
  position: absolute;
}
.contact td input::input-placeholder{
color: #999999;
}
.contact td input[type="text"],
.contact td input[type="email"],
.contact td input[type="tel"],
.contact td input[type="number"]{
width: calc(100% - 34px);
border: #e0e0e0 1px solid;
padding: 16px;
}
.contact td select {
width: calc(100% - 2px);
border: #e0e0e0 1px solid;
font-size: 14px;
line-height: 1.2em;
padding: 15px;
}
.contact td input[type="file"] {
border: #e0e0e0 1px solid;
color: #1a1a1a;
font-size: 14px;
line-height: 1.2em;
padding: 12px;
}
.contact td label {
padding-right: 1.5em;
display: flex;
align-items: center;
}
.contact td.radio label {
padding: 1em 1em 1em 0;
}
.contact td input[type="radio"] {
width: 20px;
height: 20px;
margin-right: 5px;
margin-top: -2px;
}
.contact td textarea {
width: calc(100% - 34px);
height: 118px;
border: #e0e0e0 1px solid;
resize: vertical;
font-size: 14px;
line-height: 1.2em;
padding: 16px;
}
.contact td input[type="checkbox"] {
border: #cccccc 1px solid;
width: 20px;
height: 20px;
margin-right: 4px;
}
.contact td span {
padding: 0 1em 0 0;
}
.contact .submitBtn {
width: 260px;
margin: 5% auto 0;
position: relative;
}
.contact .submitBtn input[type="submit"] {
width: 100%;
background-color: #1a1a1a;
border: none;
color: #FFF;
font-size: 14px;
line-height: 1.4em;
text-align: center;
font-weight: bold;
padding: 1.2em 0;
-webkit-transition: all .2s;
transition: all .2s;
}
.contact .submitBtn input[type="submit"]:disabled {
background-color: #DDDDDD;
-webkit-transition: all .2s;
transition: all .2s;
}
.contact .submitBtn .moreArw {
width: calc(100% - 15px);
text-align: right;
position: absolute;
right: 18px;
top: 18px;
pointer-events: none;
}
.contact .submitBtn .moreArw span {
display: inline-block;
width: 40px;
height: 8px;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
transform: skew(45deg);
}
.contact .submitBtn:hover .moreArw {
position: absolute;
right: 10px;
top: 18px;
}
.contact .submitBtn .moreArw,
.contact .submitBtn .moreArw::before,
.contact .submitBtn .moreArw::after { 
-webkit-transition: all .4s;
transition: all .4s;
}
/*resume*/
.contact.resume .subTtl {
width: 100%;
color: #FFF;
text-indent: 1em;
font-size: 16px;
padding: 0.5em 0; 
margin: 4% 0 1%
}
.contact.resume .noMargin td {
margin: 0;
padding: 0;
}
.contact.resume .w4em {
width: calc(8em - 2px);
}
.contact.resume td span {
padding: 0;
}
.contact.resume .history td input[type="text"] {
width: calc(100% - 16em - 41px);
}
.contact.resume h1 {
  font-size: min(5.5vw,26px);
  line-height: 1.4;
}

/*SP　contact*/
@media screen and (max-width: 750px) {
  .contact {
  width: 88%;
  margin: 0 auto 8%;
  text-align: left;
  }
  .contact h1 {
  font-size: 24px;
  line-height: 1.4em;
  font-weight: bold;
  text-align: center;
  padding-bottom: 1em;
  }
  .contact h4 {
  font-size: 16px;
  line-height: 1.8em;
  font-weight: bold;
  padding-bottom: 2.5em;
  }
  .contact tr {
  display: block;
  }
  .contact th {
  width: 100%;
  text-indent: 0;
  padding-right: 0;
  }
  .contact th .required {
  width: 40px;
  margin:0 8px 0 0;
  }
  .contact th .cap {
  display: block;
  font-size: 12px;
  line-height: 1.2em;
  }
  .contact th.sub {
  width: 100%;
  white-space:normal;
  }
  .contact th.sub p {
  text-indent: 0;
  padding: 2em 0 1em;
  }
  .contact td {
  width: 100%;
  padding: 1% 0 5%;
  }
  .contact td.short {
  width: 100%;
  }
  .contact td input[type="text"],
  .contact td input[type="email"],
  .contact td input[type="tel"],
  .contact td input[type="number"] {
  width: calc(100% - 34px);
  border: #e0e0e0 1px solid;
  padding: 16px;
  }
  .contact td select {
  width: calc(100% - 2px);
  border: #e0e0e0 1px solid;
  font-size: 14px;
  line-height: 1.2em;
  padding: 16px;
  }
  .contact td input[type="file"] {
  border: #e0e0e0 1px solid;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.2em;
  padding: 12px;
  }
  .contact td textarea {
  width: calc(100% - 34px);
  height: 118px;
  border: #e0e0e0 1px solid;
  resize: vertical;
  font-size: 14px;
  line-height: 1.2em;
  padding: 16px;
  }
  .contact td input[type="checkbox"] {
  border: #cccccc 1px solid;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  }
  .contact .submitBtn {
  width: 260px;
  margin: 5% auto 0;
  position: relative;
  }
  .contact .submitBtn input[type="submit"] {
  width: 100%;
  background-color: #1a1a1a;
  border: none;
  color: #FFF;
  font-size: 14px;
  line-height: 1.4em;
  text-align: center;
  font-weight: bold;
  padding: 1.2em 0;
  }
  .contact .submitBtn .moreArw {
  width: calc(100% - 15px);
  text-align: right;
  position: absolute;
  right: 18px;
  top: 18px;
  }
  .contact .submitBtn .moreArw span {
  display: inline-block;
  width: 40px;
  height: 8px;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  transform: skew(45deg);
  }
  .contact .submitBtn:hover .moreArw {
  position: absolute;
  right: 10px;
  top: 18px;
  }
}
/*========================================
thanks css
========================================*/
.contact.thanks {
display: flex;
flex-direction: column;
align-items: center;
}
.contact.thanks p {
display: inline-block;
font-size: 14px;
line-height: 2em;
padding: 2% 5% 10%;
}
.contact.thanks .backBtn {
width: 10em;
margin: 0 auto;
font-size: 12px;
line-height: 1.2em;
text-align: center;
border-width: 1px;
border-style: solid;
}
.contact.thanks .backBtn a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
padding: 0.6em 0;
color: #333;
}

/*========================================
txtPage css
========================================*/
.txtPage {
max-width: 900px;
margin: 0 auto 80px;
}
.txtPage  h3 {
font-size: 30px;
line-height: 1.3em;
font-weight: 700;
text-align: center;
margin-bottom: 1.2em;
}
.txtPage dt {
font-size: 22px;
line-height: 1.3em;
font-weight: 700;
border-bottom: #eaeaea 1px solid;
margin-bottom: 1.2em;
padding: 0.2em;
}
.txtPage dd {
margin-bottom: 8%;
}
.txtPage dd p {
font-size: 14px;
line-height: 1.5em;
margin-bottom: 1.5em;
}
.txtPage dd li {
font-size: 14px;
line-height: 1.5em;
margin-bottom: 1.5em;
text-indent: -1em;
padding-left: 1em;
}
.txtPage dd .box {
display: inline-block;
border: #eaeaea 1px solid;
padding:1em 2em;
margin: 1.5em 0;
}

/*SP　compliance*/
@media screen and (max-width: 750px) {
.txtPage {
width: 88%;
margin: 0 auto 8%;
text-align: left;
}
.txtPage  h3 {
font-size: 26px;
line-height: 1.3em;
font-weight: 700;
text-align: center;
margin-bottom: 1em;
}
.txtPage dd {
margin-bottom: 12%;
}
}