@charset "UTF-8";
/*	◆ CSS Reset & Base ◆
こちらにはReset用のCSSや、ベースになるコード、:rootで変数にしたもの、よく使う項目の設定を置いています。
各項目に対するCSS設定はcommon.cssに記入します。 */

/*--------------------------------------------------
	Reset CSS
--------------------------------------------------*/
/* 1) Box sizing & margin */
*, *::before, *::after {
	box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
	margin: 0;
}

/* 2) Base typography */
html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* 3) Lists */
ul, ol {
	list-style: none;
	padding: 0;
}

/* 4) Images & media */
img, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 5) Tables */
table {
	border-collapse: collapse;
}

/* 6) Form elements */
input, button, textarea, select {
	font: inherit;
	border: none;
	background: none;
	color: inherit;
}

button {
	cursor: pointer;
}

/* 7) Links */
a {
	text-decoration: none;
	color: inherit;
}

/* 8) Hidden attribute */
[hidden] {
	display: none !important;
}


/*--------------------------------------------------
	CSSカスタムプロパティ
--------------------------------------------------*/
:root{
/* 基準値 */
	--base-size: 100px; /* 1920px のとき 1rem = 100px */
	--min-size: 80px;   /* 1rem の最小値 */

/* 色 */
	--color01: #111; 
	--color02: #fff;
	--white: #fff;
	--black: #000;

/* コンテナーサイズ */
	--container_size_small: 10rem; /* 1000px */
	--container_size_middle: 10.8rem; /* 1080px */
	--container_size_big: 12.8rem; /* 1280px */

/* コンテンツ間サイズ　サイトに応じて調整 */
	--stacksize_txt: .16rem;
	--stacksize_S: 1.4rem;
	--stacksize_M: 2rem;
	--stacksize_L: 3rem;
}

/*--------------------------------------------------
	Base - 超基礎部分
--------------------------------------------------*/
html, body{
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
	width: 100vw;	
	height: 100vh;
	overflow-x: hidden;
}
html{
	scroll-behavior: smooth;
    font-size: clamp(var(--min-size), 5.208vw, var(--base-size)); 
    /* 1920px では 1rem = 100px を維持 */
}
body { font-size: 0.18rem;}
	@media (max-width: 768px) {
		body { font-size: 0.24rem; /* モバイルサイズのフォント調整 */}
	}
p{ line-height: 1.7;}

/*--------------------------------------------------
	Base - PC・SP切り分け設定
--------------------------------------------------*/
@media (min-width:769px) {
	.sp{ display:none !important;}
}
@media (max-width:768px) {
	.pc{ display:none !important;}
}


/*--------------------------------------------------
	Base - コンテナー設定
--------------------------------------------------*/
.container_big{
	width: var(--container_size_big);
	max-width: calc(100% - .3rem); /* 100% - 30px */
	margin: 0 auto;
}
	@media (max-width:1310px) { /* 指定ウィンドウサイズ+パディング */
		.container_big{ padding-inline: .15rem;} /* 15px */
	}
.container_middle{
	width: var(--container_size_middle);
	max-width: calc(100% - .3rem);
	margin: 0 auto;
}
	@media (max-width:1110px) { /* 指定ウィンドウサイズ+パディング */
		.container_middle{ padding-inline: .15rem;}
	}
.container_small{
	width: var(--container_size_small);
	max-width: calc(100% - .3rem);
	margin: 0 auto;
}
	@media (max-width:1030px) { /* 指定ウィンドウサイズ+パディング */
		.container_small{ padding-inline: .15rem;}
	}

/*--------------------------------------------------
	Base - リンク設定
--------------------------------------------------*/
a{
	color: var(--color02);
	text-decoration: none;
	transition: .3s;
}
	a:hover{ opacity: .7;}

button{ /* リセット用 */
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

/*--------------------------------------------------
	Base - BOX内マージン設定
--------------------------------------------------*/
.stack_txt > * + * { margin-top: var(--stacksize_txt); }
.stack_S > * + * { margin-top: var(--stacksize_S); }
.stack_M > * + * { margin-top: var(--stacksize_M); }
.stack_L > * + * { margin-top: var(--stacksize_L); }


/*--------------------------------------------------
	Base - 要素毎のフォントサイズ
--------------------------------------------------*/
h1 { font-size: clamp(.2rem, 5vw, .4rem);}
h2 { font-size: clamp(.15rem, 4vw, .3rem);}
p { font-size: clamp(.1rem, 2.5vw, .2rem);}


/*--------------------------------------------------
	Base - 画像のサイズ設定
--------------------------------------------------*/
img {
    max-width: 100%;
    height: auto;
}
.full-width-image {
    width: 100vw;
    height: 50vh;
    object-fit: cover;
}
.thumbnail{
	width: 100%;
    height: 100% !important;
    object-fit: cover;
}


/*--------------------------------------------------
	Base - Flexboxレイアウト
--------------------------------------------------*/
.flex { display: flex;} /* 基本の flexbox */
.flex_center { /* 子要素を中央揃え */
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_between { /* 横並び + 均等配置 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
	.flexbox:after {
		content: "";
		display: block;
		width: 32%;  /* .flex_between 内の要素に指定したwidthと同じ幅を指定する */
		height: 0;
	}
.flex_column { /* 縦方向に並べる */
    display: flex;
    flex-direction: column;
}
.flex_column_center { /* 縦方向 + 子要素を中央揃え */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* レスポンシブ対応：スマホで縦並び */
@media (max-width: 768px) {
    .flex_responsive {
        flex-direction: column;
    }
}


/*--------------------------------------------------
	Base - ダークモードの設定
--------------------------------------------------*/
/*
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #ffffff;
    }
}
 */