@charset "UTF-8";

/*
==================================================

   共通スタイル

==================================================
*/



/*
==================================================
  基本設定
==================================================
*/

/* ----- フォント ----- */
@font-face {
font-family: 'NotoSansJP';
font-weight: 400;
font-display: block;
src: url('../font/NotoSansJP-Regular.woff2') format('woff2'),
     url('../font/NotoSansJP-Regular.woff') format('woff');
}

@font-face {
font-family: 'NotoSansJP';
font-weight: 700;
font-display: block;
src: url('../font/NotoSansJP-Bold.woff2') format('woff2'),
     url('../font/NotoSansJP-Bold.woff') format('woff');
}

@font-face {
font-family: 'NotoSansJP';
font-weight: 900;
font-display: block;
src: url('../font/NotoSansJP-Black.woff2') format('woff2'),
     url('../font/NotoSansJP-Black.woff') format('woff');
}

@font-face {
font-family: 'Oswald';
font-weight: 700;
font-display: block;
src: url('../font/Oswald-Bold.woff2') format('woff2'),
     url('../font/Oswald-Bold.woff') format('woff');
}



/* ----- 基本 ----- */
html {
font-size: 100%;
scroll-behavior: smooth;

/* 色設定 */
--text-col: #000000; /* テキストカラー（黒色） */
--accent1-col: #053896; /* アクセントカラー1（紺色） */
--accent1b-col: #205ac6; /* アクセントカラー1b（明るめの紺色） */
--accent2-col: #c32327; /* アクセントカラー2（赤色） */
--light-bgcol: #f5f4f1; /* 薄い背景色（灰色） */
--box-border: #c1d8ef; /* ボックス境界線（水色） */
--table-border: #c0c0c0; /* テーブル境界線（灰色） */
--link-col: #003fff; /* リンクテキストカラー（青色） */
}

/* ----- 背景・テキスト ----- */
body {
background: #ffffff;
color: var(--text-col);
font-size: 1rem;
font-family: 'NotoSansJP', sans-serif;
}
body.active {
width: 100%;
height: 100vh;
position: fixed;
}

/* ----- リンクテキスト ----- */
a { text-decoration: none; }
a:link { color: var(--link-col); }
a:visited { color: #3359cc; }
a:hover { color: var(--accent2-col); text-decoration: underline; }
a:active { color: #ff0000; }

/* ----- 全要素 ----- */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
word-break: break-all;
}

/* ----- 英語書体 ----- */
.en {
font-family: 'Oswald', sans-serif;
}

/* ----- リストマーカー ----- */
ul, ol {
list-style-type: none;
}
ul.mk {
list-style-type: disc;
margin: 0 0 0 1.5em;
}

/* ----- イタリック ----- */
address, i, em {
font-style: normal;
}

/* ----- 強調 ----- */
em {
font-weight: bold;
}

/* ----- 定義用語 ----- */
dfn {
font-style: normal;
font-weight: bold;
}

/* ----- 画像の伸縮 ----- */
img {
max-width: 100%;
height: auto;
}

/* ----- YouTube動画の伸縮 ----- */
.y-video div {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.y-video div iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

html {
scroll-padding-top: 50px;
}

body {

}

/* ----- リンクテキスト ----- */
a { text-decoration: underline; }

/* ----- リストマーカー ----- */
ul.mk {
margin: 0 0 0 1.4em;
}

}
/* ----- /899 ----- */



/*
==================================================
  レイアウト
==================================================
*/

div.limit {
max-width: 1280px;
margin: 0 auto;
padding: 0 65px;
}



/* ----- ★1054 ----- */
@media screen and (max-width: 1054px) {

div.limit {
max-width: none;
padding: 0 65px;
}

}
/* ----- /1054 ----- */



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

div.limit {
max-width: none;
padding: 0 15px;
}

#body {
padding: 60px 0 0;
}

#contents div.limit {
max-width: 730px;
}

}
/* ----- /899 ----- */



/*
==================================================
  ヘッダ
==================================================
*/

#header {
display: flex;
align-items: center;
background: #ffffff;
}

