/* ========================================================================
ResetCss
======================================================================== */

/* 要素 フォントサイズ・マージン・パディングをリセット */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

/* 行の高=フォントサイズ */
body {
	line-height:1;
}

/* 新規追加要素をブロック要素化 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}

/* ulのマーカー非表示 */
ol, ul {
	list-style: none;
}

/* 引用符の非表示 */
blockquote, q {
	quotes:none;
}

/* blockquote要素、q要素の前後にコンテンツ非表示 */
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

/* フォントサイズ　リセット フォントの縦方向 ベースライン揃え 点線削除 */
a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	outline: none;
	text-decoration: none;
}

/* ins要素 デフォルトセット 色を変える場合はここで変更 */
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

/* mark要素 デフォルトセット 色やフォントスタイルを変える場合はここで変更 */
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

/* テキスト 打ち消し線 */
del {
	text-decoration: line-through;
}

/* IE　デフォルトで点線を下線表示設定　下線設定 マウスオーバー時 ヘルプカーソル表示可 */
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

/*　隣接するセルのボーダーを重ねて表示　*/
table {
	border-collapse:collapse;
	border-spacing:0;
}

/* 水平罫線デフォルトリセット */
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

/* 縦方向の揃え 中央揃え */
input, select {
	vertical-align:middle;
}

