// スタイルシート common

@charset "utf-8";

@import "mixin";

body{
	@include root;
	position: relative;
}

img, video{
	max-width: 100%;
	height: auto;
}

a:hover {
	opacity: .75;
}

$sp_width: 980;
$mp_width: 580;

$zindex_recommend_bgcolor: 1;
$zindex_Topics_container: 2;
$zindex_toscroll: 3;
$zindex_sns: 4;
$zindex_totop: 12;
$zindex_header: 13;
$zindex_headerlogo: 12;
$gnav: 15;
$gnavInner: 16;
$gnavInnerSlideparts: 20;
$zindex_gnavtoggle: 100;




/*============================
#wrapper
============================*/
div#wrapper {
	background-color: $themecolor;
}


/*============================
#header
============================*/

div#header {
	$threshold1: 480;
	div.container {
		@include container(1284, 30);
		padding-top: 33px;
		height: 172px;
		box-sizing: border-box;
		@include maxwidth($threshold1){
			margin: 0 20px;
		}
		div.sns{
			margin-bottom: 33px;
			ul{
				margin-left: auto;
				//width: 226px;
				//width: 326px;
				width: 386px;
				display: flex;
				justify-content: space-between;
				li{
					@include flex_centering;
					a{
						display: block;
						img{
							width:36px;
							&.l {
								width: 110px;
							}
						}
					}
				}
				@include maxwidth(480){
					//width: 260px;
					width: 280px;
					li {
						a {
							img {
								width: 28px;
								&.l {
									width: 85px;
								}
							}
						}
					}
				}
			}
		}
		div.logo{
			position: relative;
			h1{
				text-align: center;
				//position: absolute;
				//top: 0;
				//left: 50%;
				//transform: translateX(-50%);
			    //-webkit-transform: translateX(-50%);
			    //-ms-transform: translateX(-50%);
				//z-index: $zindex_headerlogo;
				@include maxwidth(480){
					text-align:left;
					//left: 0;
					//transform: translateX(0);
				    //-webkit-transform: translateX(0);
				    //-ms-transform: translateX(0);
				}
				a{
					display: inline-block;
					img{}
				}
			}
		}
	}
}

div#mainVisual {
	$threshold1: 1550;
	$threshold2: 1100;
	//body.subpage & {
	//	display:none;
	//}
	div.container {
		@include container(1280, 30);
		padding-bottom: 96px;
		position: relative;
		@include maxwidth(480){
			margin: 0 10px;
		}
		&:after{
			content: "";
			display: inline-block;
			background-image: url(../images/scroll.png);
			background-repeat: no-repeat;
			background-size: 36.5px 64.62px;
			width: 36.5px;
			height: 64.62px;
			position: absolute;
			bottom: -13px;
			right: 0;
			left: 0;
			margin: 0 auto;
			// animation: sdb 2s infinite;
		}
		div.slides {
			position: relative;
			p {
				background-image: url(../images/mainvisual-toppage1.jpg);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				border-radius: 26px;
				width: 100%;
				height: 564px;
				&:after{
					content: "";
					@include absolute_centering;
					background-color: rgba(#000,.2);
					border-radius: 26px;
				}
				@include maxwidth(1280+30+30){
					body.toppage & {
						//background-position: 85% center;
					}
				}
				@include maxwidth($mp_width){
					body.toppage & {
						//background-position: -205px center;
					}
				}
				@include maxwidth(480){
					body.toppage & {
						height: 510px;
					}
				}		
				// img{
				// 	width: 100%; height: 100%; object-fit: cover;
				// }					
				// body.subpage & {
				// 	background-image: url(../images/mainvisual-subpage001.jpg);
				// 	background-repeat: no-repeat;
				// 	background-size: cover;
				// 	background-position: center;
				// 	width: 100%;
				// 	height: 380px;
				// 	img {
				// 		width:100%;
				// 		height:100%;
				// 		object-fit: cover;
				// 	}
				// }
			}
		}
	}
}

// @keyframes sdb{
// 	0%{
// 		transform: translate(0, 0);
// 	}
// 	30%{
// 		transform: translate(0, 10px);
// 	}
// 	60%{
// 		transform: translate(0, 0);
// 	}
// }