/* ----- サイトタイトル ----- */
#header div.logo {
margin: 0 0 0 20px;
transition: 0.2s;
}
#header div.logo h1 {
font-size: 1rem;
}
#header div.logo a {
display: inline-block;
width: 250px;
transition: 0.2s;
}

/* ----- ラップ ----- */
#header div.wrap {
display: flex;
align-items: center;
width: 100%;
}

/* ----- メニューブロック ----- */
#menu {
display: flex;
flex-direction: column-reverse;
margin: 0 0 0 auto;
}

/* ----- メニュー ----- */
#gnav {
display: flex;
align-items: center;
}
#gnav li a {
display: block;
margin: 0 15px 3px;
padding: 7px 2px;
font-size: 14px;
font-weight: bold;
color: currentColor;
text-decoration: none;
transition: 0.2s;
}

/* ----- サブメニュー ----- */
#gnav ul {
display: none;
position: absolute;
padding: 10px 0;
background: var(--accent1-col);
z-index: 100;
}
#gnav ul li a {
color: #ffffff;
}
#gnav li:hover ul {
display: block;
}

/* ----- アンダーライン ----- */
#header.home li.home a::after,
#header.company li.company > a::after,
#header.pmvv li.pmvv a::after,
#header.safety li.safety a::after,
#header.sdgs li.sdgs a::after,
#header.business li.business > a::after,
#header.transport li.transport a::after,
#header.logistics li.logistics a::after,
#header.recruit li.recruit > a::after,
#header.work li.work a::after,
#header.beginner li.beginner a::after,
#header.family li.family a::after,
#header.truck li.truck a::after,
#header.briefing li.briefing a::after,
#header.graduate li.graduate a::after,
#header.job li.job a::after,
#header.blog li.blog a::after {
transform: scale(1, 1);
}

/* ----- 連絡先 ----- */
#menu address {
display: flex;
justify-content: right;
align-items: center;
margin: 0 0 10px;
transition: 0.2s;
}
#menu address p.tel {
padding: 0 0 0 33px;
background: url(../../image/design/phone_n.png) no-repeat left bottom 0;
font-size: 35px;
font-weight: 900;
transition: 0.2s;
}
#menu address p.tel a {
color: var(--accent1-col);
text-decoration: none;
pointer-events: none;
cursor: text;
}
#menu address p.time {
margin: 3px 0 0 4px;
font-size: 13px;
}

/* ----- フォームボタン ----- */
#header ul.form {
display: flex;
margin: 0 0 0 20px;
transition: 0.2s;
}
#header ul.form li {

}
#header ul.form li a {
display: flex;
justify-content: center;
width: 100px;
height: 90px;
padding: 47px 0 0;
font-size: 15px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
transition: 0.2s;
}
#header ul.form li a {
position: relative;
}
#header ul.form li.contact a {
background: var(--accent1-col);
border: 1px var(--accent1-col) solid;
}
#header ul.form li.contact a:hover {
background: #ffffff;
color: var(--accent1-col);
}
#header ul.form li.entry a {
background: var(--accent2-col);
border: 1px var(--accent2-col) solid;
}
#header ul.form li.entry a:hover {
background: #ffffff;
color: var(--accent2-col);
}
#header ul.form li a::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 0.2s;
}
#header ul.form li.contact a::before {
background: url(../../image/design/mark_mail_w.png) no-repeat top 18px center / 23px;
}
#header ul.form li.contact a:hover::before {
background: url(../../image/design/mark_mail_n.png) no-repeat top 18px center / 23px;
}
#header ul.form li.entry a::before {
background: url(../../image/design/mark_person.png) no-repeat top 17px center / 26px;
}
#header ul.form li.entry a:hover::before {
background: url(../../image/design/mark_person_r.png) no-repeat top 17px center / 26px;
}

/* ----- トグル ----- */
#toggle {
display: none;
}



/* ----- ★1054 ----- */
@media screen and (max-width: 1054px) {

/* ----- サイトタイトル ----- */
#header div.logo {
margin: 0 0 0 15px;
}
#header div.logo a {
width: 220px;
}

/* ----- メニュー ----- */
#gnav li a {
margin: 0 9px 3px;
}

