@charset "UTF-8";

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

	Style Common CSS

	Last Update 2026.02.27
========================================== */

/* ------------------------------------------------------------------------
	Basic CSS

	------ INDEX ------
	1. Local Setting [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Local Setting [Last Update 2026.02.27]
========================================== */
/* サイト全体の基本設定 */

body {
	font-size: 62.5%;/* 大体10pxぐらいの大きさ */
	font-family: "Zen Maru Gothic", sans-serif;/* サイト全体のフォント設定 */
	text-align: center;
	font-weight: 400;
}

* {
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6,strong,em,mark,caption,th,dt {
	font-family: "Zen Maru Gothic", sans-serif;/
	font-style: normal;
	font-weight: 700;
}
address,caption,cite,code,dfn,strong,em,mark,th,var {
	font-style: normal;
}

small {
	font-size: 0.8rem;
}

sup {
	font-size: 0.6rem;
	vertical-align: super;
}
sub {
	font-size: 0.6rem;
	vertical-align: sub;
}

p {
	text-align: left;
	line-break: strict;
	word-break: break-all;
	word-break: break-word;
}

img {
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic; /* IE 7+ */
	image-rendering: optimizeQuality; /* Fx, (Gecko 1.9.2) */
}

a,
a:link,
button,
button:link {
	color: rgba(85, 170, 255, 1);
	text-decoration: none;
	outline: none;
	transition: color 0.5s;
}
/*a:visited,
button:visited, {
	color: rgb(68,68,68);
	text-decoration: none;
	outline: none;
}*/
a:focus,
a:hover,
button:focus,
button:hover {
	color: rgba(45, 150, 260, 1);
	text-decoration: none;
	outline: none;
}
a:active,
button:active {
	color: rgba(45, 130, 220, 1);
	text-decoration: none;
	outline: none;
}

a[href^="http:"],
a[href^="https:"] {
	background: transparent url(.assets/outside-link_bg.svg) center left no-repeat;
	padding: 0 0 0 13px;
}
a[href^="http://friendshoken.com/"],
a[href^="https://friendshoken.com/"] {
	background: none;
	padding: 0;
}


/* ------------------------------------------------------------------------
	Body CSS

	------ INDEX ------
	1. Body [Last Update 2026.02.27]

-------------------------------------------------------------------------- */

/* 1. Body [Last Update 2026.02.27]
========================================== */
body {
	background: rgba(255, 255, 219, 1);
	display: flex;
	flex-direction: column;
	/*min-height: 100vh;*/
	min-height: 100%;
}



/* ------------------------------------------------------------------------
	Header CSS

	------ INDEX ------
	1. Header [Last Update 2026.02.27]
		1-1. Header --Medium only-- [Last Update 2026.02.27]
		1-2. Header --Small only-- [Last Update 2026.02.27]
	2. Wrapper [Last Update 2026.02.27]
		2-1. Wrapper --Medium only-- [Last Update 2026.02.27]
		2-2. Wrapper --Small only-- [Last Update 2026.02.27]
	3. Site Title [Last Update 2026.02.27]
		3-1. Site Title --Medium only-- [Last Update 2026.02.27]
		3-2. Site Title --Small only-- [Last Update 2026.02.27]
	4. Header Navigation [Last Update 2026.02.27]
		4-1. Header Navigation --Medium only-- [Last Update 2026.02.27]
		4-2. Header Navigation --Small only-- [Last Update 2026.02.27]
	5. Global Navigation [Last Update 2026.02.27]
		5-1. Global Navigatio --Medium only-- [Last Update 2026.02.27]
		5-2. Global Navigation --Small only-- [Last Update 2026.02.27]
	6. Toggle [Last Update 2026.02.27]
		6-1. Toggle --Medium only-- [Last Update 2026.02.27]
		6-2. Toggle --Small only-- [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Header [Last Update 2026.02.27]
========================================== */
/* headerの設定 */

/* Header
========================= */
header {
               position: fixed;
               top: 0;
               left: 0;
               z-index: 1000;

               width: 100%;
               background: rgba(255, 255, 255, 0.6);
               backdrop-filter: blur(12px);
               border-bottom: 1px solid rgba(255, 255, 255, 1);
}

/* Header Article
========================= */
header article {
               max-width: 1320px;
               height: 95px;
               margin: 0 auto;
               padding: 0;
               text-align: center;
}

/* 1-1. Header ---Medium only-- [Last Update 2026.02.27]
---------------------------------------- */

@media screen and (max-width: 1024px) {
               header article {
                              height: 95px;
                              padding: 0;
               }
}

/* 1-2. Header --Small only-- [Last Update 2026.02.27]
---------------------------------------- */

@media screen and (max-width: 768px) {
               header article {
                              height: 40px;
                              padding: 0 12px;
               }
}


/* 2. Header Wrapper [Last Update 2026.02.27]
========================================== */
/* 内枠の設定 */

header article .wrapper-header {
               display: flex;
               align-items: center;
               justify-content: space-between;
               height: 95px;
               padding: 0 20px;
               box-sizing: border-box;
}

/* 2-1. Header Wrapper --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1024px) {
               header article .wrapper-header {
                              display: flex;
                              align-items: center;
                              justify-content: space-between;
                              height: 95px;
                              padding: 0 16px;
               }
}

/* 2-2. Header Wrapper --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
               header article .wrapper-header {
                              display: flex;
                              align-items: center;
                              justify-content: space-between;
                              height: 40px;
                              padding: 0 12px;
               }
}

/* 3. Header Title [Last Update 2026.02.27]
========================================== */
/* サイトタイトルの設定 */

header h1 {
               position: relative;
               top: auto;
               left: auto;
               right: auto;

               flex: 0 1 auto;
               width: 329px;
               height: 40px;
               margin: 0;
               padding: 0;
               background: url(.assets/title.svg) center top / contain no-repeat;
}

header h1 span,
header h1 a {
               display: block;
               width: 100%;
               height: 100%;
               margin: 0;
               padding: 0;
               opacity: 0;
}

/* Phone Contact
========================= */
header #phone-contact {
               position: relative;
               top: auto;
               left: auto;
               right: auto;

               flex: 0 1 auto;
               width: 377px;
               height: 48px;
               margin: 0;
               padding: 0;
               background: url(.assets/phone-contact.svg) center top / contain no-repeat;
}

header #phone-contact span,
header #phone-contact a {
               display: block;
               width: 100%;
               height: 100%;
               margin: 0;
               padding: 0;
               opacity: 0;
}

/* 3-1. Site Title --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1180px) {
               header h1 {
                              width: 247px;
                              height: 30px;
               }
}

@media screen and (max-width: 1130px) {
               header h1 {
                              width: 230px;
                              height: 28px;
               }
}

@media screen and (max-width: 1024px) {
               header h1 {
                              width: 210px;
                              height: 26px;
                              background-size: contain;
                              flex: 0 1 auto;
               }

               header #phone-contact {
                              width: 300px;
                              height: 42px;
                              background-size: contain;
                              flex: 0 1 auto;
               }
}

/* 3-1. Site Title --Small only-- [Last Update 2026.02.27]
---------------------------------------- */

@media screen and (max-width: 768px) {
              header h1 {
                              width: 165px;
                              height: 20px;
                              background-size: contain;
                              flex: 0 1 auto;
               }

               header #phone-contact {
               	display: none;
               }
}


/* 4. Header Navigation [Last Update 2026.02.27]
========================================== */
/* ヘッダーナビゲーションの設定 */

header #header-nav {
               position: relative;
               top: auto;
               left: auto;
               right: auto;

               flex: 1 1 auto;
               display: flex;
               justify-content: center;
}

header #header-nav nav {
               margin: 0;
}