div#gnav {
	transform: scale(0);
	position:fixed;
	display: block;
	top:0;
	body.admin-bar & {
		top: 32px;
	}
	bottom:0;
	left:0;
	right:0;
	backdrop-filter: blur(9px);
	background-color: rgba(#000, .85);
	z-index: $gnav;
	body.menu_open & {
		transform: scale(1);
	}
	div.container {
		color: #111;
		position: fixed;
		z-index: $gnavInner;
		right: 0;
		height: 100%;
		background-color: #fff;
		width: 400px;
		padding: 60px 10px 60px;
		box-sizing: border-box;
		transition: all 600ms ease-out;
		overflow: auto;
		-ms-overflow-style: none;
		scrollbar-width:none;
		&::-webkit-scrollbar{
			display: none;
		}
		@include maxwidth($mp_width){
			width: 100%;			
			padding: 50px 5% 60px;
		}
		& > ul{
			@include maxwidth($mp_width){
				max-width: 350px;
				margin: 0 auto;
			}
			& > li{
				position: relative;
				margin: 10px 5px 15px 40px;
				@include f_all(18);
				white-space: nowrap;
				@include maxwidth($mp_width){
					margin-left:10px;
					margin-bottom: 10px;
					@include f_all(16);
				}
				& > a{
					display: block;
					padding: 10px;
					box-sizing: border-box;
					@include maxwidth($mp_width){
						padding: 10px 10px 10px 10%;
					}
					@include maxwidth(400){
						padding: 10px;
					}
					img{
						// max-height: 35px;
						vertical-align: middle;
					}
				}
				&:nth-of-type(1){
					a{
						img{
							display: inline-block;
							margin-top: -3px;
							padding-right: 12px;
						}
					}
				}
				&:last-child{
					margin-bottom: 70px;
				}
				div.nav_child_open{
					position: absolute;
					top: 0;
					//right: 40%;
					right: 20px;
					z-index: $gnavInnerSlideparts;
					transition: all 200ms ease-out;
					transform-origin: center;
					@include maxwidth($mp_width){
						top: -2px;
						//right: 35%;
					}
					@include maxwidth(400){
						//right: 35%;
						right: 0;
					}
					a.nav_child_openWrapper{
						cursor: pointer;
						display: block;
						position: relative;
						width: 40px;
						height: 40px;
						transition: all 200ms ease-out;
						transform-origin: center;
						box-sizing: border-box;
						&:before{
							content: "";
							box-sizing: border-box;
							width: 20px;
						    height: 1px;
						    background-color: #111;
						    position: absolute;
						    top: 50%;
						    left: 50%;
							transform: translate(-50%,-50%);
						    -webkit-transform: translate(-50%,-50%);
						    -ms-transform: translate(-50%,-50%);
						}
						&:after{
						    content: "";
						    box-sizing: border-box;
						    width: 1px;
						    height: 20px;
						    background-color: #111;
						    position: absolute;
						    top: 50%;
						    left: 50%;
							transform: translate(-50%,-50%);
						    -webkit-transform: translate(-50%,-50%);
						    -ms-transform: translate(-50%,-50%);
						    -webkit-transition: all 200ms ease-out;
						    -o-transition: all 200ms ease-out;
						    transition: all 200ms ease-out;
						}
					}
				}
				&.js_openParent.js_fire{
					div.nav_child_open{
						a.nav_child_openWrapper{
							&:after{
							    -webkit-transform: rotate(90deg);
							    -ms-transform: rotate(90deg);
							    transform: rotate(90deg);
							    opacity: 0;
							}
						}
					}
				}
				ul.nav_child{
					//li.nav_child_item{
					& > li{
						margin: 5px 0;
						@include maxwidth($mp_width){
							margin: 8px 0;
						}
						&:last-child{
							margin-bottom: 0;
						}
						a{
							@include f_all(16);
							display: block;
							padding: 10px 20px 10px 70px;
						}
						&.children a {
							display: inline-flex;
							align-items: center;
							&::before{
								content: '';
								display: inline-block;
								width: .8em;
								height: 1px;
								background-color: currentColor;
								margin-right: .5em;
								margin-top: 0.15em;
							}
						}
					}
				}
				&:nth-of-type(3){
					ul.nav_child{
						//li.nav_child_item{
						& > li{
							a{
								img{
									max-height: 34px;
									width: auto;
									@include maxwidth($mp_width){
										max-height: 28px;
									}
								}
							}
						}
					}
				}
			}
			ul.js_openTarget{
				display: none;
			}
		}
	}
}

