@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

/* 全体の初期化 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a{
	text-decoration:none;
	color:#000;
}
a:hover{
 transition: all 0.3s ease;
}
a.ul{
	text-decoration:underline;
}
.bl{color:#0067CD;}

.smt{display:none !important;}
	
.tac{text-align:center;}
.fwb{font-weight:bold;}
.tal{text-align:left !important;}
.vat{vertical-align: top !important;}
.nowrap{white-space:nowrap;}

.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mt30{margin-top:30px;}.mt40{margin-top:40px;}.mt50{margin-top:50px;}
.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}.mb30{margin-bottom:30px;}.mb40{margin-bottom:40px;}.mb50{margin-bottom:50px;}
.pt10{padding-top:10px;}.pt20{padding-top:20px;}.pt30{padding-top:30px;}.pt40{padding-top:40px;}.pt50{padding-top:50px;}
.pb10{padding-bottom:10px;}.pb20{padding-bottom:20px;}.pb30{padding-bottom:30px;}.pb40{padding-bottom:40px;}.pb50{padding-bottom:50px;}
.wi100{width:100%;}

.fwb{font-weight:bold;}
.fsm{font-size: 0.875em;}

h2{font-size: 2.2em;}
h3{font-size:1.4em;}


.hoveraction:hover{
	opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/* 準備中表示 */
.preparation{
	text-align:center;
	padding:50px 0;
	font-size:1.2em
}

:root {
  /* カラーパレット */
  --color-primary: #0056b3;
  --color-text: #333333;
  --color-bg: #efefef;
  
  /* フォントファミリー */
  --font-family: "Zen Kaku Gothic New", sans-serif;
  
  /* 流体タイポグラフィ (画面幅に応じて自動で拡縮) clamp(最小値, 推奨値, 最大値) */
  --font-size-base: clamp(1rem, 0.9rem + 0.25vw, 1.05rem);
  --font-size-h1: clamp(1.75rem, 1.2rem + 2vw, 2.2rem);
  

  /* 余白 (スペース) */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* レイアウト */
  --header-max-width: 1340px;
  --container-max-width: 1100px;
  
}


/* <html>タグに 'font-small' クラスがついた時の中身を上書き */
:root.font-small {
  --font-size-base: 0.95rem; 
}
/* <html>タグに 'font-large' クラスがついた時の中身を上書き */
:root.font-large {
  --font-size-base: 1.2rem; 
}


html {
  /* アンカーリンクのスクロールを滑らかに */
  scroll-behavior: smooth;
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-weight: 500;
  font-style: normal;
  line-height: 1.6;
  transition: font-size 0.3s ease; /* サイズがフワッと変わるようにする */
  padding-top:5px;
  /* フォントのレンダリングを綺麗に */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 画像や動画が親要素をはみ出さないようにする */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}


/* フォントサイズ可変 */
/* ボタンの基本スタイル（必要に応じて調整してください） */
.font-size-changer button {
  padding: 2px 5px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 2px;
}

/* ★選択されているボタン（.active）のスタイル */
.font-size-changer button.active {
  background-color: #0067cd; /* 好きな色に変更してください */
  color: #ffffff;            /* 文字色を白に */
  border-color: #0056b3;     /* 枠線の色も合わせる */
}