header #header-nav nav ul {
               display: flex;
               ustify-content: center;
               align-content: center;
               flex-wrap: wrap;
               text-align: left;
               margin: 0;
               padding: 0;
}

/* li と a の共通レイアウト */
header #header-nav nav ul li,
header #header-nav nav ul li a {
               display: flex;
               align-items: center;
               justify-content: center;
               align-content: center;
               flex-wrap: wrap;
               gap: 3px;

               width: 210px;
               height: 50px;

               font-size: 16px;
               font-weight: 700;
               text-align: left;
               box-sizing: border-box;

               margin: 0;
               padding: 0;

               text-box: trim-both cap alphabetic;
}

header #header-nav nav ul li:last-child {
               margin-left: 10px;
}

/* ボタン内要素 */
header #header-nav nav ul li .button:nth-child(1) {
               width: 16px;
               flex: 0 1 16px;
}

header #header-nav nav ul li .button:nth-child(2) {
               text-box: trim-both cap alphabetic;
}

/* リンク装飾 */
header #header-nav nav ul li a {
               cursor: pointer;
               border-radius: 5px;
               border: 1px solid rgba(0, 0, 0, 1);
               background: rgba(255, 255, 255, 0);
               color: rgba(0, 0, 0, 1);
               transition: color 0.5s, background-color 0.5s, border 0.3s;
}

/* hover / focus */
header #header-nav nav ul li a:hover,
header #header-nav nav ul li a:focus {
               background: rgba(212, 234, 255, 1);
               border: 3px solid rgba(85, 170, 255, 1);
               color: rgba(45, 150, 260, 1);
}

/* active */
header #header-nav nav ul li a:active {
               background: rgba(212, 234, 255, 1);
               border: 3px solid rgba(85, 170, 255, 1);
               color: rgba(45, 130, 220, 1);
               box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* 4-1. Header Navigation --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1024px) {
               header #header-nav {
                              display: block;
                              position: relative;
                              top: auto;
                              left: auto;
                              width: 100%;
                              margin: 0 auto;
                              padding: 10px 0;
               }

               header #header-nav nav ul {
                              justify-content: center;
               }

               header #header-nav nav ul li,
               header #header-nav nav ul li a {
                              width: 180px;
                              height: 44px;
                              font-size: 14px;
                              padding: 0 6px;;
               }
}

/* 4-2. Header Navigation --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
               header #header-nav {
               	display: none;
               }
}


/* 5. Global Navigation [Last Update 2026.02.27]
========================================== */
/* グローバルナビゲーションの設定 */

header #global-nav {
               position: absolute;
               top: 110px;
               left: 0;
               right: 0;
               z-index: 1005;

               max-width: 1320px;
               height: 40px;
               margin: 0 auto;
               padding: 0;

               box-sizing: border-box;
               border-radius: 5px;
               background: rgba(250, 250, 250, 0.8);
               backdrop-filter: blur(12px);
               border: 1px solid rgba(255, 255, 255, 1);
}

header #global-nav nav {
               margin: 0;
}

header #global-nav nav ul {
               display: flex;
               justify-content: center;
               align-content: center;
               flex-wrap: wrap;

               margin: 0;
               padding: 0;
               list-style: none;
}

/* Nav Item
========================= */
header #global-nav nav ul li {
               display: flex;
               align-items: center;
               justify-content: center;

               margin: 0;
               padding: 0;
               white-space: nowrap;
}

header #global-nav nav ul li.sp-nav {
               display: none;
}

header #global-nav nav ul li a {
               display: block;
               padding: 6px 15px;

               font-size: 18px;
               font-weight: 700;
               text-align: center;
               white-space: nowrap;

               color: #000;
               background: transparent;
               cursor: pointer;
               border-bottom: 1px solid rgba(255, 255, 255, 0.6);

               transition: color 0.5s, background-color 0.5s, border 0.3s;
}

/* Hover / Focus / Active
========================= */
header #global-nav nav ul li a:hover,
header #global-nav nav ul li a:focus {
               background: rgba(212, 234, 255, 1);
               border-bottom: 1px solid rgba(85, 170, 255, 1);
               color: rgba(45, 150, 260, 1);
}

header #global-nav nav ul li a:active {
               background: rgba(212, 234, 255, 1);
               border-bottom: 1px solid rgba(85, 170, 255, 1);
               color: rgba(45, 130, 220, 1);
               box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* 5-1. Global Navigation --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1024px) {
               header #global-nav {
                              width: calc(100% - 32px);
                              height: auto;
                              top: 110px;
               }

               header #global-nav nav ul li a {
                              font-size: 16px;
                              padding: 6px 12px;
               }
}

/* 5-2. Global Navigation --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {

/* ===== 全画面オーバーレイ ===== */
               header #global-nav {
                              position: fixed;
                              inset: 0;
                              width: 100%;
                              height: 100vh;
                              margin: 0;
                              padding: 40px 0 40px;
                              box-sizing: border-box;

                              background: rgba(250, 250, 250, 0.96);
                              backdrop-filter: blur(8px);
                              border: none;
                              border-radius: 0;
                              box-shadow: none;

                              display: none;
                              overflow-y: auto;
                              z-index: 2000;
               }

/* 表示時 */
               header #global-nav.active {
                              display: block;
               }

/* 縦並び */
               header #global-nav nav ul {
                              flex-direction: column;
                              align-items: center;
                              justify-content: flex-start;
                              gap: 18px;
               }

               header #global-nav nav ul li {
                              width: 100%;
                              text-align: center;
               }

               header #global-nav nav ul li a {
                       width: 100%;
                       font-size: 18px;
                       padding: 14px 0;
                       border-bottom: 1px solid rgba(0,0,0,0.1);
               }

               header #global-nav nav ul li.sp-nav {
                       display: block;
               }
}


/* 6. Toggle [Last Update 2026.02.27]
========================================== */
/* トグルスイッチの設定 */

header .toggle {
	display: none;
}

/* 6-1. Toggle --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1024px) {
               header .toggle {
               	display: none;
               }
}

/* 6-2. Toggle --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
               header .toggle {
                              display: block;
                              position: absolute;
                              top: 10px;
                              right: 40px;
                              width: 28px;
                              height: 20px;
                              cursor: pointer;
                              z-index: 2001;
               }

               header .toggle-line {
                              position: absolute;
                              width: 100%;
                              height: 2px;
                              background: rgba(0,0,0,1);
                              transition: all .3s ease;
               }

               header .toggle-line--top { top: 0; }
               header .toggle-line--center { top: 9px; }
               header .toggle-line--bottom { bottom: 0; }

  /* ===== Xアニメーション ===== */
               header .toggle.active .toggle-line--top {
                              transform: rotate(45deg);
                              top: 9px;
               }

               header .toggle.active .toggle-line--center {
                              opacity: 0;
               }

               header .toggle.active .toggle-line--bottom {
                              transform: rotate(-45deg);
                              bottom: 9px;
               }

  /* ===== グローバルメニュー初期非表示 ===== */
               #global-nav {
                              display: none;
                              position: fixed;
                              inset: 0;
                              z-index: 2000;
                              padding-top: 100px;
               }

               /* 表示時 */
               #global-nav.active {
                              display: block;
               }

               /* 縦並び */
               #global-nav nav ul {
                              flex-direction: column;
                              align-items: center;
                              gap: 10px;
               }

               #global-nav nav ul li a {
                              font-size: 18px;
                              font-weight: 700;
               }
}


