@charset "UTF-8";
@import url("smoothness/jquery-ui-1.8.4.custom.html");
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body{
	background:#FFF;
	color:#000000;
	line-height: 1.5;
	font-size:16px;
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif; 
	word-wrap:break-word;
	position:relative;
	font-feature-settings:'plat';
	
}

img {
    width: 100%;
    height: auto;
    border: 0;
    vertical-align: bottom;
}

/*  すべてのタグのマージン・パディングの設定をリセット
-------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,hr,figure{ margin:0; padding:0; box-sizing:border-box; }
li{list-style-type: none;}
table{border-collapse: collapse; border-spacing: 0;}

body{ min-width:100%; font:14px "HiraKakuProN-W3", sans-serif; -webkit-text-size-adjust:none;  }

.photos{
display:flex;
flex-wrap:wrap;
justify-content:center;

padding: 0 0 10em 0;
}
 
.photo{
box-sizing: border-box;
margin:0;
padding: 0px;
	
width:calc(33.3333333% - 0px / 3);
}
.photo:nth-child(3n){
margin-right:0;
}


@media screen and (max-width:768px){
 
.photo{
margin:0 0 0 0;
width: calc(50% - 0px / 2);
	font-size:12px;
}
 
.photo:nth-child(2n){
margin-right:0;
}
 
.photo:nth-child(3n){
margin-right:0;
}
 
.photo:nth-child(6){
margin-right:0;
}
 
}



.pc-dsp { display:block; }

.sp-dsp { display:none; }

 

@media only screen and (max-width : 768px){

.pc-dsp { display:none; }

.sp-dsp { display:block; }

}




.photoitems{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
 
}
 
.photoitem1{
box-sizing: border-box;
margin:0 0 0 0;
padding: 5px;
width: calc(55% - 10px / 1);
}

.photoitem2{
box-sizing: border-box;
margin:0 0 0 0;
padding: 5px;
width: calc(90% - 10px / 1);
}

.photoitem3{
box-sizing: border-box;
margin:0 0 0 0;
padding: 5px;
width: calc(40% - 10px / 2);
}

.photoitem4{
box-sizing: border-box;
margin:0 0 0 0;
padding: 5px;
width: calc(80% - 10px / 1);
}

.photoitem5{
box-sizing: border-box;
margin:0 0px 0px 0;
padding: 5px;
width:calc(30% - 10px / 3);
}

.photoitem6{
box-sizing: border-box;
margin:0 0 0 0;
padding: 5px;
width: calc(50% - 10px / 1);
}

.photoitem7{
box-sizing: border-box;
margin:0 0 0 0;
padding: 5px;
width: calc(35% - 10px / 2);
}

.photoitem8{
box-sizing: border-box;
margin:0 0 0 0;
padding: 5px;
width: calc(70% - 10px / 1);
}

.photoitem:nth-child(3n){
margin-right:0;
}


@media screen and (max-width:780px){
 
.photoitem{

width: calc(50% - 20px / 2);
	font-size:12px;
}
 
.photoitem:nth-child(2n){
margin-right:0;
}
 
.photoitem:nth-child(3n){
margin-right:0;
}
 
.photoitem:nth-child(6){
margin-right:0;
}
 
}






/*  基本のlink color
-------------------------------------------------------------*/
a{ color:#000000; }
a:link,
a:visited,
a:hover,
a:active,
a:hover,
a,
input[type="submit"],
input[type="button"]{
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}

a:hover{ opacity:0.8; }

.moreLink{ text-align:center; }
.moreLink a{ display:inline-block; padding:0 25px; text-decoration:none; background:url("../../../../images/arrow_open.png") no-repeat right center / 18px auto; font-size:13px; color:#665f5c; }
.moreLink.open a{ background-image:url("../../../../images/arrow_close.png"); }

.moreLink2{ text-align:left; }
.moreLink2 a{ display:inline-block; padding:0 20px 0 0; text-decoration:none; background:url("../../../../images/arrow_link.png") no-repeat right center / 13px auto; font-size:13px; color:#665f5c; }

.link1{ text-align:center; }
.link1 a{ display:inline-block; pading:0 0 0 20px; text-decoration:none; background:url("../../../../images/arrow_link.png") no-repeat 0 center / 13px auto; font-size:13px; color:#665f5c; }



.sd-box6 {
    width:40%; height:auto; border:0; vertical-align:bottom;　
	padding: 2em 2em;
    margin: 1em 1em;
    margin-left: auto;
    margin-right: auto;
 font-size: 26px;
	 font-weight: 400;
	  text-align: center;
}




@media screen and (max-width:780px){
 
.sd-box6 {
    width:40%; height:auto; border:0; vertical-align:bottom;　
	padding: 2em 2em;
  
    margin-left: auto;
    margin-right: auto;
 font-size: 20px;
	 font-weight: 200;
	  text-align: center;

}
 
}

.sd-box8 {
	
    width:80%; height:auto; border:0; vertical-align:bottom;　
	padding: 2em 2em;
    margin: 1em 1em;
	margin-bottom:  10em;
    font-weight: bold;
	margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width:780px){
 
.sd-box8 {
    width:100%; height:auto; border:0; vertical-align:bottom;　
	padding: 1em 1em;
    margin: 1em 1em;
	margin-bottom:  5em;
	margin-left: auto;
    margin-right: auto;
	
}
 
}

.sd-box9 {
	
    width:90%; height:auto; border:0; vertical-align:bottom;　
	padding: 2em 2em;
    margin: 1em 1em;
	margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width:768px){
 
.sd-box9 {
    width:90%; height:auto; border:0; vertical-align:bottom;　
	padding: 1em 1em;
    margin: 1em 1em;
	margin-left: auto;
    margin-right: auto;
	
}
 
}


.items{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
 
}
 
.item{
box-sizing: border-box;
margin:0 5px 5px 0;
padding: 5px;
width:calc(33.3333333% - 10px / 3);
}
.item:nth-child(3n){
margin-right:0;
}


@media screen and (max-width:780px){
 
.item{
margin:0 0 0 0;
width: calc(50% - 20px / 2);
	font-size:12px;
}
 
.item:nth-child(2n){
margin-right:0;
}
 
.item:nth-child(3n){
margin-right:0;
}
 
.item:nth-child(6){
margin-right:0;
}
 
}




/* =================================================================
4.ヘッダ
使用ファイル：common/header.xhtml
=================================================================*/
/* smartphone - スマートフォン専用サイトへのリンク
-------------------------------------------------------------*/
#smartphone a{ width:100%; display:block; padding:10px 0; text-align:center; background:green; color:#ffffff; }

/* preview - プレビュー時に表示するエリア
-------------------------------------------------------------*/
#preview{padding: 5px; border-bottom: 1px solid #CCC; background: #1C8600; color: #FFF; font-size: 80%; text-align: center;}
#preview table{ display:inline-block; }
#preview .ico{width:20px; padding-right: 10px; text-align: right;}

/* header - ヘッダ
-------------------------------------------------------------*/
#top { padding: 65px 0 0; }
header{ width:100%; /*min-width:1350px;*/ background:#ffffff; border-bottom:#ececec 1px solid; position: fixed; top: 0; left: 0; z-index:13; }
header::after{ content:""; clear:both; display:block; }
header a{ text-decoration:none !important; color:#333333; }
header .inner { display: flex; align-content: center; align-items: center; justify-content: space-between; }
header .logo{ float:left; margin:22px 0 0 0; }
header .logo a{ width:210px; display:block; background:url("../sd21img/logo_keen_21sd_2.png") no-repeat 0 0 / 100% auto; text-indent:-9999px; overflow:hidden; }
header .logo a:hover{ opacity:1; }
header .rightArea{ width: 80%; display: flex; justify-content: flex-end; align-content: center; align-items: center;/*padding:25px 0 0;*/ }
header .rightArea .icoBtn{ width:65px; text-align:center; font-size:11px; display:none; }
header .rightArea .icoBtn a{ display:block; box-sizing:border-box; line-height:1.2; }
header .rightArea .icoBtn img{ width:26px; display:block; margin:0 auto; }

/*--- searchArea ---*/
header .rightArea .searchArea{ margin:0 50px 0 0; }
header .rightArea .searchArea #searchMenu .searchCon{ position:relative; }
header .rightArea .searchArea #searchMenu input[type="search"]{ width:290px; padding-right:35px; }
header .rightArea .searchArea #searchMenu input[type="submit"]{ width:23px; height:23px; background:url("../../../../images/ico_search_bk.png") no-repeat 0 0 / 100% auto; border:none; position:absolute; top:8px; right:10px; }

/*--- cateArea ---*/
header .rightArea .cateArea #cateMenu{ display:none; } /*初期表示は隠す*/
header .rightArea .cateArea #cateMenu{ width:100%; height:100vh; padding:0 0 50px; background:#ffffff; box-sizing:border-box; overflow:auto; position:absolute; top:0; left:0; z-index:20; opacity:0.9; }
header .rightArea .cateArea #cateMenu .closeBtn{ position:absolute; top:40px; right:40px; }
header .rightArea .cateArea #cateMenu .closeBtn a{ width:30px; height:30px; display:block; background:url("../../../../images/ico_close_bk.png") no-repeat 0 0 / 100% auto; }
header .rightArea .cateArea #cateMenu .title{ text-align:center; padding:60px 0 35px; font-size:22px; font-weight:bold; }
header .rightArea .cateArea #cateMenu ul.navBtn{ margin:0 auto 40px; padding:0 0 0 5px; text-align:center; }
header .rightArea .cateArea #cateMenu ul.navBtn li{ display:inline-block; margin:0 5px 7px 0; text-align:center; }
header .rightArea .cateArea #cateMenu ul.navBtn li a{ width:80px; display:block; padding:8px 0; background:#f5f5f5; border-radius:50px; box-sizing:border-box; }
header .rightArea .cateArea #cateMenu ul.navBtn li.on a{ background:#333333; color:#ffffff; }
/* cateList */
header .rightArea .cateArea #cateMenu .cateList{ width:1200px; margin:0 auto; }
header .rightArea .cateArea #cateMenu .cateList .tit{ margin:0 0 21px; padding:0 0 18px; border-bottom:#ebebeb 1px solid; font-size:18px; font-weight:bold; }
header .rightArea .cateArea #cateMenu .cateList > div{ display:none; } /* 初期非表示 */
header .rightArea .cateArea #cateMenu .cateList > #agyo{ display:block; } /* あ行のみ表示 */
header .rightArea .cateArea #cateMenu .cateList ul{ display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; margin:0 0 35px; }
header .rightArea .cateArea #cateMenu .cateList ul li{ width:23.5%; margin:0 2% 20px 0; }
header .rightArea .cateArea #cateMenu .cateList ul li:nth-child(4n){ margin-right:0; }
header .rightArea .cateArea #cateMenu .cateList ul li a{ width:100%; display:table; table-layout:fixed; box-sizing:border-box; }
header .rightArea .cateArea #cateMenu .cateList ul li a figure{ width:75px; display:table-cell; }
header .rightArea .cateArea #cateMenu .cateList ul li a p{ display:table-cell; padding:0 0 0 10px; vertical-align:middle; }

/*--- detailSearchArea ---*/
header .rightArea .detailSearchArea{ float:left; }

/*--- loginArea ---*/
header .rightArea .loginArea{ float:left; }

/*--- mypageArea ---*/
header .rightArea .mypageArea{ float:left; }

/*--- cartArea ---*/
header .rightArea .cartArea{ float:left; position:relative; }
header .rightArea .cartArea .cartNum{ min-width:22px; padding:2px 3px; text-align:center; background:#df4848; border-radius:50px; font-size:10px; color:#ffffff; line-height:1; position:absolute; top:-5px; right:2px; }

/*--- humicon ---*/
header .rightArea #humicon:hover {
	cursor: pointer;
}

header .rightArea #humicon {
	width: 50px;
	height: 50px;
	padding: 15.5px 0;
}

header .rightArea #humicon span {
	width: 30px;
	height: 1px;
	display: block;
	background-color: #000000;
	border-radius: 3px;
	margin: 0 auto;
}

header .rightArea #humicon span:nth-of-type(2) {
	margin: 8px auto;
}

/*-- close-humicon --*/
header .rightArea #close-humicon {
	width: 50px;
	height: 50px;
	padding: 15.5px 0;
	position: absolute;
	top: 30px;
	left: -40px;
}

header .rightArea #close-humicon:hover {
	cursor: pointer;
}

header .rightArea #close-humicon span {
	width: 30px;
	height: 1px;
	display: block;
	background-color: #0f0f0f;
	border-radius: 3px;
	position: absolute;
	top: 5%;
	left: 0;
	margin: 0 auto;
}

