@charset 'utf-8';

/* ============================
  ベース
/* ============================ */
img{
	vertical-align:bottom;
}

/*ホバーエフェクト*/
/*「プライバシーポリシー」のリンクの文字色*/
a {
	color:#000000;
	text-decoration: underline;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
/*「プライバシーポリシー」の文字にカーソルを重ねた時の色*/
a:hover{
	color:#0071C2;
	text-decoration: none;
}
/*メニューコンテンツの元の文字色*/
li a {
	color: #030B14;
}
/*メニューの文字にカーソルを合わせた時の色*/
li a:hover {
	color: #036BA4;
	opacity: .7;
}


.red{
	color:#bbd5ef;
}


/*選択時の色*/
::-moz-selection {
    background: #bbd5ef;
}
::selection {
    background: #bbd5ef;
}
::-moz-selection {
    background: #bbd5ef;
}

.fa {
    padding: 0 5px;
}


/*見出し*/
#content h5,
#content h6 {
	font-weight: bold;
	line-height: 1.4em;
	position: relative;
	margin: 2em 0 1em 0;
	padding:0;
}
#content h5 {
	font-size: 1.1em;
}
#content h6 {
	font-size: 1em;
}

/* テーブル
----------------------------- */

/*ノーマル*/
/*「採用情報」の中の表(いじる必要なし)*/
#content table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	border:none;
}

#content table th {
	width: 20%;
	font-size:0.95rem;
	line-height: 1.4em;
	padding: 1em 0;
	text-align: left;
	vertical-align: top;
	border:none;
	background:none;
	border-bottom: 1px solid #000000;
	word-break: break-all;
}

#content table td {
	font-size:0.95rem;
	line-height: 1.4em;
	padding: 1em 0;
	vertical-align: top;
	border:none;
	border-bottom: 1.7px solid #bbd5ef;
	word-break: break-all;
}

#content table th + th,
#content table th + td,
#content table td + td{
	border-left: 1px solid #ccc;
}

/*ブロック*/
#content .table{
	padding:0 1rem;
}
#content .table-block table,
#content .table-block table tbody,
#content .table-block table tr,
#content .table-block table tr th,
#content .table-block table tr td{
	display: block;
	width: 100%;
}
#content .table-block table tr th,
#content .table-block table tr td{
	border-left:none;
}

#content .table-block table tr th{
	border-bottom:none;
	padding-bottom:0;
}

#content .table-block table tr td.col2{
	display: flex;
}

.txt-area {
	width: 50%;
}

.img-area {
    margin-left: 0%;
    margin-top: 4%;
    width: 100%;
}

.img{
	max-width: 76%;
    margin-top: -22%;
    margin-left: 21%;
}

/*ボタンスタイル*/
.btn a {
	max-width:400px;
	line-height: 70px;
	letter-spacing:0.05em;
	display: block;
	text-align: center;
	text-decoration: none;
	padding-right:1em;
	color: #fff;
	background: #bbd5ef;
	position: relative;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}
.btn a::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right:1.5rem;
	margin: auto;
	width:38px;
	height:38px;
	background:url("../img/arrow_w.svg") 0 0 no-repeat;
	background-size:contain;
	vertical-align: middle;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.btn a:hover::after{
	transform:translate(5px,0);
	-webkit-transform:translate(5px,0);
	-moz-transform:translate(5px,0);
	-ms-transform:translate(5px,0);
	-o-transform:translate(5px,0);
}
/*.btn a:hover{
	text-indent:-0.5em;
}*/

.center.btn a,
.center .btn a {
	margin:0 auto;
}
.right.btn a{
	margin:0 0 0 auto;
}


/*iframe*/
#content iframe{
	border:none;
	display: block;
	max-width:100%;
}

