/*
Theme Name: Kono-direction 2025
Version: 20250709
Author: Kono-directio co.,ltd.
Author URI: https://www.kono-d.jp
Description: 
*/
:root{
	--bk_main: #3c3c43;
	--gr:#666666;
	--gr_bg: #f5f5f5;
	--gd: #e0ceaa;
	--gd_bg:#f4eede;
	--kd: #c1272d;
	
}
*, *:before, *:after{
	box-sizing:border-box;
	vertical-align:baseline;
	font-style:normal;
	/*transition:0.8s;*/
}
/*画像保護*/
img{
	pointer-events:none;
	-webkit-touch-calluot:none;
	-moz-touch-calluot:none;
	touch-calluot:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}
a, label,
input[type="button"],
input[type="submit"]{
	cursor:pointer;
}

html,body{
	width:100%;
	margin:0;
	padding:0;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'Yu Gothic', YuGothic, 'MS PGothic', Osaka, arial, sans-serif;
	font-size:calc( 100vw / 28 );
	line-height:1.6em;
}
@media screen and ( min-width:460px ){
	html, body{
		font-size:14px;
		line-height:1.6em;
	}
}
.kd-red{
	color:var(--kd);
}
.bold{
	font-weight:bold;
}

#wrapper{
	width:100%;
	margin:0;
	padding:0;
}

/*** Header ****/
#site-header{
	position:sticky;
	top:0;
	background-color:rgba(255,255,255,0.8);
	z-index:99999;
}
#header-main.flx{
	display:flex;
	flex-flow:row nowrap;
	font-size:12px;
}
#site-info,
#site-info > p{
	margin:0;
	color:#777;
	font-size:min(0.833em, calc(100vw / 40) );
	text-align:center;
}
#site-info span,
#site-info em{
	font-size:calc( 1em + 3px );
}

#site-header,
#site-info{
	border-bottom:solid 1px #dedede;
}

#menu-label,
#site-logo,
#icon-nav{
	margin:0;
}
#menu-label{
	padding:1.2em;
}
#site-logo{
	flex-grow:1;
	padding:1.3em 0;
	font-size:inherit;
}
#site-logo > a,
#icon-menu li > a{
	display:block;
	margin:0;
	padding:0;
}
#menu-label img,
#site-logo > a img{
	display:block;
	height:1.4em;
}
#site-logo{
	margin:0;
}


/*** icon navigation ***/
#icon-nav{
	display:flex;
	flex-flow:row nowrap;
	justify-content:end;
	flex-grow:2;
	margin-right:1em;
}
#icon-nav > .menu-item{
	margin:1em 0 1em 10%;
}
#icon-nav li > a img{
	display:block;
	height:2em;
}

/*** Grolbal navigation ***/
ul.menu,
ol.menu{
	list-style-type:none;
	padding:0;
}
#menu-icon{
	/*display:none;*/
}
#site-nav{
	position:absolute;
	top:0; left:0;
	width:0;
	height:100vh;
	margin:0;
	padding:0;
	background-color:rgba(0,0,0,0.0);
	transition:background-color 0.8s 0s ease;
	z-index:9999;
}
#site-nav > .inner{
	position:absolute;
	top:0;
	left:-100vw;
	width:90vw;
	height:100vh;
	background-color:#fff;
	transition:all 0.8s 0s ease;
}
#site-nav:has(#menu-icon:checked){
	width:100vw;
	background-color:rgba(0,0,0,0.3);
}
#site-nav:has(#menu-icon:checked) > .inner{
	left:0;
}
#main-nav > li{
	border-top:solid 1px #e2e2e2;
}
#main-nav > li > a{
	background-position:100% 50%;
	background-image:url('parts/next.svg');
}
#main-nav li.menu-item > a{
	padding:3px 4px;
	line-height:1;
}
#main-nav li.menu-item > a:hover{
	background-color:#f5f5f5;
}

/** Toggle **/
.toggle:has(#menu-icon){
	display:block;
	width:100%;
	height:5em;
	background-position:1.5em 50%;
	background-size:1.6em 1.6em;
	background-color:#fff;
}
#main-nav{
	height:calc( 100vh - 4em );
	margin:0;
	overflow:scroll;
}
#main-nav > .menu-item:not(.has_child),
.parent-item-name{
	display:block;
	width:100%;
	padding:1.6em;
}
.toggle,
#main-nav > li > a{
	display:block;
	background-size:1.2em 1.2em;
	background-repeat:no-repeat;
}
.toggle{
	font-weight:500;
	background-image:url('parts/open.svg');
}
.toggle:has(:checked){
	background-image:url('parts/close.svg');
}
.has_child .toggle{
	background-position:calc( 100% - 1.6em ) 50%;
}
.toggle > input#menu-icon,
.toggle > input.down{
	display:none;
}

ul.child-menu{
	display:none;
	height:0;
	margin:0;
	padding:1.6em;
	background-color:#f5f5f5;
	overflow:hidden;
	opacity:0;
	transition:all 0.8s 0s linear;
}
.toggle:has(:checked) + .child-menu{
	display:block;
	height:auto;
	opacity:1.0;
}
.child-menu > li:not(:first-child){
	margin:1.6em 0 0 0;
}

