@charset "utf-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url("slide.css");
@import url("inview.css");

:root {
	--text-color: #333;				
	--primary-color: #59d5e0;		
	--primary-text-color: #fff;	
	--global-space: 5vw;			
	--bo-max: 1120px;
    --bo-gap: 24px;
    --bo-radius: 16px;
    --bo-shadow: 0 6px 16px rgba(0,0,0,.08);
    --bo-primary: #0f172a; 
    --bo-ink: #0b1324;
    --bo-text: #334155; 
    --bo-border: #e5e7eb; 
    --bo-bg: #ffffff;
    --bo-accent: #0ea5e9; 
	--hp-max: 1120px;
    --hp-gap: 24px;
    --hp-radius: 16px;
    --hp-shadow: 0 6px 16px rgba(0,0,0,.08);
    --hp-ink: #0f172a;
    --hp-text: #334155;
    --hp-border: #e5e7eb;
    --hp-primary: #0f172a;
}

@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}

@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.8);}
	100% {opacity: 1;transform: scale(1);}
}

body * {box-sizing: border-box;}

html,body {
	height: 100%;
	font-size: 13px;	
}

@media screen and (min-width:900px) {
	html, body {
		font-size: 16px;
	}
}

body {
	margin: 0;padding:0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	
	font-optical-sizing: auto;
	-webkit-text-size-adjust: none;
	background: #fff;	
	color: var(--text-color);	
	line-height: 2;		
}

figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
table {border-collapse:collapse;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
video {max-width: 100%;}
iframe {width: 100%;}
input {font-size: 1rem;}

section + section {
	margin-top: 3rem;
}

a {
	color: var(--text-color);	
	transition: 0.3s;	
}

a:hover {
	text-decoration: none;	
	color: var(--primary-color);	
}

body:not(.home) #container {
	height: 100%;
	display: flex;
	flex-direction: column;	
	justify-content: space-between;	
}

#contents {
	flex: 1;
	padding: var(--global-space);	
}

@media screen and (max-width:600px) {
	#contents {
		padding-top: 80px;	
	}
}

header {
	display: flex;					
	align-items: center;			
	justify-content: space-between;
	height: 70px;					
	padding: 1vw 3vw;				
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
    position: absolute;
    z-index: 1;
    width: 100%;
}

@media screen and (min-width:900px) {
	header {
		position: fixed;	
	}
}

#logo img {
	display: block;
	width: 160px;	
}

#logo a {
	display: block;text-decoration: none;
	font-size: 1.2rem;	
	font-weight: 800;	
}

#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}
#menubar_hdr.display-none {display: none;}
.ddmenu_parent ul {display: none;}
a.ddmenu {cursor: pointer;}
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	
	content: "\f078";		
	font-weight: bold;		
	margin-right: 0.5em;	
}

.large-screen #menubar > nav > ul {
	display: flex;		
	font-size: 0.85rem;	
	gap: 0.5rem;		
}

.large-screen #menubar li a {
	border-radius: 100px;	
	padding: 0.2rem 1rem;	
}

.large-screen #menubar li a:hover {
	background: #fff;	
}

.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	
}

.large-screen #menubar ul ul {
	position: absolute;z-index: 100;
}

.large-screen #menubar ul ul a {
	margin-top: 0.4rem;	
}

.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 90px;
	background: rgba(0,0,0,0.9);		
	animation: animation1 0.2s both;	
}

.small-screen #menubar nav ul li {
	border: 1px solid #ccc;	
	margin: 1rem;			
	border-radius: 5px;		
	padding: 0 2rem;		
}

.small-screen #menubar a {
	padding: 1rem;	
}

.small-screen #menubar, .small-screen #menubar a {
	color: #fff;
}

#menubar .sh {
	font-weight: normal;		
	padding: 1rem 2rem 2rem;	
}

#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 3vw;			
	top: 1vw;				
	padding: 16px 14px;		
	width: 46px;		
	height: 46px;			
	display: flex;					
	flex-direction: column;			
	justify-content: space-between;	
}

#menubar_hdr span {
	display: block;
	transition: 0.3s;	
	border-top: 1.5px solid #333;	
}

#menubar_hdr.ham {
	background: #ff0000;
}

#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	
	width: 20px;						
	border-color: #fff;					
}

#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	
}

#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	
}

#menubar_hdr.ham span:nth-of-type(2){
	display: none;	
}

main h2 {
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-size: 3rem;		
	letter-spacing: 0.1em;	
	color: var(--primary-color);	
}

.bg1 h2 {
	color: var(--primary-text-color);	
}

main h2 .hosoku {
	display: block;font-weight: normal;
	font-size: 0.3em;	
}

main h3 {
	display: inline-block;
	border-bottom: 3px solid var(--text-color);	
}