/* 外部サイトマーク */
.bottomnavi a:nth-child(2){
	position:relative;
	padding-right: 32px;
}
.bottomnavi a:nth-child(2):after{
	content: url(/assets/images/common/external.svg);
    width: 16px;
    position: absolute;
    top: 60%;
    right: 0px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/* タブのコンテンツエリア共通設定 */
.tab-content {
    position: absolute; /* 重ねる */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden; /* クリック無効化 */
    transition: opacity 1s ease;
}

.tab-content.is-active {
    position: relative; /* 表示時は高さを確保 */
    opacity: 1;
    visibility: visible;
}

.headersize{
	max-width:var(--header-max-width);
	width:100%;
	margin:0 auto;
}
.headmain h1 a{
	display: flex;
    align-items: center;
}
.innersize{
	max-width:var(--container-max-width);
	width:100%;
	margin:0 auto;
}
.innersize2{
	max-width:1250px;
	width:100%;
	margin:0 auto;
}
.innersize3{
	max-width:980px;
	width:100%;
	margin:0 auto;
}
.headmain .logo{
	width:400px;
}
.headmain .mascot{
	width:72px;
}


/* ヘッダーエリア */
header{
	position:fixed;
	top:0;
	background-color:#fff;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width:100%;
	padding-top:35px;
	z-index: 100;
}
.naviflex{
	display:flex;
	justify-content: space-between;
	align-items: center; 
}
.headflex{
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center; 
}
header .group{
	display: flex;
    justify-content: space-between;
	flex-flow: row wrap;
}
.partition{
	border-right:1px dashed #ccc;
	padding:0 8px;
}
.nopartition{
	padding:0 8px;
}

.rarea{
	font-size:0.8rem;
}


/* グローバルナビ */
nav{
	display: flex;
    justify-content: space-between;
	margin-top:32px !important;
	margin-bottom: 32px !important;
	padding: 0 50px;
	font-weight:bold;
}

nav a{
	position:relative;
}
nav .on:after{
	content:"";
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width:100%;
	height:3px;
	background-color:#0067CD;
	opacity: 1;
}
nav a:after{
	content:"";
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width:100%;
	height:3px;
	background-color:#0067CD;
	transition: 1s;
	opacity: 0;
}
nav a:hover:after{
	opacity: 1;
}


.headmain{
	width: 100%;
}
.Regist{
	position:relative;
	background-color:#000;
	border:1px solid #000;
	color:#fff;
	font-weight:bold;
	font-size:1.1rem;
	padding:5px;
	border-radius:10px;
	margin-left:8px;
	margin-right:16px;
	text-align:center;
	width:132px;
	display:flex;
	align-items:center;
	padding-left: 40px;
}
.Regist:before{
	content: url(/assets/images/common/registicon.svg);
	display: inline-block;
	width: 19px;
 	height: 16px;
	 position:absolute;
	 top: 40%;
    left: 13px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);	
	-ms-transform: translateY(-50%);
}
.Regist:hover{
	background-color:#fff;
	border:1px solid #000;
	color:#000
}

.Regist:hover:before{
	content: url(/assets/images/common/registicon-on.svg);
}
.login{
	position:relative;
	background-color:#0067cd;
	border:1px solid #0067cd;
	color:#fff;
	font-weight:bold;
	font-size:1.1rem;
	padding:5px;
	margin-right:8px;
	border-radius:10px;
	text-align:center;
	width:132px;
	display:flex;
	align-items:center;
	padding-left: 40px;
}
.login:before{
	content: url(/assets/images/common/loginicon.svg);
	display: inline-block;
	width: 18px;
 	height: 22px;
	 position:absolute;
	 top: 50%;
    left: 13px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);	
	-ms-transform: translateY(-50%);
}
.login:hover{
	background-color:#fff;
	border:1px solid #0067cd;
	color:#0067cd
}

.login:hover:before{
	content: url(/assets/images/common/loginicon-on.svg);
}

.Regist img,
.login img{
	width:16px;
}
/*　sns*/
.face{
	height:40px;
	width:40px;
	margin:0 8px;
}
.insta{
	display: none;
	height:40px;
	width:40px;
	margin:0 8px;
}

/* 下層ヘッダー */
.underhead{
	height:200px;
	max-width:1200px;
	width:100%;
	margin:0 auto;
	margin-top: 185px;
	margin-bottom:20px;
	display:flex;
	align-items:center;
	border-bottom:1px solid #0067CD;
	background-image:url(/assets/images/common/under-headbg.png);
	background-position:bottom center;
}
.underhead h2{
	font-weight:bold;
	color:#0067CD;
	padding-left:20px;
}

/* 下層タイトル */
.h3border{
	margin-bottom:20px;
	padding-left:20px;
	position:relative;
}
.h3border:before{
	content: "";
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 5px;
    background-color: #0067CD;
    position: absolute;
    left: 0;
    top: 5%;
}

