@charset "utf-8";

/* CSS Document */

/* ======================================================
	[object]
	@import"../css/test_line.css";
	------------------------------------------------------
	min-width　→　○px以上だと??という設定にする
	max-width　→　○px以下だと??という設定にする
====================================================== */

/* ======================================================
	logo
------------------------------------------------------ */
.Logo
{
	display: block;
}

.Logo a
{
	display: block;
}

.Logo>a>span
{
	display: inline-block;
	vertical-align: middle;
}
.Logo .Img {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	z-index: 5;
}

.Logo .Img img {
	display: block;
	width: initial;
	min-height: 3em;
	max-height: 5em;
}
/*
	display: inline-block;
	width: auto;
	max-width: 9.5em;
*/

.Logo .Img .SiteMark img
{
}

.Logo .Img .SiteName img
{
}

.Logo .Txt
{
	display: inline-block;
	font-weight: bold;
	font-size: 0.8em;
}

.Logo .Txt .title
{
	display: inline-block;
	vertical-align: middle;
	letter-spacing: normal;
}

.Header .Logo
{
	text-align: left;
	letter-spacing: normal;
}

.Header .Logo>.Wrap
{
}

.Header .Logo a
{
}

.Header .Logo a>span
{
	display: block;
}

.Header .Logo .title_head
{
}

.Header .Logo .title
{
	font-size: 1.2em;
	line-height: 1;
}

.Footer .Logo
{
	line-height: 0;
}

.Footer .Logo a
{
	margin: auto;
}

.Footer .Logo .Img {
	margin-bottom: 0;
}

.Footer .Logo .Img img {
}

/* キャッチコピー */
.Catch
{
	font-size: 0.8em;
	display: block;
	vertical-align: middle;
}

.Catch br
{
}

.Catch.Prev
{
}

.Catch.After
{
}

.Header .Catch.After
{
}

/* ======================================================
	======================================================
	======================================================
	======================================================
	======================================================
	======================================================
====================================================== */




/* ======================================================
	<div><section>
------------------------------------------------------ */
/*
:is(section, .section)
*/
section,
.section
/*
article
*/
{
}
/*
	padding-top: 5em;
	padding-bottom: 5em;
*/

:is(section, .section):nth-of-type(odd)
{
	padding-top: 5em;
	padding-bottom: 5em;
}

:is(section, .section):nth-of-type(even)
{
	padding-top: 5em;
	padding-bottom: 5em;
}

section:first-child,
.section:first-child
/*
:is(section, .section):first-child
*/
{
}
/*
	margin-top: -5em;
*/

section:last-child,
.section:last-child
{
}


:is(section, .section):not(:first-child)
/*,
section:not(:first-child),
.section:not(:first-child)
article
*/
{
}

:is(section, .section):not(:last-child)
/*,
section:not(:last-child),
.section:not(:last-child)
article
*/
{
}

:is(section, .section, article)>.Wrap
/*
section>.Wrap,
.section>.Wrap,
article>.Wrap
*/
{
}


:is(section, .section, article)>:is(h2, div):first-child
/*
section>h2:first-child,
section>div>h2:first-child,
.section>h2:first-child,
.section>div>h2:first-child,
article>h2:first-child,
article>div>h2:first-child,
.head h2,
.Entry h2
*/
{
}

/* 囲み・lead */
.lead
{
	font-size: 1.2em;
	text-align: center;
	margin-top: 3em;
	margin-bottom: 3em;
}

/*
	margin-bottom: 1em;
	font-weight: bold;
*/

.lead div:last-child
{
	margin-bottom: 0;
}

.Note
{
	margin-left: 2em;
}

/* 背景 */
.BG
{
	padding: 2em;
	margin-top: 3em;
	margin-bottom: 3em;
}

/* 円で囲む */
.Circle
{
	padding: 1em;
	border-radius: 100em;
	display: inline-block;
}

/* ※印 */
.kome
{
 padding-left: calc(1.15em * 1);
 text-indent: calc(0em - (1.15em * 1));
	text-align: left;
	display: inline-block;
	vertical-align: middle;
}

.kome *
{
	padding-left: 0em;
	text-indent: -0em;
}