div#gnavtoggleWrapper {
	$threshold1: 480;
	position: absolute;
	top: 95px;
	left: 0;
	right: 0;
	//width: 100px;
	div.container {
		//@include container(1280, 30);
		@include maxwidth($threshold1){
			margin: 0 20px;
		}
		div#gnavToggle {
			position:absolute;
			right:30px;
			@include maxwidth(480){ right: 20px; }
			width: 50.82px;
			height: 50.82px;
			background-color: $themetextcolor;
			border-radius: 3px;
			margin-left: auto;
			@include maxwidth($threshold1){
				width: 42px;
				height: 42px;
			}
			body.menu_open & {
				width: 50.82px;
				height: 50.82px;
				border-radius: 0;
				position: fixed;
				top: 20px;
				right: 20px;
				z-index: $zindex_gnavtoggle;
				left:auto;
				background-color: transparent;
				@include maxwidth($threshold1){
					width: 42px;
					height: 42px;
				}
			}
			body.subpage &{
				//top: 80px;
			}
			body.subpage.menu_open & {
				top: 20px;
			}
			body.menu_open.admin-bar & {
				top: 52px;
			}
			a {
				display:block;
				font-weight: 800;
				width:100%;
				height:100%;
				position: relative;
				&:hover {opacity: 1;}
				span.btn_line{
					display: inline-block;
					span.b {
						content:'';
						display:block;						
						width:38.6px;
						height: 7px;
						background-color: $themecolor;
						border-radius: 4px;
						position:absolute;
						top:0;right:0;bottom:0;left:0;
						margin:auto;
						body.menu_open & {
							background-color: $themecolor;
							width: 40px;
							height: 5px;
						}
						&.b1 {transition: .25s;transform: translateY(-14px);}
						&.b2 {transition: .35s;}
						&.b3 {transition: .45s;transform: translateY(14px);}
					}
					@include maxwidth($threshold1){
						span.b {
							width: 30px;
							height: 5.3px;
							&.b1 {transform: translateY(-11px);}
							&.b3 {transform: translateY(11px);}
						}
					}
					body.menu_open & {
						span{
							&.b1 {transform: rotateZ(45deg);}
							&.b2 {transform: rotateZ(135deg); filter: opacity(0);}
							&.b3 {transform: rotateZ(135deg);}
						}
					}
					span.open{
						display: none;
					}
				}
			}
		}
	}
  	&.some_scroll{
  		position: fixed;
  		top: 20px;
  		z-index: $zindex_gnavtoggle;
  		@include maxwidth($sp_width){
  			top: 0;
  			right: 0;
  		}
  		div.container {
  			width: auto;
  			position: fixed;
  			top: 20px;
  			body.admin-bar & {
  				top:52px;
  			}
  			right: 20px;
	   		@include maxwidth($sp_width){
	  			top: 0;
	  			right: 0;
	  			margin-right: 0;
	  			margin-left: 0;
	  			body.admin-bar & {
	  				top:32px;
	  			}
	  		}
			div#gnavToggle {
				width: 60px;
				height: 60px;
				background-color: #fff;
				right:0;
				body.menu_open & {
					background-color: transparent;
				}
				@include maxwidth($sp_width){
					width: 70px;
					height: 70px;
					border-radius: 0;
				}
				a {
					display: block;
					span.btn_line{
						span.b {
							height: 5px;
							width: 35px;
							background-color: $themecolor;
							&.b1 {	
									transition: .25s;
									transform: translateY(-18px);
							}
							&.b2 {
								transition: .35s;
								transform: translateY(-7px);
							}
							&.b3 {
								transition: .45s;
								transform: translateY(4px);
							}
						}
						span.open{
							@include flex_centering;
							position: absolute;
							left: 0;
							right: 0;
							bottom: 8px;
							color: $themecolor;
							@include f_all(11);
							body.menu_open & {
								display: none;
							}
						}
						body.menu_open & {
							span{
								&.b1 {transform: rotateZ(45deg);}
								&.b2 {transform: rotateZ(135deg); filter: opacity(0);}
								&.b3 {width:38px;transform: rotateZ(135deg);}
							}
						}
					}
				}
			}
		}
	}
}

div#subpageTopicPath {
	color: $themetextcolor;
	@include f_all(13, "", 20);
	div.container {
		@include container(900, 20);
		padding-top:25px;
		margin-bottom: 12px;
		ul {
			&:after {
				content:"";display:block;width:100%;clear:both;height:0;
			}
			li {
				display:inline;
				//float: left;
				&:before {
					content:'|';
					margin: 0em 1em 0em .65em;
				}
				&:nth-of-type(1){
					&:before {display:none;}
				}
				a {
					img{
						vertical-align: middle;
						padding-right: 13px;
						width: 16px;
					}
				}
			}
		}
	}
	@include maxwidth($sp_width){		
		@include f_all(13);
	}
}

div.heading {
	text-align: center;
	margin-bottom: 61.5px;
	h3{
		//font-family:"小塚ゴシック Pro", "メイリオ", sans-serif;
		//font-family:"Ubuntu", "メイリオ", sans-serif;
		//font-family: "Fira Sans", "メイリオ", sans-serif;
		font-family: "Merriweather Sans", "メイリオ", sans-serif;
		@include f_all(36, "", 79);
		//@include f_all(39, 20, 79);
		//font-weight: 900;
		font-weight: 800;
		display: inline-block;
		box-sizing: border-box;
		width: 360px;
		position: relative;
		&:after{
			content: "";
			display: inline-block;
			width: 139px;
			height: 8px;
			position: absolute;
			bottom: -4px;
			right: 0;
			left: 0;
			margin: 0 auto;
		}
		@include maxwidth(550){
			width: 100%;
			max-width: 360px;
		}
		body.subpage &{
			width: 800px;
			@include maxwidth($sp_width){
				width: 90%;
				max-width: 800px;
			}
		}
	}
	&.green{
		h3{
			color: $themecolor;
			border-bottom: 1px  solid $themecolor;
			&:after{
				background-color: $themecolor;
			}
		}
	}
	&.white{
		h3{
			color: $basecolor;
			border-bottom: 1px  solid $basecolor;
			&:after{
				background-color: $basecolor;
			}
		}
	}
}