/* ----- 連絡先 ----- */
#menu address {
margin: 0 0 8px;
}
#menu address p.tel {
padding: 0 0 0 30px;
background: url(../../image/design/phone_n.png) no-repeat left bottom / 25px;
font-size: 30px;
}

/* ----- フォームボタン ----- */
#header ul.form {
margin: 0 0 0 15px;
}
#header ul.form li a {
width: 90px;
height: 80px;
padding: 44px 0 0;
font-size: 14px;
}

}
/* ----- /1054 ----- */



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 31;
}

/* ----- サイトタイトル ----- */
#header div.logo {
margin: 0 0 0 10px;
}
#header div.logo a {
width: 200px;
}

/* ----- ラップ ----- */
#header div.wrap {
display: block;
visibility: hidden;
position: fixed;
top: 60px;
left: 0;
width: 100%;
height: calc(100vh - 60px);
margin: auto;
background: var(--accent1-col);
overflow: auto;
opacity: 0;
transition: 0.3s;
z-index: 30;
}
body.active #header div.wrap {
visibility: visible;
opacity: 1;
}

/* ----- メニューブロック ----- */
#menu {
display: block;
margin: 0;
}

/* ----- メニュー ----- */
#gnav {
display: block;
max-width: 500px;
margin: 10px auto 30px;
border-top: 1px #ffffff solid;
transition: 0.3s;
opacity: 0;
}
body.active #gnav {
margin: 40px auto 30px;
opacity: 1;
}
#gnav > li {
border-bottom: 1px #ffffff solid;
}
#gnav li a {
margin: 0;
color: #ffffff;
}
#gnav > li > a {
position: relative;
padding: 17px 15px;
font-size: 1rem;
}

/* ----- アンダーラインを消す ----- */
#header.home li.home a::after,
#header.company li.company > a::after,
#header.pmvv li.pmvv a::after,
#header.safety li.safety a::after,
#header.sdgs li.sdgs a::after,
#header.business li.business > a::after,
#header.transport li.transport a::after,
#header.logistics li.logistics a::after,
#header.recruit li.recruit > a::after,
#header.work li.work a::after,
#header.beginner li.beginner a::after,
#header.family li.family a::after,
#header.truck li.truck a::after,
#header.briefing li.briefing a::after,
#header.graduate li.graduate a::after,
#header.job li.job a::after,
#header.blog li.blog a::after {
display: none;
}

/* ----- 黄色テキスト ----- */
#header.home li.home a,
#header.company li.company > a,
#header.pmvv li.pmvv a,
#header.safety li.safety a,
#header.sdgs li.sdgs a,
#header.business li.business > a,
#header.transport li.transport a,
#header.logistics li.logistics a,
#header.recruit li.recruit > a,
#header.work li.work a,
#header.beginner li.beginner a,
#header.family li.family a,
#header.truck li.truck a,
#header.briefing li.briefing a,
#header.graduate li.graduate a,
#header.job li.job a,
#header.blog li.blog a {
color: #ffff00;
}

/* ----- くの字矢印 ----- */
#gnav > li > a::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
width: 9px;
height: 9px;
border-top: 2px #ffffff solid;
border-right: 2px #ffffff solid;
transform: rotate(45deg);
}

/* ----- サブメニュー ----- */
#gnav ul {
display: block;
position: static;
margin: 0 15px 20px 20px;
padding: 0;
}
#gnav ul li a {
padding: 8px 0 10px;
font-size: 0.94rem;
}
#gnav ul li a::before {
content: '－';
margin: 0 6px 0 0;
}

/* ----- 連絡先 ----- */
#menu address {
display: block;
margin: 0;
padding: 20px 0 10px;
background: #ffffff;
text-align: center;
}
#menu address p.tel {
display: inline-block;
margin: 0 0 10px;
}
#menu address p.tel a {
text-decoration: underline;
pointer-events: auto;
cursor: pointer;
}
#menu address p.time {
font-size: 14px;
}