/* ------------------------------------------------------------------------
	Footer CSS

	------ INDEX ------
	1. Footer [Last Update 2026.02.27]
		1-1. Footer --Medium only-- [Last Update 2026.02.27]
		1-2. Footer --Small only-- [Last Update 2026.02.27]
	2. Footer Wrapper [Last Update 2026.02.27]
	3. Footer Title [Last Update 2026.02.27]
		3-1. Footer Title --Medium only-- [Last Update 2026.02.27]
		3-2. Footer Title --Small only-- [Last Update 2026.02.27]
	4. Footer Navigation [Last Update 2026.02.27]
		4-1. Footer Navigation --Medium only-- [Last Update 2026.02.27]
		4-2. Footer Navigation --Small only-- [Last Update 2026.02.27]
	5. Footer Global Navigation [Last Update 2026.02.27]
		5-1. Footer Navigation --Medium only-- [Last Update 2026.02.27]
		5-2. Footer Navigation --Small only-- [Last Update 2026.02.27]
	6. Page Up Navigation [Last Update 2026.02.27]
		6-1. Page Up Navigation --Medium only-- [Last Update 2026.02.27]
		6-2. Page Up Navigation --Small only-- [Last Update 2026.02.27]
	7. Copyright [Last Update 2026.02.27]
		7-1. Copyright --Medium only-- [Last Update 2026.02.27]
		7-2. Copyright --Small only-- [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Footer [Last Update 2026.02.27]
========================================== */
/* フッターの基本設定 */

footer {
               z-index: 900;

	text-align: center;
	width: 100%;
	margin: 0 auto;
	padding: 0;
               background: rgba(170, 213, 255, 1);
}

/* Footer Article
========================= */
footer article,
footer section {
               max-width: 1320px;
               width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

/* 1-1. Footer ---Medium only-- [Last Update 2026.02.27]
---------------------------------------- */

@media screen and (max-width: 1024px) {
	footer article,
               footer section {
                              width: 100%;
                              max-width: 100%;
	}
}

/* 1-2. Footer --Small only-- [Last Update 2026.02.27]
---------------------------------------- */

@media screen and (max-width: 768px) {
               footer {
                              padding: 0;
               }
	footer article,
               footer section {
                              width: 100%;
                              max-width: 100%;
	}
}


/* 2. Footer Wrapper [Last Update 2026.02.27]
========================================== */
/* 内枠の設定 */

footer article .wrapper-header {
}


/* 3. Footer Title [Last Update 2026.02.27]
========================================== */
/* サイトタイトルの設定 */

/* Footer Title
========================= */
footer .title {
               width: 214px;
               height: 26px;
               margin: 0 auto 15px;
               padding: 0;
               overflow: hidden;
               text-align: center;

               background: url(.assets/title-footer.svg) center top / 214px 26px no-repeat;
}

footer .title span,
footer .title a {
               display: block;
               width: 100%;
               height: 100%;
               margin: 0;
               padding: 0;
               opacity: 0;
}

/* 3-1. Footer Title --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */

@media screen and (max-width: 1024px) {
               footer .title {
                              width: 210px;
                              height: 26px;
                              background-size: 210px 26px;
               }
}

/* 3-1. Footer Title --Small only-- [Last Update 2026.02.27]
---------------------------------------- */

@media screen and (max-width: 768px) {
               footer .title {
                              width: 200px;
                              height: 24px;
                              background-size: 200px 24px;
               }
}

@media screen and (max-width: 480px) {
               footer .title {
                              width: 190px;
                              height: 23px;
                              background-size: 190px 23px;
               }
}

/* Paragraph
========================= */
footer p {
               line-height: 1;
               text-box: trim-both cap alphabetic;
               text-align: center;
               color: rgba(255, 255, 255, 1);
}

footer p.address {
               font-size: 14px;
               margin: 0 auto 10px;
}

footer p.tel-fax {
               font-size: 15px;
               margin: 0 auto 30px;
}

/* Divider
========================= */
footer .footer-divider {
               width: 64px;
               height: 6px;
               background: rgba(255, 255, 255, 1);
               margin: 0 auto 30px;
               padding: 0;
}


/* 4. Footer Navigation [Last Update 2026.02.27]
========================================== */
/* フッターナビゲーションの設定 */

footer #footer-nav {
               max-width: 1320px;
               width: 100%;
               margin: 0 auto 15px;
}

footer #footer-nav nav {
               margin: 0;
}

footer #footer-nav nav ul {
               display: flex;
               justify-content: center;
               align-content: center;
               flex-wrap: wrap;

               margin: 0;
               padding: 0;
               list-style: none;
}

/* li と a の共通レイアウト */
footer #footer-nav nav ul li,
footer #footer-nav nav ul li a {
               display: flex;
               align-items: center;
               justify-content: center;
               align-content: center;
               flex-wrap: wrap;
               gap: 3px;

               width: 185px;
               height: 40px;

               font-size: 16px;
               font-weight: 700;
               text-align: left;
               box-sizing: border-box;

               margin: 0;
               padding: 0;

               text-box: trim-both cap alphabetic;
}

footer #footer-nav nav ul li:last-child {
               margin-left: 10px;
}

/* ボタン内要素 */
footer #footer-nav nav ul li .button:nth-child(1) {
               width: 16px;
               flex: 0 1 16px;
}

footer #footer-nav nav ul li .button:nth-child(2) {
               text-box: trim-both cap alphabetic;
}

/* リンク装飾 */
footer #footer-nav nav ul li a {
               cursor: pointer;
               border-radius: 5px;
               border: 1px solid rgba(255, 255, 255, 1);
               background: rgba(255, 255, 255, 0);
               color: rgba(255, 255, 255, 1);
               transition: color 0.5s, background-color 0.5s, border 0.3s;
}

/* hover / focus */
footer #footer-nav nav ul li a:hover,
footer #footer-nav nav ul li a:focus {
               background: rgba(85, 170, 255, 1);
               border: 3px solid rgba(212, 234, 255, 1);
               color: rgba(255, 255, 255, 1);
}

/* active */
footer #footer-nav nav ul li a:active {
               background: rgba(85, 170, 255, 1);
               border: 3px solid rgba(212, 234, 255, 1);
               color: rgba(255, 255, 255, 1);
               box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* 4-1. Footer Navigation --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1024px) {
               footer #footer-nav {
                              width: 100%;
                              max-width: 100%;
               }
}

/* 4-2. Footer Navigation --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
               footer #footer-nav {
                              width: 100%;
                              max-width: 100%;
                              height: auto;
                              margin-bottom: 25px;
               }

               footer #footer-nav nav ul {
                              flex-direction: column;
                              align-items: center;
                              gap: 15px;
               }

               footer #footer-nav nav ul li,
               footer #footer-nav nav ul li a {
                              width: 100%;
                              max-width: 320px;
               }

               footer #footer-nav nav ul li:last-child {
                              margin-left: 0;
               }
}


/* 5. Footer Global Navigation [Last Update 2026.02.27]
========================================== */
/* フッターグローバルナビゲーションの設定 */

footer #footer-global-nav {
               max-width: 1320px;
               width: 100%;
               margin: 0 auto 50px;
}

footer #footer-global-nav nav {
               margin: 0;
}

footer #footer-global-nav nav ul {
               display: flex;
               justify-content: center;
               align-content: center;
               flex-wrap: wrap;

               margin: 0;
               padding: 0;
               list-style: none;
}

/* Nav Item
========================= */
footer #footer-global-nav nav ul li {
               display: flex;
               align-items: center;
               justify-content: center;

               margin: 0;
               padding: 0;
               white-space: nowrap;
}

footer #footer-global-nav nav ul li a {
               display: block;
               padding: 0 15px;

               font-size: 16px;
               text-align: center;
               white-space: nowrap;

               color: #FFF;
               cursor: pointer;

               transition: color 0.5s;
}

/* Hover / Focus / Active
========================= */
footer #footer-global-nav nav ul li a:hover,
footer #footer-global-nav nav ul li a:focus {
               color: rgba(45, 150, 260, 1);
}