div#toppageTopics {
	$threshold1: 1280;
	$threshold2: 1100;
	$threshold3: 550;
	position: relative;
	background: linear-gradient($themecolor 0%, $themecolor 116px, #fff 116px, #fff 100%);
	&:before{
		content: "";
		position: absolute;
		top:0;
		left: 0;
		right: 0;
		margin: auto;
		display: block;
		background-color: $basecolor;
		width: 1280px;
		height: 220px;
		border-radius: 26px;
		@include maxwidth($threshold1){
			width: 100%;
			border-radius: 0;
		}
	}
	div.container {
		@include container(1159, 30);
		top:0;
		left: 0;
		right: 0;
		z-index: $zindex_Topics_container;
		padding-top: 58.5px;
		div.headline{
			ul{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				@include maxwidth($threshold3){
					justify-content: center;
				}
				li{
					flex: 0 1 345px;
					padding-top: 15px;
					padding-bottom: 18.5px;
					background-color: $basecolor;
					border-radius: 26px;
					box-shadow: 0 0 10px rgba(#000,.22);
					margin-bottom: 77px;
					box-sizing: border-box;
					&:nth-of-type(n+4){
						margin-bottom: 0;
					}
					@include maxwidth($threshold1){
						flex: 0 1 30.33%;
						margin: 0 1% 77px;
					}
					@include maxwidth(800){
						flex: 0 1 46%;
						margin: 0 2% 13px;
						&:nth-of-type(4){
							margin-bottom: 13px;
						}
						&:nth-of-type(n+5){
							margin-bottom: 0;
						}
					}
					@include maxwidth($threshold3){
						max-width: 320px;
						flex: 0 1 100%;
						margin: 0 0 23px;
						&:nth-of-type(n+4){
							margin-bottom: 23px;
						}
						&:last-of-type{
							margin-bottom: 0;
						}
					}
					span {
						display:block;
						&.brand{
							margin-left: 27px;
						}
						&.item{
							margin-left: 27px;
							margin-bottom: 16px;
							@include f_all(16, "", 37);
							color: $basetextcolor;
						}
						&.image {
							height: 197px;
							margin-bottom:14px;
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								body.browser-ie & {
									width:100%;
								}
							}
						}
						&.details{
							text-align: center;
							margin-bottom: 20px;
							a{
								@include f_all(12,"",18);
								color: $basecolor;
								display: inline-block;
								background-color: $themecolor;
								padding: 5px 35px;
								border-radius: 14px;
								@include maxwidth($mp_width){
									padding: 5px 35px;
									@include f_all(14);
									border-radius: 100px;
								}
							} 
						}
						@include maxwidth($threshold2){
							&.item{
								@include f_all(12, "", 28);
							}
							&.image {
								height: 153px;
							}
						}
						@include maxwidth($threshold3){
							&.brand{
								margin-left: 15px;
							}
							&.item{
								margin-left: 15px;
								@include f_all(14);
							}
						}
					}
					p.link{
						height: 67px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;						
						span.btn01{
							margin-bottom: 14px;
							text-align: center;
							a{}
						}
						span.btn02{
							text-align: center;
						}
					}
				}
			}
		}
	}
}

div#toppagerecommend {
	$breakpoint_layout: $sp_width+400;
	$threshold1:550;
	$threshold2:450;
	padding-top: 254px;
	padding-bottom: 88px;
	background-color: $accentcolor;
	box-sizing: border-box;
	position: relative;
	top: -166px;
	right: 0;
	left: 0;
	z-index:$zindex_recommend_bgcolor;
	margin-bottom: -166px;
	@include maxwidth($mp_width){
		padding-top: 387px;
		top: -323px;
		margin-bottom: -323px;
	}
	div.container {
		@include container(1280, 30);
		padding: 38px 92px;
		background-color: $basecolor;
		border-radius: 26px;
		box-sizing: border-box;
		@include maxwidth($sp_width){
			padding: 38px 29px  30px;
		}
		@include maxwidth($threshold2){
			margin-right: 20px;
			margin-left: 20px;
		}
		div.heading {
			h3 {
			}
		}
		div.headline {			
			ul {
				li {
					@include maxwidth($threshold1){
						margin-bottom: 25px;
					}
					a {
						display:block;
						@include f_all(20, "", 49);
						@include maxwidth($threshold1){
							@include f_all(20, "", 32);
						}
						@include maxwidth($threshold2){
							@include f_all(18, "", 26);
						}
						&:before{
							content: "◆";
							padding-right: 0.5em;
							display: inline-block;
						}
					}
				}
			}
		}
	}
}