#site-nav a{
	color:var(--bk_main);
	text-decoration:none;
}
@media screen and ( min-width:740px ){
	
	#site-info,
	#site-info > p{
		font-size:12px;
	}
	#header-main{
		padding-top:1em;
	}
	#site-logo > a img{
		height:1.6em;
	}
	#menu-label{
		display:none;
	}
	#site-nav,
	#site-nav > .inner{
		position:static;
		width:100%;
		height:auto;
	}
	#header-main.flx{
		flex-wrap:wrap;
	}
	#site-nav{
		background-color:#fff;
	}
	#site-logo{ order:1; }
	#icon-nav{ order:2; }
	#site-nav{ order:3; flex-basis:100%; }
	
	label.toggle:has(#menu-icon){
		display:none;
	}
	.toggle,
	#main-nav > li > a,
	.parent-item-name.toggle:has(:checked){
		background:none;
		background-repeat:no-repeat;
	}
	#main-nav .menu-item:not(.has_child),
	.parent-item-name{
		width:auto;
		padding:1rem 0;
	}
	#sitenav-wrap{
		padding:0 3rem;
	}
	#main-nav{
		position:relative;
		width:100%;
		height:auto;
		display:flex;
		flex-flow:row nowrap;
		justify-content:space-evenly;
		padding:0;
		font-size:15px;
		overflow:visible;
	}
	#main-nav > li{
		border-top:0;
		flex-shrink:0;
		flex-grow:0;
		margin-left:3%;
		margin-top:0;
	}
	ul.child-menu{
		display:none;
		position:absolute;
		top:calc( 3.6rem + 4px ); left:-3.5rem;
		width:100vw;
		padding:1.5rem 3rem 0.5rem 3rem;
		font-size:1rem;
		background-color:#fff;
	}
	li.menu-item.has_child{
		border-bottom:solid 3px transparent;
	}
	li.menu-item:has(:checked){
		border-bottom-color:#666;
	}
	.toggle:has(:checked) + .child-menu{
		display:flex;
		justify-content:space-between;
		border-bottom:solid 1px #ccc;
		z-index:222;
	}
	#main-nav .child-menu > li.menu-item{
		/*display:inline-block;
		width:30%;*/
		margin:0 0 1rem 0;
		padding:0;
	}
	#icon-nav{
		margin-right:0;
	}
}
@media screen and ( min-width:1096px ){
	
	#header-main.flx{
		flex-wrap:nowrap;
		position:relative;
	}
	#site-logo{ flex-basis:188px; }
	#site-nav{ order:2; flex-basis:75%; }
	#icon-nav{ order:3; flex-basis:calc( 35% - 188px ); }
	#main-nav{
		position:static;
		justify-content:flex-start;
	}
	#main-nav > li{
		margin-left:3%;
	}
	ul.child-menu{
		top:calc( 4.4rem + 3px );
		left:-3rem;
	}
	
}



/**** Contents ****/

/** wrapping **/
#wrapper,
.wrapper,
#contents,
.content{
	width:100%;
}
#wrapper,
#contents,
.content,
.wrapper,
.wrap{
	position:relative;
}
#contents{
	margin:0;
	padding:2rem 0;
}
.content{
	margin:0 auto;
	padding:1rem 0
}
.wrap{
	width:100%;
	max-width:1760px;
	margin-left:auto;
	margin-right:auto;
	padding:0 1em 1em 1em;
}
@media screen and ( min-width:768px ){
	#contents{
		padding:2rem 3rem;
	}
	.content{
		padding:1rem 3rem;
	}
}
@media screen and ( min-width:1096px ){
	#contents,
	#newsfeed{
		padding:4rem 6.5rem;
	}
	.content{
		padding:2rem 6.5rem;
	}
}

/** 共通パーツ **/
.topimg,
.topimg img{
	display:block;
	width:100%;
	margin:0;
	padding:0;
}
.imgwrap{
	width:100%;
	line-height:1;
	padding:0;
}
.imgwrap img{
	width:100%;
	margin:0;
	border:0;
}
.title{
	margin:2rem 0 1rem 0;
	font-size:2rem;
	line-height:1.25em;
}
.title small{
	margin-left:1rem;
	font-size:calc( 1rem - 2px );
	font-weight:normal;
}
.subtitle{
	margin:1rem 0;
	font-size:1.5rem;
	line-height:2rem;
}

.smaller{ font-size:calc( 1em - 2px ); }
.small{ font-size:min( 10px,0.75em ); }
.big{ font-size:calc( 1em + 2px ); }
.bigger{ font-size:1.5em; }
.biggest{ font-size:3em; }
.large{ font-size:1.5rem; }
.larger{ font-size:2rem; }
.largest{ font-size:3rem; }

.rowp{ display:inline-block; }

.must{ color:var(--kd); }

ul.none,
ol.none{
	list-style:none;
	padding:0;
}
.tall{	line-height:2.5em; }
.low{	line-height:calc( 1em + 3px ); }

.gap{ letter-spacing:0.3em; }
.tume{ font-feature-settings:"palt" 1; }