.main-contents {
	margin-bottom: 5rem;	
}

@media screen and (min-width:900px) {
	main.column {
		display: flex;					
		justify-content: space-between;	
		gap: 2rem;						
	}
	
	.main-contents {
		margin-bottom: 0;
		order: 2;		
		flex: 1;
	}
	
	.sub-contents {
		width: 230px;	
	}

	.sub-contents:nth-child(2) {
		order: 1;	
	}
	
	.sub-contents:nth-child(3) {
		order: 3;	
	}	
}

.sub-contents h3 {
	display: block;
	margin: 0;
	text-align: center;	
	border-radius: 5px 5px 0px 0px;	
	border: 1px solid #ccc;			
	background: linear-gradient(transparent, rgba(0,0,0,0.03));
	padding: 0.5rem 0;	
}

.submenu {
	padding: 0;
	margin: 0 0 1rem;
}

.submenu a {
	display: block;text-decoration: none;
	padding: 0.2rem 1rem;	
}

.submenu > li {
	border: 1px solid #ccc;	
	border-top: none;		
}

.submenu li li a {
	padding-left: 2rem;	
}

.sub-contents h3 + nav .submenu {
	border-top: none;
}

#footermenu {
	margin: 0 !important;
	padding: 20px;		
	text-align: center;	
	font-size: 0.8rem;	
}

#footermenu li {
	display: inline-block;	
	padding: 0 10px;		
}

footer small {font-size: 100%;}
footer {
	font-size: 0.7rem;	
	text-align: center;		
	padding: 20px;		
}

footer a {color: inherit;text-decoration: none;}
footer .pr {display: block;}
.fade-in-text {
    visibility: hidden;
}

.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.05s linear both;
}

.new dd {
	padding-bottom: 1rem;
}

.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		
	border-radius: 3px;		
	width: 8rem;			
	transform: scale(0.8);	
	background: #fff;		
	color:#777;				
	border: 1px solid #333;
}

.new .icon-bg1 {
	background: #333;
	color: #fff;		
}

.new .icon-bg2 {
	background: #ff0000;	
	color: #fff;			
}

@media screen and (min-width:700px) {
	.new {
		display: grid;	
		grid-template-columns: auto 1fr;	
	}
}

.list-grid1 {
	display: grid;
	color: var(--text-color);	
}

.list-grid1 .list {
    display: grid;
}

.list-grid1 .list * {
	margin: 0;padding: 0;
}

.list-grid1 .list p {
	font-size: 0.85rem;	
}

@media screen and (min-width:500px) {
	.list-grid1 {
		grid-template-columns: repeat(2, 1fr);	
		gap: 1rem;	
	}
}

@media screen and (min-width:800px) {
	.list-grid1 {
		grid-template-columns: repeat(3, 1fr);	
		gap: 1rem;	
	}
}

.list-grid1 .list {
	padding: 1rem;			
	background: #fff;		
    grid-template-rows: auto 1fr;	
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	
}

.list-grid1 .list figure img {
	margin-bottom: 0.5rem;	
}

.btn a,
.btn-border-radius a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		
	background: var(--primary-color) !important;	
	color: var(--primary-text-color) !important;	
	padding: 0.5rem !important;		
	margin-top: 1rem !important;
}

.btn a:hover,
.btn-border-radius a:hover {
	filter: brightness(1.2);
}

.btn-border-radius a {
	display: inline-block;
	padding: 0.5rem 2rem !important;	
	border-radius: 100px;	
	background: #e12000 !important;
	color: #fff !important;
}

.bg1 {
	position: relative;
	background: var(--primary-color);	
	color: var(--primary-text-color);	
	padding-top: 5vw;		
	padding-bottom: 5vw;	
	margin-top: 10vw;		
	margin-bottom: 10vw;	
	margin-left: calc(-1 * var(--global-space));
	margin-right: calc(-1 * var(--global-space));
	padding-left: var(--global-space);
	padding-right: var(--global-space);
}

.bg1 a {
	color: inherit;
}

.bg1::before, .bg1::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(5vw + 1px);
	background: var(--primary-color);	
}

.bg1::before {
	top: -5vw;	
	clip-path: polygon(0 100%, 100% 0, 100% 100%);	
}

.bg1::after {
	bottom: -5vw;	
	clip-path: polygon(0 0, 100% 0, 0 100%);	
}

.thumbnail-view-parts {
	max-width: 1000px;		
	margin: 0 auto 1rem;	
	text-align: center;		
}

.thumbnail-parts {
	display: flex;				
	justify-content: center;	
	margin-bottom: 2rem;		
}

.thumbnail-parts img {
	width: 100px;	
	margin: 2px;		
	cursor: pointer;	
	transition: 0.3s;	
}