/* ----- フォームボタン ----- */
#header ul.form {
justify-content: center;
column-gap: 14px;
margin: 0;
padding: 20px 0 50px;
background: #ffffff;
text-align: center;
}
#header ul.form li {
width: 140px;
}
#header ul.form li a {
display: block;
width: auto;
height: auto;
padding: 35px 5px 12px;
font-size: 15px;
}
#header ul.form li.contact a {
background: var(--accent2-col);
border: none;
}
#header ul.form li.contact a:hover {
background: var(--accent2-col);
color: #ffffff;
}
#header ul.form li.entry a {
border: none;
}
#header ul.form li.entry a:hover {
background: var(--accent2-col);
color: #ffffff;
}

#header ul.form li.contact a::before {
background: url(../../image/design/mark_mail.png) no-repeat top 10px center / 23px;
}
#header ul.form li.contact a:hover::before {
background: url(../../image/design/mark_mail.png) no-repeat top 10px center / 23px;
}
#header ul.form li.entry a::before {
background: url(../../image/design/mark_person.png) no-repeat top 8px center / 26px;
}
#header ul.form li.entry a:hover::before {
background: url(../../image/design/mark_person.png) no-repeat top 8px center / 26px;
}

/* ----- トグル ----- */
#toggle {
display: block;
position: fixed;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: var(--accent1-col);
border: none;
color: #ffffff;
cursor: pointer;
z-index: 31;
}
#toggle span {
display: inline-block;
position: absolute;
left: 16px;
width: 45%;
height: 3px;
background: currentColor;
border-radius: 2px;
transition: 0.2s;
}
#toggle span:nth-of-type(1) {
top: 11px;
}
#toggle span:nth-of-type(2) {
top: 19px;
}
#toggle span:nth-of-type(3) {
top: 27px;
}
#toggle.active span:nth-of-type(1) {
top: 14px;
left: 16px;
width: 45%;
transform: translateY(6px) rotate(-45deg);
}
#toggle.active span:nth-of-type(2) {
opacity: 0;
}
#toggle.active span:nth-of-type(3){
top: 26px;
left: 16px;
width: 45%;
transform: translateY(-6px) rotate(45deg);
}

#toggle::before {
content: 'MENU';
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 100%;
font-size: 12px;
font-weight: bold;
}
#toggle.active::before {
content: 'CLOSE';
}

}
/* ----- /899 ----- */



/*
==================================================
  ボディヘッダ（下層ページ用）
==================================================
*/

/* ----- ボディヘッダ ----- */
#bodyheader {
position: relative;
overflow: hidden;
}

#bodyheader div.limit {
display: flex;
align-items: center;
height: 350px;
}

/* ページタイトル */
#bodyheader h1 {
position: absolute;
font-size: 3.5rem;
font-weight: 900;
color: #ffffff;
line-height: 1.4;
text-shadow: 0 0 3px #000000;
z-index: 1;
}

/* 英語表記 */
#bodyheader p.en {
position: absolute;
bottom: -15px;
left: 10px;
}
/* 文字サイズ */
#bodyheader p.en.s {
font-size: 130px;
}
#bodyheader p.en.m {
font-size: 145px;
}
#bodyheader p.en.l {
font-size: 160px;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- ボディヘッダ ----- */
#bodyheader div.limit {
height: 250px;
}

/* ページタイトル */
#bodyheader h1 {
font-size: 1.8rem;
}

/* 英語表記 */
#bodyheader p.en {
bottom: -5px;
left: 10px;
}
/* 文字サイズ */
#bodyheader p.en.s,
#bodyheader p.en.m,
#bodyheader p.en.l {
font-size: 55px;
}

}
/* ----- /899 ----- */



/*
==================================================
  パンくずリスト（下層ページ用）
==================================================
*/

/* ----- パンくずリスト ----- */
#body nav.breadcrumbs {
margin: 0 0 7px;
padding: 15px 0;
font-size: 0.9rem;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
}
#body nav.breadcrumbs ol li {
display: inline;
line-height: 1.4;
}
#body nav.breadcrumbs ol li a {
display: inline-block;
position: relative;
padding: 0 20px 3px 0;
color: #7f7f7f;
text-decoration: none;
}
#body nav.breadcrumbs ol li a:hover {
color: var(--text-col);
}
#body nav.breadcrumbs ol li a::after {
content: '';
position: absolute;
top: 0;
bottom: 2px;
right: 6px;
width: 7px;
height: 7px;
margin: auto;
border-top: 1px #7f7f7f solid;
border-right: 1px #7f7f7f solid;
transform: rotate(45deg);
}
#body nav.breadcrumbs ol li a::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: calc(100% - 20px);
height: 1px;
background: currentColor;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.2s;
}
#body nav.breadcrumbs ol li a:hover::before {
transform: scale(1, 1);
transform-origin: left top;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

