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

.pt{}
.pc{}
.ps{}
.tb{display: none;}
.ts{display: none;}
.sp{display: none;}

html,body {
margin: 0;
padding: 0;
font-family: "Zen Kaku Gothic Antique", Helvetica;
color: #000000;
font-size: 16px;
line-height: 180%;
background: url("../images/background.png") no-repeat center top;
background-attachment: fixed;
background-size: cover;
}

.clearfix::after {
content: "";
display: block;
clear: both;
}

a {
transition: 0.4s;
color: #000000;
}

a:hover {
opacity: 0.7;
}

img {
margin: 0;
padding: 0;
vertical-align: bottom;
width: auto;
height: auto;
max-width: 100%;
}

ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6 {
margin:0;
padding: 0;
list-style: none;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

#wrapper {
width:100%;
overflow: hidden;
}

header {
width: 90%;
max-width: 1400px;
height: 1012px;
margin: 0 auto;
background-image: url("../images/logo_flag.png"), url("../images/250201-n-076_2.png");
background-repeat: no-repeat;
background-position: 180px -60px, center top;
background-size: auto, cover;
position: relative;
}

header h2 {
width: 100%;
color: #FFFFFF;
font-family: "Zen Old Mincho", Helvetica;
font-size: 240%;
letter-spacing: 3px;
line-height: 160%;
text-align: center;
position: absolute;
left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
bottom: 20%;
}

header .inbox {
width: 240px;
position: absolute;
top: 20px;
left: 30px;
}

header .logo_box {
height: 425px;
margin-bottom: 40px;
padding-top: 40px;
background-image: url("../images/white_flag2.png");
background-repeat: no-repeat;
background-size: 100% 425px;
}

header .logo_box h1 {
margin-bottom: 20px;
text-align: center;
}

header .logo_box h1 img {
width: 148px;
height: auto;
}

header .logo_box ul.h_menu li {
margin-bottom: 5px;
font-size: 105%;
letter-spacing: 2px;
text-align: center;
}

header .logo_box ul.sns {
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
}

header .logo_box ul.sns li {
margin: 0 7px;
}

header .logo_box ul.sns li img {
width: auto;
height: 26px;
}

header ul.g_menu {
width: 94%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-around;
position: absolute;
bottom: -90px;
left: 0;
right: 0;
z-index: 10;
}

header ul.g_menu li {
width: 17%;
height: 180px;
font-size: 170%;
line-height: 130%;
text-align: center;
background-image: url("../images/white_flag.png");
background-repeat: no-repeat;
background-size: 100% 180px;
background-position: center top;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}

header ul.g_menu li a {
width: 100%;
height: 100%;
display: block;
padding-top: 80px;
color: #001a43;
}

header ul.g_menu li:nth-child(1) a {
background-image: url("../images/fish_icon.png"), url("../images/white_flag.png");
background-repeat: no-repeat;
background-size: 30%, 100% 180px;
background-position: center 20px, center top;
}

header ul.g_menu li:nth-child(2) a {
background-image: url("../images/ryoushi_icon.png"), url("../images/white_flag.png");
background-repeat: no-repeat;
background-size: 36%, 100% 180px;
background-position: center 20px, center top;
}

header ul.g_menu li:nth-child(3) a {
background-image: url("../images/toudai_icon.png"), url("../images/white_flag.png");
background-repeat: no-repeat;
background-size: 30%, 100% 180px;
background-position: center 20px, center top;
}

header ul.g_menu li:nth-child(4) a {
background-image: url("../images/step_icon.png"), url("../images/white_flag.png");
background-repeat: no-repeat;
background-size: 40%, 100% 180px;
background-position: center 20px, center top;
}

header ul.g_menu li:nth-child(5) a {
background-image: url("../images/fukidashi_icon.png"), url("../images/white_flag.png");
background-repeat: no-repeat;
background-size: 30%, 100% 180px;
background-position: center 30px, center top;
}

