@charset "utf-8";
/*
	Last Update:2021/03/08
	Auther: iw
*/
/*===================================================================
	#page
===================================================================*/
/* title */
#page_title { position:relative; }
#page_title .page_title_wrap { position:relative; overflow:hidden; }
#page_title .text { position:absolute; top:0; left:0; width:100%; height:100%; }
#page_title .text_wrap { display:table; width:100%; height:100%; }
#page_title h2 { display:table-cell; text-align:center; vertical-align:middle; color:#fff; }
#page_title h2 > span { display:block; }
#page_title h2 .main { letter-spacing:5px; }
#page_title h2 .sub { letter-spacing:3px; font-size:1.1em; }
	@media (max-width: 575px){
		#page_title h2 .main { font-size:1.5em; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		#page_title h2 .main { font-size:1.75em; }
	}
	@media (min-width: 768px){
		/*#page_title .page_title_wrap { border-radius:10px; }*/
		#page_title h2 .main { font-size:3em; }
	}

/* pankuzu */
#pankuzu { font-size:13px; padding:10px 0; color:#666; }
#pankuzu a { text-decoration:none; }
#pankuzu li { display:inline-block; }
#pankuzu li:before { content:"\f054"; font-family:"Font Awesome 5 Free"; -webkit-font-smoothing:antialiased; text-rendering:auto; font-variant:normal; font-weight:bold; font-size:0.85em; padding:0 10px; color:#666; }
#pankuzu ul > li:first-child:before { content:"\f015"; color:#000; }
	@media (max-width: 575px){
		#pankuzu { display:none; }
	}
	@media (min-width: 576px){
		#pankuzu { margin-bottom:50px; }
	}


/*===================================================================
	#vessels
===================================================================*/
#vessels_list { position:relative; background:url(../image/contents/vessels/list_back.png) no-repeat top center / cover; }
#vessels_list:before { content:""; opacity:1; position:absolute; top:0; right:-30px; width:160px; height:100%; background:url(../image/contents/vessels/list_text.png) no-repeat top right; }
#vessels_list:not(.parallax_on):before { opacity:0; top:50px; }