/* パンクズ */
.breadcrumb{
	display:flex;
	font-size:0.9em;
	font-weight:500;
}
.breadcrumb a{
	color:#000;
	white-space: nowrap;
}
.breadcrumb a:after{
	content:">";
	padding:0 15px;
}
.breadcrumb a:last-child:after{
	content:"";
}
.breadcrumb .nolink{
	pointer-events: none;
	color:#0067CD;
	word-break: break-all;
	white-space: unset;
}

section .mainimg{
	margin-top:160px;
}


/* メインコンテンツ */
main{
	position:relative;
}

.under-contents{
	margin:60px 0;
}


/* フッター */
footer {
	padding:48px 0 40px;
	font-size:0.9em;
}
footer .footflex{
	display:flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-flow: row wrap;
	gap:10px 10px;
}
footer .name{
	font-size:1.4em;
	font-weight:bold;
	margin-bottom: 24px;
}
footer .name span{
	font-size: 0.6em;
    color: #fff;
    background-color: #000;
    padding: 0px 15px;
    margin-right: 10px;
}
footer .tel{
	margin-bottom: 12px;
}
footer .tel span{
	letter-spacing: 12px;
}
footer .time{
	margin-bottom: 24px;
}
footer .copy{
	font-size:0.9em;
}
/* ボトムナビ */
.bottomnavi{
	display:flex;
	gap: 12px 24px;
	flex-flow: row wrap;
}
.bottomnavi a{
	text-decoration:underline;
}

/* ページトップへ戻る */
#pagetop {
  /* ボタンがスクロールに合わせてカクつかないようにする */
  will-change: transform;
  /* クリックした時に一瞬反応が止まるのを防ぐ */
  touch-action: manipulation;
}
.scroll-top-btn{
	position:fixed;
	right: 25px;
    bottom: 25px;
	cursor:pointer;
}
.scroll-top-btn span{
	display:none;
}
.scroll-top-btn:after{
	content:"";
	display:inline-block;
	width: 73px;/*画像の幅*/
	height: 73px;/*画像の高さ*/
	background-image: url(/assets/images/common/pagetop.svg);
	background-size: contain;
	vertical-align: middle;
}

/* ==========================================================================
   5. Media Queries (モバイルファーストのメディアクエリ)
   ========================================================================== */


@media (max-width: 1287px) {
  /* 必要に応じて記述 */
  
  nav a{
  font-size: 1rem;
  }
  header .naviflex{
	flex-direction: column;
	align-items: flex-start;
    gap: 13px;
  }
  header .rarea{
	margin-right:10px;
  }
  .login {
	margin-left:8px;
  }
  section .mainimg {
    margin-top: 198px;
  }
  article.newtrend .comment {
    padding-right: 10px !important;
  }
  header .group {
	font-size: 1rem;
	padding: 0 10px;
  }
  header h1{
		margin-left:20px;
  }
	
}/*@media */


@media (max-width: 1130px) {
  /* 必要に応じて記述 */
  .breadcrumb,.bannerarea{
	padding:0 10px;
  }
  main,footer{
		padding: 30px 15px;
	}
}/*@media */

/* タブレット・PC向けの上書き (例: 1028px以上) */
@media (max-width: 1028px) {
	.pc{display:none !important;}
	.smt{display:block !important;}
	header{
		padding-top:22px; 
		padding-bottom:10px; 
	}
	section .mainimg {
		margin-top: 86px;
	}
	.headmain {
		padding-bottom: 10px;
	}
	section.topbanner .bannerarea {
		justify-content: center !important;
	}
	article.newtrend {
		background-size:65%;
		background-position:bottom;
		justify-content: center !important;
	}

	
	.scroll-top-btn:after{
		width: 55px;
		height: 55px;
	}
	

}/*@media */