#block01 {
width: 90%;
max-width: 1400px;
margin: 0 auto;
padding: 150px 0 260px;
background-color: #001a43;
background-image: url("../images/250201-n-022.png"), url("../images/250201-n-045.png");
background-position: top 40px left -8%, top 140px right -5%;
background-size: 26%;
background-repeat: no-repeat;
position: relative;
}

#block01 .inner {
width: 80%;
max-width: 1000px;
margin: 0 auto;
color: #FFFFFF;
text-align: center;
line-height: 260%;
}

#block01 .inner p {
text-shadow: 2px 2px 3px #001a43;
}

#block02 {
width: 80%;
height: 450px;
max-width: 1000px;
padding: 35px 25px;
position: absolute;
bottom: -250px;
left: 0;
right: 0;
margin: 0 auto;
background: url("../images/nawa_hr2.png") center bottom 20px repeat-x #1E57AA;
background-size: auto 26px;
}

#block02 h3 {
margin-bottom: 30px;
color: #FFFFFF;
text-align: center;
font-family: "Zen Old Mincho", Helvetica;
font-size: 200%;
letter-spacing: -1px;
line-height: 140%;
}

#block02 .recruitment .leftbox {
width: 60%;
float: left;
}

#block02 .recruitment .leftbox img {
width: auto;
height: auto;
max-width: 100%;
}

#block02 .recruitment .leftbox .btn {
margin-top:20px;
text-align: center;
}

#block02 .recruitment .leftbox .btn ul {
margin: 0 auto;
padding: 0;
width: 80%;
}

#block02 .recruitment .leftbox .btn ul li {
width: 48%;
float: left;
}

#block02 .recruitment .leftbox .btn ul li:nth-child(2n) {
float: right;
}

#block02 .recruitment .rightbox {
width:34.6%;
float: right;
}

#block02 .recruitment .rightbox h4 {
color: #ffffff;
text-align: center;
line-height: 140%;
}

#block03 {
width: 90%;
max-width: 1400px;
margin: 0 auto;
padding: 330px 0 100px;
background: #dddddd;
}

#block03 .inner {
width: 80%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}

#block03 .inbox {
width: 270px;
margin-top: 5%;
}

#block03 h2 {
margin-bottom: 30px;
color: #001a43;
font-family: "AP-OTF Keyaki Go Ost Min2-M", Helvetica;
font-size: 300%;
}

#block03 h3 {
color: #001a43;
font-size: 180%;
}

#block03 ul {
flex: 1;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#block03 li {
width: 48%;
margin-bottom: 4%;
position: relative;
}

#block03 li:nth-child(1) {
background: url("../images/250201-n-045-1.png") center top;
background-size: cover;
}

#block03 li:nth-child(2) {
background: url("../images/20250201-s-177.png") center top;
background-size: cover;
}

#block03 li:nth-child(3) {
background: url("../images/20250201-s-020.png") center top;
background-size: cover;
}

#block03 li:nth-child(4) {
background: url("../images/20250201-s-074.png") center top;
background-size: cover;
}

#block03 li:nth-child(5) {
width: 100%;
margin-bottom: 0;
background: url("../images/20250201-s-046.png") center top;
background-size: cover;
}

#block03 li:before {
background-color: #001a4364;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
}

#block03 li:after {
background-color: #000000;
position: absolute;
right: 0;
bottom: 0;
width: 26px;
height: 26px;
content: '';
}

#block03 li a {
width: 100%;
height: 210px;
color: #FFFFFF;
font-size: 130%;
letter-spacing: 2px;
line-height: 160%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 1;
}

#block03 li a:after {
content: '';
width: 7px;
height: 7px;
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
transform: rotate(45deg) translateY(-50%);
position: absolute;
right: 13px;
bottom: 5px;
}

#block03 li p {
z-index: 1;
}

#block04 {
width: 90%;
max-width: 1400px;
margin: 0 auto;
padding: 100px 0;
background: #FFFFFF;
}

#block04 .inner {
width: 80%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}

#block04 .inbox1 {
width: 40%;
text-align: center;
}