footer #footer-global-nav nav ul li a:active {
               color: rgba(45, 130, 220, 1);
}

/* 5-1. Footer Global Navigation --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1024px) {
               footer #footer-global-nav {
                              width: 100%;
                              max-width: 100%;
               }
}

/* 5-2. Footer Global Navigation --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
               footer #footer-global-nav {
                              width: 100%;
                              max-width: 100%;
                              height: auto;
                              margin-bottom: 40px;
               }

               footer #footer-global-nav nav ul {
                              flex-direction: column;
                              gap: 12px;
               }

               footer #footer-global-nav nav ul li {
                              width: 100%;
               }

               footer #footer-global-nav nav ul li a {
                              padding: 8px 0;
               }
}


/* 6. Page Up Navigation [Last Update 2026.02.27]
========================================== */
/* ページの先頭に戻るスイッチ */

footer #page-up-nav {
               max-width: 1320px;
               height: 60px;
               margin: 20px auto 40px;
}

footer #page-up-nav ul {
               display: flex;
               justify-content: center;
               align-items: center;
               list-style: none;
               margin: 0;
               padding: 0;
}

/* Button
========================= */
footer #page-up-nav li {
               width: 60px;
               height: 60px;
}

footer #page-up-nav a {
               display: flex;
               align-items: center;
               justify-content: center;

               width: 100%;
               height: 100%;

               font-size: 16px;
               font-weight: 700;

               border-radius: 50%;
               outline: 1px solid rgba(255, 255, 255, 1);
               outline-offset: -1px;
               background: transparent;
               color: gba(255, 255, 255, 1);

               cursor: pointer;
               text-decoration: none;

               transition: background-color 0.3s, outline 0.3s, box-shadow 0.3s;
}

/* hover / focus */
footer #page-up-nav a:hover,
footer #page-up-nav a:focus {
               background: rgba(85, 170, 255, 1);
               outline: 3px solid rgba(212, 234, 255, 1);
               outline-offset: -3px;
}

/* active */
footer #page-up-nav a:active {
               background: rgba(85, 170, 255, 1);
               outline: 3px solid rgba(212, 234, 255, 1);
               outline-offset: -3px;
               box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* 6-1. Page Up Navigation --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1024px) {
}

/* 6-2. Page Up Navigation --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
               footer #page-up-nav {
                              margin: 20px auto 30px;
               }
}


/* 7. Copyright [Last Update 2026.02.27]
========================================== */
/* 著作権表記 */

footer .copyright {
	text-align: center;
	color: rgb(255,255,255);
	font-size: 12px;
	margin: 0 auto;
	padding: 0 0 35px;
}

/* 7-1. Copyright --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1024px) {
}

/* 7-2. Copyright --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
               footer .copyright {
                              width: 100%;
                              font-size: 10px;
               }
}



/* ------------------------------------------------------------------------
	Main CSS

	------ INDEX ------
	1. Main [Last Update 2026.02.27]
		1-1. Main --Small only-- [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Main [Last Update 2026.02.27]
========================================== */
main {
	text-align: center;
	min-width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}

main article {
	min-width: 100%;
	margin: 0 auto;
	padding: 0;
}



/* ------------------------------------------------------------------------
	Topic Path CSS

	------ INDEX ------
	1. Topic Path [Last Update 2026.02.27]
		1-1. Topic Path --Medium only-- [Last Update 2026.02.27]
		1-2. Topic Path --Small only-- [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Topic Path [Last Update 2026.02.27]
========================================== */
/* パンくずリストの設定 */

main #topicpass {
               width: 100%;
               margin: 0 auto;
               padding: 0;
               text-align: center;
}

/* Nav
========================= */
main #topicpass nav {
               max-width: 1200px;
               margin: 0 auto;
}

/*  Breadcrumb
========================= */
main #topicpass nav ul {
               display: flex;
               justify-content: flex-start;
               align-items: center;

               list-style: none;
               margin: 0;
               padding: 0;
}

main #topicpass nav ul li {
               font-size: 12px;
               white-space: nowrap;
               text-align: right;
               margin: 0;
               padding: 0 5px 0 0;
}

/* separator */
main #topicpass nav ul li::after {
	content: " > "; /* IE */
	content: "\0020\03e\0020";
}

main #topicpass nav ul li:last-child::after {
               content: "";
}

/* 1-1. Topic Path --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1180px) {
    main #topicpass nav {
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 1130px) {
    main #topicpass nav {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media screen and (max-width: 1024px) {
    main #topicpass nav {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* 1-2. Topic Path --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
    main #topicpass nav {
        padding: 0 15px;
        box-sizing: border-box;
        overflow: hidden;
    }
    main #topicpass nav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none; 
    }
    main #topicpass nav ul::-webkit-scrollbar {
        display: none;
    }
    main #topicpass nav ul li {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }
}



/* ------------------------------------------------------------------------
	Container CSS

	------ INDEX ------
	1. Wrapper [Last Update 2026.02.27]
		1-1. Wrapper --Medium only-- [Last Update 2026.02.27]
		1-2. Wrapper --Small only-- [Last Update 2026.02.27]
	2. Container [Last Update 2026.02.27]
		2-1. Container --Medium only-- [Last Update 2026.02.27]
		2-2. Container --Small only-- [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Wrapper [Last Update 2026.02.27]
========================================== */
main .wrapper-bg {
	min-width: 100%;
               margin: 0 auto;
               padding: 40px 0 60px;
}

main .wrapper-bg.bg-white {
               background: rgba(255, 255, 255, 1);
}
main .wrapper-bg.bg-white-last {
               background: rgba(255, 255, 255, 1);
}
main .wrapper-bg.bg-transparent {
               background: rgba(255, 255, 255, 0);
}

main .wrapper-contents {
               width: 100%;
               max-width: 1200px;
               margin: 0 auto;
               padding: 0 0 15px;
               box-sizing: border-box;
               text-align: left;
}

/* 1-1. Wrapper --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1180px) {
    main .wrapper-contents {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 1130px) {
    main .wrapper-contents {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media screen and (max-width: 1024px) {
               main .wrapper-contents {
                              max-width: 100%;
                              padding: 0 15px;
                              margin: 0 auto 48px;
               }
}

/* 1-2. Wrapper --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
               main .wrapper-bg {
                              padding: 30px 0 40px;
               }
               main .wrapper-contents {
                              max-width: 100%;
                              padding: 0 10px;
                              margin: 0 auto 36px;
               }
}



/* ------------------------------------------------------------------------
	Contents Text Decorations CSS

	------ INDEX ------
	1. Heading Titles [Last Update 2026.02.27]
		1-1. Contents Titles --Small only-- [Last Update 2026.02.27]
	2. Prain Text Decorations [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Heading Titles [Last Update 2026.02.27]
========================================== */

main h1 {
}

/* Section Title Wrapper
========================= */
main .section-title {
               position: relative;
               width: 100%;
               height: 95px;
               display: flex;
               justify-content: center;
               align-items: center;
               overflow: hidden;
               margin: 0 auto 40px;
}

/* Background Text
========================= */
main .section-title__bg {
               position: absolute;
               inset: 0;

               display: flex;
               justify-content: center;
               align-items: flex-start;

               font-size: clamp(64px, 10vw, 120px);
               font-weight: 900;
               line-height: 1;
               letter-spacing: -0.05em;

               margin: -20px 0 0;
               color: #fff0cc;
               white-space: nowrap;
               pointer-events: none;
               text-box: trim-both cap alphabetic;
}

/* H2 Title
========================= */
main .section-title__main {
               position: relative;
               z-index: 1;

               display: flex;
               flex-direction: column;
               align-items: center;
               gap: 12px;

               text-align: center;
}