/*ページトップ*/
.pagetop{
  transition: .3s;
  opacity: 0;
  visibility: hidden;
}
.pagetop.active{
  opacity: 1;
  visibility: visible;
}
.pagetop.absolute{
  position: absolute;
  top: -70px;
  bottom: auto;
}
/*ページをスクロールしたときに右下に出る矢印の色*/
.pagetop a {
    font-size: 2em;
    font-weight: bold;
    line-height: 1.7;
    display: block;
    width: 1.8em;
    height: 1.8em;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
	background-color: #fff;
	border-radius: 50px;
}
/*ページをスクロールしたときに右下に出る矢印の背景の色*/
.pagetop a::before {
        font-family: Font Awesome\ 5 Free, FontAwesome;
        font-weight: bold;
    content: '\f077';
	color: #003894;
}




/*フェード*/
.fuwa {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 1s;
}

.fuwa.fuwa-scroll {
	opacity : 1;
	transform : translate(0, 0);
}



/* PCサイド画面
----------------------------- */
.flame{
	width:100%;
	height: 100vh;
	position:fixed;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	top:0;
	left:0;
	background-color:#bbd5ef;
}

.flame_left,
.flame_right{
	flex: 1;
	
}
.flame_main{
	width: 384px;
	max-width: 100%;
}

/*
PC画面左側
*/
.flame_left_content{
	padding:10%;
}

h1.sitelogo{
	max-width:400px;
}
h1.sitelogo a img{
	width: 520px;
}
.flame_left_content ul#menu-main{
	margin:3rem 0 1rem 0;
	padding:0;
	list-style:none;
}
.flame_left_content ul#menu-main li{
	margin: 0;
    padding: 0 0 1.8rem 0;
}
.flame_left_content ul#menu-main li a{
	font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
}

.flame_left_content ul#menu-main li a.current{
	color:#036ba4;
}

/*
PC画面右側
*/

/*背景動画*/
.pc-movie{
	position: relative;
	height: 100vh;
}
.pc-movie video{
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/*右下エリア*/
.fixed_banner{
	position: fixed;
    z-index: 10;
    right: 7%;
    bottom: 5%;
    width: 30%;
    margin: 0 auto;
}

.slogan {
    display: contents;
    position: relative;
}
.slogan::before{
	content: "";
	display: block;
	width: 100%;
	height: 150px;
	background-image: url(../../../../uploads/2024/11/slogan.png);
	background-size: contain;
	background-repeat: no-repeat;
}

/*QR*/
.box_qr{
    max-width: 321px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 1.3rem 3rem 1rem 1.2rem;
}
.box_qr img{
    width: 40%;
    max-width: 80px;
    margin-right: 1.7rem;
    vertical-align: bottom;
}
.box_qr p{
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
	color: #0071C2;
}

/*ボタンスタイル*/
.cta{
    max-width: 300px;
    margin: 0 auto;
    padding-top: 1rem;
}

.cta a {
	max-width: 330px;
    line-height: 70px;
    letter-spacing: 0.05em;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 0 2rem;
    color: #fff;
    background: #bbd5ef;
    font-size: 1.2rem;
    line-height: 4.5rem;
    position: relative;
    -moz-border-radius: 3rem;
    -webkit-border-radius: 3rem;
    border-radius: 3rem;
}


/*画面中央*/
/*画面全体の背景の色*/
main{
	position: relative;
	width: 384px;
	max-width: 100%;
	margin:0 auto;
	background-color:#ffffff;
}



/*  ヘッダー
----------------------------- */
header {
	width: 100%;
	-moz-transition: height 0.3s;
	-o-transition: height 0.3s;
	-webkit-transition: height 0.3s;
	transition: height 0.3s;
	background:#fff;
}

nav {
	height:80px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	-moz-transition: height 0.3s;
	-o-transition: height 0.3s;
	-webkit-transition: height 0.3s;
	transition: height 0.3s;
}
nav #title{
	display:flex;
	align-items: center;
}

nav #site-title {
    width: 300px;
	margin-right:0.7em;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
nav #site-title a{
	height:80px;
	display:flex;
	align-items: center;
	padding:0 1rem;
}
nav #site-title a img{
	width: 111%;
    max-height: 52px;
}

nav #spnavi{
	margin-left: auto;
	margin-right:1rem;
}