.facebook-wrapper {
    max-width: 500px; /* Facebook Page Plugin の最大幅 */
    margin: 0 auto;
}
 
.facebook-wrapper > .fb-page {
    width: 100%;
}
 
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}

#block04 .inbox2 {
width: 50%;
}

#block04 h2 {
margin-bottom: 50px;
color: #001a43;
font-family: "AP-OTF Keyaki Go Ost Min2-M", Helvetica;
font-size: 300%;
display: flex;
align-items: center;
}

#block04 h2 span {
font-size: 60%;
margin-left: 10px;
}

#block04 .scroll {
height: 300px;
  overflow-y: scroll;
}

#block04 dl,
#block04 dt,
#block04 dd {
  box-sizing: border-box;
}
#block04 dl {
  border-bottom: 1px solid #707070;
  color: #707070;
  font-size: 96%;
}
#block04 dt,
#block04 dd {
  padding: 15px 10px 0 0;
  border-top: 1px solid #707070;
}
#block04 dt {
  width: 100px;
  float: left;
}
#block04 dd {
  margin-left: 100px;
  padding-bottom: 15px;
}
#block04 dd:after {
  content: '';
  display: block;
  clear: both;
}

#block05 {
width: 90%;
max-width: 1400px;
margin: 0 auto;
}

#block05 ul {
display: flex;
}

#block05 li {
width: 50%;
}

#block05 li a {
width: 100%;
height: 395px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

#block05 li:first-child {
background: url("../images/20250201-s-090.png") center;
background-size: cover;
}

#block05 li:last-child {
background: url("../images/20250201-s-045.png") center;
background-size: cover;
}

#block05 h2 {
margin-bottom: 20px;
color: #FFFFFF;
font-family: "AP-OTF Keyaki Go Ost Min2-M", Helvetica;
font-size: 300%;
}

#block05 h3 {
color: #FFFFFF;
font-size: 140%;
}

#block06 {
width: 90%;
max-width: 1400px;
margin: 0 auto;
padding: 100px 0;
}

#block06 .inner {
width: 80%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}

#block06 .inbox {
width: 42%;
background: #FFFFFF;
opacity: 0.9;
padding: 4% 3%;
text-align: center;
box-sizing: border-box;
}

#block06 h2 {
margin: 3% 0 20px;
margin-bottom: 10px;
color: #001a43;
font-family: "AP-OTF Keyaki Go Ost Min2-M", Helvetica;
font-size: 260%;
}

#block06 h3 {
color: #001a43;
font-size: 140%;
margin-bottom: 30px;
}

#block06 ul {
margin-bottom: 30px;
display: flex;
justify-content: space-between;
}

#block06 li {
width: 48.5%;
}

#block06 p {
color: #001a43;
margin-bottom: 40px;
}

#block06 .btn {
width: 100%;
max-width: 220px;
margin: 0 auto;
text-align: center;
background: #001a43;
border-radius: 50px;
}

#block06 .btn a {
position: relative;
width: 100%;
display: block;
padding: 7px 0;
color: #FFFFFF;
}

#block06 .btn a:after {
content: '';
width: 5px;
height: 5px;
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 50%;
right: 25px;
border-radius: 1px;
transition: 0.3s ease-in-out;
}

footer {
width: 90%;
max-width: 1400px;
margin: 0 auto;
padding-bottom: 4%;
background: #000000;
}

footer .inbox1 {
padding: 8% 0 10%;
background: url("../images/nawa_hr2.png") center bottom repeat-x;
background-size: auto 26px;
}

footer .inbox1 ul {
width: 80%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
}

footer .inbox1 li {
width: 50%;
max-width: 320px;
}

footer .inbox1 li a {
width: 100%;
padding: 15px 0;
color: #FFFFFF;
background: #a59901;
font-size: 140%;
display: flex;
align-items: center;
justify-content: center;
}

footer .inbox1 li:first-child {
margin-right: 2%;
}

footer .inbox1 li:last-child {
margin-left: 2%;
}

footer .inbox1 li span {
font-size: 160%;
margin-right: 20px;
}