.vessels_unit:not(._last) { padding-bottom:80px; border-bottom:2px dotted #ddd; }
.vessels_unit .title { margin-bottom:20px; }
.vessels_unit .title > * { display:inline-block; vertical-align:middle; }
.vessels_unit .title .main { font-size:2.25em; font-weight:bold; letter-spacing:5px; }
.vessels_unit .title .sub { color:#999; margin-left:15px; letter-spacing:2px; }
.vessels_unit .tbl_2 th { width:140px; }
	@media (max-width: 575px){
		.vessels_unit .photo { margin-bottom:20px; }
		.vessels_unit .tbl_2 { font-size:0.9em; }
		.vessels_unit .tbl_2 th { width:75px; }
	}

#cover { position:fixed; top:0; left:0; width:100%; height:100vh; max-width:100vw; background:rgba(0,0,0,0.5); overflow:hidden; z-index:2000; cursor:pointer; }
#base:not(.on) #cover { display:none; }
.popup { position:fixed; top:50%; left:0; width:100%; transform:translateY(-50%); z-index:3000; }
.popup .center2 { max-width:900px; }
.popup_title { position:relative; background:#4371ad; color:#fff; padding:20px 15px 20px 15px; }
.popup_title > * { display:inline-block; line-height:100%; vertical-align:middle; }
.popup_title .main { font-size:2em; margin-right:15px; }
.popup_close { position:absolute; right:0; top:50%; transform:translateY(-50%); padding:0 15px 0 0; }
.popup_close a > span { opacity:0; position:absolute; }
.popup_close a > i { font-size:2em; }
.popup_in { position:relative; box-shadow:0 0 4px rgba(0,0,0,0.4); }
.popup_contents { max-height:calc(100vh - 200px); overflow:auto; background:#fff; padding:20px; overscroll-behavior:none; }
.popup_contents .image { border-radius:10px; overflow:hidden; }
.popup_contents .tbl_2 th,
.popup_contents .tbl_2 td { vertical-align:middle; }
	@media (max-width: 575px){
		.popup .center2 { padding:0 10px; }
		.popup_contents { padding:20px 15px; }
		.popup_contents .tbl_2 th { width:100px; }
	}


/*===================================================================
	#recruit
===================================================================*/
#recruit_message { background:url(../image/contents/recruit/message_back.jpg) no-repeat top center / cover; }
#recruit_message p { line-height:200%; }

#recruit_detail { position:relative; background:url(../image/contents/recruit/detail_back.jpg) no-repeat top center /cover; }
#recruit_detail:before { content:""; opacity:1; position:absolute; top:0; right:-30px; width:160px; height:100%; background:url(../image/contents/recruit/detail_text.png) no-repeat top right; }
#recruit_detail:not(.parallax_on):before { opacity:0; top:50px; }
#recruit_detail > * { position:relative; }
	@media (max-width: 575px){
		#recruit_detail .tbl_2 th.sub { width:90px; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		#recruit_detail .tbl_2 th:not(.sub) { width:110px; }
		#recruit_detail .tbl_2 th.sub { width:120px; }
	}
	@media (min-width: 768px) and (max-width: 991px){
		#recruit_detail .tbl_2 th:not(.sub) { width:150px; }
		#recruit_detail .tbl_2 th.sub { width:160px; }
	}
	@media (min-width: 992px){
		#recruit_detail .tbl_2 th:not(.sub) { width:200px; }
		#recruit_detail .tbl_2 th.sub { width:200px; }
	}

#recruit_flow { background:#F1F9FC; }
#recruit_flow .arrow { color:#D2E0EE; text-align:center; font-size:3em; }
.unit_wrap { position:relative; }
.circle_unit { padding-top:100%; background:#fcfcfc; box-shadow:0 0 3px rgba(0,0,0,0.1); border-radius:50%; }
.circle_unit .number { position:absolute; top:0; left:0; font-size:3em; font-weight:bold; z-index:2; }
.circle_unit .circle { position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); }
.circle_unit .circle > * { text-align:center; }
.circle_unit .image { padding:0 0 20px; }
.circle_unit .text h3 { font-size:1.75em; }
	@media (max-width: 575px){
		.unit_wrap { width:100%; max-width:260px; margin:0 auto; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		.circle_unit .number { font-size:2em; }
		.circle_unit .image { padding:0 0 10px; }
		.circle_unit .image img { width:25%; }
		.circle_unit .text { padding:0 15px; }
		.circle_unit .text h3 { font-size:1.1em; }
		.circle_unit .text p { font-size:0.8em; }
		#recruit_flow .arrow { font-size:1.75em; }
	}
	@media (min-width: 768px) and (max-width: 991px){
		.circle_unit .number { font-size:2.5em; }
		.circle_unit .text { padding:0 10px; }
		.circle_unit .text h3 { font-size:1.25em; }
		.circle_unit .text p { font-size:0.8em; }
		#recruit_flow .arrow { font-size:2.25em; }
	}
	@media (min-width: 768px) and (max-width:1199px){
		.circle_unit .image { padding:0 0 10px; }
		.circle_unit .image img { width:40%; }
	}

/* toggle_box / offices */
.toggle_box { border:1px solid #ddd; overflow:hidden; margin-bottom:20px; }
.toggle_box .title { position:relative; cursor:pointer; padding:10px 15px; }
.toggle_box .title h3 { font-weight:bold; font-size:1.25em; }
.toggle_box .title:after { content:"\f055"; position:absolute; top:calc(50% - 0.5em); right:10px; color:#0f6ab2; font-size:1.25em; }
.toggle_box._open .title:after { content:"\f056"; }
.toggle_box:not(._open) .contents { display:none; }
	@media (max-width: 575px){
		.toggle_box .contents { padding:10px; }
	}
	@media (min-width: 576px){
		.toggle_box .contents { padding:25px; }
	}


/*===================================================================
	#company
===================================================================*/
#outline { position:relative; background:url(../image/contents/recruit/detail_back.jpg) no-repeat top center /cover; }
#outline:before { content:""; opacity:1; position:absolute; top:0; right:-30px; width:160px; height:100%; background:url(../image/contents/recruit/detail_text.png) no-repeat top right; }
#outline:not(.parallax_on):before { opacity:0; top:50px; }
#outline > * { position:relative; }
	@media (max-width: 575px){
		#outline .tbl_1 { font-size:0.95em; }
		#outline .tbl_1 th { width:90px; }
		#history .tbl_1 { font-size:0.95em; }
		#history .tbl_1 th { width:90px; }
	}


	/*===================================================================
		#company
	===================================================================*/
	.service_box{background: #fff;
	box-shadow: 1px 1px 6px #e0e0e0;
	border-radius: 10px;
	padding: 30px 10px 0px 10px;
	margin:10px 10px 30px;}
}