/* h2 */
main .section-title__main h2 {
               font-size: 32px;
               line-height: 1;
               font-weight: 900;
               margin: 0;
               color: #000;
               text-box: trim-both cap alphabetic;
}

/* Under Line
========================= */
main .section-title__line {
               width: 300px;
               height: 6px;
               background: url(.assets/h2-line.svg) center / contain no-repeat;
}

/* Headings Base
========================= */
main h3,
main h4,
main h5,
main h6 {
               font-weight: 900 !important;
               color: #000;
               margin: 0 0 20px;
               padding: 0;
               line-height: 1;
               text-box: trim-both cap alphabetic;
}

/* Size
========================= */
main h3 {
               font-size: 26px;
}

main h4,
main h5,
main h6 {
               font-size: 20px;
}

/* Text Align
========================= */
main h3.text-center,
main h4.text-center,
main h5.text-center,
main h6.text-center {
               text-align: center;
}

/* Margin Utilities
========================= */
main .margin-30 {
               margin-bottom: 30px;
}

main .margin-60 {
               margin-bottom: 60px;
}

main blockquote h1,
main pre h1,
main blockquote h2,
main pre h2,
main blockquote h3,
main pre h3,
main blockquote h4,
main pre h4,
main blockquote h5,
main pre h5,
main blockquote h6,
main pre h6 {
	font-size: 1rem;
}

/* 1-1. Heading Titles --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1024px) {
	main h1 {
	}

               main .section-title {
                              height: 85px;
                              margin-bottom: 24px;
               }

               main .section-title__bg {
                              font-size: clamp(56px, 9vw, 96px);
                              margin-top: -14px;
                              letter-spacing: -0.04em;
               }

               main .section-title__main h2 {
                              font-size: 28px;
               }

               main .section-title__line {
                              width: 240px;
                              height: 5px;
               }

               main h3 {
                              font-size: 24px;
               }

               main h4,
               main h5,
               main h6 {
                              font-size: 18px;
               }

               main .margin-60 {
                              margin-bottom: 40px;
               }
}

/* 1-1. Heading Titles --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media (max-width: 768px) {
	main h1 {
	}

               main .section-title {
                              height: 72px;
                              margin-bottom: 20px;
               }

               main .section-title__bg {
                              font-size: clamp(44px, 12vw, 72px);
                              margin-top: -8px;
                              letter-spacing: -0.03em;
               }

               main .section-title__main h2 {
                              font-size: 24px;
               }

               main .section-title__line {
                              width: 200px;
                              height: 4px;
               }

               main h3 {
                              font-size: 22px;
                              line-height: 1.2;
               }

               main h4,
               main h5,
               main h6 {
                              font-size: 16px;
                              line-height: 1.2;
               }

               main .margin-30 {
                              margin-bottom: 24px;
               }

               main .margin-60 {
                              margin-bottom: 32px;
               }
}

@media screen and (max-width: 480px) {
               main h1 {
               }

               main .section-title {
                              height: 64px;
               }

               main .section-title__bg {
                              font-size: 35px;
                              margin-top: 0;
               }

               main .section-title__main h2 {
                              font-size: 22px;
               }

               main .section-title__line {
                              width: 160px;
               }

               main h3 {
                              font-size: 20px;
               }

               main h4,
               main h5,
               main h6 {
               font-size: 15px;
               }
}


/* 2. Prain Text Decorations [Last Update 2026.02.27]
========================================== */
main p,
main figure,
main address,
main th,
main td,
main li,
main dt,
main dd,
main blockquote,
main pre,
main caption,
main legend {
	font-size: 1rem;
}

main p,
main blockquote,
main pre,
main caption {
	line-height: 1.8;
}

/* Inner Reset  */
main th p, main th figure, main th li, main th dt, main th dd,
main td p, main td figure, main td li, main td dt, main td dd,
main li p, main li figure, main li li, main li li li, main li dt, main li dd,
main dt p, main dt figure, main dt li, main dt dt, main dt dd,
main dd p, main dd figure, main dd li, main dd dt, main dd dd,
main blockquote p, main blockquote figure, main blockquote li, main blockquote dt, main blockquote dd,
main pre code {
	font-size: 1rem;
}

main strong,
main em,
main mark {
}

main,
main article,
main aside,
main nav {
	text-align: left;
	margin: 0;
	padding: 0;
}
main.space-xs,
main article.space-xs,
main aside.space-xs,
main nav.space-xs {
	margin: 0 0 2px;
}
main.space-s,
main article.space-s,
main aside.space-s,
main nav.space-s {
	margin: 0 0 5px;
}
main.space-m,
main article.space-m,
main aside.space-m,
main nav.space-m {
	margin: 0 0 10px;
}
main.space-l,
main article.space-l,
main aside.space-l,
main nav.space-l {
	margin: 0 0 15px;
}
main.space-xl,
main article.space-xl,
main aside.space-xl,
main nav.space-xl {
	margin: 0 0 20px;
}
main.space-xxl,
main article.space-xxl,
main aside.space-xxl,
main nav.space-xxl {
	margin: 0 0 30px;
}
main.space-xxxl,
main article.space-xxxl,
main aside.space-xxxl,
main nav.space-xxxl {
	margin: 0 0 60px;
}

main p.space-xs {
	margin: 0 0 2px;
}
main p.space-s {
	margin: 0 0 5px;
}
main p.space-m {
	margin: 0 0 10px;
}
main p.space-l {
	margin: 0 0 15px;
}
main p.space-xl {
	margin: 0 0 20px;
}
main p.space-xxl {
	margin: 0 0 30px;
}
main p.space-xxxl {
	margin: 0 0 60px;
}
main p.text-center {
	text-align: center;
}
main p.text-right {
	text-align: right;
}

main figure {
	text-align: left;
}
main figure.space-xs {
	margin: 0 0 2px;
}
main figure.space-s {
	margin: 0 0 5px;
}
main figure.space-m {
	margin: 0 0 10px;
}
main figure.space-l {
	margin: 0 0 15px;
}
main figure.space-xl {
	margin: 0 0 20px;
}
main figure.space-xxl {
	margin: 0 0 30px;
}
main figure.space-xxxl {
	margin: 0 0 60px;
}
main figure img {
	height: auto;
	*zoom: 1; /* IE6-7 */
}
main figure figcaption {
	font-size: 0.8rem;
	text-align: right;
	margin: 3px 0 0;
}
main figure figcaption.text-center {
	text-align: center;
}
main figure figcaption.text-left {
	text-align: left;
}

main q {
	background: url(.assets/blockquote_bg3.png) left top repeat;
	padding: 0 2px;
}
main q:before {
	content: "“"; /* IE8 */
	content: "\00201c";
}
main q:after {
	content: "”"; /* IE8 */
	content: "\00201d";
}

main blockquote,
main pre {
	text-align: left;
	line-break: strict;
	background: url(.assets/blockquote_bg3.png) left top repeat; /* IE */
	background: url(.assets/blockquote_bg1.png) left top no-repeat,url(.assets/blockquote_bg2.png) right bottom no-repeat,url(.assets/blockquote_bg3.png) left top repeat;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
	main #contents blockquote,
	main #contents pre {
		background: url(.assets/blockquote_bg3-2x.png) left top / 8px 8px repeat; /* IE */
		background: url(.assets/blockquote_bg1-2x.png) left top / 50px 35px no-repeat,url(.assets/blockquote_bg2-2x.png) right bottom / 50px 35px no-repeat,url(.assets/blockquote_bg3-2x.png) left top / 8px 8px repeat;
	}
}
main blockquote {
	padding: 10px;
}
main pre {
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -webkit-pre-wrap;
	white-space: pre-wrap;
	word-wrap: break-word; 
	padding: 10px;
}
main pre code {
	font-family: monospace;
	font-weight: normal;
	text-align: left;
	margin: 0 ;
	padding: 0;
}
main blockquote.space-xs,
main pre.space-xs {
	margin: 0 0 2px;
}
main blockquote.space-s,
main pre.space-s {
	margin: 0 0 5px;
}
main blockquote.space-m,
main pre.space-m {
	margin: 0 0 10px;
}
main blockquote.space-l,
main pre.space-l {
	margin: 0 0 15px;
}
main blockquote.space-xl,
main pre.space-xl {
	margin: 0 0 20px;
}
main blockquote.space-xxl,
main pre.space-xxl {
	margin: 0 0 30px;
}
main blockquote.space-xxxl,
main pre.space-xxxl {
	margin: 0 0 60px;
}