/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* ハンバーガーメニューのアイコン */
.drawer-open span{
  display: block;
  height: 2px;
  width: 35px;
  position: absolute;
  background: #fff;
}
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 2px;
  width: 35px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}
header.smaller .drawer-open span:before,
header.smaller .drawer-open span:after {
  background: #fff;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}
/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
  background: #fff;
}
#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
  background: #fff;
}
/* メニューのデザイン*/
.drawer-content{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 100%;/* メニューを画面の外に飛ばす */
	z-index: 99;
	transition: .5s;
	background-color:#272e34;
	overflow: scroll;
	/* IE, Edge 対応 */
	-ms-overflow-style: none;
	/* Firefox 対応 */
	scrollbar-width: none;
}
	/* Chrome, Safari 対応 */
	.drawer-content::-webkit-scrollbar {
		display:none;
	}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content{
	left: 0;/* メニューを画面に入れる */
}
.drawer-content .menu_scroll{
	padding:5rem 8vw 7rem 8vw;
	min-height:100%;
	-webkit-overflow-scrolling: touch;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
#spnavi ul {
	margin:0;
	padding: 0;
	list-style:none;
}
#spnavi li {
	margin:0;
	padding:0 0 1rem 0;
}

#spnavi li a{
	display:block;
	font-size:0.95em;
	font-weight:bold;
	color:#fff;
	position: relative;
	text-decoration:none;
}

/*スモールヘッダー*/
header.smaller{
	background-color:#fff;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}
header.smaller nav{
	height: 60px;
}
header.smaller nav #site-title {
	width:180px;
}
header.smaller nav #site-title a{
	height:60px;
}
header.smaller nav #title .title-copy{
	color:#222;
	font-size:0.8rem;
}
header.smaller nav #access li a{
	color:#222;
	font-size:0.9rem;
	line-height:60px;
}
header.smaller nav ul#menu-main>li ul.sub-menu{
	top: 60px;
}

header.smaller nav #access li.menu_inq a{
	line-height: 42px;
	color: #fff;
}

/*  一番下のフッター
----------------------------- */
footer {
    text-align: center;
    background-color: #0071C2;
    position: relative;
    width: 384px;
    max-width: 100%;
    margin: 0 auto;
	padding: 0 0 2em 0;
}
.footer-top-img {
    background: #fff;
    position: relative;
    max-width: 384px;
    margin: 0 auto;
}
.footer-top-img img{
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto;
	padding-top: 17%;
}

#f_logo{
	max-width:220px;
	margin:0 auto;
}
	#f_logo a{
		display:block;
	}

p#sitecopy{
	color: white;
	font-size:0.8rem;
	letter-spacing:0.1em;
	margin:1rem 0 0 0;
}