.txtcenter{ text-align:center; }
.txtleft{ text-align:left; }
.txtreight{ text-align:right; }
.txtvertical{
	-ms-writing-mode:tb-l;
	writing-mode:vertical-rl;
}

.flxd{
	display:flex;
}
.flxd.midline,
.flx.midline{
	align-items:center;
}
.bg-gr{
	background-color:var(--gr_bg);
}

br.w768{
	display:none;
}
@media screen and ( min-width:768px ){
	.flx{
		display:flex;
		flex-direction:row;
		
	}
	br.w-768{ display:none; }
	br.w768{ display:inline; }
}
/** Table **/
.tbd{
	display:table;
	width:100%;
}
.tbd .tbrow{
	display:table-row;
}
.tbd dl.tbrow dt,
.tbd dl.tbrow dd{
	display:table-cell;
	white-space:break-spaces;
}
.tbd .tbrow dt,
.tbd .tbrow dd,
.tbd .tb-row dt,
.tbd .tb-row dd{
	margin:0;
	padding:2em 1em;
}
.tb .tbrow dt,
.tb .tbrow dd,
.tb .tb-row dt,
.tb .tb-row dd{
	margin:0;
}
.tb .tbrow dt,
.tb .tb-row dt{
	padding:1em 1em 0.5em 1em;
}
.tb .tbrow dd,
.tb .tb-row dd{
	padding:0.5em 1em 2em 1em;
}
dl.tb-row > dd{
	border-bottom:solid 1px var(--gr);
}

@media screen and ( min-width:768px ){
	.tb{
		display:table;
		width:100%;
	}
	.tb .tbrow,
	.tb .tb-row{
		display:table-row;
	}
	.tb dl.tbrow > dt,
	.tb dl.tbrow > dd{
		display:table-cell;
		padding:1rem;
	}
	dl.tb-row > dt,
	dl.tb-row > dd{
		display:table-cell;
		padding:2em 1em;
	}
	.tb .tbrow dt,
	.tb .tbrow dd,
	.tb .tb-row dt,
	.tb .tb-row dd{
		padding:2em 1em;
	}
	.form-table{
		max-width:720px;
		margin-left:auto;
		margin-right:auto;
	}
	dl.tb-row > dt{ width:25%; border-bottom:solid 1px var(--kd); }
	dl.tb-row > dd{ width:75%; }
}

/** Form **/
form .tb{
	padding:0 1rem;
}
input[type="text"],
input[type="email"],
textarea{
	max-width:90%;
}

input[type="tel"]{
	max-width:60%;
}

input[type="number"]{
	max-width:25%;
}
.wpcf7-form-control-wrap + .wpcf7-form-control-wrap{
	margin-top:1em;
}
.wpcf7-list-item{
	width:100%;
	margin:0 0 1em 0;
}
.wpcf7-form-control > .wpcf7-list-item:noly-child,
.wpcf7-form-control > .wpcf7-list-item:last-child{
	margin-bottom:0;
}
#gender{
	margin-left:2em;
}
#gender .wpcf7-list-item{
	width:6em;
}
input#zip{
	width:12em;
}
.wpcf7-spinner{
	display:none;
}
.btn{
	display:block;
	width:100%;
	margin:2em 0;
	padding:0;
	text-align:center;
}
.btn > a,
.btn > input[type="button"],
.btn > input[type="submit"]{
	display:inline-block;
	min-width:16em;
	margin:0 1rem;
	padding:1.5rem 1.5rem;
	font-size:calc( 1rem + 2px );
	font-weight:600;
	text-align:center;
	text-decoration:none;
	color:inherit;
	background-color:rgba(224,206,170,0.3);
	border-radius:0.4em;
	transition:all 0.5s 0s linear;
}
.btn > a{
	width:calc( 100% - 3em );
}
.btn > input[type="button"],
.btn > input[type="submit"]{
	width:auto;
}
.btn > a:hover,
.btn > input[type="button"]:hover,
.btn > input[type="submit"]:hover{
	background-color:rgba(224,206,170,1.0);
}
@media screen and ( min-width:768px ){
	
	.wpcf7-form-control:not(.vertical-item) .wpcf7-list-item:not(:only-of-type){
		width:45%;
		margin:0 0 1em 0;
		padding-right:2em;
	}
	
}
br.br768{ display:inline; }
br.br960{ display:inline; }

@media screen and ( min-width:768px ){
	.btn > a{
		max-width:16em;
	}
	br.br768{ display:none; }
}
@media screen and ( min-width:960px ){
	br.br960{ display:none; }
}

/*** Slides ***/
#slider{
	list-style:none;
	margin:0 auto;
	padding:0;
}
#slider .slide-item{
	margin:0;
}
.slide-item a,
.slide-item img{
	display:block;
	width:100%;
	margin:0;
	padding:0;
}
.slideprev,
.slidenext{
	position:absolute;
	top:calc( 100vw / 3 - 1rem );
	width:2rem;
	height:2rem;
	background-size:65%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-color:#666;
	border-radius:50%;
	opacity:0.5;
	text-indent:-999em;
	overflow:hidden;
	z-index:999;
	cursor:pointer;
}
.slideprev{
	left:0;
	background-image:url('parts/prev.svg');
}
.slidenext{
	right:0;
	background-image:url('parts/next.svg');
}
.slideprev:hover,
.slidenext:hover{ opacity:1; }