main ul {
	list-style-position: outside;
}
main ul li {
	vertical-align: top;
	text-align: left;
	margin: 0 0 5px 25px;
	padding: 0;
}
main ul li.none {
	list-style-type: none;
}
main ul li.disc {
	list-style-type: disc;
}
main ul li.circle {
	list-style-type: circle;
}
main ul li.square {
	list-style-type: square;
}
main ul li.inline,
main ul li.inline-line,
main ul li.inline-comma {
	display: -moz-inline-box;
	display: inline-block;
	*display: inline; /* IE6-7 */
	background: none;
	margin: 0;
	padding: 0;
	list-style-position: inside;
	white-space: nowrap;
}
main ul li.inline-line:after {
	color:  rgb(221,221,221);
	content: " | "; /* IE */
	content: "\0020\7c\0020";
}
main ul li.inline-comma:after {
	content: ","; /* IE */
	content: "\2c";
}

main ol {
	list-style-position: outside;
	list-style-type: decimal;
}
main ol li {
	vertical-align: top;
	text-align: left;
	margin: 0 0 2px 25px;
	padding: 0;
}
main ul ul,
main ul ul ul,
main ol ol,
main ol ol ol {
	margin: 0;
	padding: 0;
}
main ol.space-xs,
main ul.space-xs {
	margin: 0 0 2px;
}
main ol.space-s,
main ul.space-s {
	margin: 0 0 5px;
}
main ol.space-m,
main ul.space-m {
	margin: 0 0 10px;
}
main ol.space-l,
main ul.space-l {
	margin: 0 0 15px;
}
main ol.space-xl,
main ul.space-xl {
	margin: 0 0 20px;
}
main ol.space-xxl,
main ul.space-xxl {
	margin: 0 0 30px;
}
main ol.space-xxxl,
main ul.space-xxxl {
	margin: 0 0 60px;
}

main dl {
}
main dl dt {
	text-align: left;
	margin: 0 0 5px;
}
main dl dt.first {
	margin: 0;
}
main dl dd {
	text-align: left;
	line-break: strict;
}
main dl dd p,
main dl dd ul {
	margin: 0;
}
main dl.space-xs {
	margin: 0 0 2px;
}
main dl.space-s {
	margin: 0 0 5px;
}
main dl.space-m {
	margin: 0 0 10px;
}
main dl.space-l {
	margin: 0 0 15px;
}
main dl.space-xl {
	margin: 0 0 20px;
}
main dl.space-xxl {
	margin: 0 0 30px;
}
main dl.space-xxxl {
	margin: 0 0 60px;
}

main hr {
	border: none;
	border-bottom: 1px dotted rgb(221,221,221);
}
main hr.space-xs {
	margin: 0 0 2px;
}
main hr.space-s {
	margin: 0 0 5px;
}
main hr.space-m {
	margin: 0 0 10px;
}
main hr.space-l {
	margin: 0 0 15px;
}
main hr.space-xl {
	margin: 0 0 20px;
}
main hr.space-xxl {
	margin: 0 0 30px;
}
main hr.space-xxxl {
	margin: 0 0 60px;
}

main .newmark {
	font-size: 1rem;
               font-weight: 700;
               text-box: trim-both cap alphabetic;
               color: rgba(255, 0, 0, 1);
	margin: 0 0 0 5px;
}

/* 2-1. Prain Text Decorations [Last Update 2026.02.27]
---------------------------------------- */
@media (min-width: 768px) {
               .spbr{
                              display: none;
               }
}


/* ------------------------------------------------------------------------
	Blog CSS

	------ INDEX ------
	1. Blog Text Decorations [Last Update 2026.02.27]

-------------------------------------------------------------------------- */

/* 1. Blog Text Decorations [Last Update 2026.02.27]
========================================== */
main .blog {
	margin: 0;
}

main .blog p,
main .blog ul,
main .blog ol,
main .blog dl,
main .blog blockquote,
main .blog pre,
main .blog hr {
	margin: 0 0 30px;
}
main .blog p,
main .blog blockquote,
main .blog pre {
	line-height: 1.7;
}


/* ------------------------------------------------------------------------
	Buttons CSS

	------ INDEX ------
	1. Link Button [Last Update 2026.02.27]
                              3-1. Link Button --Medium only-- [Last Update 2026.02.27]
                              3-2. Link Button --Small only-- [Last Update 2026.02.27]
	2. Navi Button [Last Update 2026.02.27]
                              2-1. Navi Button --Medium only-- [Last Update 2026.02.27]
                              2-2. Navi Button --Small only-- [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Link Button [Last Update 2026.02.27]
========================================== */
.link-buttons {
               max-width: 1200px;
               margin: 0 auto;
}

.link-buttons ul {
               display: flex;
               flex-wrap: wrap;
               justify-content: center;
               gap: 60px;
               margin: 0 auto;
               padding: 0;
               list-style: none;
}

.link-buttons li {
               flex: 0 0 auto;
               margin: 0;
               padding: 0;
}

.link-buttons a {
               display: inline-flex;
               align-items: center;
               justify-content: space-between;
               gap: 16px;

               height: 50px;
               padding: 0 20px 0 24px;

               font-size: 16px;
               font-weight: 700;
               text-decoration: none;

               border-radius: 6px;
               outline: 1px solid rgba(0, 0, 0, 1);
               outline-offset: -1px;
               background: rgba(255, 255, 255, 1);
               color: rgba(0, 0, 0, 1);

               transition: all 0.3s ease;
               box-sizing: border-box;
}

.link-buttons .arrow-icon {
               width: 24px;
               height: 24px;
               border-radius: 50%;
               background: rgba(85, 170, 255, 1);

               display: flex;
               align-items: center;
               justify-content: center;

               flex-shrink: 0;
               transition: background 0.3s ease, transform 0.3s ease;
}

.link-buttons .arrow-icon img {
               width: 24px;
               height: auto;
               display: block;
               filter: brightness(0) invert(1);
}

.link-buttons a:hover,
.link-buttons a:focus {
               background: rgba(212, 234, 255, 1);
               outline: 2px solid rgba(85, 170, 255, 1);
               outline-offset: -2px;
               color: rgba(45, 130, 220, 1);
}

.link-buttons a:hover .arrow-icon {
               transform: translateX(3px);
}

.link-buttons a:active {
               box-shadow: inset 0 3px 4px rgba(0,0,0,0.2);
}

/* 1-1. Link Button --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1180px) {
	.link-buttons {
		margin-left: 15px;
		margin-right: 15px;
		max-width: none;
	}
}

@media screen and (max-width: 1130px) {
	.link-buttons a {
		font-size: 15px; /* 文字崩れ防止 */
		gap: 14px;
	}
	.link-buttons .arrow-icon {
		width: 22px;
		height: 22px;
	}
	.link-buttons .arrow-icon img {
		width: 20px;
	}
}

@media screen and (max-width: 1024px) {
	.link-buttons {
		margin-left: 15px;
		margin-right: 15px;
	}
	.link-buttons ul {
		justify-content: center; /* 中央維持 */
		gap: 40px;
	}
	.link-buttons a {
		font-size: 14px;
		padding: 0 16px 0 20px;
	}
}

