@charset "utf-8";

/* -------------------------------------------------------------------

	共通ヘッダーCSS（PC対応：幅960px、スマホ対応：幅100%）

	最終更新：2021年1月26日

	PC・SPレスポンシブレイアウトに対応したページから読むことを想定しています。

	備考：
	.otsukaid-header　～　で全て記述します。
	どんなページで読み込まれても動作するように、px指定で固めます。

------------------------------------------------------------------- */


/* ****************************************************************

	PC（スマホ以外）

***************************************************************** */

/* **********************************************************************************

	イニシャライズ

********************************************************************************** */

.otsukaid-header div,.otsukaid-header span,.otsukaid-header h1,.otsukaid-header h2,.otsukaid-header h3,.otsukaid-header h4,.otsukaid-header h5,.otsukaid-header h6,.otsukaid-header p,.otsukaid-header blockquote,.otsukaid-header pre,.otsukaid-header address,.otsukaid-header cite,.otsukaid-header code,.otsukaid-header img,.otsukaid-header q,.otsukaid-header samp,.otsukaid-header small,.otsukaid-header sub,.otsukaid-header sup,.otsukaid-header dl,.otsukaid-header dt,.otsukaid-header dd,.otsukaid-header ol,.otsukaid-header ul,.otsukaid-header li,.otsukaid-header fieldset,.otsukaid-header form,.otsukaid-header label,.otsukaid-header legend,.otsukaid-header table,.otsukaid-header caption,.otsukaid-header tbody,.otsukaid-header tfoot,.otsukaid-header thead,.otsukaid-header tr,.otsukaid-header th,.otsukaid-header td,.otsukaid-header article,.otsukaid-header aside,.otsukaid-header canvas,.otsukaid-header figcaption,.otsukaid-header figure,.otsukaid-header footer,.otsukaid-header header,.otsukaid-header nav,.otsukaid-header section,.otsukaid-header time,.otsukaid-header audio,.otsukaid-header video {margin:0;padding:0;border:0;outline:0;font-size:100%;font-style:normal;vertical-align:baseline;background-color:transparent; }.otsukaid-header blockquote,.otsukaid-header q {quotes:none; }.otsukaid-header blockquote:before,.otsukaid-header blockquote:after,.otsukaid-header q:before,.otsukaid-header q:after {content:'';content:none; }.otsukaid-header a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent; }.otsukaid-header table {border-collapse:collapse;border-spacing:0; }.otsukaid-header input,.otsukaid-header select {vertical-align:top; }.otsukaid-header article,.otsukaid-header aside,.otsukaid-header footer,.otsukaid-header header,.otsukaid-header main,.otsukaid-header nav,.otsukaid-header section{display:block; }

.otsukaid-header { font-family:Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Helvetica,sans-serif;}