.slick-list{
	overflow:visible;
}

@media screen and ( min-width:768px ){
	#slider{
		width:calc( 540px + 4rem );
	}
	#slider .slide-item{
		margin-left:2rem;
		margin-right:2rem;
		border-radius:2rem;
		overflow:hidden;
	}
	.slideprev,
	.slidenext{
		top:calc( 180px - 1rem );
	}
	.slideprev{ left:-1rem; }
	.slidenext{ right:-1rem; }
}

/** Fornt page **/
.wrapper:has(#bdimg){
	margin-bottom:5rem;
}
.sticky{
	position:sticky;
}
#allofad{
	top:4rem;
	width:42vw;
	height:14vw;
}
#message{
	position:releative;
}
/*
#message:before{
	content:'';
	position:absolute;
	z-index:-1;
	display:block;
	width:100%;
	height:22%;
	background-color:#eee;
}
*/
#kmark{
	width:60%;
	margin:0 auto;
}
#mainnotes{
	width:17rem;
	margin:1rem auto;
	line-height:3em;
	text-align:center;
}
#maincopy{
	display:block;
	width:2rem;
	margin:0 0 0 1rem;
	line-height:1;
	font-size:2rem;
	letter-spacing:0.3rem;
	/*overflow:hidden;*/
}
#mainnotes,
#mainnotes > h1,
#mainnotes > p{
	-me-writing-mode:tb-rl;
	writing-mode:vertical-rl;
	text-align:left;
}
#mainnotes > p{
	margin:1.2rem 0 0 0;
}

#arrows{
	min-height:28em;
	background-image:url(parts/bg_arrows.svg);
	background-size:14.75em auto;
	background-position:calc( 100vw - 14em ) 5em;
	background-repeat:no-repeat;
}
#arrow7{
	padding:4rem 1rem;
}
#arrow7 .title{
	margin-bottom:2rem;
	font-size:calc( 100vw / 27 );
	letter-spacing:0.125em;
	text-align:center;
}
#arrow7 .box{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
#arrow7 .box > p{
	margin:0.5em 1em;
	padding:0.5rem 1rem;
	border:solid 2px;
	font-weight:bold;
	line-height:1em;
	border-radius:2rem;
	background-color:#fff;
}
@media screen and ( min-width:768px ){

	br.sp{
		display:none;
	}
	#message:before{
		height:26%;
	}
	#allofad{
		width:21vw;
		height:7vw;
		position:static;
		top:0;
	}
	#kmark{
		width:15rem;
	}
	#mainnotes{
		margin-top:0;
		padding:1rem 0;
		text-align:left;
		line-height:2em;
		font-size:calc( 1rem + 3px );
	}
	#mainnotes,
	#mainnotes > h1,
	#mainnotes > p{
		width:auto;
		-ms-writing-mode:tb-lr;
		writing-mode:horizontal-tb;
		text-align:center;
	}
	#mainnotes > h1{
		margin:0 0 1rem 0;
	}
	#mainnotes > p{
		margin:0;
		font-size:1.25rem;
		line-height:2.5rem;
	}
	#arrow7{
		padding-left:3rem;
	}
	#arrow7 .title{
		text-align:left;
	}
	#arrow7 .box{
		font-size:1.25em;;
	}
	#arrow7 .box > p{
		margin:0.5em 2em 0.5em 0;
		border-radius:2.125rem;
	}
	
}
@media screen and ( min-width:1000px ){
	
	#arrows{
		background-size:250px;
		background-position:calc( 50vw + 20em ) 0;
	}
	#arrow7{
		max-width:840px;
		position:relative;
		margin-left:auto;
		margin-right:auto;
		padding:3rem 0;
	}
	#allofad{
		width:252px;
		height:84px;
		margin-left:0;
	}
	
	#arrow7 .title{
		font-size:calc( 840px / 24 );
		text-align:center;
	}
	#arrow7 .box{
		padding:0 0 0 0.5rem;
	}
	
}

#newsfeed{
	margin:0 auto;
}
#feedbody{
	margin:0 auto;
	padding:2rem 1rem 2rem 3.5em;
	font-size:min(1rem,14px);
	background-color:var(--gr_bg);
}
.feed-item > a{
	display:block;
	text-decoration:none;
	color:inherit;
	transition:0.8s;
}
.feed-item > a:hover{
	background-color:#e9e9e9;
}
.feed-item .date{
	display:inline-block;
	margin-right:1em;
}