/* 1-2. Link Button --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
	.link-buttons {
		margin-left: 10px;
		margin-right: 10px;
	}
	.link-buttons ul {
		flex-direction: column;
		gap: 20px;
		align-items: center;
	}
	.link-buttons li {
		width: 100%;
	}
	.link-buttons a {
		width: 100%;
		font-size: 15px;
	}
}

/* 2. Navi Button [Last Update 2026.02.27]
========================================== */
.navi-buttons {
               max-width: 1200px;
               margin: 0 auto 60px;
}

.navi-buttons ul {
               display: flex;
               flex-wrap: wrap;
               justify-content: space-between;
               gap: 60px;
               margin: 0;
               padding: 0;
               list-style: none;
}

.navi-buttons li {
               /*flex: 0 0 calc((100% - 120px) / 3);*/
               flex: 0 0 auto;
               margin: 0;
               padding: 0;
}

.navi-buttons li:nth-child(2) {
               display: flex;
               justify-content: center;
}

.navi-buttons a {
               display: inline-flex;
               align-items: center;
               justify-content: space-between;
               gap: 16px;

               height: 50px;
               padding: 0 20px 0 24px;

               font-size: 16px;
               font-weight: 700;
               text-decoration: none;

               border-radius: 6px;
               outline: 1px solid rgba(0, 0, 0, 1);
               outline-offset: -1px;
               background: rgba(255, 255, 255, 1);
               color: rgba(0, 0, 0, 1);

               transition: all 0.3s ease;
               box-sizing: border-box;
}

.navi-buttons .arrow-icon {
               width: 24px;
               height: 24px;
               border-radius: 50%;
               background: rgba(85, 170, 255, 1);

               display: flex;
               align-items: center;
               justify-content: center;

               flex-shrink: 0;
               transition: background 0.3s ease, transform 0.3s ease;
}

.navi-buttons .arrow-icon img {
               width: 24px;
               height: auto;
               display: block;
               filter: brightness(0) invert(1);
}

.navi-buttons a:hover,
.navi-buttons a:focus {
               background: rgba(212, 234, 255, 1);
               outline: 2px solid rgba(85, 170, 255, 1);
               outline-offset: -2px;
               color: rgba(45, 130, 220, 1);
}

.navi-buttons a:hover .arrow-icon {
               transform: translateX(3px);
}

.navi-buttons a:active {
               box-shadow: inset 0 3px 4px rgba(0,0,0,0.2);
}

/* 2-1. Navi Button --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1180px) {
	.navi-buttons {
		margin-left: 15px;
		margin-right: 15px;
		max-width: none;
	}
}

@media screen and (max-width: 1130px) {
	.navi-buttons a {
		font-size: 15px; /* 文字崩れ防止 */
		gap: 12px;
	}
	.navi-buttons .arrow-icon {
		width: 22px;
		height: 22px;
	}
	.navi-buttons .arrow-icon img {
		width: 20px;
	}
}

@media screen and (max-width: 1024px) {
	.navi-buttons {
		margin-left: 15px;
		margin-right: 15px;
	}
	.navi-buttons ul {
		justify-content: space-between; /* 3列維持 */
		gap: 40px;
	}
	.navi-buttons a {
		font-size: 14px;
		padding: 0 16px 0 20px;
	}
	.navi-buttons .arrow-icon {
		width: 20px;
		height: 20px;
	}
	.navi-buttons .arrow-icon img {
		width: 18px;
	}
}

/* 2-2. Navi Button --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
	.navi-buttons {
		margin-left: 10px;
		margin-right: 10px;
	}
	.navi-buttons ul {
		flex-direction: column;
		gap: 20px;
	}
	.navi-buttons li {
		width: 100%;
	}
	.navi-buttons a {
		width: 100%;
		font-size: 15px;
	}
}



/* ------------------------------------------------------------------------
               Description List CSS

	------ INDEX ------
 	1. Description List Information [Last Update 2026.02.27]
                              1-1. Description List Information --Medium only-- [Last Update 2026.02.27]
                              1-2. Description List Information --Small only-- [Last Update 2026.02.27]
	2. Description List Company Profile [Last Update 2026.02.27]
		2-1. Description List Company Profile --Medium only-- [Last Update 2026.02.27]
		2-2. Description List Company Profile --Small only-- [Last Update 2026.02.27]
	3. Description List Company History [Last Update 2026.02.27]
		3-1. Description List Company History --Medium only-- [Last Update 2026.02.27]
		3-2. Description List Company History --Small only-- [Last Update 2026.02.27]
               4. Description List Careers [Last Update 2026.02.27]
                              4-1. Description List Company Careers --Medium only-- [Last Update 2026.02.27]
                              4-2. Description List Company Careers --Small only-- [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Description List Information [Last Update 2026.02.27]
---------------------------------------- */
main dl.info-list {
               max-width: 760px;
               margin: 0 auto;
               padding: 0;
}

main dl.info-list.info-list-top {
               margin: 0 auto 30px;
}

/* 1行セット */
main dl .info-item {
               display: flex;
               border-bottom: 1px solid rgba(0, 0, 0, 1);
               /*padding: 15px 0;*/
               padding: 10px 0 8px;
}

/* 1行目だけ上線 */
main dl .info-item:first-child {
               border-top: 1px solid rgba(0, 0, 0, 1);
}

main dl .info-item dt {
               width: 100px;
               font-weight: 900;
}

main dl .info-item dd {
               flex: 1;
               width: calc(100% - 100px);
               margin: 0;
}

/* 1-1. Description List Information --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1180px) {
	main dl.info-list {
		max-width: 760px;
		width: 100%;
		margin: 0 auto;
		padding: 0 15px;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 1130px) {
	main dl .info-item dt {
		font-size: 14px;
	}
	main dl .history-item dd {
		font-size: 14px;
		line-height: 1.7;
	}
}

@media screen and (max-width: 1024px) {
	main dl .info-item dt {
		font-size: 13px;
	}
	main dl .info-item dd {
		font-size: 13px;
		line-height: 1.6;
	}
}

/* 1-2. Description List Information --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
	main dl.info-list {
		margin-left: 15px;
		margin-right: 15px;
	}
	main dl .info-item dt {
		font-size: 14px;
	}
	main dl .info-item dd {
		font-size: 14px;
		line-height: 1.6;
	}
}

/* 2. Description List Company Profile [Last Update 2026.02.27]
---------------------------------------- */
main dl.profile-list {
               max-width: 760px;
               margin: 0 auto;
               padding: 0;
}

/* 1行セット */
main dl .profile-item {
               display: flex;
               border-bottom: 1px solid rgba(0, 0, 0, 1);
               /*padding: 15px 0;*/
               padding: 10px 0 8px;
}

/* 1行目だけ上線 */
main dl .profile-item:first-child {
               border-top: 1px solid rgba(0, 0, 0, 1);
}

main dl .profile-item dt {
               width: 100px;
               font-weight: 900;
}

main dl .profile-item dd {
               flex: 1;
               width: calc(100% - 100px);
               font-weight: 400;
               margin: 0;
}

/* 2-1. Description List Company Profile --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1180px) {
	main dl.profile-list {
		max-width: 760px;
		width: 100%;
		margin: 0 auto;
		padding: 0 15px;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 1130px) {
	main dl .profile-item dt {
		font-size: 14px;
	}
	main dl .history-item dd {
		font-size: 14px;
		line-height: 1.7;
	}
}

@media screen and (max-width: 1024px) {
	main dl .profile-item dt {
		font-size: 13px;
	}
	main dl .profile-item dd {
		font-size: 13px;
		line-height: 1.6;
	}
}

/* 2-2. Description List Company Profile --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
	main dl.profile-list {
		margin-left: 15px;
		margin-right: 15px;
	}
	main dl .profile-item dt {
		font-size: 14px;
	}
	main dl .profile-item dd {
		font-size: 14px;
		line-height: 1.6;
	}
}

/* 3. Description List Company History [Last Update 2026.02.27]
---------------------------------------- */
main dl.history-list {
               max-width: 760px;
               margin: 0 auto;
               padding: 0;
}