.kome2
{
 padding-left: calc(1.15em * 2);
 text-indent: calc(0em - (1.15em * 2));
}

.kome3
{
 padding-left: calc(1.15em * 3);
 text-indent: calc(0em - (1.15em * 3));
}

.kome4
{
 padding-left: calc(1.15em * 4);
 text-indent: calc(0em - (1.15em * 4));
}

small.kome,
span.kome
{
}

/*
	display: block;
*/

.kome ol,
.kome ul
{
	padding-left: 0em;
	text-indent: -0em;
}

/* ======================================================
	ベタでフキダシ */
.Balloon
{
	display: inline-table;
	text-align: center;
	line-height: 1.2;
	margin: auto;
	border-radius: 100%;
	letter-spacing: normal;
}

.Balloon b
{
	color: rgba(255,255,255,1.0);
	padding: 0.5em;
	display: table-cell;
	vertical-align: middle;
}

.Balloon:before
{
	content: '';
	position: absolute;
	width: 1em;
	height: 1em;
	border-width: 1em 1.5em 1em 0;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
}

.Balloon.L
{
}

.Balloon.R
{
}

.Balloon.L:before,
.Balloon.R:before
{
	top: calc((100% - 1.5em) / 2);
}

.Balloon.L:before
{
	left: -0.75em;
}

.Balloon.R:before
{
	right: -0.75em;
	transform: rotate(180deg);
}

.Balloon.T
{
}

.Balloon.B
{
}

.Balloon.T:before,
.Balloon.B:before
{
	left: calc((100% - 1em) / 2);
	right: calc((100% - 1em) / 2);
}

.Balloon.T:before
{
	top: -0.75em;
}

.Balloon.B:before
{
	bottom: -0.75em;
}

.Balloon.outline
{
}

.Balloon.outline:before
{
	border-width: 3px;
	border-color: inherit;
	width: 2em;
	height: 2em;
	transform: rotate(45deg);
	z-index: 2;
	background-color: rgba(255,255,255,1.0);
}

.Balloon.outline.L:before
{
	border-top-color: transparent;
	border-right-color: transparent;
}

.Balloon.outline.R:before
{
	border-bottom-color: transparent;
	border-left-color: transparent;
}

.Balloon.outline.T:before
{
	border-bottom-color: transparent;
	border-right-color: transparent;
}

.Balloon.outline.B:before
{
	border-top-color: transparent;
	border-left-color: transparent;
}

/*
.Balloon.outline:before
	{
	content: "";
	position: absolute;
	top: -3px;
	left: -3px;
	bottom: -3px;
	width: 3px;
	background: linear-gradient(to bottom, #fff calc(50% - 11px), transparent calc(50% - 11px), transparent calc(50% + 11px), #fff calc(50% + 11px));
	border-width: 0;
}
.Balloon.outline:after
	{
	content: "";
	position: absolute;
	top: 50%;
	left: -8px;
	height: 16px;
	width: 16px;
	border-bottom: 3px solid red;
	border-left: 3px solid red;
	transform: rotate(45deg);
	transform-origin: top right;
}
*/





/* ------------------------------------------------------
	線でフキダシ 
.BalloonL,
.BalloonR
	{
}
.BalloonR
	{
}
.BalloonL:after,
.BalloonL:before,
.BalloonR:after,
.BalloonR:before
	{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border: solid transparent;
}
.BalloonL:after,
.BalloonR:after
	{
    border-width: 8px;
    top: 10px;
}
.BalloonL:before,
.BalloonR:before
	{
    border-width: 10px;
    top: 8px;
}

.BalloonL:after,
.BalloonL:before
	{
	right: 100%;
}
.BalloonL:after
	{
	border-right-color: rgba(255,255,255,1.0);
}
.BalloonL:before
	{
	border-right-color: #ccc;
}

.BalloonR:after,
.BalloonR:before
	{
	left: 100%;
}
.BalloonR:after
	{
	border-left-color: rgba(255,255,255,1.0);
}
.BalloonR:before
	{
	border-left-color: #ccc;
}
*/