#product_new{
	padding-bottom:1em;
}
#product_newalive{
	list-style:none;
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	width:100%;
	margin:0;
	padding:1rem 0 3rem 0;
	overflow-x:scroll;
}
#product_newalive::scroolbar,
#product_newalive::-webkit-scroolbar{
	display:block;
	opacity:1;
}
#product_newalive > .product-item{
	flex-basis:calc( 100% / 3 - 1rem );
	flex-grow:0;
	flex-shrink:0;
}
.product-item dl,
.product-item dl dt.product-img,
.product-item dl dd.product-data{
	width:100%;
	margin:0;
	text-align:left;
}
.produc-img > a{
	display:block;
	margin:0;
	border:0;
}
.product-img img{
	display:block;
	width:100%;
}
.product-data{
	font-size:calc( 1rem - 3px );
}
.product-data p{
	margin:0;
}
.product-data a{
	display:inline-block;
	padding:0 4px;
	text-decoration:none;
	color:inherit;
}
.product-data a:hover{
	color:var(--kd);
	background-color:var(--gr_bg);
}

@media screen and ( min-width:768px ){
	#newsfeed{
		padding:2rem 2.5rem;
	}
	
	#product_newalive{
		flex-wrap:nowrap;
		
	}
	#product_newalive > .product-item{
		flex-basis:min( 200px, calc( 100% / 3.5 ) );
		margin:0 1rem 0 0;
	}
}
@media screen and ( min-width:960px ){
	
	#product_newalive > .product-item{
		flex-basis:200px;
	}
}



/*** page共通 ***/
#child-wrap.flx{
	display:flex;
	flex-direction:column;
}
.child-item{
	margin:3em 0;
	padding:0 1.5rem;
}
.child-item .post_thumb{
	width:100%;
}
.child-item .post_thumb img{
	display:block;
	width:100%;
}
.child-item h2{
	margin:10px 0;
}
.morebtn{
	margin:0 0 0 2rem;
	text-align:right;
	color:#888;
}
.morebtn > a{
	position:relative;
	display:inline-block;
	padding:10px 20px;
	font-size:1rem;
	line-height:1em;
}
.morebtn > a:after{
	content:'';
	display:block;
	position:absolute;
	left:0;
	bottom:2px;
	width:100%;
	height:12px;
	border-right:solid 2px var(--gd);
	border-bottom:solid 2px var(--gd);
	transform:skewX(40deg);
	transition:0.5s;
}
.morebtn > a:hover:after{
	left:10px;
}
@media screen and ( min-width:786px ){
	#child-wrap.flx{
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	#child-wrap .child-item{
		flex-basis:50%;
	}
}


/*** お知らせ ***/
.news-item{
	margin-bottom:5rem;
	border-bottom:solid 1px #ccc;
}
.news-wrap{
	margin:1rem 0 5rem 0;
}
.news-wrap .cel30{
	padding:0.5rem 0.75rem;
	background-color:var(--gr_bg);
}
.news-wrap .cel70{
	padding:0.25rem 0.75rem;
}
.news-wrap .post-date{
	display:inline-block;
	margin:5px 0;
	font-size:calc( 1rem - 3px );
	line-height:1rem;
}
.news-wrap .title{
	margin:5px 0;
	font-size:calc( 1rem + 2px );
	line-height:calc( 1rem + 10px );
}
@media screen and ( min-width:768px ){
	.news-wrap{
		display:flex;
	}
	.news-wrap .cel30{
		flex-basis:30%;
		min-height:10rem;
	}
	.news-wrap .cel70{
		flex-basis:70%;
		padding-left:1em;
	}
}



/*** Service ***/
#service-wrap{
	background-color:var(--gr_bg);
}
#service.flx{
	list-style:none;
	padding:0;
	display:flex;
	flex-flow:row wrap;
}
#service.flx .service-item{
	padding:10px;
}
.flx.col-1 .service-item,
.flx.col-2 .service-item,
.flx.col-3 .service-item,
.flx.col-4 .service-item{ 
	flex-basis:calc( 100% / 2 );
}
.flx.col-5 .service-item,
.flx.col-6 .service-item,
.flx.col-7 .service-item,
.flx.col-8 .service-item,
.flx.col-9 .service-item,
.flx.col-10 .service-item,
.flx.col-11 .service-item,
.flx.col-12 .service-item,
.flx.col-13 .service-item,
.flx.col-14 .service-item,
.flx.col-15 .service-item{ 
	flex-basis:calc( 100% / 3 );
}
.service-item a{
	display:block;
	padding:0.5em 0.75em;
	color:inherit;
	text-decoration:none;
	background-color:#fff;
}

.flx.col-1 .service-item > a,
.flx.col-2 .service-item > a,
.flx.col-3 .service-item > a,
.flx.col-4 .service-item > a{ 
	font-size:calc( 50vw / 16 );
}
.flx.col-5 .service-item > a,
.flx.col-6 .service-item > a,
.flx.col-7 .service-item > a,
.flx.col-8 .service-item > a,
.flx.col-9 .service-item > a,
.flx.col-10 .service-item > a,
.flx.col-11 .service-item > a,
.flx.col-12 .service-item > a,
.flx.col-13 .service-item > a,
.flx.col-14 .service-item > a,
.flx.col-15 .service-item > a{ 
	font-size:calc( 33.33vw / 16 );
}
.service-item > a img,
.item-thumb img{
	display:block;
	width:100%;
}
#service .service-item.archivelink a{
	height:100%;
	color:var(--kd);
	font-weight:bold;
	font-size:1.25rem;
	text-align:center;
}
.archivelink .flxd.midline{
	height:100%;
	justify-content:center;
}
/*** owned media ***/
/*** other service ***/
#media.flx,
#others.flx{
	display:flex;
	flex-flow:column wrap;
}
.flx .item a{
	color:inherit;
	text-decoration:none;
}
#media.flx .item,
#others.flx .item{
	padding:10px;
}
#media .item a,
#others .item a{
	display:block;
	padding:0.5em 0.75em;
	color:inherit;
	text-decoration:none;
	background-color:#fff;
}
.item .item-thumb{
	background-color:#eee;
}
.item .item-name{
	margin:0.75rem 0;
	font-size:calc( 1rem + 3px );
	font-weight:bold;
}
.item-name > small{
	display:block;
}
.item-name > .small{
	margin:0 0.5em;
}
.item-name > small,
.item-name > .small{
	font-weight:normal;
	font-size:calc( 1rem - 2px );
}