#body nav.breadcrumbs ol li a:hover::before {
transform: scale(0, 1);
}

}
/* ----- /899 ----- */



/*
==================================================
  コンテンツ
==================================================
*/

/* ----- コンテンツ ----- */
#contents {

}

/* ----- セクション共通 ----- */
#contents section h2 {
position: relative;
margin: 0 0 25px;
padding: 0 0 0 25px;
font-size: 2.6rem;
font-weight: 900;
line-height: 1.4;
}
#contents section h2::before {
content: '/';
position: absolute;
top: 5px;
left: 0;
font-size: 2.4rem;
color: var(--accent2-col);
}

/* セクション内段落 */
#contents section p {
line-height: 2;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- コンテンツ ----- */
#contents {

}

/* ----- セクション共通 ----- */
#contents section h2 {
margin: 0 0 20px;
padding: 0 0 0 15px;
font-size: 1.3rem;
line-height: 1.5;
}
#contents section h2::before {
top: 2px;
font-size: 1.3rem;
}

}
/* ----- /899 ----- */



/*
==================================================
  お問い合わせ
==================================================
*/

#contact {
position: relative;
padding: 70px 0;
background: var(--accent1-col);
color: #ffffff;
overflow: hidden;
}
#contact::after {
content: 'CONTACT';
position: absolute;
bottom: -20px;
left: 4%;
font-family: 'Oswald', sans-serif;
font-size: 180px;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px #ffffff;
text-stroke: 2px #ffffff;
opacity: 0.15;
white-space: nowrap;
}

#contact section {
position: relative;
display: flex;
justify-content: space-between;
justify-content: flex-start;
column-gap: 10px;
z-index: 1;
}

#contact section h2 {
position: relative;
margin: 0 0 30px;
padding: 0 0 0 25px;
font-size: 2.6rem;
font-weight: 900;
line-height: 1.3;
}
#contact section h2::before {
content: '/';
position: absolute;
top: 5px;
left: 0;
font-size: 2.4rem;
color: var(--accent2-col);
}

#contact section div.tel p.text {
margin: 0 0 10px 10px;
font-weight: bold;
}
#contact section div.tel address {
margin: 0 0 0 10px;
}
#contact section div.tel p.tel {
margin: 0 0 10px;
padding: 0 0 0 37px;
background: url(../../image/design/phone_w_v.png) no-repeat left bottom 2px;
font-size: 40px;
font-weight: 900;
}
#contact section div.tel p.tel a {
color: #ffffff;
text-decoration: none;
pointer-events: none;
cursor: text;
}
#contact section div.tel p.time {
font-size: 0.96rem;
}

#contact section div.form {
margin: 5px auto 0;
}
#contact section div.form ul {
display: flex;
column-gap: 15px;
}
#contact section div.form ul li a {
position: relative;
width: 200px;
height: 165px;
font-size: 24px;
font-weight: 900;
text-align: center;
align-content: center;
transition: 0.3s;
}
#contact section div.form ul li span {
display: inline-block;
margin: 0 0 10px;
font-size: 14px;
}
#contact section div.form ul li a.icon::before {
left: -3px;
right: 0;
top: auto;
bottom: 20px;
}
#contact section div.form ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 0.2s;
}

#contact section div.form ul li.contact {
background: #ffffff;
}
#contact section div.form ul li.contact::before {
background: var(--accent2-col);
transition-duration: 0.2s;
}
#contact section div.form ul li.contact a {
color: var(--accent1-col);
}
#contact section div.form ul li.contact a::after {
background: url(../../image/design/mark_mail_n.png) no-repeat center top 20px;
}
#contact section div.form ul li.contact a:hover {
color: #ffffff;
}
#contact section div.form ul li.contact a:hover::after {
background: url(../../image/design/mark_mail.png) no-repeat center top 20px;
}