/* ======================================================
	爆弾
------------------------------------------------------ */
.Bomb
{
	display: block;
	display: inline-table;
	text-align: center;
	letter-spacing: normal;
	text-indent: 0;
	color: rgba(255,255,255,1.0);
	padding: 0;
	margin: 0;
	line-height: 0;
	width: 5em;
	height: 5em;
	transform: rotate(-10deg);
}

/*
*/

.Bomb>b
{
	display: block;
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}

.Bomb b
{
	font-weight: inherit;
}

.Bomb:before,
.Bomb b:before
{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.Bomb:before
{
	transform: rotate(30deg);
}

.Bomb>b:before
{
	transform: rotate(60deg);
}

.Bomb span
{
	display: inline-block;
	width: 100%;
	line-height: 1.2;
}

.BombC2
{
	width: 2em;
	height: 2em;
}

/* ======================================================
	new
------------------------------------------------------ */
.NewMark
{
	position: absolute;
	top: -1.5em;
	left: 0;
	font-size: 0.8em;
	padding: 0.3em 0.5em;
	line-height: 1;
	letter-spacing: normal;
}

/*
.NewMark
	{
	letter-spacing: normal;
	color: rgba(255,255,255,1.0);
	font-size: 0.8em;
	transform: rotate(-10deg);
}
.NewMark b,
.NewMark b:before,
.NewMark b:after
	{
	display: block;
	width: 1.2em;
	height: 1.2em;
}
.NewMark b
	{
	position: relative;
	text-align: center;
	transform: rotate(-30deg);
	font-weight: inherit;
}
.NewMark b:before
	{
	content: "";
	position: absolute;
	transform: rotate(30deg);
	z-index: 0;
}
.NewMark b:after
	{
	content: "N";
	position: absolute;
	transform: rotate(60deg);
	z-index: 1;
}
*/



/* ======================================================
	new ribbon　肩に掛ける
	------------------------------------------------------
	http://webrocketsmagazine.com/entry/20120224/css3-image-effects.html#ribbon
------------------------------------------------------ */
.Ribbon
{
}

.Ribbon>.Wrap
{
	overflow: hidden;
}

/*
	position: relative;
*/

.Ribbon>.Wrap:after
{
	font-size: 1em;
	content: "NEW";	/* 表示するテキスト */
	display: inline-block;
	position: absolute;
	top: 0.25em;
	left: -3em;
	width: 10em;
	height: auto;
	text-indent: 0;
	padding: 0.25em 0 0.25em;
	background-color: rgba(217,66,54,0.9);
	background-position: right -75px;
	background-repeat: no-repeat;
	border-width: 3px;
	border-style: double;
	border-color: rgba(255,255,255,0.5);
	text-align: center;
	color: #fff;
	line-height: 1;
	letter-spacing: normal;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	z-index: 1;
}

/*
	font-size: 0.9em;
	box-shadow: 0 1px 0px rgba(62,63,31,0.5);
*/

/* ======================================================
	ribbon　折り返し2　影付き
	https://www.granfairs.com/blog/staff/use-triangle-with-css
------------------------------------------------------ */
.ribbon_shadow
{
	display: inline-block;
	position: relative;
	width: calc(100% - 10px);
	background: #6aa7cd;
}

.ribbon_shadow:before,
.ribbon_shadow:after
{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
}

.ribbon_shadow:before
{
	right: 0;
	bottom: -10px;
	border-color: transparent;
	border-left-color: #3a759a;
	border-width: 0 0 1em 1em;
}

.ribbon_shadow:after
{
	left: calc(100% - 1em);
	bottom: -10px;
	width: 2.5em;
	z-index: -2;
	border-width: 1.25em 1em;
	border-right-color: transparent;
}

/* ======================================================
	ribbon　端カット(画像)
------------------------------------------------------ */
.ribbon_img
{
	display: inline-block;
	position: relative;
	width: 100%;
}

.ribbon_img:before,
.ribbon_img:after
{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
}

.ribbon_img:before
{
 top: calc(100% - (1.75em * 0) - 1px);
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/ribbon_cut10.svg)
}

/*
	z-index: -2;
	top: calc(100% - (1.75em * 1.5));
	border-width: 1.75em 1.75em;
	border-bottom-color: transparent;
	border-top-color: transparent;
	transform: rotate(90deg);
*/