@media screen and ( min-width:768px ){
	
	.flx.col-2 .service-item,
	.flx.col-4 .service-item,
	.flx.col-6 .service-item,
	.flx.col-7 .service-item,
	.flx.col-8 .service-item,
	.flx.col-11 .service-item,
	.flx.col-12 .service-item{
		flex-basis:calc( 100% / 4 );
	}
	.flx.col-3 .service-item,
	.flx.col-5 .service-item,
	.flx.col-9 .service-item,
	.flx.col-10 .service-item,
	.flx.col-13 .service-item,
	.flx.col-14 .service-item,
	.flx.col-15 .service-item{
		flex-basis:calc( 100% / 5 );
	}
	.flx.col-2 .service-item > a,
	.flx.col-4 .service-item > a,
	.flx.col-6 .service-item > a,
	.flx.col-7 .service-item > a,
	.flx.col-8 .service-item > a,
	.flx.col-11 .service-item > a,
	.flx.col-12 .service-item > a{
		font-size:min( 1rem, calc( 25vw / 18 ) );
	}
	.flx.col-3 .service-item > a,
	.flx.col-5 .service-item > a,
	.flx.col-9 .service-item > a,
	.flx.col-10 .service-item > a,
	.flx.col-13 .service-item > a,
	.flx.col-14 .service-item > a,
	.flx.col-15 .service-item > a{
		font-size:min( 1rem, calc( 20vw / 18 ) );
	}
	#service.flx .service-item > a{
		max-width:240px;
		margin:0 auto;
	}
	#media.flx,
	#others.flx{
		flex-direction:row;
	}
	#media.flx .item,
	#others.flx .item{
		flex-basis:calc( 50% - 0.5rem );
		margin:1rem 0;
	}
	#media.flx .item:nth-child(even),
	#others.flx .item:nth-child(even){
		margin-left:1rem;
	}
}
@media screen and ( min-width:1024px ){
	#media.flx .item{
		flex-basis:calc( 100% / 3 );
	}
	#others.flx .item{
		flex-basis:25%;
	}
	#media.flx .item:nth-child(even),
	#others.flx .item:nth-child(even){
		margin-left:0;
	}
	
}

/*** product ***/
.product-list.flx{
	display:flex;
	flex-flow:row wrap;
}
.product-list.flx .product-item{
	flex-basis:calc( 100% / 3 );
	padding:10px;
}
.product-item a,
.product-item img{
	display:block;
	width:100%;
	margin:0;
}
.product-item > a{
	border:solid 1px transparent;
}
.product-item > a:hover{
	border-color:var(--gd);
}
#work-list{
	list-style:none;
	display:flex;
	flex-flow:row nowrap;
	width:100%;
	margin:0;
	padding:1rem 0 3rem 0;
	overflow-x:scroll;
}
#work-list::scroolbar,
#work-list::-webkit-scroolbar{
	display:block;
	opacity:1;
}
#work-list > .product-item{
	flex-basis:calc( 100% / 6 );
	flex-grow:0;
	flex-shrink:0;
	padding:10px;
}
@media screen and ( min-width:768px ){
	.product-list.flx .product-item{
		flex-basis:calc( 100% / 4 );
	}
}
@media screen and ( min-width:1280px ){
	.product-list.flx .product-item > a{
		max-width:280px;
		margin:0 auto;
	}
}
/*** product single ***/
#product{
	max-width:800px;
	margin:0 auto;
}
.productImages{
	list-style:none;
	padding:0;
	display:flex;
	flex-flow:row wrap;
	border-top:solid 1px #fff;
	border-left:solid 1px #fff;
}
.productImages .list-item{
	flex-basis:50%;
	border-right:solid 1px #fff;
	border-bottom:solid 1px #fff;
}
.productImages .list-item.mainImage{
	flex-basis:100%;
}
.productImages .list-item img{
	display:block;
	width:100%;
}
#group-list{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-around;
	margin:5rem auto;
}
#group-list .product-item{
	flex-basis:16%;
}




