@charset "utf-8";



/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	/* 基本色（背景カラーを白いままに） */
	--base-color: #fff; 
	--base-inverse-color: #333; /* 富士フイルムの配色に合わせて落ち着いた濃い灰色に変更 */

	/* メインカラーを富士フイルムの赤に変更 */
	--primary-color: #00e576;
	--primary-inverse-color: #fff; /* 一般的に赤に対しては白い文字を使いやすいため */

	--content-space: 2rem; /* 余白の設定はそのまま */
}

@media screen and (min-width:900px) {

	:root {
		--content-space: 4rem; /* 余白の設定はそのまま */
	}

	}/*追加指定ここまで*/


/*animation11のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*jump1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes jump1 {
  0%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  90% {
    transform: translateX(-50%) translateY(-10px);
  }
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 15px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類（ゴシック）*/
	font-optical-sizing: auto;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background: var(--base-color);		/*背景色。css冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。css冒頭のbase-inverse-colorを読み込みます。*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	padding: 0 var(--content-space);	/*ヘッダー内の余白。上下にcss冒頭のcontent-spaceを読み込み、左右は0（ゼロ）*/
}

	/*画面幅400px以下の追加指定*/
	@media screen and (max-width:400px) {

	/*ヘッダーブロック*/
	header {
		padding-top: calc(var(--content-space) + 70px);	/*右上ボタンとロゴが重ならないようヘッダー上部の余白に70px上乗せ*/
	}
	
	}/*追加指定ここまで*/


/*ロゴ*/
#logo {margin: 0;padding: 0;}
#logo img {
	display: inline-block;
	width: 250px;	/*ロゴの幅*/
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 50px;		/*下からの配置場所指定*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*svgアニメーション（大きな背景ラインアニメーション）
このcssの他、htmlの一番下の「SVGアニメーション」というブロックで指定があります。
---------------------------------------------------------------------------*/
#kazari1 {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
	stroke: #fff;		/*これは線の色ではありません。線色はsvg画像を直接編集して下さい。*/
	stroke-width: 30;	/*svgをなぞった際の線幅をここで設定*/
	width: 100%;
}


/*sectionの両サイドの余白を相殺するスタイル
---------------------------------------------------------------------------*/
.margin-lr0 {
	margin: 0 calc(-1 * var(--content-space));
}


/*その他
---------------------------------------------------------------------------*/
.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;border: 1px solid #ccc; color: #888; 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;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/