#contact section div.form ul li.entry {
background: var(--accent2-col);
}
#contact section div.form ul li.entry::before {
background: #ffffff;
transition-duration: 0.2s;
}
#contact section div.form ul li.entry a {
color: #ffffff;
}
#contact section div.form ul li.entry a::after {
background: url(../../image/design/mark_person.png) no-repeat center top 20px;
}
#contact section div.form ul li.entry a:hover {
color: var(--accent2-col);
}
#contact section div.form ul li.entry a:hover::after {
background: url(../../image/design/mark_person_r.png) no-repeat center top 20px;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

#contact {
padding: 50px 0;
}
#contact::after {
content: '';
}

#contact section {
display: block;
}

#contact section h2 {
margin: 0 0 25px;
padding: 0 0 0 15px;
font-size: 1.3rem;
line-height: 1.4;
}
#contact section h2::before {
top: 3px;
font-size: 1.3rem;
}

#contact section div.tel p.text {
margin: 0 0 15px;
text-align: center;
}
#contact section div.tel address {
margin: 0 0 40px;
text-align: center;
}
#contact section div.tel p.tel {
display: inline-block;
margin: 0 0 15px;
padding: 0 0 0 30px;
background: url(../../image/design/phone_w_v.png) no-repeat left bottom / 25px;
font-size: 30px;
}
#contact section div.tel p.tel a {
text-decoration: underline;
pointer-events: auto;
cursor: pointer;
}
#contact section div.tel p.time {
font-size: 0.94rem;
}

#contact section div.form {
width: 270px;
margin: 0 auto;
}
#contact section div.form ul {
display: block;
}
#contact section div.form ul li {
margin: 0 0 20px;
}
#contact section div.form ul li:last-child {
margin: 0;
}
#contact section div.form ul li a {
width: 100%;
height: 130px;
font-size: 22px;
}
#contact section div.form ul li span {
margin: 0 0 7px;
}
#contact section div.form ul li a.icon::before {
bottom: 15px;
}

#contact section div.form ul li.contact a::after {
background: url(../../image/design/mark_mail_n.png) no-repeat center top 12px;
}
#contact section div.form ul li.contact a:hover {
color: var(--accent1-col);
}
#contact section div.form ul li.contact a:hover::after {
background: url(../../image/design/mark_mail_n.png) no-repeat center top 12px;
}

#contact section div.form ul li.entry a::after {
background: url(../../image/design/mark_person.png) no-repeat center top 12px;
}
#contact section div.form ul li.entry a:hover {
color: #ffffff;
}
#contact section div.form ul li.entry a:hover::after {
background: url(../../image/design/mark_person.png) no-repeat center top 12px;
}

}
/* ----- /899 ----- */



/*
==================================================
  フッタ
==================================================
*/

#footer {

}
#footer a {
color: currentColor;
text-decoration: none;
}
#footer a:hover {
color: var(--accent2-col);
}

#footer div.wrap {
display: flex;
flex-direction: row-reverse;
width: 100%;
margin: 50px 0 40px;
}

/* ----- メニュー ----- */
#footer nav.fnav {
display: flex;
justify-content: space-between;
column-gap: 5px;
width: 60%;
margin: 5px 0 0;
font-size: 0.96rem;
}
#footer nav.fnav div.col > ul > li {
margin: 0 0 25px;
}
#footer nav.fnav div.col > ul > li:last-child {
margin: 0;
}

#footer nav.fnav ul li {
line-height: 1.4;
}
#footer nav.fnav ul ul {
margin: 15px 0 0;
}
#footer nav.fnav ul ul li {
margin: 0 0 10px;
font-size: 0.86rem;
}
#footer nav.fnav ul ul li:last-child {
margin: 0;
}
#footer nav.fnav ul ul li a::before {
content: '－';
margin: 0 6px 0 0;
}

/* ----- 企業情報 ----- */
#footer div.address {
width: 40%;
font-size: 1rem;
}