.thumbnail-parts img:hover {
	opacity: 0.8;	
}

.ta1 caption {
	font-weight: bold;		
	padding: 0.5rem 1rem;	
	background: #333;		
	color: #fff;		
	margin-bottom: 1rem;	
	border-radius: 5px;		
}

.ta1 {
	table-layout: fixed;
	border-top: 1px solid #333;	
	width: 100%;				
	margin-bottom: 5rem;		
}

.ta1 tr {
	border-bottom: 1px solid #333;	
}

.ta1 th, .ta1 td {
	padding: 1rem;		
	word-break: break-all;	
}

.ta1 th {
	width: 30%;			
	text-align: left;	
	background: #eee;	
}

@media screen and (min-width:900px) {
	.ta1 th {
			width: 20%;		
		}
}

.pagetop-show {display: block;}

.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	
	right: 20px;		
	bottom: 20px;		
	font-size: 1.5rem;	
	background: rgba(0,0,0,0.2);	
	width: 60px;		
	line-height: 60px;	
	border-radius: 50%;	
}

.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;color: #333;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

@media screen and (min-width:900px) {
	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}
}

.bo{font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; color: var(--bo-ink); background: var(--bo-bg);}
.bo *{box-sizing: border-box;}
.bo-container{max-width: var(--bo-max); margin-inline: auto; padding: 0 16px;}
.bo-hero{position: relative; min-height: 56vh; background: url('https://images.unsplash.com/photo-1590490360182-c33d57733427?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; display:flex; align-items:center;}
.bo-hero__overlay{position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));}
.bo-hero .bo-container{position:relative; z-index:1;}
.bo-hero__title{font-weight: 800; font-size: clamp(32px, 5vw, 60px); line-height:1.05; color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);}
.bo-hero__subtitle{color:#fff; opacity:.95; margin-top: 10px; font-size: clamp(16px, 2.2vw, 20px);}
.bo-hero__actions{margin-top: 18px; display:flex; gap:12px; flex-wrap: wrap;}
.bo-btn{display:inline-flex; align-items:center; justify-content:center; padding: 10px 16px; border-radius: 999px; font-weight:700; border:1px solid transparent; text-decoration:none; box-shadow: var(--bo-shadow);}
.bo-btn--light{background:#fff; color:#0f172a;}
.bo-btn--dark{background: var(--bo-primary); color:#fff;}
.bo-btn--ghost{background: transparent; color: var(--bo-primary); border-color: var(--bo-primary);}
.bo-eyebrow{text-align:center; color: #64748b; letter-spacing:.18em; font-weight:700;}
.bo-py-lg{padding-block: 64px;}
.bo-grid{margin-top: 18px; display:grid; gap: var(--bo-gap); grid-template-columns: repeat(1,minmax(0,1fr));}
@media (min-width: 768px){ .bo-grid{grid-template-columns: repeat(3,minmax(0,1fr));} }
.bo-card{display:block; padding: 18px; border:1px solid var(--bo-border); border-radius: var(--bo-radius); background:#fff; text-decoration:none; color: inherit; box-shadow: var(--bo-shadow); transition: transform .18s ease, box-shadow .18s ease;}
.bo-card:hover{transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12);}
.bo-card__icon{font-size: 28px;}
.bo-card__title{margin: 8px 0 4px; font-size: 18px; font-weight:800;}
.bo-card__text{color: var(--bo-text); font-size: 14px; margin:0 0 10px;}
.bo-card__cta{font-weight:700; font-size: 14px; color: var(--bo-ink);}
.bo-section{background: #f8fafc;}
.bo-section--alt{background: #f8fafc; padding-block: 56px;}
.bo-feature{display:grid; gap: var(--bo-gap); grid-template-columns: 1fr; align-items:center; margin-bottom: 40px;}
.bo-feature--reverse{direction: rtl;}
@media (min-width: 900px){ 
  .bo-feature{grid-template-columns: 1.05fr .95fr;}
  .bo-feature--reverse{grid-template-columns: .95fr 1.05fr;}
}

.bo-feature__image{width:100%; height: 320px; object-fit: cover; border-radius: var(--bo-radius); box-shadow: var(--bo-shadow);}
@media (min-width: 900px){ .bo-feature__image{height: 380px;} }
.bo-feature__body{direction: ltr; }
.bo-feature__title{font-size: 28px; font-weight: 800; margin: 0 0 8px;}
.bo-feature__body p{color: var(--bo-text); line-height:1.9; margin:0 0 10px;}
.bo-link{font-weight: 700; color: var(--bo-accent); text-decoration: none; border-bottom: 2px solid rgba(14,165,233,.35);}
.bo-link:hover{border-bottom-color: var(--bo-accent);}
.bo-section-title{font-size: 22px; font-weight: 800; margin: 0 0 14px;}
.bo-badges{display:flex; flex-wrap:wrap; gap: 10px 16px; margin: 0 0 18px; padding:0; list-style:none;}
.bo-badge{display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; background:#eef2ff; color:#3730a3; font-weight:700; font-size: 12px;}
.bo-badges small{display:block; color: var(--bo-text); margin-left: 6px;}
.bo-logos{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}
@media (min-width: 560px){ .bo-logos{grid-template-columns: repeat(3, minmax(0, 1fr));} }
@media (min-width: 900px){ .bo-logos{grid-template-columns: repeat(6, minmax(0, 1fr));} }
.bo-logos img{width: 100%; height: 56px; object-fit: contain; filter: grayscale(1); opacity:.9; border:1px dashed var(--bo-border); border-radius: 10px; background:#fff;}
.bo-cta{background: linear-gradient(135deg, #e2e8f0, #ffffff); padding-block: 56px; border-top:1px solid var(--bo-border);}
.bo-cta__title{font-size: 24px; font-weight: 800; margin: 0 0 6px; text-align:center;}
.bo-cta__subtitle{color: var(--bo-text); text-align:center; margin: 0 0 14px;}
.bo-cta .bo-hero__actions{justify-content: center;}
@media (prefers-reduced-motion: no-preference){
  .bo [data-reveal]{opacity:0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease;}
  .bo [data-reveal].is-visible{opacity:1; transform: translateY(0);}
}

:root{
  --jp-font: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}

body{ font-family: var(--jp-font); }
input, textarea, select, button{
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
}

/* ヘッダーメニューを横並び＆言語切替を右端へ */
#menubar > nav > ul {
  display: flex;
  align-items: center;
  gap: 20px;
}
#menubar > nav > ul > li.lang-switch {
  margin-left: auto;          /* ここで右端へ */
  font-size: 0.95rem;
  list-style: none;
}
#menubar > nav > ul > li.lang-switch a {
  text-decoration: none;
  color: inherit;
  padding: 2px 6px;
}
#menubar > nav > ul > li.lang-switch a:hover {
  text-decoration: underline;
}

/* スマホ時の回り込み対策（任意） */
@media (max-width: 768px){
  #menubar > nav > ul { flex-wrap: wrap; }
  #menubar > nav > ul > li.lang-switch {
    margin-left: 0;
    margin-top: 6px;
    width: 100%;
    text-align: right;
  }
}





/* 共通のベース（ラテン/アイコン等はOS標準） */
body {
  font-family: system-ui, -apple-system, Segoe UI, Arial, "Noto Sans", sans-serif;
  line-height: 1.65;
}

/* 簡体字（中国本土向け） */
:lang(zh), :lang(zh-CN) {
  font-family:
    -apple-system, /* iOS/macOSのラテン */
    "PingFang SC", /* iOS/macOSの簡体字 */
    "Microsoft YaHei UI", "Microsoft YaHei", /* Windows */
    "Noto Sans SC", "Source Han Sans CN",   /* 思源/Noto 自前導入時に活きる */
    "Heiti SC", "Droid Sans Fallback", "WenQuanYi Micro Hei",
    Arial, sans-serif;
}

/* 繁体字（台湾） */
:lang(zh-TW) {
  font-family:
    -apple-system,
    "PingFang TC",
    "Microsoft JhengHei UI", "Microsoft JhengHei",
    "Noto Sans TC", "Source Han Sans TW",
    "PMingLiU", Arial, sans-serif;
}

/* 繁体字（香港）—必要なら */
:lang(zh-HK) {
  font-family:
    -apple-system,
    "PingFang HK",
    "Microsoft JhengHei UI", "Microsoft JhengHei",
    "Noto Sans HK", "Source Han Sans HK",
    Arial, sans-serif;
}

/* 日本語（既存と競合しないように例示） */
:lang(ja) {
  font-family:
    system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic UI", "Yu Gothic", Arial, sans-serif;
}







/* 行間はやや広め、字間は基本0。改行品質を上げる */
:lang(zh), :lang(zh-CN), :lang(zh-TW), :lang(zh-HK) {
  line-height: 1.7;
  letter-spacing: 0;
  /* 中国語の禁則に配慮：WebKit系で有効。未対応ブラウザでも害なし */
  line-break: strict;
  word-break: keep-all;
}

/* 小さなUI部品は読みやすく */
.small:lang(zh), .small:lang(zh-CN),
.small:lang(zh-TW), .small:lang(zh-HK) {
  font-size: .9rem;
}




:lang(zh), :lang(zh-CN) {
  font-weight: 500;
}