@charset "UTF-8";

/**
 * cpu_css
 * base.css
 */


@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/**
	■ゴシック
	フォントを指定したいところで 
	font-family: 'Noto Sans JP';
**/
@font-face {
font-family: 'Futura-Book';
font-style: normal;
font-weight: normal;
src: local('Futura-Book'), url('Futura-Book.woff') format('woff');
}

/******************************************************
 リセット
******************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}  
fieldset,img{border:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;margin:0;}

ul {font-size:100%;font-weight:normal;list-style: none;}
/*img {display:block;}
*/
a { outline:none; }
/******************************************************
↓隙間をなくす重要項目！
******************************************************/
/*ライオンズではスマホのリスト表示に不具合が出るので無効
li,dt,dd{
font-size:0px;
line-height:0px;
}
*/

body{
	-webkit-text-size-adjust: 100% !important; 
	font-family: "Noto Serif JP", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

img{
	vertical-align:bottom;
}

a { text-decoration: none;}
a:hover { text-decoration: none;}


/******************************************************
↑隙間をなくす重要項目！
******************************************************/

/******************************************************
 clearfix
******************************************************/

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.clearfix {display: inline-block;}
/* html .clearfix {height: 1%}
.clearfix {display:block;}*/
*html.clearfix {
  height: 1%; }

.clear_both {
	clear:both;
}



.position_r{
	position:relative;
}
.position_a{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
}

.position_zindex{
	z-index:9999;
}




/******************************************************
 印刷用スタイル（PCレイアウトで出力）
 ------------------------------------------------------
 ・印刷時は用紙幅（A4 で約 794px / 横向きでも約 1123px）が
   ビューポート幅になるため、サイトの SP ブレイクポイント
   （min-width:1001px / max-width:1000px）が SP 側で判定され、
   スマホ用メニュー・レイアウトが出力されてしまう。
 ・そこで印刷時は body を PC 設計幅（1300px）に固定し、
   zoom で用紙幅に縮小して PC レイアウトを出力する。
 ・各種メディアクエリ（print 含む）は SP 側で発火するため、
   ここで PC 表示に必要な要素の表示/非表示を !important で上書きする。
******************************************************/
@media print {
 
	/* 縦向き・余白でレイアウト幅を確保 */
	@page {
		size: A4 portrait;
		margin: 8mm;
	}
 
	/* PC 設計幅で組版し、用紙幅に合わせて縮小する。
	   zoom はリフロー＆改ページが効くため transform:scale より安全。
	   A4縦の印刷可能幅(210mm-余白8mm×2≒194mm≒約733px)に1300pxを収める。 */
	html {
		width: 1300px !important;
		zoom: 0.56;            /* 1300px → 縦向きA4の印刷可能幅に概ね収まる */
	}
	body {
		width: 1300px !important;
		min-width: 1300px !important;
		margin: 0 auto !important;
		-webkit-text-size-adjust: 100% !important;
	}
	body img{
		width: 100%t;
		height: auto;
	}
 
	/* PC / SP 切り替え要素を PC 表示に強制 */
	.smart_on,
	.smart_on_v2,
	.sp-header,
	.sp-header2,
	.sp_menu_box1,
	.sp_fullmenu,
	.sp_menu_btn1,
	.sp_menu_toggle {
		display: none !important;
	}
	.pc_on,
	.pc_on_v2 {
		display: block !important;
	}
 
	/* PC ヘッダーは max-width:1000px で display:none になるため復帰させる。
	   印刷では固定配置を解除して通常フローで出力する。 */
	.fixedBox3 {
		display: block !important;
		position: static !important;
	}
	.header.m01 {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		align-items: center !important;
	}
	.header {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 92% !important;
		max-width: 1200px !important;
		margin: 0 auto !important;
	}
	.hd_nav_box1 {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
	}
 
	/* PC 用に隠れている要素の改ページ抑制 */
	.fixedBox3,
	.header,
	.header.m01 {
		break-inside: avoid;
		page-break-inside: avoid;
	}
 
	/* 印刷時の色を忠実に出力（背景・画像の色飛び防止） */
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
 
	/******************************************************
	 スクロールエフェクト（scroll_style.css）の打ち消し
	 ------------------------------------------------------
	 [data-scroll] 要素は初期状態 opacity:0 + transform でスクロールまで
	 非表示になっており、scroll_style.css のルールが
	 @media print,... を含むため印刷時もそのまま発火し、
	 画面外だった画像・テキストが透明のまま出力される。
	 印刷時は data-scroll の in/未inを問わず最終表示状態に固定する。
	******************************************************/
	[data-scroll] {
		opacity: 1 !important;
		-webkit-transform: none !important;
		        transform: none !important;
		transition: none !important;
		animation: none !important;
	}
	/* data-scroll 配下の個別アニメ要素（アイコン・画像・コピー等）も固定 */
	[data-scroll] .topcopy_icon1,
	[data-scroll] .topcopy_icon2,
	[data-scroll] .topcopy_icon3,
	[data-scroll] .topcopy_icon4,
	[data-scroll] .topcopy_icon5,
	[data-scroll] .box1_fl2,
	[data-scroll] .box1_fr2,
	[data-scroll] .top_box_copy_body,
	[data-scroll] .lo_copy_body1,
	[data-scroll] [class*="top_ph_center2_ph"] {
		opacity: 1 !important;
		-webkit-transform: none !important;
		        transform: none !important;
		transition: none !important;
		animation: none !important;
	}
	/* Splitting.js による1文字ずつの見出し（color:transparent + :after opacity:0）。
	   印刷時は :after を表示状態に固定し、文字色を本来の色で出す。 */
	.top_box_copy_head .char:after,
	.lo_copy_head1 .char:after,
	.lo_copy_head1_2 .char:after {
		visibility: visible !important;
		opacity: 1 !important;
		-webkit-transform: translateY(0) !important;
		        transform: translateY(0) !important;
		transition: none !important;
	}
}