/* カスタムCCS */
.mv-nametext p, .mv-nametext2 p {
	color: #86ACD8;
    position: absolute;
    bottom: 0;
    font-size: 6.5vw;
    opacity: 0.15;
    font-weight: bold;
    margin: 0;
    z-index: -1;
    line-height: normal;
}
.mv-nametext p {
    left: 0;
}
.mv-nametext2 p {
	right: 0!important;
}
.cta1 a {
	background-color:#FFA734;
	color: #ffffff;
	font-weight: bold;
}
.cta2 a {
	background-color: #0071C2;
	color: #fff;
	font-weight: bold;
}
.w-text {
	color: #fff;
}
.flame_left::before, .flame_right::before {
    content: "";
    position: absolute;
    height: 100vh;
    width: 40%;
    z-index: -1;
    background-size: 100%;
}
.flame_left::before {
    background-image: url(../../../../uploads/2024/11/mv-bgimg.jpg);
	/* ↑ここを波のイラストに変える */
}
.flame_right::before {
	background-image: url(../../../../uploads/2024/11/mv-bgimg_r.jpg);
	/* ↑ここの画像をイラストに変える */
}
.h3ttl::before {
	/*content: "";*/
    background-image: url(../../../../uploads/2024/11/blue-block.png);
    width: 25px;
    height: 25px;
    display: block;
    margin: 2px 10px 0 0;
}
em {
    font-style: normal;
    background: linear-gradient(transparent 50%, #18c1ff5e 35%);
}
.h3ttl {
	display: flex;
}
.pb2 {
	padding-bottom: 2em;
}
.mb10 {
	margin-bottom: 10px!important;
}
.indent {
	text-indent: -1em;
    padding-left: 1em;
	margin-bottom: 0 0 10px 1em;
}
.mvcopy {
	color: #fff;
    position: absolute;
    font-size: 1.7em;
    margin-left: 25px;
    line-height: 1.5;
    letter-spacing: .2em;
    bottom: 2rem;
}
.main-imagearea::before{
	content: "";
    position: absolute;
    width: 100%;
    height: 233px;
    bottom: 0;
	background-image: url(../img/background/wave-1.png);
}
.mvcopy span.mvcopy-span {
	font-size: 1.4em;
}

/* ブロックパターン
----------------------------- */

/*メインビジュアル画像*/
.mainvisual{
}
.mainvisual img{
	width:100%;
	height:80vh;
	min-height:500px;
	object-fit: cover;
}

/*コーナータイトル*/
.cornertitle{
	font-size: 1.6rem;
	color: #036ba4;
	margin: 0;
	padding: 6rem 1rem 4rem 1rem;
	text-align: center;
}
/* .cornertitle:before,
.cornertitle:after{
	content:" - ";
} */

/*レイアウトパターン①*/
.content-pattern01{
	margin-bottom:4rem;
}
.content-pattern01 h3{
	display: inline-block;
	margin:0;
	padding:0 1.8rem 0.5rem 1.8rem;
	font-size:1.3rem;
	line-height: 1.4em;
}
.content-pattern01 p{
	margin:0;
	font-size:0.9em;
	line-height:1.6em;
	padding:0 1.8rem;
}

.content-pattern01:nth-of-type(odd) figure{
	padding-right:2rem;
}
.content-pattern01:nth-of-type(even) figure{
	padding-left:2rem;
}

.content-pattern01 figure img{
	width:100%;
	height:350px;
	object-fit:cover;
}
	.content-pattern01:nth-of-type(odd) figure img{
		border-radius: 0 20px 20px 0;
	}
	.content-pattern01:nth-of-type(even) figure img{
		border-radius: 20px 0 0 20px;
	}

/*レイアウトパターン②*/
.box_layout02{
	padding:0 2rem 1rem 2rem;
	background-color:#92b7cc;
}
/* .box_layout02 .cornertitle{
	color:#fff;
} */

.content-pattern02{
	background-color:#fff;
	overflow:hidden;
	border-radius: 0 40px;
}

.content-pattern02 figure img{
	width:100%;
	height:350px;
	object-fit:cover;
}
.content-pattern02 h3{
	margin:0;
	padding:1.5rem 1.8rem 0.5rem 1.8rem;
	font-size:1.3rem;
	line-height: 1.4em;
}
.content-pattern02 p{
	margin:0;
	font-size:0.9em;
	line-height:1.6em;
	padding:0 1.8rem;
}
.works-ttl {
	margin: 1em 0 4rem 0;
	color: #036BA4;

}
.box_company table {
	border-top: 1px solid #ccc!important;
}


/*レイアウトパターン③*/
.box_layout03{
	padding-bottom:4rem;
	background-color:#eff5f8;
}
.content-pattern03{
	padding:0 1.5rem 1.5rem 1.5rem;
	gap: 1.2rem;
}
.content-pattern03 figure img{
	width:100%;
	height:156px;
	object-fit:cover;
	border-radius: 20px;
}
#content .content-pattern03 p{
	font-size:0.73em;
	margin:0;
	padding:0.5rem 0;
}

/*会社案内セット*/
.box_company{
	
}
.box_company .box{
	padding-bottom:2rem;
}

.companytitle{
	text-align:center;
	padding:3rem 0 2rem 0;
}
.companytitle h3{
	min-width: 7em;
	margin:0 auto;
	padding:0 2rem;
	font-size:1.1rem;
	line-height: 2em;
	color:#fff;
	display:inline-block;
	background-color: #036ba4;
	border-radius: 20px;
}