/* タブレット・PC向けの上書き (例: 768px以上) */
@media (max-width: 768px) {
  .flex-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
  }
  .headmain h1{
	margin-right:75px;
	}
  .headmain .logo {
    width: 100%;
	max-width:400px;
  }
  .headmain .mascot {
    width: 55%;
	max-width:72px;
  }
  article.info .info-line {
	flex-flow: row wrap;
	padding: 15px 0px 15px 0px !important;
  }
}/*@media */

@media (max-width: 510px) {
	.headmain .mascot {
		display:none;
	}
	section .mainimg {
        margin-top: 66px;
    }
	
	footer {
        padding: 24px 15px;
    }
	footer .name {
		display: flex;
		flex-flow: row wrap;
	}
	footer .copy {
		margin-top: 24px;
	}
	footer .name{
		margin-bottom: 16px;
	}
}/*@media */


/* =========================================
   スマホサイズ（画面幅768px以下）の時の指定
========================================= */
@media screen and (max-width: 1028px) {

	.rarea,nav{
		display:none;
	}
	
	.underhead{
		margin-top: 80px;
	}

	
/* =========================================
   ハンバーガーボタンのデザイン
========================================= */
	.hamburger {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 43px;
	height: 43px;
	background-color: #0067CD; /* サイトに合わせたブルー */
	border: none;
	border-radius: 4px;
	cursor: pointer;
	z-index: 9999; /* 一番手前に表示 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	
	/* 3本線 */
	.hamburger span {
	display: block;
	width: 21px;
	height: 2px;
	margin: 3px 0;
	background-color: #fff;
	transition: all 0.3s ease;
	}
	
	/* MENUというテキスト */
	.menu-text {
	color: #fff;
	font-size: 9px;
	margin-top: 2px;
	font-weight: bold;
	}
	
	/* --- 開いた時（×ボタンへの変化） --- */
	.hamburger.is-active span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
	}
	.hamburger.is-active span:nth-child(2) {
	opacity: 0; /* 真ん中の線を消す */
	}
	.hamburger.is-active span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
	}
	.hamburger.is-active .menu-text {
	 /*opacity: 0; /* 「MENU」の文字も消す */
	}
	
	/* =========================================
	フルスクリーン・オーバーレイ本体
	========================================= */
	nav {
		padding: 0 24px;
		margin-top: 20px !important;
	}
	.fullscreen-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.9); /* 背景色（少しだけ透ける白） */
	z-index: 9998; /* ボタンの1つ下に配置 */
	
	/* 中央揃えにする設定 */
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	
	/* 初期状態は非表示（transitionでフワッと出すための設定） */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	}
	
	/*ロゴ */
	.fullscreen-nav .logo{
		max-width:400px;
		margin-top: 5px;
		margin-bottom:20px;
		margin-right: 50px;
	}
	
	/* --- 開いた時（フワッと表示） --- */
	.fullscreen-nav.is-active {
	opacity: 1;
	visibility: visible;
	}
	
	.fullscreen-nav .nav-inner {
		width: 100%;
		max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
	}
	/* メニュー項目のデザイン */
	.fullscreen-nav ul {
	list-style: none;
	padding: 0;
	text-align: left;
	}
	
	.fullscreen-nav li {
	border-bottom: 2px solid #e5e5e5;
	}
	
	.fullscreen-nav ul a {
	color: #333;
	font-size: 20px; /* シニア向けに文字を大きく */
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: 13px;
	}
	/* ログインボタン */
	.fullscreen-nav .nav-inner .humberger-btn{
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	/* SNSボタン */
	.fullscreen-nav .nav-inner .sns-btn{
		display: flex;
		justify-content: flex-start;
		margin-top: 30px;
	}
	.fullscreen-nav .Regist,
	.fullscreen-nav .login{
		width: 49%;
	}
}/*@media */

/* =========================================
   PCサイズ（画面幅769px以上）の時の指定
========================================= */
@media screen and (min-width: 1028px) {
  /* PCではハンバーガーもスマホメニューも不要なので消しておく */
  .hamburger,
  .fullscreen-nav {
    display: none;
  }
}/*@media */