.ribbon_img:after
{
}

/* ======================================================
	点滅
------------------------------------------------------ */
.blinking
{
	-webkit-animation: blink 1.0s ease-in-out infinite alternate;
	-moz-animation: blink 1.0s ease-in-out infinite alternate;
	animation: blink 1.0s ease-in-out infinite alternate;
}
/* パキっと */
@-webkit-keyframes blink {
 0% {
 opacity: 0;
}
 49.9% {
 opacity: 0;
}
 50% {
 opacity: 1;
}
 100% {
 opacity: 1;
}
}
@-moz-keyframes blink {
 0% {
 opacity: 0;
}
 49.9% {
 opacity: 0;
}
 50% {
 opacity: 1;
}
 100% {
 opacity: 1;
}
}
@keyframes blink {
 0% {
 opacity: 0;
}
 49.9% {
 opacity: 0;
}
 50% {
 opacity: 1;
}
 100% {
 opacity: 1;
}
}

/* ふわっと
@-webkit-keyframes blink
	{
	0% {opacity:0;}
	100% {opacity:1;}
}
@-moz-keyframes blink
	{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes blink
	{
	0% {opacity:0;}
	100% {opacity:1;}
}
*/




/* ======================================================
	流れ
------------------------------------------------------ */
.Step,
.Step dt
{
	text-align: inherit;
}

.Step:first-child,
.Step dt:first-child
{
	margin-top: 0em;
}

.Step dd
{
	margin-left: 0;
}

.Step ol
{
	list-style: none;
}

.Step ol>li
{
	margin-bottom: 0;
}

.Step:not(.Column) ol
{
	margin-left: 0;
}

.Step:not(.Flex) ol>li
{
	margin-top: 0;
}

.Step>ol>li ul
{
	margin-top: 0;
	text-align: left;
}

.Step .No,
.Step .Arrow
{
	text-align: center;
	font-weight: inherit;
}