.otsukaid-header a:link    { color:#2451c6; text-decoration:none; }
.otsukaid-header a:active  { color:#2451c6; text-decoration:underline; }
.otsukaid-header a:visited { color:#7c169e; text-decoration:none; }
.otsukaid-header a:hover   { color:#2451c6; text-decoration:underline; }

.otsukaid-header input { font-family: Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Helvetica,sans-serif;}

/* clearfix */
.otsukaid-header .clearfix:after { content:""; display:block; clear:both; height:0; visibility:hidden; }
.otsukaid-header .clearfix { min-height:1px; }
* html .otsukaid-header .clearfix { height:1px;/*\*//*/ height:auto; overflow:hidden; /**/ }


/* **********************************************************************************

	共通ヘッダー

********************************************************************************** */

body{border-top:30px solid #fff; min-width:996px;}
	body:before{
		display:block; width:100%; min-width:996px; height:1px;
		border-top:1px solid #fff; background-color:#d5cccb; content:"";}
.otsukaid-header{
	width:100%; min-width:996px; border-bottom:1px solid #d5cccb;
	background-color:#fff;}
	.otsukaid-header .otsukaid-header-container{
		position:relative; margin:0 auto; padding:3px 0 4px; line-height:12px;}
	*+html .otsukaid-header .otsukaid-header-container{ padding:2px 0 5px;}

		/* ログイン前 */
		.logged-out .otsukaid-header .otsukaid-header-container ul{
			float:right; margin-right:12.3em; font-size:10px; text-align:right;}
			.logged-out .otsukaid-header .otsukaid-header-container ul li{
				display:inline-block; list-style:none; margin:5px 0 4px 15px;
				padding:2px 0; color:#333; font-size:11px; line-height:11px;}
			*+html .logged-out .otsukaid-header .otsukaid-header-container ul li{ display:inline;}
				.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-arrow-r{
					padding:0 0 0 12px;
					background:url("/common-otsukaid/img/icon-arrow-right.png") no-repeat 2px 0.45em;
					color:#333; cursor:pointer; }
				.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-blank{
					padding:0 0 0 15px;
					background:url("/common-otsukaid/img/icon-blank-orange.png") no-repeat 2px 0.45em;
					color:#333; cursor:pointer; }
					.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-arrow-r:hover,
					.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-blank:hover{
						color:#333; text-decoration:underline;}

		/* ログイン後　共通 */
		.logged-in-except-otsukaid .otsukaid-header .otsukaid-header-container ul,
		.logged-in-otsukaid .otsukaid-header .otsukaid-header-container ul{
			float:right; margin-right:10.7em; font-size:10px; text-align:left;}
		/* ログアウトボタンがない時はulにminimumクラスが付与され、右詰になる */
		.logged-in-except-otsukaid .otsukaid-header .otsukaid-header-container ul.minimum,
		.logged-in-otsukaid .otsukaid-header .otsukaid-header-container ul.minimum{ margin-right:-14px;}
			.logged-in-except-otsukaid .otsukaid-header .otsukaid-header-container ul li,
			.logged-in-otsukaid .otsukaid-header .otsukaid-header-container ul li{
				display:inline-block; list-style:none; margin:4px 0 4px 13px;
				padding:3px 15px 2px 0; color:#333; font-size:11px; line-height:11px;}
			*+html .logged-in-except-otsukaid .otsukaid-header .otsukaid-header-container ul li,
			*+html .logged-in-otsukaid .otsukaid-header .otsukaid-header-container ul li{ display:inline;}
				.logged-in-except-otsukaid .otsukaid-header .otsukaid-header-container ul li a,
				.logged-in-otsukaid .otsukaid-header .otsukaid-header-container ul li a{
					color:#333; cursor:pointer;}
					.logged-in-except-otsukaid .otsukaid-header .otsukaid-header-container ul li a:hover,
					.logged-in-otsukaid .otsukaid-header .otsukaid-header-container ul li a:hover{
						color:#333; text-decoration:underline;}

			/* ログイン後　大塚ID */
			.logged-in-otsukaid .otsukaid-header .otsukaid-header-container ul li:first-child{
				padding-left:22px; background:url("/common-otsukaid/img/icon-cs-otsukaid.png") 0 center no-repeat;}

			/* ログイン　大塚ID以外 */
			.logged-in-except-otsukaid .otsukaid-header .otsukaid-header-container ul li:first-child{
				padding-left:22px; background:url("/common-otsukaid/img/icon-cs-other.png") 0 center no-repeat;}

		/* ボタン */
		/* ログインボタン */
		.otsukaid-header .otsukaid-header-container p.otsukaid-button-login a{
			position:absolute;
			right:0; bottom:5px;
			display:block;
			padding:4px 26px 4px 30px;
			border:1px solid #ddd; border-radius:10px;
			background:url("/common-otsukaid/img/cs-mypage-icon-login.png") no-repeat 6px 0.28em #fdeed1;
			background:url("/common-otsukaid/img/cs-mypage-icon-login.png") no-repeat 6px 0.28em,-webkit-gradient(linear, center top, center bottom, from(#fffefc), to(#fdeed1));
			background:url("/common-otsukaid/img/cs-mypage-icon-login.png") no-repeat 6px 0.28em,-webkit-linear-gradient(top, #fffefc, #fdeed1);
			background:url("/common-otsukaid/img/cs-mypage-icon-login.png") no-repeat 6px 0.28em,linear-gradient(to bottom, #fffefc, #fdeed1);
			color:#333; font-size:11px; line-height:11px;
			box-shadow:0 1px 2px rgba(0,0,0,0.1), 0 0 0 1px #fff inset; cursor:pointer;}
		/* ログアウトボタン */
		.otsukaid-header .otsukaid-header-container p.otsukaid-button-logout a{
			position:absolute; right:0; bottom:5px; display:block;
			padding:4px 18px 4px 27px; border:1px solid #ddd; border-radius:10px;
			background:url("/common-otsukaid/img/cs-mypage-icon-logout.png") no-repeat 5px 0.4em #fff;
			color:#333; font-size:11px; line-height:11px;
			box-shadow:0 1px 2px rgba(0,0,0,0.1); cursor:pointer;}

.otsukaid-view-wait .otsukaid-header{ position:absolute; top:0; left:-100%; }

.otsukaid-view-show { border-top:0; }
	.otsukaid-view-show .otsukaid-header { position:relative; top:auto; left:auto; z-index:1002; margin-top:-2px; }

/* ログイン中の表示のみ */
.otsukaid-header .otsukaid-header-container.login-state {
	box-sizing:border-box;
	padding:7px calc(15px + 18px + 27px + (1px * 2) + 5em) 8px 13px;
	color:#333; font-size:11px; line-height:11px; text-align:right; }
.otsukaid-header .otsukaid-header-container.login-state:before {
	display:inline-block; width:16px; height:16px; margin-right:6px; content:"";
	background:url("/common-otsukaid/img/icon-cs-otsukaid.png") no-repeat;
	vertical-align:middle; }

/* **********************************************************************************

	個別対応

********************************************************************************** */

/* 横幅設定 */
.otsukaid-header .otsukaid-header-container{ width:960px; }


/* ****************************************************************

	スマホ対応

***************************************************************** */
@media

	screen and (max-device-width:640px) {

/* **********************************************************************************
	イニシャライズ
********************************************************************************** */
.otsukaid-footer div,
.otsukaid-footer span,
.otsukaid-footer p,
.otsukaid-footer img,
.otsukaid-footer dl,
.otsukaid-footer dt,
.otsukaid-footer dd,
.otsukaid-footer ol,
.otsukaid-footer ul,
.otsukaid-footer li,
.otsukaid-footer nav {
	margin:0; padding:0; border:0; outline:0; font-style:normal; vertical-align:baseline; background:transparent;}

.otsukaid-header a,
.otsukaid-footer a {
	margin:0; padding:0; vertical-align:baseline; background:transparent;}

.otsukaid-header ,
.otsukaid-footer {
	background-color:#fff; color:#333;
	font-family:Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Helvetica,sans-serif;
	text-align:center; -webkit-text-size-adjust:none; }

.otsukaid-footer a:link    { color:#2451c6; text-decoration:none; }
.otsukaid-footer a:active  { color:#2451c6; text-decoration:none; }
.otsukaid-footer a:visited { color:#7c169e; text-decoration:none; }
.otsukaid-footer a:hover   { color:#2451c6; text-decoration:none; }

.otsukaid-header img,
.otsukaid-footer img { max-width:100%; height:auto; }

/* **********************************************************************************
	リンクアイコン
********************************************************************************** */
.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-arrow-r,
.otsukaid-footer .otsukaid-icon-arrow-r {
	background: url(/common-otsukaid/img/icons-arrow-right-orange-sp.png) no-repeat 2px 0.38em;
	background-size:5px auto;
	padding-left: 12px;}
.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-blank{
	padding-left:15px;
	background:url(/common-otsukaid/img/icon-blank-orange-sp.png) no-repeat 2px 0.45em;
	background-size:8px auto; }
	.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-arrow-r:link,
	.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-blank:link    { color:#2451c6; text-decoration:none; }
	.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-arrow-r:active,
	.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-blank:active  { color:#2451c6; text-decoration:none; }
	.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-arrow-r:visited,
	.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-blank:visited { color:#7c169e; text-decoration:none; }
	.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-arrow-r:hover,
	.logged-out .otsukaid-header .otsukaid-header-container ul li a.otsukaid-icon-blank:hover   { color:#2451c6; text-decoration:none; }

/* **********************************************************************************
	共通ヘッダー
********************************************************************************** */

body { border-top:37px solid #fff; min-width:100%;}
	body:before{ display:block; min-width:100%; height:1px; border-top:1px solid #fff; background-color:#d5cccb; content:"";}

.otsukaid-header {
	position:absolute; right:0; margin:0;
	padding:8px 10px 7px;
	/* iPhone X 対応 */
	padding:8px calc( 10px + constant(safe-area-inset-left) ) 7px;
	padding:8px calc( 10px + env(safe-area-inset-left) ) 7px;
	width:100%; min-width:100%; box-sizing:border-box;
	background: #fff; border-bottom: 1px solid #d5cccb;
	font-size:11px; text-align:right;
	-webkit-transition:right 0.3s ease-out; transition:right 0.3s ease-out; }

.otsukaid-view-wait {}
	.otsukaid-view-wait .otsukaid-header { position:absolute; top:0; left:-100%; right:auto; }

.otsukaid-view-show { border-top-width:0; }
	.otsukaid-view-show:before {
		position:relative; top:auto; left:auto; right:0;
		-webkit-transition:right 0.3s ease-out; transition:right 0.3s ease-out;}
	.otsukaid-view-show .otsukaid-header {
		position:relative; margin-top:-2px; }

/* 共通ヘッダー リンクテキスト */
.logged-out .otsukaid-header .otsukaid-header-container ul { display:inline-block; float:none; margin:0; padding:0; text-align:right;}
	.logged-out .otsukaid-header .otsukaid-header-container ul li {
		display: inline-block; margin: 0 0 0 5px; padding:0; font-size:11px; line-height:11px;}
	.logged-out .otsukaid-header .otsukaid-header-container ul li:first-child {
		margin-left:0;}

/* 共通ヘッダー ログインボタン */
.otsukaid-header .otsukaid-header-container p.otsukaid-button-login { margin-left:10px; display:inline-block;}
	.otsukaid-header .otsukaid-header-container p.otsukaid-button-login a {
		position:static;
		display:block;
		padding:3px 13px 3px 27px;
		border:1px solid #ddd; border-radius: 12px;
		background: url(/common-otsukaid/img/cs-mypage-icon-login-sp.png) 7px center no-repeat #fdedd1;
		background: url(/common-otsukaid/img/cs-mypage-icon-login-sp.png) 7px center no-repeat,-webkit-linear-gradient(top, #fff 0%, #fdedd1 100%);
		background: url(/common-otsukaid/img/cs-mypage-icon-login-sp.png) 7px center no-repeat,linear-gradient(to bottom, #fff 0%, #fdedd1 100%);
		background-size:11px auto,auto;
		font-size:11px; line-height:1.4;
		color:#333;
		box-shadow:3px 3px 5px 0 rgba(4,0, 0, 0.15), inset 0 0 0 1px #fff, inset 0 0 0 1px #fff;
		cursor:default;}

/* 共通ヘッダー ログイン後 */
.logged-in-otsukaid .otsukaid-header,
.logged-in-except-otsukaid .otsukaid-header {
	padding:14px 10px 11px;}

/* 共通ヘッダー ログインユーザー（大塚ID） */
.logged-in-otsukaid .otsukaid-header .login-user {
	display:inline-block;}
	.logged-in-otsukaid .otsukaid-header .login-user a {
		display:inline-block; color:#333;}
		.logged-in-otsukaid .otsukaid-header .login-user span {
			display:inline-block; text-align:left;}
		.logged-in-otsukaid .otsukaid-header .login-user span.company {
			font-size:9px; line-height:1em;}
			.logged-in-otsukaid .otsukaid-header .login-user span.company:before{
				display:inline-block; content:"";
				width:14px; height:14px;
				margin:-1px 3px 0 0;
				background:url(/common-otsukaid/img/icon-cs-otsukaid-sp.png) 0 center no-repeat;
				background-size:14px auto; vertical-align:middle;}
		.logged-in-otsukaid .otsukaid-header .login-user span.name {
			font-size:11px; line-height:1em; margin:0 0 0 8px;}
/* ログイン中の表示のみ */
.logged-in-otsukaid .otsukaid-header.login-state::before{
	display:inline-block; content:""; width:14px; height:14px;
	margin:-1px 3px 0 0;
	background:url(/common-otsukaid/img/icon-cs-otsukaid-sp.png) 0 center no-repeat;
	background-size:14px auto; vertical-align:middle;}


/* 共通ヘッダー ログインユーザー（大塚ID以外） */
.logged-in-except-otsukaid .otsukaid-header .login-user {
	display:inline-block;}
	.logged-in-except-otsukaid .otsukaid-header .login-user a {
		display:inline-block; color:#333;}
		.logged-in-except-otsukaid .otsukaid-header .login-user span {
			display:inline-block; text-align:left; }
		.logged-in-except-otsukaid .otsukaid-header .login-user span.company {
			font-size:9px; line-height:1em;}
			.logged-in-except-otsukaid .otsukaid-header .login-user span.company:before{
				display:inline-block; content:"";
				width:14px; height:14px;
				margin:-1px 3px 0 0;
				background:url(/common-otsukaid/img/icon-cs-other-sp.png) 0 center no-repeat;
				background-size:14px auto; vertical-align:middle;}
		.logged-in-except-otsukaid .otsukaid-header .login-user span.name {
			font-size:11px; line-height:1em; margin:0 0 0 8px;}

/* **********************************************************************************
	共通フッター（スマホのみ）
********************************************************************************** */

.otsukaid-footer {
	margin: 0; padding: 10px 0; width: 100%; background: #f9f6f5;
	border-top: 1px solid #ddd; font-size: 10px; line-height: 1em;}

/* 共通フッター ログアウトボタン */
.otsukaid-footer .otsukaid-button-logout {
	display:inline-block;margin: 0; text-align: center;}
	.otsukaid-footer .otsukaid-button-logout a {
		display:block; padding:3px 7px 3px 23px;
		border:1px solid #ddd; border-radius: 12px;
		background:url(/common-otsukaid/img/cs-mypage-icon-logout-sp.png) 4px center #fff no-repeat;
		background-size:11px auto;
		font-size:11px; line-height:1.4; color:#333;
		-webkit-box-shadow:3px 3px 5px 0 rgba(4,0,0,0.15);
		box-shadow:3px 3px 5px 0 rgba(4,0,0,0.15);}

/* **********************************************************************************
	個別対応
********************************************************************************** */

/* リセット */
.otsukaid-header .otsukaid-header-container{ width:100%; padding:0;}

/* **********************************************************************************
	スライドメニュー
********************************************************************************** */

body.open-menu .otsukaid-header {
	right:calc( 100% - 20px);}
body.open-menu:before {
	right:calc( 100% - 20px);}

#smart-menu { top:0;}

	/* スライドメニュー ログアウトボタン */
	#smart-menu .smart-menu-button-logout {
		display:block; padding:10px 0 0 0; text-align:center;}
		#smart-menu .smart-menu-button-logout a {
			display:block; margin:10px 50px 0;
			padding:5px 15px; border-radius:5px; border:1px solid #ddd;
			background:url(/common-otsukaid/img/cs-mypage-icon-logout-sp.png) 4px center #fff no-repeat;
			background-size:11px auto;
			color:#333; font-size:16px; line-height:1.5;
			text-align:center; cursor:pointer; }

}