footer .inbox2 {
width: 80%;
max-width: 1000px;
margin: 0 auto;
padding: 3% 0;
display: flex;
justify-content: center;
align-items: center;
}

footer .f_logo {
margin-right: 8%;
}

footer .f_logo img {
width: 200px;
height: auto;
}

footer .f_address {
margin-right: 5%;
}

footer .f_address .address1 {
margin-bottom: 20px;
color: #FFFFFF;
font-size: 90%;
line-height: 180%;
}


footer .f_address .address2 {
color: #FFFFFF;
font-size: 70%;
line-height: 180%;
}

footer .f_btn {
color: #FFFFFF;
}

footer .f_btn ul {
display: flex;
}

footer .f_btn li {
margin-right: 15px;
margin-bottom: 15px;
}

footer .f_btn li img {
width: auto;
height: 26px;
}

footer .f_btn .btn {
width: 220px;
margin-bottom: 15px;
border: solid 1px #FFFFFF;
text-align: center;
font-size: 70%;
}

footer .f_btn .btn a {
position: relative;
width: 100%;
display: block;
padding: 5px 0;
color: #FFFFFF;
}

footer .f_btn .btn a:after {
content: '';
width: 5px;
height: 5px;
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 50%;
right: 15px;
border-radius: 1px;
transition: 0.3s ease-in-out;
}

footer .copy {
color: #FFFFFF;
font-size: 70%;
line-height: 180%;
text-align: center;
}


/* タブレットレイアウト :  ～ 1300 px*/
@media screen and (max-width:1300px)
{
header {
height: 900px;
background-position: 70% -60px, center top;
background-size: 78% auto, cover;
}

header .inbox {
width: 21%;
}

header ul.g_menu li {
height: 160px;
font-size: 150%;
background-size: 100% 160px;
}

header ul.g_menu li a {
padding-top: 75px;
}

header ul.g_menu li:nth-child(1) a,
header ul.g_menu li:nth-child(2) a,
header ul.g_menu li:nth-child(3) a,
header ul.g_menu li:nth-child(4) a,
header ul.g_menu li:nth-child(5) a {
background-size: 30%, 100% 160px;
}
}


/* タブレットレイアウト : 768 px ～ 959 px*/
@media screen and (max-width:959px)
{
.pt{display: block;}
.pc{display: none;}
.ps{display: none;}
.tb{display: block;}
.ts{display: block;}
.sp{display: none;}

.sp_menu {
  float:right;
  /*padding:15px 20px 0px 0px;
  width:50%;*/
  text-align:right;
top:15px;
right:40px;
  position: absolute;
}

.sp_menu li {
  float:right;
padding-left:15px;
}

.sp_menu li img {
    width:auto;
   height:auto;
}

header {
width: 100%;
height: 920px;
background-position: -50px -40px, center top;
background-size: 96% auto, cover;
}

header .inbox {
display: none;
}

header,
footer,
#block01,
#block03,
#block04,
#block05,
#block06 {
width: 100%;
}

#block01 {
background-position: top 120px left -8%, top 350px right -8%;
background-size: 30%;
}

}


/* スマホ設定  768 以下*/
@media screen and (max-width:767px)
{
.pt{display: none;}
.pc{display: none;}
.ps{display: block;}
.tb{display: none;}
.ts{display: block;}
.sp{display: block;}

html,body {
background: none;
}

.sp_menu {
right:20px;
}

.sp_menu li img {
    width:auto;
   height:40px;
}

header {
height: 600px;
/*min-height: 100vh;*/
background-position: -35px top, center top;
background-size: 100% auto, cover;
}

header h2 {
font-size: 200%;
}

.scrolldown {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 10%;
  width: 3em;
  height: 3em;
}
.scrolldown span {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 25%;
  left: 33%;
  transform: translateY(0) rotate(-45deg);
  border-left: 1px solid #F5F5F5;
  border-bottom: 1px solid #F5F5F5;
  z-index: 2;
  animation: popping-arrow 2s infinite ease-out;
}
.scrolldown:hover span {
  transform: translateY(0.5em) rotate(-45deg);
  animation: paused;
}

@keyframes popping-arrow {
  0% {
    transform: translateY(0) rotate(-45deg);
  }
  30% {
    transform: translateY(0.5em) rotate(-45deg);
  }
  60% {
    transform: translateY(0) rotate(-45deg);
  }
}

header ul.g_menu {
display: none;
}

#block01 {
height: 1000px;
background-position: top 40px left -10%, bottom 300px right -10%;
background-size: 60%;
}