.box_company h4{
	margin:0;
	padding:1.5rem 1.8rem 0.5rem 1.8rem;
	font-size:1.3rem;
	line-height: 1.4em;
}

.box_company .companytitle + h4{
	padding-top:0;
}

.box_company p{
	margin:0;
	font-size:0.9em;
	line-height:1.6em;
	padding:0 1.8rem;
}

.box_company  figure img{
	width:100%;
	height:350px;
	object-fit:cover;
}

/*採用情報セット*/
.box_recruit{
	padding-bottom:1rem;
	background-color:#bbd5ef;
}
.box_recruit .cornertitle{
	color:#fff;
}

.box_recruit_inner{
	margin-bottom:4rem;
	background-color:#bbd5ef;
	overflow:hidden;
}
	.box_recruit_inner:nth-of-type(odd){
		margin-right:2rem;
		border-radius: 0 30px 30px 0;

	}
	.box_recruit_inner:nth-of-type(even){
		margin-left:2rem;
		border-radius: 30px 0 0 30px;
	}

.box_recruit_inner h3{
	margin:0;
	padding:4rem 1.8rem 2rem 1.8rem;
	font-size:1.3rem;
	line-height: 1.4em;
}

.box_recruit_inner h4{
	color:#036ba4;
	margin:0;
	padding:3rem 1.8rem 0.5rem 1.8rem;
	font-size:1.2rem;
	line-height: 1.4em;
}


.box_recruit_inner h3 + h4{
	padding-top:0;
}

.box_recruit_inner p{
	margin:0;
	font-size:0.9em;
	line-height:1.6em;
	padding:0 1.8rem;
}

.box_recruit_inner figure img{
	width: 100%;
    object-fit: cover;
    padding: 0 1rem;
}

#content .box_recruit_inner .table.table-recruit{
	padding-bottom:4rem;
}

/* インスタフィード */
#sb_instagram {
	padding: 8% 4%;
}

/* お問い合わせ */
.wpcf7 input::placeholder {
	color: #ccc;
}
.wpcf7 input:-ms-input-placeholder{
	color: #ccc !important;
}
.wpcf7 input::-webkit-input-placeholder {
	color: #ccc !important;
}
.ziptext{
	display:block;
	font-size:0.9rem;
	padding:0.5rem 0 ;
	color:#0f7639;
}
#content .wpcf7 input.short {
	width: 8em;
}
#content .wpcf7 input.half {
	width: 44%;
}
.wpcf7-form-control-wrap.doko{
	display:block;
	padding:0.5rem;
}

.acc-privacy{
	font-size:1rem;
	padding:1rem 0;
}
.acc-privacy span{
	cursor:pointer;
}

/* ============================
  PC
/* ============================ */
@media(min-width: 900px) {

/*電話番号リンク*/
a.tel{
	pointer-events:none;
	text-decoration:none;
}
.txt a.tel{
	background:none;
}


}
/* ============================
  タブレット
/* ============================ */
@media(max-width: 900px) {


/* PCサイド画面
----------------------------- */
.flame_left,
.flame_right{
	visibility: hidden;
}

/*  ナビゲーション
----------------------------- */
.drawer-content .menu_scroll{
	display:block;
}




}

/* ============================
  スマホ（小）
/* ============================ */
@media(max-width: 500px) {


/* 枠
----------------------------- */
.flame_left,
.flame_right{
	display:none;
}

.flame_main{
	width: auto;
}
main{
	width: auto;
	overflow: hidden;
}

/*  ナビゲーション
----------------------------- */
header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

nav #site-title{
	margin-right:0.5em;
}

#main{
	padding-top:80px;/*ヘッダ分下げる*/
}


}

.marker {
	background-image: linear-gradient(0deg, #FFE58D 0.7em, transparent 0.7em);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	}

.fuwa.fuwa-scroll a{
		margin-left: -7%;
	}