header .rightArea #close-humicon span:nth-of-type(1) {
	transform:rotate(40deg);
}

header .rightArea #close-humicon span:nth-of-type(2) {
	transform:rotate(-40deg);
}


/*--- hum-nav ---*/
header .rightArea #hum-nav {
	width: 30%;
	max-width: 540px;
	height: 100vh;
	display: none;
	position: fixed;
	top: 0;
	right: -30%;
	padding: 3% 0 0 0;

	
}

@media screen and (max-width: 768px) {
    header .rightArea #hum-nav {
        width: 60%;
    }
}

header .rightArea #hum-nav ul {
	opacity: 0;
}

header .rightArea #hum-nav ul li a,
header .rightArea #hum-nav ul li p {
	display: block;
	color: #ffffff;
	font-size: 20px;
	padding: .3em 0 .5em 5%;
}

header .rightArea #hum-nav ul li ul li a {
	font-size: 16px;
	padding: calc(.3em + .1vw) 0 calc(.5em + .1vw) 12%;
}



header .rightArea #hum-nav ul li ul li:nth-of-type(1) a {
	border-top: none;
}

header .rightArea #hum-nav.active {
	display: block;
	background-color:rgba(0,0,0,0.85);
	transform: translateZ(100px);
	right: 0;
	z-index: 100;
	animation: menu .6s ease;
}