.Step .No
{
	font-size: 1.5em;
	display: table;
	width: 4em;
	height: 4em;
	line-height: 1;
	font-weight: normal;
	letter-spacing: normal;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/*
	width: 100%;
	width: 5em;
	height: 2.5em;
	line-height: 2.5em;
*/

.Step .No>*
{
	display: table-cell;
	vertical-align: middle;
}

.Step .No>*>*
{
	display: block;
}

.Step .head .No:before
{
}

.Step .No:after
{
	content: "";
}

.Step .Arrow
{
	font-size: 3em;
	display: block;
	position: absolute;
 top: calc(1em + (0.5em * 0.75));
	left: 0.5em;
 width: calc(1em * 1);
 height: calc(1em * 1);
	margin: 0 auto;
	text-align: left;
	line-height: 1;
	transform: rotate(45deg);
}

/*
	margin-left: calc((1em * 1) * 2.5 / 3.5);
	margin-left: 0em;
	margin-right: auto;
*/

.Step .head .title
{
	background: none;
	margin-top: 0;
	margin-bottom: 0;
}

/*
	font-size: 1.5em;
	margin-bottom: 0;
	font-weight: normal;
*/

.Step .head .title .Txt
{
	font-size: 1.5em;
}

/*
	display: block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	display: table-cell;
*/

.Step .main .Txt
{
	display: inline-block;
	text-align: left;
}

.Step:not(.Flex) .main
{
	margin-left: 7em;
 margin-left: calc(3em * 3);
	text-align: center;
}

.Step a
{
}

.Step .Img
{
}

.Step .Img img
{
	display: block;
	width: 100%;
}

/* ======================================================
	開け閉め
------------------------------------------------------ */
.Change
{
	border-bottom-width: 1px;
	text-align: left;
}

.Sitemap .Change
{
	border-bottom-width: 0;
}

.Change .switch
{
	display: none;
}

.Change .Btn
{
	cursor: pointer;
	color: inherit;
	display: block;
	margin-right: 0;
}

.Change .Btn>span
{
}

.Change label.Btn>.title
{
	display: block;
	padding: 0;
	padding-left: 2em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.Change .title>b
{
	display: inline-block;
	vertical-align: middle;
}

.Change .title .Mark
{
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	top: 0.25em;
	left: 0em;
	width: 1.5em;
	height: 1.5em;
	border-radius: 100em;
	margin-top: -0.25em;
	opacity: 0.75;
}

.Change .title .Mark:before,
.Change .title .Mark:after
{
	content: "";
	display: block;
	width: 50%;
	height: 50%;
}

.Change .title .Mark:before
{
	border-width: 0 1px 1px 0;
	margin-bottom: -1px;
	margin-left: 1px;
}

.Change .title .Mark:after
{
	border-width: 1px 0 0 1px;
	margin-left: auto;
	margin-top: -1px;
	margin-right: 1px;
}

.Change .detail
{
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.Change .switch:checked ~ .detail
{
	height: auto;
	opacity: 1;
	margin-top: 1em;
	margin-bottom: 1em;
}

/*
.Change
	{
	display: flex;
	flex-wrap: wrap;
}
.Change .switch
	{
	display: none;
}
.Change .Btn
	{
	order: -1;
}
.Change .Btn .switch_btn
	{
	cursor: pointer;
	color: inherit;
	display: block;
	min-width: 12em;
	border-width: 1px;
	padding: 0.25em 1em;
	margin-right: -1px;
	margin-bottom: -1px;
}
.Change .detail
	{
	width: 100%;
	display: none;
	border-width: 1px;
}
.Change .switch:checked+.Btn
	{
	background-color: rgba(255,255,255,1.0);
}
.Change .switch:checked+.Btn .switch_btn
	{
	border-bottom-color: rgba(255,255,255,1.0);
}
.Change .switch:checked+.Btn+.detail
	{
	 display: block;
}

/* ボタンを縦に[200619]未決 /
.Change.Tate
	{
	height: 100%;
	min-height: 300px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}
.Change.Tate>div
	{
}
.Change.Tate .Btn
	{
	white-space: nowrap;
	z-index: 1;
	float: left;
	width: 25%;
}
.Change.Tate .detail
	{
	float: right;
}
.Change.Tate .detail>div
	{
	display: inline;
}
/* アクティブなタブ /
.Change.Tate .switch:checked+.Btn
	{
}
.Change.Tate .switch:checked+.Btn+.detail
	{
	width: calc(100% - 26%);/* - ボタン幅 /
	height: 100%;
	padding: 15px;
	border-width: 1px;
	display:block;
}



*/

/* ======================================================
	Google 検索BOX
------------------------------------------------------ */
.SiteSearch
{
	width: 12em;
}

.SiteSearch div
{
	padding: 0;
	background: none;
	border-width: 0;
}

.SiteSearch form,
.SiteSearch form[class],
.SiteSearch table,
.SiteSearch table[class]
{
	margin: 0;
}

.SiteSearch table,
.SiteSearch table[class]
{
}

.SiteSearch td,
.SiteSearch td[class]
{
	padding: 0;
}

.SiteSearch input
{
	border-radius: 0em;
 min-height: calc(16px * 1.75);
}

.SiteSearch td[class].gsc-input
{
	padding: 0;
}

.SiteSearch .gsc-input-box
{
	border-width: 1px;
}

.SiteSearch button,
.SiteSearch button[class]
{
	width: 100%;
 min-height: calc(16px * 1.75);
	margin: 0;
 padding: 0 calc(16px * 0.5);
	border-radius: 0em;
}

/*
	border-width: 1px;
	background: none;
*/



.SiteSearch .gsc-results-wrapper-overlay
{
	background: rgba(255,255,255,1.0);
	padding: 2em;
	text-align: left;
}

/*[191114]仕様が変わった...
.SiteSearch	{
	vertical-align: middle;
	border-radius: 0em;
	font-size: 0.8em;
	width: 15em;
}
.SiteSearch input,
.SiteSearch button	{
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	height: 2em;
	line-height: 2em;
	padding: 0;
	border-width: 1px;
	margin: 0;
	border-radius: 0em;
}

.SiteSearch>.Wrap	{ }
.SiteSearch>.Wrap table,
.SiteSearch>.Wrap th,
.SiteSearch>.Wrap td	{
	margin: 0;
	padding: 0;
	border-width: 0;
}
.SiteSearch>.Wrap table	{
	width: 100%;
}

.SiteSearch .Text,
.SiteSearch .Btn	{
}

.SiteSearch .Text	{
	text-align: left;
}
.SiteSearch .Text>.Wrap	{
}

.SiteSearch .Text input[type="text"]	{
}
.SiteSearch .Text select	{
	height: 2em;
}

.SiteSearch .Btn	{
	width: 2em;
	text-align: right;
	color: rgba(255,255,255,1.0);
}
.SiteSearch .Btn>.Wrap	{
}
.SiteSearch .Btn button	{
	background: transparent;
	border-width: 0;
}
.SiteSearch .Btn button>span	{
	display: inline-block;
	line-height: inherit;
}
*/








/* ======================================================
	商品検索BOX
------------------------------------------------------ */
.SearchBox
{
	letter-spacing: normal;
}

.SearchBox>.Wrap
{
}

.SearchBox form
{
	display: table;
	width: 100%;
}

.SearchBox form>div
{
	font-size: 0.8em;
	display: table-cell;
}

.SearchBox form>div>.Wrap
{
}

.SearchBox select
{
	width: 100%;
}

.SearchBox input
{
	background: transparent;
}

/*.SearchBox input[name="keyword"]	{*/
.SearchBox .Txt
{
 width: calc((100% - (8em + 0.25em)) * 0.95);
	margin: 0;
	vertical-align: middle;
	border-bottom-width: 3px;
	border-bottom-width: 0;
	background: none;
	background-color: rgba(255,255,255,1.0);
}

/*
	display: inline-block;
*/

.SearchBox .Txt>.Wrap
{
	display: table;
	width: 100%;
	height: 2.25em;
}

.SearchBox .Txt>.Wrap>div
{
	display: table-cell;
	vertical-align: middle;
	line-height: 1;
}

/*
.SearchBox .Txt:before
	{
	content: "商品検索";
	display: block;
	position: absolute;
	left: 0;
	z-index: -1;
}
*/

.SearchBox .Txt .title
{
	width: 4.5em;
	text-align: center;
	white-space: normal;
	font-weight: bold;
}

/*.SearchBox input[name="keyword"]	{*/
.SearchBox .keyword
{
	background-color: rgba(255,255,255,1.0);
	border-width: 0;
	border-left-width: 1px;
	border-radius: 0;
	border-left-style: dashed;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}

.SearchBox input
{
	width: 100%;
	height: 100%;
}

.SearchBox input[name="keyword"]
{
}

/*
	width: 100%;
	height: 100%;
	border-width: 0;
*/

.SearchBox input[value$="検索"]
{
	width: 3em;
	border-width: 0;
	border-radius: 0;
	padding: 0 0.75em;
}

/*.SearchBox input[value$="検索"]	{*/
.SearchBox .Btn
{
	min-width: initial;
	width: 2em;
	padding: 0em;
	vertical-align: middle;
}

/*
	display: inline-block;
*/

.Header .SearchBox
{
	 width: calc(10em + (8em + 0.25em));
	text-align: left;
	margin-left: auto;
	margin-right: 0;
	margin-top: 0.5em;
	border-width: 1px;
}

#Header .SearchBox>.Wrap
{
}

.GlobalMenu .SearchBox
{
	display: table-cell;
	border-width: 0;
	vertical-align: middle;
}

.GlobalMenu .SearchBox form
{
	border-width: 1px;
}

.GlobalMenu .SearchBox .Txt
{
}

.GlobalMenu .SearchBox input[name="keyword"]
{
}

.Header .SearchBox input[value$="検索"]
{
}

/* ======================================================
	翻訳
------------------------------------------------------ */
.Translation
{
	width: 23px;
	width: 1.53333em;
	font-weight: normal;
	cursor: pointer;
}

.Translation a
{
}

.Translation .head
{
}

.Translation .head .main
{
	position: absolute;
	top: -1.5em;
	right: calc(100% + 1em);
	width: 11em;
	border-radius: 0.5em;
	letter-spacing: normal;
	text-align: center;
}

.Translation .main:before
{
	content: "▲";
	position: absolute;
 top: calc(2em * 0.95);
 left: calc(100% - (1em / 2));
	width: 1em;
	height: 1em;
	transform: rotate(90deg);
}

.Translation .main>ul
{
	text-align: inherit;
}

.Translation .main>ul>li
{
	display: block;
}

.Translation .main>ul>li:not(:first-child)
{
	border-top-width: 1px;
	border-top-style: dotted;
	border-color: rgba(255,255,255,0.4);
}

.Translation .main a
{
	line-height: 2em;
}

/* :hover */
.Translation .head .main
{
	display: none;
}

.Translation:hover .head .main
{
	display: block;
}

.Translation:hover:before
{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: -2em;
	bottom: -1em;
	width: 16em;
}

/*
	background-color: red;
*/





/* ======================================================
	タブメニュー
------------------------------------------------------ */
.TabMenu
{
	text-align: center;
	letter-spacing: 0;
}

.TabMenu ul
{
	list-style: none;
	width: 100%;
	width : -webkit-calc(100% + 8px);
	width : calc(100% + 1px);
	margin-left: 0;
	border-left-width: 1px;
}

.TabMenu li
{
	display: table;
	float: left;
	width: 25%;
	width : -webkit-calc(25% - 1px);
	width : calc(25% + 1px);
	min-height: 3em;
	text-align: center;
	margin-bottom: 0;
	padding: 1px 1px 0 0;
	background: linear-gradient(-135deg, transparent 0px, #000 0px);
}

.TabMenu li p
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	margin-left: auto;
	margin-top: auto;
	width: 100%;
	height: 100%;
	background: linear-gradient(-135deg, transparent 0px, #fff 0px);
}

/* ベタで右耳 */
li.TabMenuEnd
{
	background: linear-gradient(-135deg, transparent 10px, #000 10px);
}

li.TabMenuEnd p
{
	background: linear-gradient(-135deg, transparent 10px, #fff 10px);
}

/* box */
.TabMenu ul
{
	zoom: 1;
}

.TabMenu:after
{
	content: "";
	display: block;
	clear: both;
}

/*
.TabMenu
	{
}
.TabMenu ul
	{
	margin-left: 0;
}
.TabMenu li
	{
	display: block;
	float: left;
	min-width: 20%;
	text-align: center;
	margin: 0;
	border-width: 2px 2px 0 2px;
	background-image: url(../img/bg_back.png);
	padding: 10px;
}
.TabMenu li img
	{
	vertical-align: middle;
}
.TabMenu li a
	{
	display: block;
}
.TabMenu li.On
	{
	background-image: url(../img/CategoryOn.png);
	background-repeat: repeat-x;
	background-position: left top;
	border-color: #fff;
}
*/








/* ======================================================
	クリップ
------------------------------------------------------ */
.Clip
{
	display: inline-block;
	margin-top: 2em;
	margin-bottom: 2em;
}

.Clip:before
{
	content: "■";
	display: inline-block;
	position: absolute;
	top: -1em;
	left: -0em;
	right: -0em;
	font-size: 1.5em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.OnePoiont
{
	margin-top: 2em;
	margin-bottom: 2em;
	padding: 1em;
	border-width: 1px;
	border-style: dotted;
}

/*
	position: relative;
*/

.OnePoiont:before
{
	font-size: 1.5em;
	content: "Point!";
	display: inline-block;
	position: absolute;
 top: calc(0em - (0.5em + 3px));
	left: 0.5em;
	padding-left: 0.5em;
	background-color: rgba(255,255,255,1.0);
	border-bottom-width: 1px;
	text-align: center;
}

/*
	left: calc(0em - (0.5em + 3px));
*/
/*
.OnePoiont:after
	{
	content: "";
	display: block;
	position: absolute;
	top: calc(0em - (0.5em + 3px));
	left: calc(0em - (1.5em + 3px));
	width: 0.5em;
	height: 0.5em;
	border-radius: 100em;
	border-width: 3px;
}
*/



/* ======================================================
	耳
------------------------------------------------------ */
.DogEar
{
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}

/*
	background-image: url(../img/bg.png);
	border-width: 0 1px 1px 0;
	padding: 1em 3em;
	border-width: 0 1px 1px 0;
	background-color: #fff;
*/

.DogEar::after
{
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	background: rgba(89, 73, 66, .2);
	border: solid 10px;
	border-color: white white transparent transparent;
	border-radius: 0 0 0 3px;
	box-shadow: -2px 2px 1px rgba(0, 0, 0, .1);
}

/* ======================================================
	めくれ
------------------------------------------------------ */
/* 内 */
.EdgeCurl
{
	position: relative;
	padding: 25px;
	margin: 0 auto;
	background-color: rgba(255,255,255,1.0);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/*
	background-image: url(../img/bg_beige.png);
	border-width: 3px;
	border-style: double;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(180, 78, 52, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(180, 78, 52, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(180, 78, 52, 0.1);
*/

/* 外影 */
.EdgeCurl:before,
.EdgeCurl:after
{
	content: ' ';
	position: absolute;
	width: 50%;
	height: 50%;
	background: transparent;
	/* 上用 */
	-webkit-box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.3);
	box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.3);
	z-index: -1;
}

/* 下用 
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
*/

/* 外影・左上 */
.EdgeCurl:before
{
	left: 10px;
	right: auto;
	top: 20px;
	bottom: auto;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}

/* 外影・右上 */
.EdgeCurl:after
{
	left: auto;
	right: 10px;
	top: 20px;
	bottom: auto;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
}

/* 外影・左下 
.EdgeCurl:before
	{
	left: 0;
	right: auto;
	top: auto;
	bottom: 12px;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
}
*/
/* 外影・右下 
.EdgeCurl:after
	{
	left: auto;
	right: 0;
	top: auto;
	bottom: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}
*/








/* ======================================================
	飾り枠
------------------------------------------------------ */
/*section,*/
.Corner
{
	background-color: rgba(255,255,255,0.8);
	border-width: 1px;
	padding: 1px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
}

/*
	background-image: url(../img/wreath.svg);
	background-repeat: no-repeat;
	background-position: center -5em;
*/

.Corner>.Wrap
{
	border-width: 1px;
	border-style: dotted;
	margin: 0;
}

.Corner>.Wrap>.Box
{
	padding: 3em;
}

.Corner:before,
.Corner:after,
.Corner>.Wrap:before,
.Corner>.Wrap:after
{
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background-position: center center;
	background-repeat: repeat;
	background-size: contain;
	opacity: 0.2;
}

.Corner:before
{
	float: left;
	margin-top: -13px;
	margin-left: -13px;
}

.Corner>.Wrap:before
{
	float: right;
	margin-top: -14px;
	margin-right: -14px;
}

.Corner>.Wrap:after
{
	float: right;
	margin-top: -16px;
	margin-right: -14px;
}

.Corner:after
{
	float: left;
	margin-top: -17px;
	margin-left: -13px;
}

.lead.Corner
{
	width: 70%;
}

.lead.Corner>.Wrap>.Box
{
	padding: 2em;
}

.lead.Corner:before
{
	background-image: url(../img/corner_r_a.svg);
}

.lead.Corner>.Wrap:before
{
	background-image: url(../img/corner_r_b.svg);
}

.lead.Corner>.Wrap:after
{
	background-image: url(../img/corner_r_d.svg);
}

.lead.Corner:after
{
	background-image: url(../img/corner_r_c.svg);
}

/* ======================================================
	非表示
------------------------------------------------------ */
.DspNo
{
	display: none;
	width: 0;
	height: 0;
	overflow: hidden;
	border-width: 0;
	margin: 0;
	padding: 0;
	background: none;
}

/* 表示OFF */
.DspOFF
{
	opacity: 0.5;
	background-color: rgba(0,0,0,0.1);
}

/* 表示・変数 */
.DspVar
{
	opacity: 0.5;
	background-color: rgba(0,0,0,0.1);
	display: inline-block;
}

/* ======================================================
	box
------------------------------------------------------ */
.box
{
	zoom: 1;
	margin: 0;
}

.box:after
{
	content: "";
	display: block;
	clear: both;
}