/* 画像を縦に並べた時に余白0 */
img {
	vertical-align: top;
	font-size: 0;
	line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/*画像レスポンシブ*/
img {
	max-width: 100%;
	height: auto;
}

/*改行のweb際のBR高さバグ修正*/
br {
	line-height: inherit;
}

input{
	-webkit-appearance: none;
}

/*  レスポンシブ用
-------------------------------------------------------------*/
/*  pcのみ  */
.sp-only {display: none !important;}
.pc-only {display: block !important;}

/*  spのみ  */
@media screen and (max-width: 1199px) {
	.pc-only {display: none !important;}
	.sp-only {display: block !important;}
}

/*  リンク類
-------------------------------------------------------------*/
a{transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; text-decoration: none; color: #333;}
a:hover{opacity: 0.6; transition:.2s all; text-decoration: none; color: #0087b7;}
a:visited {color: #333;}
a img{transition:.2s all;}
a img:hover{opacity: 0.8; transition:.2s all;}
button{transition:.2s all;}
button:hover{opacity: 0.8; transition:.2s all;}
form{margin: 0;}

/* その他 共通
-------------------------------------------------------------*/
html {overflow: auto; height: 100%;}
body{
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
	position: relative;
	color: rgb(51, 51, 51);
	font-size: 18px;
	line-height: 1.7;
	font-weight: 500;
}

.inner {width: 100%; max-width: 1280px; margin: auto; padding: 0 40px;}
.en {font-family: "Josefin Sans", sans-serif;}

.cmn-button {color: #fff; font-size: 18px; letter-spacing: 0.05em; font-weight: bold; background: linear-gradient(135deg, #0087b7, #31a2ca); padding: 18px 30px; display: inline-flex; justify-content: center; align-items: center; transition: .3s; border-radius: 9999px; width: 200px; outline: 1px solid; outline-color: transparent; outline-offset: 0px; margin-top: 30px;}
.cmn-button .more {color: #fff; display: flex; justify-content: center; font-family: "Josefin Sans", sans-serif; line-height: 1; padding-top: 6px;}
.cmn-button:hover {animation: light .8s infinite; opacity: 1; outline-color: #0087b7;}

@keyframes light {
  100% {
    outline-color: transparent;
    outline-offset: 12px;
 }
}

@media screen and (max-width: 1199px) {
	body {font-size: 16px;}
	main {overflow: hidden;}
	.inner {padding: 0 20px;}
	.cmn-button {width: 160px; padding: 14px 20px; font-size: 16px;}
}



/* =================================================================
ヘッダー
=================================================================*/
header {width: 100%; position: fixed; top: 0; z-index: 999;}
header .inner {width: 100%; max-width: 100%; height: 70px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;}
header .logo img {display: block; width: 197px; height: 38px;}

header .menu {display: flex; justify-content: flex-end; align-items: center;}
header .menu .item {margin-left: 40px;}
header .menu .item a {font-size: 14px; font-weight: 700; color: #fff;}

header .menu .item .contact-button {color: #fff; display: flex; justify-content: center; align-items: center; width: 124px; height: 46px; background: linear-gradient(135deg, #0087b7, #31a2ca); border-radius: 9999px;}
header .toggle-button {width: 30px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-left: 20px;}
header .toggle-button span {display: block; width: 30px; height: 2px; background: #fff;}

header.top {background: rgba(255, 255, 255, 0.30); box-shadow: none;}
header.top .menu .item a {color: #fff;}
header.top .toggle-button span {background: #fff;}

.head_wrap {display: none; width: 100%; position: fixed; height: 100vh;}
.head_wrap.open {display: block;}
#head_submenu .close-button {position: absolute; width: 23px; height: 23px; top: 23px; right: 23px;} 

/*  menu  *//*  button  */
#head_submenu {visibility: hidden; opacity: 0; -webkit-transition: all 0.3s 0s ease; transition: all 0.6s 0s ease; display: block; position: relative;}
#head_submenu.open {opacity: 1; visibility: visible; z-index: 1020; -webkit-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease;}

/*  head submenu  */
#head_submenu {position: fixed; top: 0px; left: 0; right: 0; bottom: 0; z-index: 997;}
#head_submenu .head {position: fixed; width: 100%; top: 0px; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.80); overflow-y: scroll; padding: 0px 0px 30px 0px; box-sizing: border-box;}

/*  animation  */
#head_submenu,
#head_submenu #submenu_left ul li a,
#head_submenu #submenu_right ul li a,
#head_menu ul li a {transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s;}

#head_submenu .head {display: flex; justify-content: center; align-items: center;}
#head_submenu .head .menu {width: 70%; height: auto;}

#head_submenu .menu {display: flex; justify-content: center; align-items: flex-start; gap: 40px;}
#head_submenu .menu .sub {display: flex; flex-direction: column; padding-left: 1em; padding-top: 1em; gap: 1em;}

header.sticky {background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;}
header.sticky .menu .item a {color: #231815;}
header.sticky .menu .item .contact-button {color: #fff;}
header.sticky .toggle-button span {background: #231815;}

.menu-blur {position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 996; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none;}
.menu-blur.open {opacity: 1; visibility: visible; pointer-events: auto;}


@media screen and (max-width: 1199px) {
	header .menu .item {display: none;}
	header .logo img {width: 100px; height: auto;}

	#head_submenu .close-button {position: fixed;}
	#head_submenu .head {padding: 170px 0px 100px 0px;}
	#head_submenu .head .menu {flex-direction: column; width: 100%; padding: 0px 40px; gap: 30px;}
}

/* =================================================================
フッター
=================================================================*/
.backtotop {position: fixed; right: 0px; bottom: 0px; width: 80px; height: 80px; background: #31a2ca; z-index: 100;}

footer {border-top: 1px solid #0087b7; background: #fff;}
footer .inner {width: 100%; max-width: 1200px; margin: auto; display: flex; justify-content: space-between; padding: 40px 0;}

footer .footer-logo {width: 197px; height: 38px;}
footer .info {font-size: 14px; font-weight: 500; margin-top: 20px;}
footer .info address {font-style: normal;}
footer .info .tel {margin-top: 10px; line-height: normal;}

footer .menu {display: flex; justify-content: flex-end; flex-direction: column;}
footer .menu ul {display: flex; justify-content: flex-end; gap: 1em;}
footer .menu ul + ul {margin-top: 10px;}
footer .menu  a {font-size: 14px; font-weight: 500; color: #231815;}

footer .copy {background: #0087b7; color: #fff; display: flex; justify-content: center; align-items: center; width: 100%; height: 40px;}



@media screen and (max-width: 1199px) {
	.backtotop {width: 40px; height: 40px;}
	footer .inner {flex-direction: column;}
	footer .left-box {display: flex; flex-direction: column; align-items: center; text-align: center;}
	footer .menu {flex-direction: column; align-items: center; text-align: center;}
	footer .menu ul {flex-direction: column; gap: 5px;}
	footer .menu ul + ul {margin-top: 5px;}
	footer .rihgt-box {margin-top: 40px;}
	footer .copy {font-size: 12px; height: 25px;}
}



/* =================================================================
contact-us
=================================================================*/
.contact-us {padding: 130px 0;}
.contact-us h2 + p {margin-top: 40px;}
.contact-us .list {gap: 40px; margin-top: 100px; display: flex; justify-content: center;}
.contact-us .list .button {color: #fff; font-size: 18px; letter-spacing: 0.05em; font-weight: bold; background: linear-gradient(135deg, #0087b7, #31a2ca); padding: 18px 30px; display: inline-block; transition: .3s; border-radius: 9999px; width: 100%; max-width: 370px; outline: 1px solid; outline-color: transparent; outline-offset: 0px; margin-top: 30px;}
.contact-us .list .button p {display: flex; align-items: center; gap: 20px; justify-content: center;}
.contact-us .list .button img {width: 43px; height: auto;}
.contact-us .list .button:hover {animation: light .8s infinite; opacity: 1; outline-color: #0087b7;}

@media screen and (max-width: 1199px) {
	.contact-us {padding: 60px 0;}
	.contact-us .list {gap: 0px; margin-top: 40px; flex-direction: column;}
}

/* =================================================================
other-links
=================================================================*/
.other-links {display: flex; align-items: center;}
.other-links .item {width: calc((100%)/2); height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-size: cover; color: #fff; padding: 20px; position: relative;}
.other-links .item:before {content: ""; width: 100%; height: 100%; background: #000; opacity: 0.3; position: absolute; top: 0; left: 0; z-index: -1;}
.other-links .item h3 {font-size: 28px; font-weight: 700; line-height: 1.5; text-align: center; height: 2em; display: flex; justify-content: center; align-items: center;}
.other-links .item p {font-weight: 400; line-height: 1.5; margin-top: 40px;}

.other-links .item:nth-child(1) {background-image: url('../img/top/other-links_reason_bg.jpg');}
.other-links .item:nth-child(2) {background-image: url('../img/top/other-links_faq_bg.jpg');}
.other-links .item:nth-child(3) {background-image: url('../img/top/other-links_nagare_bg.jpg');}

.other-links.links2 .item {justify-content: flex-start; padding-top: 50px;}
.other-links.links2 .item p {font-size: 16px; min-height: 4em;}
.other-links.links2 .item:nth-child(1) {background-image: url('../img/top/other-links_reason_bg.jpg');}
.other-links.links2 .item:nth-child(2) {background-image: url('../img/top/other-links_nagare_bg.jpg');}
.other-links.links2 .item:nth-child(3) {background-image: url('../img/top/other-links_faq_bg.jpg');}



@media screen and (max-width: 1199px) {
  .other-links {flex-direction: column;}
  .other-links .item {width: 100%; height: auto;}
  .other-links .item h3 {height: auto; font-size: 26px;}
  .other-links .item p {margin-top: 20px;}
  .other-links.links2 .item {padding-top: 20px;}
  .other-links.links2 .item p {min-height: auto;}
}

/* =================================================================
brand-list
=================================================================*/
.brand-list {padding: 60px 0; background: linear-gradient(90deg, rgba(0, 86, 135, 0.4), rgba(35, 179, 209, 0.3));}
#page .brand-list .cmn-title .en {font-size: 70px;}
.brand-list .slider {overflow: hidden; width: 100%; height: 140px; position: relative; margin: 40px auto 0;}
.brand-list .slider-track {display: flex !important; height: 140px; gap: 0 40px;}
.brand-list .slider-track img { height: 140px; width: 233px; object-fit: contain; flex-shrink: 0; display: block;}


@media screen and (max-width: 1199px) {
	.brand-list {padding: 60px 0;}
.brand-list .slider {height: 70px; margin: 20px auto 0;}
.brand-list .slider-track {height: 70px; gap: 0 20px;}
.brand-list .slider-track img {height: 70px; width: auto;}
  #page .brand-list .cmn-title .en {font-size: 46px;}
}


/* =================================================================
応募フォーム類
=================================================================*/
.smf-form--business .smf-item {border: 1px solid #E8E8E8 !important;}
.smf-form--business .smf-item__col--label {border-right: 1px solid #E8E8E8 !important; background-color: #f2fcff !important; padding: 30px 30px !important;}
.smf-action .smf-button-control__control {border: 0px !important; background-image: none !important; color: #fff !important; font-size: 18px !important; letter-spacing: 0.05em !important; font-weight: bold !important; background: linear-gradient(135deg, #0087b7, #31a2ca) !important; padding: 18px 30px !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; transition: .3s !important; border-radius: 9999px !important; width: 200px !important; outline: 1px solid !important; outline-color: transparent !important; outline-offset: 0px !important; margin-top: 30px !important;}


.smf-item__label__text {position: relative;}
.smf-item:has([data-validations~="required"]) .smf-item__label__text::after {position: absolute; top: 50%; right: -50px; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 23px; border-radius: 4px; content: "必須"; font-size: 12px; color: #fff; background: #E60012;}

@media screen and (max-width: 1199px) {
	.smf-form--business .smf-item__col--label {padding: 10px 10px !important; border-right: 0px !important;}
	.smf-form--business .smf-item__col {padding: 10px 10px !important;}

	.smf-form--business {border-top: 1px solid #E8E8E8 !important;}
	.smf-form--business .smf-item {border-top: 0px !important;}
	.smf-form--business .smf-item:nth-child(1) .smf-form--business .smf-item__col--label {border-top: 1px solid #E8E8E8 !important}
}

/* =================================================================
company
=================================================================*/
.company {display: flex; justify-content: center; align-items: center; padding: 130px 0; position: relative;}
.company:before {content: ""; width: 100%; height: 100%; background: #000; opacity: 0.3; position: absolute; top: 0; left: 0; z-index: -1;}
.company .inner {display: flex; align-items: flex-start; width: 100%; max-width: 900px; height: auto; background: rgba(255, 255, 255, 0.70); padding: 40px 70px; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);}
.company .title {padding-right: 110px; display: flex; flex-direction: column;}
.company .title h2 {font-size: 38px; display: inline-block; flex-direction: column; line-height: 1; position: relative; color: #0087b7;}
.company .title h2:after {content: ""; width: 100%; height: 3px; background: #0087b7; display: block; bottom: -15px; left: 0; position: absolute;}
.company .title .en {font-size: 20px; font-weight: 700; color: #0087b7; margin-top: 15px;}
.company .text {font-size: 18px;}
.company .text h3 {font-weight: 700; font-size: 24px;}
.company .text p {font-size: 20px;}
.company .box + .box {margin-top: 20px;}
.company .box:nth-child(3) {display: flex; gap: 60px; } 

.scenery {position: fixed; left: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: 100%; height: auto; z-index: -1; display: block; margin: auto;}
.scenery img {width: 100%; height: 100vh; object-fit: cover;}

@media screen and (max-width: 1199px) {
  .company {padding: 60px 20px;}
  .company .inner {flex-direction: column; width: 100%; padding: 20px 20px ;max-width: 430px;}
  .company .title {padding-right: 0;}
  .company .title h2 {font-size: 28px;}
  .company .text {margin-top: 20px;}
  .company .text h3 {font-size: 22px;}
  .company .text p {font-size: 16px;}
}