header .rightArea #hum-nav.active ul {
	opacity: 1;
	animation: menuWrap .6s ease;
}

header .rightArea #hum-nav.active li a, 
header .rightArea #hum-nav.active li a:visited {
	color: #ffffff;
}

@keyframes menu {
	0% {
		right: -30%;
	}
	100% {
		right: 0;
	}
}

@keyframes menuWrap {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

header#header-wrap.active::before {
	content: "";
	width: 100vw;
	height: 100vh;
	display: block;
	background-color: rgba(0,0,0,.1);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	animation: headerWrap .6s ease;
}


@keyframes headerWrap {
	0% {
		background-color: rgba(0,0,0,0);
	}
	100% {
		background-color: rgba(0,0,0,.6);
	}
}


#preview{ display:block; padding:5px; background:#139400; color:#fff; text-align:center; font-size:12px; font-weight:bold; }
#preview td{ padding:0 10px; vertical-align:middle; }

/* headerBanner
-------------------------------------------------------------*/
.headerBanner{ text-align:center; }
.headerBanner a{ display:block; }
.headerBanner img{ width:auto; max-width:100%; height:auto; }

/* fontChanger - 文字サイズ変更
-------------------------------------------------------------*/
#fontChanger{float: right; margin: 10px 20px 0 0;}
#fontChanger .icon{float: left; line-height: 1;}
#fontChanger .icon a{color: #FFFFFF; display: inline-block; margin-right: 2px; text-decoration: none; font-size: 12px !important; padding: 3px; line-height: 1; vertical-align: text-bottom;}
#fontChanger .__FONT_CHANGER_BUTTON_S_OFF{background: #CCCCCC;}/* 小 OFF */
#fontChanger .__FONT_CHANGER_BUTTON_S_ON{background: #D21E21;}/* 小 ON */
#fontChanger .__FONT_CHANGER_BUTTON_M_OFF{background: #CCCCCC;}/* 中 OFF */
#fontChanger .__FONT_CHANGER_BUTTON_M_ON{background: #D21E21;}/* 中 ON */
#fontChanger .__FONT_CHANGER_BUTTON_L_OFF{background: #CCCCCC;}/* 中 OFF */
#fontChanger .__FONT_CHANGER_BUTTON_L_ON{background: #D21E21;}/* 大 ON */