div.informationHeadline {
	$threshold1:1280;
	$threshold2:800;
	$threshold3:550;

	body.subpage & {
		background: $basecolor;
		color:$basetextcolor;
		padding: 120px 0;
	}
	div.container {
		@include container(1151,30);
		padding-top: 48.5px;
		padding-bottom: 67px;
		body.subpage & {
			padding:0;
		}
		@include maxwidth(450){
			margin-right: 20px;
			margin-left: 20px;
		}
		div.heading {
			h3 {
			}
		}
		div.foobar_nav{
			ul{
				//width: 814px;
				margin: 0 auto 66px;
				display: flex;
				//justify-content: space-between;
				justify-content: center;
				flex-wrap:wrap;
				@include maxwidth($threshold2){
					margin-bottom: 36px;
				}
				@include maxwidth($sp_width){
					//margin-bottom: 10px;
				}
				@include maxwidth($mp_width){
					width: 100%;
				}
				@include maxwidth($threshold3){
					margin-bottom: 36px;
				}
				li{
					@include maxwidth($threshold3){
						flex: 1 1 50%;
						&:first-child {
							flex: 1 1 100%;
						}
					}
					a{
						color: $themecolor;
						background-color: $accentcolor;
						@include f_all(12);
						border-radius: 100px;
						display: inline-block;
						padding: 5px 35px;
						margin-left: 7px;
						margin-right: 7px;
						margin-bottom: 14px;
						@include maxwidth($threshold3){
							margin-right: 2px;
							margin-left: 2px;
							margin-bottom: 4px;
							border-radius: 5px;
							display: block;
							padding: 12px 5px;
							@include f_all(14);
							text-align:center;
						}
					}
					&.current{
						a{
							background-color: $basecolor;
							body.subpage & {
								color: $themetextcolor;
								background-color: $themecolor;
							}
						}
					}
				}
			}
		}
		div._productcategory_nav{
			ul{
				li{
					a{
						color: $themecolor;
						background-color: $basecolor;
						body.subpage & {
							color: $themecolor;
							background-color: $accentcolor;
						}
					}
					&.current{
						a{
							color: $basecolor;
							background-color: $themecolor;
							body.subpage & {
								color: $themetextcolor;
								background-color: $themecolor;
							}
						}
					}
				}
								&:after{
					@include maxwidth($threshold3){
						content: "";
						display: block;
						height: 0;
						width: 50%;
					}
				}
			}
		}
		div.informationcategory_nav{
			ul{
				width: 814px;
				margin: 0 auto 66px;
				display: flex;
				justify-content: space-between;
				@include maxwidth($sp_width){
				 	width: 500px;
				 	flex-wrap:wrap;
				 	justify-content: flex-start;
				}
				@include maxwidth($threshold2){
					margin-bottom: 36px;
				}
				@include maxwidth($sp_width){
					margin-bottom: 0;
				}
				@include maxwidth($mp_width){
					width: 100%;
				}
				@include maxwidth($threshold3){
					justify-content: center;
					margin-bottom: 36px;
				}
				li{
					@include maxwidth($sp_width){
						text-align: center;
						margin-right: 14px;
						margin-bottom: 33px;
					}
					@include maxwidth($threshold3){
						flex: 0 1 50%;
						margin-right: 0;
						margin-bottom: 4px;
					}
					a{
						color: $themecolor;
						background-color: $accentcolor;
						@include f_all(12);
						border-radius: 100px;
						display: inline-block;
						padding: 5px 35px;
						@include maxwidth($threshold3){
							margin-right: 2px;
							margin-left: 2px;
							border-radius: 5px;
							display: block;
							padding: 15px 10px;
							@include f_all(13);
						}
					}
					&.current{
						a{
							background-color: $basecolor;
							body.subpage & {
								color: $themetextcolor;
								background-color: $themecolor;
							}
						}
					}
				}
			}
		}
		div.productcategory_nav{
			ul{
				width: 671px;
				margin: 0 auto 66px;
				display: flex;
				justify-content: space-between;
				@include maxwidth($sp_width){
				 	width: 500px;
				 	flex-wrap:wrap;
				 	justify-content: flex-start;
				}
				@include maxwidth($threshold2){
					margin-bottom: 36px;
				}
				@include maxwidth($sp_width){
					margin-bottom: 0;
				}
				@include maxwidth($mp_width){
					width: 100%;
				}
				@include maxwidth($threshold3){
					justify-content: center;
					margin-bottom: 36px;
				}
				li{
					@include maxwidth($sp_width){
						text-align: center;
						margin-right: 14px;
						margin-bottom: 33px;
					}
					@include maxwidth($threshold3){
						flex: 0 1 50%;
						margin-right: 0;
						margin-bottom: 4px;
					}
					a{
						color: $themecolor;
						background-color: $basecolor;
						body.subpage & {
							color: $themecolor;
							background-color: $accentcolor;
						}
						@include f_all(12);
						border-radius: 100px;
						display: inline-block;
						padding: 5px 35px;
						@include maxwidth($threshold3){
							margin-right: 2px;
							margin-left: 2px;
							border-radius: 5px;
							display: block;
							padding: 15px 10px;
							@include f_all(13);
						}
					}
					&.current{
						a{
							color: $basecolor;
							background-color: $themecolor;
							body.subpage & {
								color: $themetextcolor;
								background-color: $themecolor;
							}
						}
					}
					&:nth-of-type(6){
						display: none;
						@include maxwidth($threshold3){
							display: block;
						}
					}
				}
			}
		}
		div.headline {
			ul {
				width: 100%;
				display:flex;
				flex-wrap: wrap;
				justify-content:space-between;
				//margin-bottom: 67px;
				//@include maxwidth($mp-width){
				//	margin-bottom: 36px;
				//}
				@include maxwidth($threshold3){
					justify-content: center;
				}
				li {
					flex: 0 1 33%;
					max-width: 345px;
					height: 345px;
					border-radius: 26px;
					box-shadow: 0 0 10px rgba(#000,.22);
					@include maxwidth($threshold1){
						flex: 0 1 31.33%;
						margin: 0 1% 66px;
					}
					@include maxwidth($threshold2){
						flex: 0 1 46%;
						margin: 0 2% 23px;
						height: 235px;
						&:nth-of-type(4){
							margin-bottom: 23px;
						}
						&:nth-of-type(n+5){
							display: none;
						}
					}
					@include maxwidth($threshold3){
						max-width: 320px;
						flex: 0 1 100%;
						margin: 0 0 10px;
						&:nth-of-type(5){
							margin-bottom: 10px;
						}
						&:last-of-type{
							margin-bottom: 0;
						}
					}
					a {
						display:block;
						width: 100%;
						height: 100%;
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
						border-radius: 26px;
						span {
							display:inline-block;
							&.posttype {
							}
							&.excerpt {
								@include f_all(12, "", 23);
								color:#CFE2E2;
								padding: 11px 18px 10px 28px;
								min-height: 85px;
								width: 100%;
								box-sizing: border-box;
								background-color:rgba(#000,.6);
								@include maxwidth($mp-width){
									padding: 7px 15px 9px;
								}
								@include maxwidth($threshold3){
									@include f_all(13,"", 26);
								}
							}
						}
					}
					//&:nth-of-type(-n+3){
						margin-bottom: 66px;
						@include maxwidth($threshold2){
							margin-bottom: 23px;
						}
					//}
					&.blank{						
						background-image:url(../images/infomation_blankimg02.png);
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;						
					}
					&.blank2{
						height:0;
						margin:0;
					}
				}
			}
			p.noposts {
				text-align:center;
				@include f_all(18);
				padding: 2em .5em;
				border: 1px solid #ccc;
				margin: 0 40px;
			}
		}		
	}
}


div.more{
	text-align: center;
	@include maxwidth($mp-width){
		margin-top: 36px;
	}

	a{
		@include f_all(12);
		display: inline-block;
		background-color:#fff;
		padding: 7px 35px 5px;
		border-radius: 100px;
		color: $themecolor;
		@include maxwidth(450){
			padding: 14px 10px 12px;
			width: 80%;
			@include f_all(14);
		}
	}
}	

div.informationArchive {
	div.container {
		div.heading {
			h3 {
			}
		}
		div.headline {
			ul {
				li {
					a {
						span {
							&.posttype {
								@include f_all(12);
								margin-top: 15px;
								margin-bottom: 86px;
								margin-left: 23px;
								color: $basecolor;
								background-color: $themecolor;
								padding: 5px 35px;
								border-radius: 100px;
								@include maxwidth($mp-width){
									margin-left: 16px;
								}
								@include maxwidth($threshold2){
									margin-bottom: 40px;
								}
								&.noterm {opacity:0;}


								@include f_all(12);
								margin-top: 20px;
								margin-bottom: 74px;
								margin-left: 28px;
								@include maxwidth($sp-width){
									margin-left: 22px;
								}
								@include maxwidth($threshold2){
									margin-top: 14px;
									margin-bottom: 38px;
									margin-left: 13px;
								}
							}
						}
					}
				}
			}
		}		
	}
}

div.productArchive {
	background-color: $accentcolor;
	div.container {
		padding-top: 51.5px;
		padding-bottom: 72px;
		div.heading {
			h3 {
			}
		}
		div.headline {
			ul {
				li {
					//&:nth-of-type(-n+3){
					//	margin-bottom: 66px;
					//	@include maxwidth($threshold2){
					//		margin-bottom: 23px;
					//	}
					//}					
					@include maxwidth($threshold3){
						margin: 0 0 23px;
						&:nth-of-type(5){
							margin-bottom: 23px;
						}
					}
					a {
						span {
							display:inline-block;
							&.posttype {
								// @include f_all(12);
								// margin-top: 20px;
								// margin-bottom: 74px;
								// margin-left: 28px;
								// @include maxwidth($sp-width){
								// 	margin-left: 22px;
								// }
								// @include maxwidth($threshold2){
								// 	margin-top: 14px;
								// 	margin-bottom: 38px;
								// 	margin-left: 13px;
								// }
								color: $basecolor;
								background-color: $themecolor;
								padding: 5px 35px;
								border-radius: 100px;
								@include maxwidth($mp-width){
									margin-left: 16px;
								}
								@include maxwidth($threshold2){
									margin-bottom: 40px;
								}
								&.noterm {opacity:0;}


								@include f_all(12);
								margin-top: 20px;
								margin-bottom: 74px;
								margin-left: 28px;
								@include maxwidth($sp-width){
									margin-left: 22px;
								}
								@include maxwidth($threshold2){
									margin-top: 14px;
									margin-bottom: 38px;
									margin-left: 13px;
								}
							}
							&.excerpt {
								@include maxwidth($mp-width){
									padding: 11px 6px 10px;
								}
							}
						}
					}
				}
			}
		}		
	}
}


div#contentFooter {
}


div#totop {
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: $zindex_totop;
	width: 60px;
	height: 60px;
	background-color: rgba(#000,.6);
	border-radius: 100px;
	display: block;
	a{
		width: 60px;
		height: 60px;
		display: block;
		position: relative;	
		&:before{ 
			content: "";
			display: block;
			position: absolute;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
			transform-origin: left bottom;
			width:20px;
			height:20px;
			border-radius: 3px;
			border-right:4px solid #fff;
			border-top:4px solid #fff;
			-webkit-transform:rotate(-45deg);
			transform:rotate(-45deg);
		}
		&:hover {
			opacity:1;
		}
	}
	@include maxwidth($sp_width){
		width: 60px;
		height: 60px;
		right: 15px;
		bottom: 15px;
		a{
			width: 60px;
			height: 60px;
			&:before{
				width:15px;
				height:15px;
				border-right: 4px solid $accentcolor;
				border-top: 4px solid $accentcolor;	
			}
		}
	}
}

footer {}


div#footer {
	$threshold1:550;
	background-color: $basecolor;
	div.container {		
		color: $themecolor;
		div.item1{
			@include container(876, 20);
			padding: 136.3px 0 90px;
			@include maxwidth($sp_width){
				padding-top: 76.3px;
			}
			div#footerlogo {
				//margin-bottom: 48px;
				margin-bottom: 32px;
				text-align: center;			
				a {
					display: inline-block;
					img {
						width: 335.46px;
						@include maxwidth(900){
							width: 240px;
						}
					}
				}				
			}

			ul#footerSns{
				width: 326px;
				margin: 0 auto 46px;
				display: flex;
				justify-content: space-between;
				li{
					@include flex_centering;
					a{
						display: block;
						img{}
					}
				}
				@include maxwidth(420){
					width:260px;
					li {
						a {
							img {
								width: 24px;
							}
						}
						&:last-child {
							a img {
								width: 80px;
							}
						}
					}
				}
			}

			div#footerMenu {
				div.menuArea {
					@include f_all(12);
					@include maxwidth($threshold1){
						@include f_all(14);
					}
					&:nth-of-type(1){				
						text-align: center;
						margin-bottom: 61px;
						@include maxwidth($threshold1){
							margin-bottom: 30px;
						}
						a {
							padding: 5.6px 35px 6px 30px;
							color: $basecolor;
							background-color: $themecolor;
							border: 1px solid $themecolor;
							border-radius: 100px;
							display: inline-block;
							@include maxwidth($threshold1){
									padding: 15px 10px;
									border-radius: 5px;
									width: 98%;
									box-sizing: border-box;
								}
							img {
								width: 16px;
								padding-right:13px;
								margin-bottom: -2px;
							}
						}
					}				
					&:nth-of-type(2){
						ul {
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							li{
								text-align: center;
								a{
									display: inline-block;
									box-sizing: border-box;
								}
							}
							&:nth-of-type(1)
							, &:nth-of-type(2){
								margin-bottom: 60px;
								@include maxwidth($sp_width){
									width: 430px;
									margin: 0 auto 36px;
								}
								@include maxwidth($threshold1){
									width: 100%;
								}
								li{
									margin: 0 6px;
									@include maxwidth($threshold1){
										margin: 0;
									}
									a{
										padding: 5px 35px 5px 30px;
										border-radius: 100px;
										color: $themecolor;
										background-color: $basecolor;
										border: 1px solid $themecolor;
										@include maxwidth($threshold1){
											display: block;
											border-radius: 5px;
											padding: 15px 10px;
											border: none;
											background-color: $accentcolor;
										}
									}
									&:nth-of-type(1){
										@include maxwidth($sp_width){
											flex: 0 1 100%;
											margin-bottom: 36px;
										}
										@include maxwidth($threshold1){
											margin-bottom: 0.5em;
											flex: 0 1 98%;
										}
										a{
											color: $basecolor;
											background-color: $themecolor;
										}
									}
									&:nth-of-type(n+2){
										@include maxwidth($sp_width){
											margin-bottom: 36px;
										}
										@include maxwidth($threshold1){
											flex: 0 1 49%;
											margin-bottom: 3px;
										}
									}
									&:nth-of-type(2),&:nth-of-type(4),&:nth-of-type(6){
										@include maxwidth($threshold1){
											margin-right: 1.5px;
										}
									}
									&:nth-of-type(3),&:nth-of-type(5),&:nth-of-type(7){
										@include maxwidth($threshold1){
											margin-left: 1.5px;
										}
									}
									&:nth-of-type(6),&:nth-of-type(7){
										@include maxwidth($sp_width){
											margin-bottom: 0;
										}
									}
									&:nth-of-type(7){
										display: none;
										@include maxwidth($threshold1){
											display: block;
										}
									}
								}
							}
							// &:nth-of-type(2){
							// 	margin-bottom: 89px;
							// 	@include maxwidth($sp_width){
							// 		width: 307px;
							// 		margin: 0 auto 56px;
							// 	}
							// 	@include maxwidth($threshold1){
							// 		width: 100%;
							// 	}
							// 	li{
							// 		margin: 0 14.5px;
							// 		@include maxwidth($sp_width){
							// 			margin: 0;
							// 		}
							// 		@include flex_centering;
							// 		a{							
							// 			box-sizing: border-box;
							// 			img{
							// 				vertical-align: middle;
							// 			}
							// 		}
							// 		&:nth-of-type(1){
							// 			@include maxwidth($sp_width){
							// 				flex: 0 1 100%;
							// 				margin-bottom: 36px;
							// 			}
							// 			@include maxwidth($threshold1){
							// 				margin-bottom: 30px;
							// 				flex: 0 1 98%;
							// 			}
							// 			a{
							// 				padding: 5px 35px 5px 30px;
							// 				border-radius: 100px;
							// 				color: $basecolor;
							// 				background-color: $themecolor;
							// 				border: 1px solid $themecolor;
							// 				@include maxwidth($threshold1){
							// 					display: block;
							// 					width: 100%;
							// 					border-radius: 5px;
							// 					padding: 15px 10px;
							// 					border: none;
							// 				}
							// 			}
							// 		}
							// 		&:nth-of-type(n+2){
							// 			@include maxwidth($sp_width){
							// 				flex: 0 1 50%;
							// 				margin-bottom: 36px;
							// 			}
							// 		}
							// 		&:nth-of-type(4),&:nth-of-type(5){
							// 			@include maxwidth($sp_width){
							// 				margin-bottom: 0;
							// 			}
							// 		}
							// 	}
							// }
							&:nth-of-type(3){
								margin-bottom: 45px;
								li{
									a{
										border-radius: 100px;
										padding: 5px 35px 5px 30px;
										color: $themecolor;
										background-color: $basecolor;
										border: 1px solid $themecolor;
										@include maxwidth($threshold1){
											display: block;
											width: 100%;
											border-radius: 5px;
											padding: 15px 10px;
											border: none;
											background-color: $accentcolor;
											box-sizing: border-box;
										}
									}
									&:nth-of-type(1){
										@include maxwidth($sp_width){
											flex: 0 1 100%;
											margin-bottom: 36px;
										}
										@include maxwidth($threshold1){
											margin-bottom: 3px;
											flex: 0 1 98%;
										}
									}
									&:nth-of-type(n+2){
										margin: 0 9px;
									}
									&:nth-of-type(2){
										@include maxwidth($threshold1){
											flex: 0 1 49%;
											margin-right: 1.5px;
											margin-left: 0;
										}
									}
									&:nth-of-type(3){
										@include maxwidth($threshold1){
											flex: 0 1 49%;
											margin-left: 1.5px;
											margin-right: 0;
										}
									}
								}
							}
							&:nth-of-type(4){
								@include maxwidth($threshold1){
									display: block;
								}
								li{
									margin: 0 22.5px;
									@include flex_centering;
									@include maxwidth($threshold1){
										margin: 0 0 35px;
									}
									a{
										display: block;
										img{

										}
									}
									&:last-of-type{
										@include maxwidth($sp_width){
											flex: 0 1 100%;
											margin-top: 39px;
										}
										@include maxwidth($threshold1){
											margin-top: 0;
											margin-bottom: 0;
										}
									}
								}
							}
						}
					}
				}	
			}
		}
		div.item2{
			background-color: $themecolor;
			div#sponsorLink{
				@include container(800,30);
				color: $basecolor;
				padding: 60px 0 120px;
				@include maxwidth($threshold1){
					padding-bottom: 90px;
				}
				p{
					@include f_all(18,"",32);
					font-weight: bold;
					margin-bottom: 40px;
					text-align: center;
					span{
						display: inline-block;
						padding: 3px 20px 5px;
						border-bottom: 1px solid #fff;
						position: relative;
						&:after{
							content: "";
							display: inline-block;
							width: 79px;
							height: 5px;
							background-color: #fff;
							position: absolute;
							bottom: -3px;
							right: 0;
							left: 0;
							margin: 0 auto;
						}
					}
					
				}
				ul{		
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					@include maxwidth(380){
						flex-direction: column;
					}
					li{
						flex: 0 1 33.33%;
						text-align: center;				
						@include maxwidth($mp_width){
							flex: 0 1 50%;
						}
						@include maxwidth(380){
							width: 85%;
							margin-right: auto;
							margin-left: auto;
						}
						a{
							display: inline-block;							
							margin: 0 1% 2%;
							@include maxwidth($mp_width){
								// margin-bottom: 15px;
							}
							img{
								@include maxwidth($mp_width){
									max-width: 370px;
									width: 100%;
								}
							}
						}
					}
					@include maxwidth($mp_width){
						&:after{
							content: "";
							display: block;
							width: 48%;
							height: 0;
							margin: 0 1%;
						}
					}
				}
			}
			div#footerCopy {
				padding-bottom: 90px;
				ul {
					display: flex;
					justify-content: center;
					@include maxwidth($threshold1){
						flex-direction: column-reverse;
					}
					li {
						margin-right: 1em;
						@include f_all(14,"",21);
						color: $basecolor;
						@include maxwidth($threshold1){	
							text-align: center;	
							margin-bottom: 1.5em;
							margin-right: 0;			
						}
						&:nth-of-type(1){
							@include maxwidth($threshold1){	
								margin-top: 20px;
							}
						}
						a {

						}
						&:last-child{
							margin-right: 0;
						}
					}
				}
			}
		}
	}
}