#block01:before {
background-color: rgba(26,67,100,0.4);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '';
}

#block01 .inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 80px auto 0;
line-height: 200%;
}

#block02 {
width: 90%;
height: 740px;
padding: 4% 5% 8%;
bottom: -440px;
background-size: auto 15px;

}

#block02 h3 {
margin-bottom: 25px;
font-size: 150%;
}

#block02 .recruitment .leftbox {
width: 100%;
float: none;
margin-bottom: 30px;
}

#block02 .recruitment .leftbox .btn {
margin-top:15px;
}

#block02 .recruitment .leftbox .btn ul li {
width: 100%;
float: none;
margin-bottom: 15px;
}

#block02 .recruitment .leftbox .btn ul li:nth-child(2n) {
float: none;
}

#block02 .recruitment .rightbox {
width:100%;
float: none;
}

#block02 .recruitment .rightbox h4 {
font-size: 90%;
}

#block03 {
padding: 500px 0 80px;
}

#block03 .inner {
width: 90%;
display: block;
}

#block03 h2 {
margin-bottom: 20px;
font-size: 280%;
}

#block03 h3 {
font-size: 160%;
}

#block03 .inbox {
width: 100%;
margin-top: 0;
margin-bottom: 40px;
}

#block03 li a {
height: 190px;
font-size: 110%;
letter-spacing: 0;
}

#block04 {
padding: 80px 0;
}

#block04 .inner {
width: 90%;
display: block;
}

#block04 h2 {
margin-bottom: 40px;
font-size: 280%;
}

#block04 h2 span {
font-size: 50%;
}

#block04 .inbox1 {
width: 100%;
margin-bottom: 80px;
box-sizing: border-box;
}

#block04 .inbox2 {
width: 100%;
}

#block04 dt {
  width: 100%;
  float: none;
}
#block04 dd {
  margin-left: 0;
  padding: 0 10px 15px 0;
  border-top: none;
}

#block05 ul {
display: block;
}

#block05 li {
width: 100%;
}

#block05 li a {
height: 240px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

#block05 h2 {
font-size: 280%;
}

#block05 h3 {
font-size: 130%;
}

#block06 {
padding: 80px 0;
background: url("../images/background.png") no-repeat center;
}
	
	#block06 .inner {
		width: 90%;
	}

#block06 .inbox {
width: 100%;
padding: 10% 7%;
}

#block06 h2 {
font-size: 250%;
}

#block06 h3 {
font-size: 130%;
}

footer {
padding-bottom: 10%;
}

footer .inbox1 {
padding: 15% 0;
background-size: auto 15px;
}

footer .inbox1 ul {
display: block;
}

footer .inbox1 li {
width: 300px;
max-width: 300px;
margin: 0 auto 15px;
}

footer .inbox1 li a {
font-size: 130%;
}

footer .inbox1 li:first-child {
margin-right: auto;
}

footer .inbox1 li:last-child {
margin-left: auto;
}

footer .inbox1 li span {
font-size: 150%;
margin-right: 15px;
}

footer .inbox2 {
padding: 15% 0 5%;
display: block;
text-align: center;
}

footer .f_logo {
margin-right: 0;
margin-bottom: 30px;
}

footer .f_address {
margin-right: 0;
margin-bottom: 30px;
}

footer .f_btn ul {
margin-bottom: 40px;
justify-content: center;
}

footer .f_btn li {
margin: 0 10px;
}

footer .f_btn .btn {
margin: 0 auto 15px;
}

}