#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a{
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: url(../../keenandintense_sd22/image/logobtn.svg);
  font-size: 80px;
  color: #000;
}


/* =================================================================
10.フッタ
使用ファイル：common/footer.xhtml
=================================================================*/
/* pagetop
-------------------------------------------------------------*/
.pagetop{ display:none; } /* 初期非表示 */
.pagetop{ position:fixed; right:25px; bottom:25px; z-index:4; }
.pagetop a{ width:35px; height:35px; display:block; padding:42px 0 0; text-decoration:none; background:url("https://images.groobee.com/images/mailivis/gpmJmLVm3XUMgxtRNQeH4m66NiWnAtBdk0h5xeSI.jpg") no-repeat center 0 / 100% auto; box-sizing:border-box; font-size:13px; color:#191f54; }

/* footerInfo
-------------------------------------------------------------*/
.footerInfo{ margin:30px 0 0; padding:40px 0; background:#f5f5f5; }
.footerInfo ul{ display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; }
.footerInfo ul li{ width:23.87%; margin:0 1.5% 3px 0; padding:30px 20px 80px; background:#ffffff; box-sizing:border-box; position:relative; }
.footerInfo ul li:nth-child(4n){ margin-right:0; }
.footerInfo ul li .tit{ padding:75px 0 20px; text-align:center; font-size:16px; font-weight:bold; }
.footerInfo ul li:nth-child(1) .tit{ background:url("../../../../images/ico_guide1.png") no-repeat center 0 / 60px auto; }
.footerInfo ul li:nth-child(2) .tit{ background:url("../../../../images/ico_guide2.png") no-repeat center 0 / 50px auto; }
.footerInfo ul li:nth-child(3) .tit{ background:url("../../../../images/ico_guide3.png") no-repeat center 0 / 50px auto; }
.footerInfo ul li:nth-child(4) .tit{ background:url("../../../../images/ico_guide4.png") no-repeat center 0 / 50px auto; }
.footerInfo ul li .txtArea dl{ padding:7px 0 0; }
.footerInfo ul li .txtArea dl dt{ padding:7px 0 0; border-top:#ebebeb 1px solid; font-weight:bold; }
.footerInfo ul li .txtArea dl dd{ padding:0 0 7px; }
.footerInfo ul li .moreBtn{ margin:0 auto; position:absolute; left:0; right:0; bottom:30px; }
.footerInfo ul li .moreBtn a{ min-width:205px; padding:8px 32px; }

/* footer
-------------------------------------------------------------*/
footer{ padding:55px 0 0; text-align:center; }
footer a, footer a:visited
footer a:link,
footer a:active{ text-decoration:none; }
footer .siteName{ margin:0 0 13px; font-weight:bold; }
footer ul.snsList{ margin:0 0 45px; }
footer ul.snsList li{ width:57px; display:inline-block; margin:0 5px; vertical-align:middle; }
footer ul.snsList li:nth-child(3){ width:70px; }
footer ul.footerLink{ margin:0 0 55px; text-align:center; font-size:12px; }
footer ul.footerLink li{ display:inline-block; margin:0 5px; }
footer .copy{ padding:6px 0; background:#ffffff; font-size:10px;  }