/* 1行セット */
main dl .history-item {
               display: flex;
               border-bottom: 1px solid rgba(0, 0, 0, 1);
               /*padding: 15px 0;*/
               padding: 10px 0 8px;
}

/* 1行目だけ上線 */
main dl .history-item:first-child {
               border-top: 1px solid rgba(0, 0, 0, 1);
}

main dl .history-item dt {
               width: 70px;
               font-weight: 900;
}

main dl .history-item dd {
               flex: 1;
               width: calc(100% - 100px);
               font-weight: 400;
               margin: 0;
}

/* 3-1. Description List Company History --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1180px) {
	main dl.history-list {
		max-width: 760px;
		width: 100%;
		margin: 0 auto;
		padding: 0 15px;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 1130px) {
	main dl .history-item dt {
		font-size: 14px;
	}
	main dl .history-item dd {
		font-size: 14px;
		line-height: 1.7;
	}
}

@media screen and (max-width: 1024px) {
	main dl .history-item dt {
		font-size: 13px;
	}
	main dl .history-item dd {
		font-size: 13px;
		line-height: 1.6;
	}
}

/* 3-2. Description List Company History --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
	main dl.history-list {
		margin-left: 15px;
		margin-right: 15px;
	}
	main dl .history-item dt {
		font-size: 14px;
	}
	main dl .history-item dd {
		font-size: 14px;
		line-height: 1.6;
	}
}

/* 4. Description List Careers [Last Update 2026.02.27]
---------------------------------------- */
main dl.careers-list {
               max-width: 760px;
               margin: 0 auto 40px;
               padding: 0;
}

/* 1行セット */
main dl .careers-item {
               display: flex;
               border-bottom: 1px solid rgba(0, 0, 0, 1);
               /*padding: 15px 0;*/
               padding: 10px 0 8px;
}

/* 1行目だけ上線 */
main dl .careers-item:first-child {
               border-top: 1px solid rgba(0, 0, 0, 1);
}

main dl .careers-item dt {
               width: 120px;
               font-weight: 900;
}

main dl .careers-item dd {
               flex: 1;
               width: calc(100% - 120px);
               font-weight: 400;
               margin: 0;
}

/* 4-1. Description List Careers --Medium only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 1180px) {
	main dl.careers-list {
		max-width: 760px;
		width: 100%;
		margin: 0 auto;
		padding: 0 15px;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 1130px) {
	main dl .careers-item dt {
		font-size: 14px;
	}
	main dl .careers-item dd {
		font-size: 14px;
		line-height: 1.7;
	}
}

@media screen and (max-width: 1024px) {
	main dl .careers-item dt {
		font-size: 13px;
	}
	main dl .careers-item dd {
		font-size: 13px;
		line-height: 1.6;
	}
}

/* 4-2. Description List Careers --Small only-- [Last Update 2026.02.27]
---------------------------------------- */
@media screen and (max-width: 768px) {
	main dl.careers-list {
		margin-left: 15px;
		margin-right: 15px;
	}
	main dl .careers-item dt {
		font-size: 14px;
	}
	main dl .careers-item dd {
		font-size: 14px;
		line-height: 1.6;
	}
}


/* ------------------------------------------------------------------------
	Table CSS

	------ INDEX ------
 	1. Table Base [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Table Base [Last Update 2026.02.27]
========================================== */

/* テープルの基本設定 */
main table thead tr th,
main table tbody tr th,
main table tbody tr td,
main table tfoot tr td {
	vertical-align: middle;
	margin: 0 0 10px;
	padding: 3px;
}
main table thead tr th,
main table tbody tr th {
	text-align: center;
}
main table tbody tr td,
main table tfoot tr td {
	text-align: left;
}
main table tbody tr td.cell-center,
main table tfoot tr td.cell-center {
	text-align: center;
}
main table thead tr th.cell-left,
main table tbody tr th.cell-left {
	text-align: left;
}
main table thead tr th.cell-right,
main table tbody tr th.cell-right,
main table tbody tr td.cell-right,
main table tfoot tr td.cell-right {
	text-align: right;
}


/* ------------------------------------------------------------------------
	Font Text Style CSS

	------ INDEX ------
 	1. Font Size [Last Update 2026.02.27]
	2. Text Background [Last Update 2026.02.27]
	3. Text Strike [Last Update 2026.02.27]
	4. Text Underline [Last Update 2026.02.27]
-------------------------------------------------------------------------- */

/* 1. Font Size [Last Update 2026.02.27]
========================================== */

/* 文字の大きさや色を変更する場合に使用、主にspan要素を使用 */
/* 通常はsmall,big要素を使用する */
main .font-size-10px {
	font-size: 10px;
}
main .font-size-11px {
	font-size: 11px;
}
main .font-size-6minus {
	font-size: 0.6rem;
}
main .font-size-3minus {
	font-size: 0.7rem;
}
main .font-size-2minus {
	font-size: 0.8rem;
}
main .font-size-1minus {
	font-size: 0.9rem;
}
main .font-size-1 {
	font-size: 1rem;
}
main .font-size-2plus {
	font-size: 1.1rem;
}
main .font-size-3plus {
	font-size: 1.2rem;
}
main .font-size-4plus {
	font-size: 1.4rem;
}
main .font-size-5plus {
	font-size: 1.8rem;
}

main .font-color-darkgray {
	color: rgb(51,51,51);
}
main .font-color-red {
	color: rgb(255,0,0);
}
main .font-color-winered {
	color: rgb(153,0,0);
}
main .font-color-yellow {
	color: rgb(255,255,0);
}
main .font-color-orange {
	color: rgb(255,204,0);
}
main .font-color-blue {
	color: rgb(0,0,255);
}
main .font-color-navyblue {
	color: rgb(0,0,153);
}
main .font-color-green {
	color: rgb(0,255,0);
}
main .font-color-darkgreen {
	color: rgb(0,153,0);
}
main .font-color-white {
	color: rgb(255,255,255);
}


/* 2. Text Background [Last Update 2026.02.27]
========================================== */

/* 文章を強調して背景に色を付けたい時に使用、主にspan要素 */
main em.text-bg-red,
main mark.text-bg-red {
	background-color: rgb(255,102,102);
}
main em.text-bg-winered,
main mark.text-bg-winered {
	background-color: rgb(153,0,51);
}
main em.text-bg-orange,
main mark.text-bg-orange {
	background-color: rgb(255,204,51);
}
main em.text-bg-blue,
main mark.text-bg-blue {
	background-color: rgb(153,204,255);
}
main em.text-bg-navyblue,
main mark.text-bg-navyblue {
	background-color: rgb(0,0,153);
}
main em.text-bg-purple,
main mark.text-bg-purple {
	background-color: rgb(153,153,255);
}
main em.text-bg-green,
main mark.text-bg-green {
	background-color: rgb(102,204,102);
}
main em.text-bg-britishgreen,
main mark.text-bg-britishgreen {
	background-color: rgb(0,51,0);
}


/* 3. Text Strike [Last Update 2026.02.27]
========================================== */

/* 文章の取消線に使用、主にspan要素 */
main .text-strike {
	text-decoration: line-through;
}


/* 4. Text Underline [Last Update 2026.02.27]
========================================== */

/* 文章の下線に使用、主にspan要素 */
main .text-underline {
	text-decoration: underline;
}