#footer div.address dl {
margin: 0 20px 20px 0;
}
#footer div.address dl dt {
margin: 0 0 15px;
}
#footer div.address dl dd {
margin: 0 0 10px 10px;
}
#footer div.address dl dd:last-child {
margin: 0 0 0 10px;
}
#footer div.address dl dd p {
line-height: 1.4;
}
#footer div.address dl dd p b {
font-size: 1.1rem;
}
#footer div.address dl dd p a {
pointer-events: none;
cursor: text;
}

/* ----- SNS ----- */
#footer div.address ul.sns {
display: flex;
column-gap: 10px;
margin: 0 20px 0 0;
}
#footer div.address ul.sns a:hover {
opacity: 0.7;
transition: 0.2s;
}

/* ----- 認証マーク ----- */
#footer ul.mark {
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 15px;
margin: 0 0 5px;
}
#footer ul.mark li {
width: 50px;
}

/* ----- ボトム ----- */
#footer div.bottom {
padding: 30px 0 60px;
background: var(--accent1-col);
color: #ffffff;
text-align: center;
}
#footer div.bottom div.copy small {
font-size: 0.8rem;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

#footer a:hover {
color: currentColor;
}

#footer div.wrap {
display: block;
margin: 50px 0;
}

/* ----- メニュー ----- */
#footer nav.fnav {
display: block;
width: auto;
max-width: 500px;
margin: 0 auto 50px;
border-top: 1px solid;
font-size: 1rem;
}
#footer nav.fnav div.col ul li a {
display: block;
}
#footer nav.fnav div.col > ul > li {
margin: 0;
border-bottom: 1px solid;
}
#footer nav.fnav div.col > ul > li > a {
position: relative;
padding: 17px 15px;
}
#footer nav.fnav div.col > ul > li > a::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
width: 9px;
height: 9px;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
}

#footer nav.fnav ul ul {
margin: 0 15px 20px 20px;
}
#footer nav.fnav ul ul li {
margin: 0;
}
#footer nav.fnav ul ul li a {
padding: 8px 0 10px;
font-size: 0.94rem;
}

/* ----- 企業情報 ----- */
#footer div.address {
width: auto;
font-size: 0.94rem;
text-align: center;
}

#footer div.address dl {
margin: 0 0 30px;
}
#footer div.address dl dt {
margin: 0 0 20px;
}
#footer div.address dl dt img {
width: 200px;
}
#footer div.address dl dd {
margin: 0 0 15px;
}
#footer div.address dl dd:last-child {
margin: 0;
}
#footer div.address dl dd p {
line-height: 1.6;
}
#footer div.address dl dd p b {
font-size: 1rem;
}
#footer div.address dl dd p a {
text-decoration: underline;
pointer-events: auto;
cursor: pointer;
}

/* ----- SNS ----- */
#footer div.address ul.sns {
justify-content: center;
margin: 0;
}
#footer div.address ul.sns a:hover {
opacity: 1;
}

/* ----- 認証マーク ----- */
#footer ul.mark {
justify-content: center;
column-gap: 10px;
}
#footer ul.mark li {
width: 30px;
}

/* ----- ボトム ----- */
#footer div.bottom div.copy small {
font-size: 0.74rem;
}

}
/* ----- 899 ----- */



/*
==================================================
  リンクボタン・矢印・アンダーライン
==================================================
*/

/* ----- リンクボタン（共通） ----- */
.btn a {
display: block;
position: relative;
text-decoration: none;
}

/* ----- ボタン内の背景をスライド（共通） ----- */
/* 背景色とスピードは個別に指定 */
.btn.slide {
display: block;
position: relative;
overflow: hidden;
}
.btn.slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition-property: transform;
transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
transform: scale(0, 1.1);
transform-origin: right top;
}
.btn.slide:hover::before {
transform-origin: left top;
transform: scale(1, 1.1);
}
.btn.slide a {
z-index: 2;
}

/* ----- アイコン共通 ----- */
.icon {
position: relative;
}
.icon::before,
.icon::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}

/* ----- ボタン内の矢印を動かす（共通） ----- */
/* 移動距離と角度は矢印の種類ごとに指定 */
.icon.move::before,
.icon.move::after {
transition-property: transform;
transition-duration: 0.3s;
}