/*** media ***/
#media-contents{
	margin-bottom:10rem;
}
#nottoku .flx,
#kittoku .flx,
#jobtoku .flx,
#webtoku .flx{
	max-width:1280px;
	margin-left:auto;
	margin-right:auto;
	flex-grow:1;
}
#media-contents .flx > .cell{
	padding:2rem 1rem;
}
#media-contents .flx > .cell.media-note{
	padding-left:2rem;
	padding-right:2rem;
}
table.mediachart{
	border-collapse:separate;
	border-spacing:0.5rem 1rem;
}
.mediachart th{
	width:6rem;
	position:relative;
	font-weight:normal;
	text-align:inherit;
}
.mediachart th:after{
	content:"：";
	position:absolute;
	right:0;
}
#nottoku-schedule .title,
#nottoku-schedule .dashicon{
	color:#02a;
}
#kittoku-schedule .title,
#kittoku-schedule .dashicon{
	color:#f83;
}
.media-schedule{
	text-align:center;
	/*background-color:var(--gr_bg);*/
}
.mediaschedule .title{
	font-size:1.5rem;
}
.media-schedule.flx > div{
	padding:4rem 2rem;
}
.dashicon:after{
	font-family:"dashicons";
	font-size:8rem;
	line-height:8rem;
	text-align:inherit;
	color:inherit;
}
.dashicon.schedule:after{
	content: "\f508";
}
.scrollbox{
	width:100%;
	height:20rem;
	padding:2rem 0;
	background-color:#fff;
	overflow:hidden;
}
.scroll{
	width:100%;
	height:100%;
	overflow:scroll;
}
table.schedule-chart{
	width:calc( 100% - 4rem );
	margin:0 auto;
	border-collapse:separate;
	border-spacing:0;
	border-left:solid 1px var(--bk_main);
	border-bottom:solid 1px var(--bk_main);
	background-color:#fff;
}
.schedule-chart thead{
	position:sticky;
	top:0;
}
.schedule-chart th{
	font-weight:normal;
	background-color:#bbb;
	border-bottom:solid 1px var(--bk_main);
}
.schedule-chart th,
.schedule-chart td{
	padding:0.25rem 1rem;
	text-align:center;
	border-right:solid 1px var(--bk_main);
	border-top:solid 1px var(--bk_main);
}
.schedule-chart tr:nth-child(odd) td{
	background-color:#f0f0f0;
}
@media screen and ( min-width:768px ){
	#nottoku .flx > div,
	#kittoku .flx > div,
	#jobtoku .flx > div,
	#webtoku .flx > div,
	.media-schedule.flx > .cel{
		flex-basis:50%;
	}
}




/*** pager ***/
.paginater{
	max-width:720px;
	margin:1rem auto;
	padding-top:2rem;
	border-top:solid 1px var(--gr_bg);
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
}
.paginater > .page-numbers,
.paginater > .prev_page,
.paginater > .next_page{
	flex-grow:0;
	flex-shrink:0;
	flex-basis:2.5rem;
	text-align:center;
	line-height:2.5rem;
	vertical-align:middle;
	text-decoration:none;
	transition:0.5s;
	font-size:calc( 1rem + 2px );
}
.prev_page a,
.next_page a{
	display:block;
	width:100%;
	height:100%;
	text-align:inherit;
	line-height:inherit;
	vertical-align:inherit;
	text-decoration:none;
	transition:inherit;
	font-size:inherit;
}
a.page-numbers,
.prev_page a,
.next_page a{
	color:var(--kd);
}
a.page-numbers:hover,
.prev_page a:hover,
.next_page a:hover{
	font-weight:bold;
	background-color:var(--gd-bg);
}
span.page-numbers,
.prev_page,
.next_page{
	color:#999;
}
.prevnext_btn{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
}
.prevnext_btn a{
	display:inline-block;
	padding:3px;
	color:inherit;
	text-decoration:none;
	font-size:calc( 1rem - 1px );
	line-height:1em;
}
.prevnext_btn a:hover{
	background-color:var(--gd);
}
.archive.cel{
	order:3;
	flex-basis:100%;
	display:flex;
	justify-content:center;
	margin:0;
	padding-top:0.5em;
	border-top:solid 1px #eee;
}
.separator{
	margin:0 4px;
	color:var(--kd);
}
.prevpost.cel{
	margin-right:1em;
	text-align:left;
	order:1;
}
.nextpost.cel{
	margin-left:1em;
	text-align:right;
	order:2;
}
@media screen and ( min-width:768px ){
	.archive.cel{
		border-bottom:0;
		flex-basis:100%;
	}
	.prevpost.cel,
	.nextpost.cel{
		flex-basis:35%;
		margin-top:0.5rem;
		margin-bottom:0.5rem;
	}
	.prevpost.cel{
	}
	.nextpost.cel{
	}
}