div.pager {
	text-align: center;
	font-size: .875em;
	margin-top: 40px;
	@media screen and (max-width: 540px) {
		font-size: .6875em;
	}
	a, span {
		display: inline-block;
		margin: 0 0.25em 0.75em;
		min-width: 3em;
		padding: 1em 1em;
		box-sizing: border-box;
		background-color: #ddd;
		&.current {
			background-color: $accentcolor;
			color: $themetextcolor;
		}
	}
}



#subpageContent, 
.subpageArchive {
	background: $basecolor;
	color:$basetextcolor;
	padding: 120px 0;
	div.container {
		@include container(900, 20);
	}
}

.subpageArchive {
	padding: 120px 0;
	div.container {
		@include container(1151, 20);
	}
}


div.default {
	@include contentdefault;
}





ul.slick-dots {
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	bottom:0;
	display: flex;
	justify-content: center;
	//padding: 1em 0;
	padding: 0 0 32px 0;
	list-style-type: none;
	li {
		margin: 0 0.25em;
	}
	button {
		cursor: pointer;
		display: block;
		width: 10px;
		height: 10px;
		padding: 0;
		border: none;
		//border-radius: 100%;
		background-color: $themetextcolor;
		text-indent: -9999px;
	}
	li.slick-active button {
		background-color: $themecolor;
	}
}