/* ----- くの字矢印 ----- */
.icon.arrow-ku::before {
width: 12px;
height: 12px;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
}
/* 移動 */
.icon.arrow-ku.move::before {
transform: translateX(0px) rotate(45deg);
}
:hover.icon.arrow-ku.move::before {
transform: translateX(5px) rotate(45deg);
}

/* ----- くの字矢印（小） ----- */
.icon.arrow-ku-s::before {
width: 8px;
height: 8px;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
}
/* 移動 */
.icon.arrow-ku-s.move::before {
transform: translateX(0px) rotate(45deg);
}
:hover.icon.arrow-ku-s.move::before {
transform: translateX(5px) rotate(45deg);
}

/* ----- くの字矢印（小・下向き） ----- */
.icon.arrow-ku-u::before {
width: 8px;
height: 8px;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(135deg);
}

/* ----- アンダーライン ----- */
/* マージンなどは個別に指定 */
.u-line a {
position: relative;
}
.u-line a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: currentColor;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.2s;
}
.u-line a:hover::after {
transform: scale(1, 1);
transform-origin: left top;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- ボタン内の背景をスライド（共通） ----- */
.btn.slide::before {
display: none;
}

/* ----- くの字矢印 ----- */
.icon.arrow-ku::before {
width: 10px;
height: 10px;
}
/* 移動 */
:hover.icon.arrow-ku.move::before {
transform: translateX(0px) rotate(45deg);
}

/* ----- くの字矢印（小） ----- */
/* 移動 */
:hover.icon.arrow-ku-s.move::before {
transform: translateX(0px) rotate(45deg);
}

/* ----- アンダーライン ----- */
.u-line a:hover::after {
transform: scale(0, 1);
}

}
/* ----- 899 ----- */



/*
==================================================
  その他
==================================================
*/

/* ----- LINE ----- */
#line-main {
padding: 40px 0;
background: #eaf2f9;
text-align: center;
}
#line-main img {
border: 1px #06c755 solid;
}

#line-side {
position: fixed;
top: 120px;
right: -55px;
z-index: 29;
transition: 0.3s;
}
#line-side.active {
right: 0;
}

#line-sp {
display: none;
}

/* ----- Blank Link ----- */
a.blank {
margin: 0 4px 0 0;
padding: 0 20px 0 0;
background: url(../../image/design/blank.svg) no-repeat right / 15px;
}

/* ----- Back to Top ----- */
#backtop {
position: fixed;
bottom: -50px;
right: 10px;
/* チャットボットが入る場合の設定
bottom: 80px;
right: -50px;
*/
z-index: 29;
transition: 0.3s;
}
#backtop.active {
bottom: 10px;
/* チャットボットが入る場合の設定
right: 16px;
*/
}
#backtop a {
display: block;
position: relative;
width: 46px;
height: 50px;
background: var(--accent1-col);
border: 1px #ffffff solid;
border-radius: 3px;
font-size: 0;
color: #ffffff;
text-decoration: none;
transition: 0.2s;
}
#footer #backtop a:hover {
background: var(--accent2-col);
}
#backtop a::before {
display: block;
content: '';
position: absolute;
top: 3px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 12px;
height: 12px;
border-top: 3px #ffffff solid;
border-left: 3px #ffffff solid;
transform: rotate(45deg);
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- LINE ----- */
#line-main a {
display: block;
max-width: 500px;
margin: 0 auto;
}

#line-side {
display: none;
}

#line-sp {
display: inline-block;
position: fixed;
bottom: 5px;
left: -65px;
z-index: 29;
transition: 0.3s;
}
#line-sp.active {
left: 5px;
}

/* ----- Back to Top ----- */
#backtop {
/* チャットボットが入る場合は無効にする */
right: 5px;
}
#backtop.active {
/* チャットボットが入る場合は無効にする */
bottom: 5px;
}
#footer #backtop a:hover {
background: var(--accent1-col);
}

/* ----- スマホでは削除 ----- */
.sp-none {
display: none;
}

}
/* ----- 899 ----- */