/*** Information ***/
#concept-int.flx{
	width:100%;
}
#concept{
	color:var(--kd);
	font-size:calc( 95vw / 18 );
	line-height:1.5em;
}
#concept + p{
	font-size:1rem;
}
#info-box{
	max-width:960px;
	margin:0 auto;
}
#info-table dt{
	position:relative;
	width:6em;
}
#info-table dt:after{
	content:"：";
	position:absolute;
	right:0;
}
.map-box{
	display:flex;
	flex-direction:column;
	margin:2rem 0;
}
.map-header{
	background-color:var(--gr_bg);
	padding:0 12px 12px 12px;
}
.office-name{
	font-size:1.25rem;
	font-weight:bold;
	color:var(--kd);
}
@media screen and ( min-width:768px ){
	#concept{
		font-size:calc( (100vw - 13rem) / 18 );
	}
	#concept + p{
		font-size:calc( 100vw / 57 );
		line-height:1.5em;
	}
	#info-table dt{
		width:8em;
	}
	.map-box{
		flex-direction:row;
	}
	.map-header{
		flex-basis:18em;
	}
	.map{
		flex-basis:calc( 100% - 18em );
	}
}
@media screen and ( min-width:960px ){
	
	#info-table{
		/*padding:1em 12.5%;*/
	}
}



/*** DownLoad ***/
#dl-list{
	list-style:none;
	padding:0;
}
#dl-list li{
	border-bottom:solid 1px var(--gd);
}
#dl-list .title{
	font-size:1.5rem;
}
#dl-list .btn{
	text-align:left;
}
#dl-list .btn > a{
	max-width:none;
	width:calc( 100% - 2rem );
	margin:1rem;
	padding:1.5rem 1rem;
	font-size:1rem;
}
@media screen and ( min-width:640px ){
	#dl-list .btn > a{
		width:calc( 50% - 2rem );
	}
}
@media screen and ( min-width:768px ){
	#dl-list .btn > a{
		width:calc( 33% - 2rem );
	}
}

/**** recruit ****/
.recruit-list{
	list-style:none;
	padding:0;
}
.recruit-item{
	box-sizing:border-box;
	width:100%;
	margin-left:0;
	margin-right:0;
	margin-bottom:4rem;
	padding:1rem 0 2rem 0;
	border-bottom:solid 2px #ddd;
}
.recruit-table.tb{
	box-sizing:border-box;
	padding-left:0.5rem;
	padding-right:0.5rem;
}
.tape-title{
	padding:0.25rem 0.5rem;
	border-left:solid 8px #c31;
	font-size:1.5rem;
	line-height:1.675rem;
}
.recruit-table .tbrow > dt,
.recruit-table .tbrow > dd{
	border-bottom:dotted 1px var(--gr);
}
.recruit-table .tbrow > dt{
	width:7rem;
}
.recruit-table .tbrow > dd{
	width:calc( 100% - 7rem );
	word-break:break-all;
}

@media screen and ( min-width:768px ){
	.recruit-table .tbrow > dt{
		width:25%;
	}
	.recruit-table .tbrow > dd{
		width:75%;
	}
}


/*** footer ***/
#site-footer{
	padding:1.8rem 1.5rem;
	background-color:#f0f2f5;
	font-size:min( 12px,0.88rem );
	line-height:1.6em;
}
#footernav,
.has-children > .sub-menu,
#footerinfonav{
	list-style:none;
	padding:0;
}

/** footer navigation **/
#footer-logo{
	margin:0 0 1.2em 0;
}
#footer-logo{
	font-size:inherit;
}
#footer-logo > a,
#footer-logo > a > img{
	display:block;
	margin:0;
	height:1.666em;
}
#footernav > .menu-item{
	margin:1em 0;
}
.has-children > .sub-menu > .child-menu-item,
#footerinfonav .menu-item{
	display:inline-block;
	margin-right:2em;
}
#site-footer a{
	text-decoration:none;
	color:#585858;
}
#footernav,
#snsnav{
	display:flex;
	margin:0;
	padding:0;
}
#footernav{
	flex-direction:column;
}
#snsnav{
	flex-direction:row;
	flex-wrap:wrap;
}


/** SNS Icon navigations **/
#snsnav{
	width:100%;
}
div#snsnav{
	margin:4em 0;
}
#snsnav .snsmenu-item{
	flex-basis:min( 8%,2.333em );
	margin:0 min( 8%,2.333em ) 0 0;
}
ul#snsnav{
	list-style:none;
	margin:9em 0 0 0;
}
ul#snsnav .snsmenu-item{
	flex-basis:2rem;
	margin-right:1rem;
}
.snsmenu-item > a,
.snsmenu-item > a > img{
	display:block;
	width:100%;
}
.snsmenu-item > a:hover{
	opacity:0.5;
}

/*** copyright ***/
#copyright{
	margin:5em 0 0 0;
	color:#585858;
}
@media screen and ( min-width:768px ){
	
	#site-footer{
		padding-top:3rem;
		padding-bottom:1rem;
	}
	#footer-main{
		display:flex;
		flex-flow:row wrap;
	}
	#footername{
		flex-basis:30%;
	}
	#footer-nav{
		flex-basis:70%;
	}
	#footernav{
		flex-direction:row;
		justify-content:space-between;
	}
	#footernav > .menu-item{
		margin:0;
	}
	.has-children > .sub-menu > .child-menu-item{
		display:block;
		margin-right:0;
		margin-top:1em;
	}
	#footinfonav-wrap .flx{
		display:flex;
		flex-flow:row nowrap;
		justify-content:stretch;
		padding:2em 0;
	}
	#footerinfonav{
		margin:0;
		flex-grow:2;
	}
	#sitecopy{
		margin:0;
		text-align:right;
	}
}
