@charset "utf-8";
/* CSS Document */

/* /common/css/page/atlassian_info.css　から抜粋 */
.contents{padding-bottom: 0!important;}
.Android i{display: block;}

@media (min-width: 600px) {
    .pc_view{display: block;}
    .sp_view{display: none;}
}
@media (max-width: 600px) {
    .pc_view{display: none;}
    .sp_view{display: block;}
}

#atlassian_info{}
#atlassian_info .title{border:0;}
#atlassian_info h2{font-size:2.6em; line-height:120%; color:#333333; text-align:center; margin-bottom:50px;}
#atlassian_info h3.title{font-size:2.1em; line-height:120%; color:#333333; border-bottom:3px solid #0e367d;}
#atlassian_info h4{font-weight:bold;}
#atlassian_info p{font-size:1.2em; line-height:160%;}
#atlassian_info dl{font-size:1.2em; line-height:160%;}
#atlassian_info a{word-break: break-all;}

/* atlassian_infoへのバナーリンク */
.atlassian_info{position:relative; top:-20px; margin: 0 auto; text-align:center;}
.atlassian_info a{
    background-color:#0e367d; width: 1000px; padding:10px 0px; color:#FFFFFF; font-weight:bold; text-decoration:none; font-size:1.4em; line-height:2.0em; display:inline-block; border:1px solid #0e367d;}
.atlassian_info a:hover{background-color:#FFFFFF; color:#0e367d; }
.atlassian_info a span{margin-left:20px; font-size:0.9em; font-weight: normal; border: 1px solid #FFF; border-radius:4px; padding: 0 10px 0 16px;}
.atlassian_info a span:after{content:">>"; color:#FFF;}
.atlassian_info a:hover span{background-color:#0d76dc; color:#FFF;}

@media (max-width: 600px) {
    .atlassian_info{display:block; position:relative; top:-15px; }
    .atlassian_info a{display:inline-block; width: 90%; line-height:1.4em; padding:10px;}
    .atlassian_info a span{display:block; width: 60%; margin: auto;}
}


/* TOPのみの設定は以下から*/
section.eyecatch{background-image: url(/common/img/product/lst_bg_v2.webp); background-position: 50% 0%;
    position: relative; top:-25px; padding: 0 0; margin-bottom: 15px;}
section.eyecatch .lst_eyecatch{background:rgba(255,255,255,0.8); width: calc(1000px - 40px); padding: 30px 20px 20px; color: #000; margin-top: -5px; margin-bottom: 0px; position: relative;}

section.eyecatch .lst_eyecatch h1{font-size: 2.4em; font-weight: bold; margin-bottom: 10px;}
section.eyecatch .lst_eyecatch h1 small{margin-left: 16px;}
section.eyecatch .lst_eyecatch p{font-size: 1.0em;}

@media (max-width: 600px){
	section.eyecatch{/*padding: 40px 0 0; margin-top: 20px;*/ }
	section.eyecatch .lst_eyecatch{width: calc(100% - 40px);}
	section.eyecatch .lst_eyecatch h1{line-height: 100%;}
	section.eyecatch .lst_eyecatch h1 small{display: block;}
}


/* Atlassian bland add */
.solution_partner {width:332px; max-width: 100%; flex-wrap: wrap; margin: 8px auto 16px;}
.badge{width: calc( calc(100% / 3) - 16px)!important;}
.badge img {width :100%; height: auto;}

.Platinum_Solution_Partner .lst{width: calc(100% - 20px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 0.86em; line-height: 140%; border: 2px solid #0747A6; padding: 10px 10px 0; background: #d5e4fa!important;}
.Platinum_Solution_Partner .lst .solution_partner{width: calc(20% - 0px); }
.Platinum_Solution_Partner .lst .solution_partner img{width: 100%; height: auto;}
.Platinum_Solution_Partner .lst .solution_partner .badge {margin-top:10px;}

.Platinum_Solution_Partner .lst .APAC_Services{width: calc(20% - 0px); text-align: center;}
.Platinum_Solution_Partner .lst .APAC_Services img{width: 40%; height: auto; margin-bottom: 6px;}
.Platinum_Solution_Partner .lst .APAC_Services p{text-align: center; font-size: 0.9em; line-height: 100%;}

.Platinum_Solution_Partner .lst .notice{width: calc(60% - 0px);}

@media (max-width: 600px){
	.solution_partner {width:332px; max-width: 100%; flex-wrap: wrap; margin: 8px auto 8px;}
	.Platinum_Solution_Partner .lst{width: calc(100% - 20px); padding: 0px 10px;}
	.Platinum_Solution_Partner .lst .solution_partner{width: calc(45% - 10px); padding: 0;}
	.Platinum_Solution_Partner .lst .APAC_Services{width: calc(55% - 20px); padding:10px; display: flex; align-items: center;}
	.Platinum_Solution_Partner .lst .APAC_Services img{width: 30%; height: auto;}
	.Platinum_Solution_Partner .lst .APAC_Services p{padding-left: 10px; font-size: 1.0em;}
	.Platinum_Solution_Partner .lst .notice{width: calc(100% - 0px); font-size: 0.9em; padding:0; display: none;}
}

.Platinum_Solution_Partner h3{font-size: 0.8em; font-weight: normal;}
.Platinum_Solution_Partner h3+small{display: block; margin-bottom: 0em;}
.Platinum_Solution_Partner p{font-size: 1.2em;}


/* リンクナビ */
.link_navi{display: flex; }
.link_navi li{width: 100%; color:#FFF; border-bottom: 0px solid #222; text-align: center; line-height: 120%;}
.link_navi li a{display: flex; width: 100%; height: 50px; }
.link_navi li a span{display:block; text-align: left; margin: auto; width:fit-content;}
/*.link_navi li:nth-child(1){background: #0e367d; border: 1px solid #0e367d;}
.link_navi li:nth-child(2){background: #0096ac; border: 1px solid #0096ac;}*/

.link_navi li{background: #0096ac; border: 1px solid #0096ac;}


.link_navi li a span{position: relative; display: block;}
.link_navi li a span i{position:absolute; font-style: normal; font-size: 3.6em; top:0%; right: -1.0em; color: rgba(255,255,255,0.5);}

/*
.link_navi li:nth-child(1):hover{background: #FFF; color: #0e367d; border: 1px solid #0e367d;}
.link_navi li:nth-child(1):hover a span i{color: rgba(14,54,124,0.5);}
*/
    
.link_navi li:hover{background: #FFF; color: #0096ac; border: 1px solid #0096ac;}
.link_navi li:hover a span i{color: rgba(0,150,172,0.5);}

@media (max-width: 600px) {
.link_navi{display: flex; flex-wrap: wrap;}
.link_navi li{width: 100%; margin: auto;}
	.link_navi li a span i{position:absolute; font-style: normal; font-size: 3.6em; top:25%;}
}


/* eye_catch 一覧 */
.tile_lst{display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between;}
.tile_lst li{display: flex; flex-wrap: wrap; width: calc(32% - 30px); padding: 15px 15px 0 15px; line-height: 120%; border: 1px solid #ccc; border-radius: 6px; align-content: flex-start; background: #FFF; margin-bottom: 20px;}
.tile_lst_max2{justify-content:flex-start;}
@media (min-width: 600px) {
	.tile_lst_max2 li:nth-child(n+2){margin-left: 17px;}
}
@media (max-width: 600px) {
    .tile_lst{display: flex; flex-wrap: wrap;}
	.tile_lst li{display: flex; flex-wrap: wrap; width: calc(100% - 20px); justify-content: center;}
    .tile_lst li{margin-right: 0px; margin-bottom: 20px;}
    .tile_lst li a h3{font-size: 1.2em; height: auto; margin: 1em 0;}
}

.tile_lst li:hover{filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3)); border: 1px solid #aaa; transition : 0.5s;}
.tile_lst li:hover a h3,
.tile_lst li:hover a p{/*text-decoration:underline;*/}

.tile_lst li a{display: block; width: 100%; height: 100%; text-align: center; margin-bottom: 1em;}

.tile_lst li a div.eye_catch{width: 100%; height: auto; background: #FFF; border-radius: 6px; padding: 0px; overflow: hidden;}
.tile_lst li a div.eye_catch img{width: 100%; max-height: 70px; object-fit: contain; object-fit:cover; margin-top: 0px;}


/* クラウド、オンプレミス、サーバー */
.tile_lst li a div.eye_catch ul{display: flex; justify-content: center; top:-30px;}
.tile_lst li a div.eye_catch ul li{width: 70px; height: auto; background: #0747A6; color: #FFF; margin: 0 4px; border: none;
font-size: 0.6em; border-radius: 2px; padding: 3px 0 2px 0; text-align: center; display: flex; justify-content: center;}

.tile_lst li a div.eye_catch .logo_area{width: 100%; height: 100px; display: flex; justify-content: center; align-items: center;}
.tile_lst li a div.eye_catch .logo_area img{width: 100%; height: auto;}

.tile_lst li a div.eye_catch .logo_w90 img{width: 90%; height: auto;}
.tile_lst li a div.eye_catch .logo_w80 img{width: 80%; height: auto;}
.tile_lst li a div.eye_catch .logo_w70 img{width: 70%; height: auto;}
.tile_lst li a div.eye_catch .logo_w50 img{width: 50%; height: auto;}
.tile_lst li a div.eye_catch .logo_w45 img{width: 45%; height: auto;}
.tile_lst li a div.eye_catch .logo_w40 img{width: 40%; height: auto;}
.tile_lst li a div.eye_catch .logo_w30 img{width: 30%; height: auto;}

.tile_lst li a div.eye_catch .logo_w10 img{width: 13%; height: auto; margin-right: 10px;}
.tile_lst li a div.eye_catch .logo_w10 span{font-weight: bold; padding-left: 2px; font-size: 1.30em; text-align: left; line-height: 100%;}

.tile_lst li a div.eye_catch .logo_w20 img{width: 18%; height: auto; margin-right: 10px;}
.tile_lst li a div.eye_catch .logo_w20 span{font-weight: bold; padding-left: 2px; font-size: 1.40em; text-align: left; line-height: 100%;}

.tile_lst li a div.eye_catch h3{width: 100%; font-weight: bold; text-align: center; font-size: 1.2em; color:#555; padding: 6px 0; margin-bottom: 10px;}
.tile_lst li a div.eye_catch h3 b{display: none;}



div.forProduct{background: #ebebeb; /*background: #eaf0f8;*/ padding: 4px 0 2px; height: 24px;}


/* atlassian の製品一覧 */
.atlassian li a div.eye_catch .img_area{padding: 0; margin-bottom: 10px; position: relative;}
.atlassian li a div.eye_catch .img_area:after{content: ""; width: 100%; height: 100%; display: block; position: absolute; top:0; left: 0; background: rgba(0,0,0,0.1);}
.atlassian li a div.eye_catch p{text-align: center; margin-bottom: 0;}

.atlassian li a div.forProduct{display: flex; justify-content: center; align-items: center;}
.atlassian li a div.forProduct i.ico_cloud_onpre img.cloud{width: 26px; height: auto; margin: 0 5px 2px;}
.atlassian li a div.forProduct i.ico_cloud_onpre img.onpre{width: 20px; height: auto; margin: 0 5px 2px;}
.atlassian li {position: relative;}
.atlassian li a div.eye_catch p{margin-bottom: 30px;}
.atlassian li a div.eye_catch div.forProduct{position: absolute; bottom: 10px; width: calc(100% - 30px);}


.atlassian li a div.eye_catch .logo_area{width: 100%; height: 70px; display: flex; justify-content: center; align-items: center;}
.atlassian li a div.eye_catch h3{padding: 6px 0; margin-bottom: 20px;}


/* アプリ の製品一覧 */
img.ico_jsm{width: 22px; height: auto; position: relative; bottom: 4px;}
img.ico_confl{width: 22px; height: auto; position: relative; bottom: 4px;}
img.ico_jira{width: 22px; height: auto; position: relative; bottom: 4px;}

img.ico_jsw{width: 28px; height: auto; position: relative; bottom: 2px;}


@media (max-width: 600px) {
    img.ico_confl{width: 22px; height: auto; position: relative; bottom: 4px; margin-top: 10px;}
}




.app li a div.forProduct i img.ico_jira {width: 22px; height: auto; margin-bottom: 1px;}


i.ico_cloud_onpre_guide{font-size: 0.6em; font-weight: normal; color: #092586; padding-top: 0px; position: relative; top:0px;}
i.ico_cloud_onpre_guide img.cloud{width: 26px; height: auto; margin: 0 5px 5px;}
i.ico_cloud_onpre_guide img.onpre{width: 20px; height: auto; margin: 0 5px 5px;}
@media (max-width: 600px) {
	i.ico_cloud_onpre_guide{display: block;}
}

.app li a div.forProduct{display: flex; justify-content: center; align-items: center; color:#777; font-size: 0.8em;}
.app li a div.forProduct i img{width: 20px; height: auto;}
.app li a div.forProduct i img.jsw{width: 26px; height: auto; position: relative; top:2px;}

.app li a div.forProduct i.ico_cloud_onpre{margin-left: 10px; margin-bottom: 1px;}
.app li a div.forProduct i.ico_cloud_onpre img.cloud{width: 26px; height: auto; margin: 0 5px 2px;}
.app li a div.forProduct i.ico_cloud_onpre img.onpre{width: 20px; height: auto; margin: 0 5px 2px;}


.app li {position: relative;}
.app li a div.eye_catch p{margin-bottom: 40px; font-size: 0.9em; color: #777; text-align: left;}
.app li a div.eye_catch div.forProduct{position: absolute; bottom: 10px; width: calc(100% - 30px);}


.app li a div.eye_catch .logo_area span{font-weight: bold; padding-left: 2px; font-size: 1.40em; text-align: left; line-height: 120%;}

.app li a div.forProduct{background: #eaf0f8;}


/* その他 の製品一覧 */
.other li a div.eye_catch .img_area{padding: 0; margin-bottom: 10px; position: relative;}
.other li a div.eye_catch .img_area:after{content: ""; width: 100%; height: 100%; display: block; position: absolute; top:0; left: 0; background: rgba(0,0,0,0.1);}
.other li a div.Atlassian_Data_Center .logo_area{font-size: 1.4em; font-weight: bold;}

.other li a div.forProduct{display: flex; justify-content: center; align-items: center;}
.other li a div.forProduct i.ico_cloud_onpre img.cloud{width: 26px; height: auto; margin: 0 5px 2px;}
.other li a div.forProduct i.ico_cloud_onpre img.onpre{width: 20px; height: auto; margin: 0 5px 2px;}
.other li {position: relative;}
.other li a div.eye_catch p{margin-bottom: 30px;}
.other li a div.eye_catch div.forProduct{position: absolute; bottom: 10px; width: calc(100% - 30px);}


/* グローバル、大規模利用のお客様向け一覧 */
.global li a div.eye_catch{height: 290px!important;}
@media (max-width: 600px) {
    .global li a div.eye_catch{height: auto;}
}
.global li a div.eye_catch h3{display: flex; justify-content: center; align-items: center; height: auto;}
.global li a div.eye_catch .img_area{padding: 0; margin-bottom: 10px; position: relative;}
.global li a div.eye_catch .img_area:after{content: ""; width: 100%; height: 100%; display: block; position: absolute; top:0; left: 0; background: rgba(0,0,0,0.1);}

.global li a div.eye_catch h4{font-size: 1.0em; font-weight: bold; margin-bottom: 10px;}

.global li a div.forProduct{display: flex; justify-content: center; align-items: center; color:#777; font-size: 0.8em;
position: absolute; bottom: 10px; width: calc(100% - 30px); padding: 2px 0 2px; height: 60px;}
.global li a div.forProduct i img{width: 20px; height: auto;}
.global li a div.forProduct i img.jsw{width: 26px; height: auto; position: relative; bottom:-2px;}
.global li a div.forProduct i.ico_cloud_onpre{padding-left: 10px;}
.global li a div.forProduct i.ico_cloud_onpre img.cloud{width: 26px; height: auto; margin: 0 5px 2px;}
.global li a div.forProduct i.ico_cloud_onpre img.onpre{width: 20px; height: auto; margin: 0 5px 2px;}
.global li {position: relative;}
.global li a div.eye_catch p{margin-bottom: 40px; font-size: 0.9; color: #777;}


/* 移行サービス の製品一覧 */
.migration li a div.eye_catch h3{display: flex; justify-content: center; align-items: center; height: 30px;}
.migration li a div.eye_catch .img_area{padding: 0; margin-bottom: 10px; position: relative;}
.migration li a div.eye_catch .img_area:after{content: ""; width: 100%; height: 100%; display: block; position: absolute; top:0; left: 0; background: rgba(0,0,0,0.1);}

.migration li a div.eye_catch h4{font-size: 1.0em; font-weight: bold; margin-bottom: 10px;}




/* /common/css/page/product/partner_badge.css コピー＆調整 */
.Platinum_Solution_Partner{background: #bbe2eb; width: 100%; padding: 0;}
.partner_badge{/*width: 1000px;*/ display:flex; flex-wrap: wrap; justify-content: center; position:relative; padding-bottom:0; text-align: center; margin: auto;}
.partner_badge .badge_lst{display: flex; justify-content: center; align-items: center; margin-bottom: 0px; padding: 8px 0 0; }
.partner_badge .badge_lst img{height: 100px; width: auto; margin: auto 10px auto 0px;}
.partner_badge .badge_lst img.large{height: 110px; width: auto; margin: auto 10px auto 10px;}

.Platinum_Solution_Partner .notice{text-align: center; padding: 10px 10px; background: #bbe2eb;}
.Platinum_Solution_Partner .notice p{/*width: 1000px;*/ margin: auto; font-size: 0.90em!important; line-height: 140%; color: #333;}

@media (max-width: 1000px) {
	.partner_badge{width: calc(100% - 20px);}
	.Platinum_Solution_Partner .notice_label{width: calc(100% - 20px);}
	.Platinum_Solution_Partner .notice p{width: calc(100% - 20px);}
}
@media (max-width: 600px) {
	.partner_badge{width: calc(100% - 0px);}
	.partner_badge .badge_lst{width: calc(100% - 10px); padding: 10px 5px; display:flex; flex-wrap: wrap; justify-content:center; align-items: center; margin: auto;}
	.partner_badge .badge_lst img{width: 15%; height: auto;}
	.partner_badge .badge_lst img.large{width: 12%; height: auto; margin: auto 4px;}
	.partner_badge .badge_lst img:first-child{width: 30%; height: auto;}
	/*
	.partner_badge .badge_lst img:first-child{width: 80%; height: auto;}
	.partner_badge .badge_lst img{width: auto; height: 70px; margin: 10px;}
	.partner_badge .badge_lst img.large{width: auto; height: 120px;}
	*/
	
	.Platinum_Solution_Partner .notice{text-align: center;}
	.Platinum_Solution_Partner .notice p{width: 90%; font-size: 0.9em; text-align: left;}	
}
	



/* 絞り混み実装で追加クラス */
/* 一覧 */
/*
.item_container {width:1100px; display: flex; flex-wrap: wrap; justify-content:flex-start; 
	position: relative; left: -14px; margin-bottom: 50px;}
.item_container div{width:calc(29% - 10px); border-radius: 4px; 
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2); transition: all 0.5s; padding: 0; background: #FFF;}

.item_container div:hover{box-shadow: 0 0 5px 3px rgba(0, 0, 0, .2);}
.item_container div span{display: block;  width: 100%; height: 200px; overflow: hidden; margin-bottom: 10px;}
.item_container div span img{width: 100%; height: 200px; object-fit: cover; overflow: hidden; transition: transform .6s ease;}

.item_container div h4{font-size: 20px; line-height: 30px; text-align: left; width: 90%; margin: 20px auto 10px; text-decoration: none; font-weight: bold; color: #2CA6B5;}

.item_container div p{font-size: 0.9em; text-align: left; width: 90%; line-height: 28px; margin: auto auto 10px; color: #676767;}




@media (max-width: 600px) {
	.item_container{width: 100%; display: flex; flex-wrap: wrap; justify-content:center; position: relative; left: 0px;}
	.item_container div{width: calc(99% - 0px); margin: auto auto 20px;}
	.item_container div span{text-align: left; height: auto;}
}

@media (max-width: 420px) {
	.item_container div ul li{padding: 6px 6px 4px; font-size: 0.8em;}
}
*/

/* ★★　ブラウザチェックOKなら適用、NGなら手書きで対応　★★ */
/*
.item_container div h4{overflow: hidden; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;}
.item_container div p{overflow: hidden; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;}
*/


/* 一覧hover */
/*
.item_container div:hover{background: #4da6b6;}
@media (min-width: 600px) {
.item_container div:hover span img{transform: scale(1.1);}
}
.item_container div:hover h4,
.item_container div:hover p{color: #FFF;}
*/

.item {
    margin: 1.2rem;
    padding: 1.0rem;
    background: #efefef;
    width: calc(80% / 3);
    text-align: center;
	animation: checked_animation 0.8s ease-in-out both;
}
/*絞り込み条件外のアイテム*/
.hide_item {
    display: none;
}

.item2 {
    margin: 1.2rem;
    padding: 1.0rem;
    background: #efefef;
    width: calc(80% / 3);
    text-align: center;
	animation: checked_animation 0.8s ease-in-out both;
}
/*絞り込み条件外のアイテム*/
.hide_item2 {
    display: none;
}

/* フィルタリングアニメーション  */
@keyframes checked_animation {
  0% {
  transform: translate(0, 300px);
  opacity: 0;
  }
  100% {
  transform: translate(0, 0);
  opacity: 1;
  }
}


.search_area img.cloud{width: 26px; height: auto;}
.search_area img.onpre{width: 26px; height: auto;}
/* eye_catch 一覧 */
.item_container{display: flex; flex-wrap: wrap; width: calc(1000px + 30px); justify-content:flex-start; background: #FFF; }


.item_container .match{border: 1px solid #ccc; border-radius: 6px; padding: 15px 10px 15px 10px; line-height: 120%; background: #FFF; width: calc(320px - 20px - 4px);  margin: 0 19px 20px 0;}
.item_container .match.noline {border: none; pointer-events: none;}

.item_container .match a div.eye_catch .logo_area{width: 100%; height: 100px; display: flex; justify-content: center; align-items: center;}
.item_container .match a div.eye_catch .logo_area img{width: 100%; height: auto;}
.item_container .match a div.eye_catch h3{font-weight: bold; font-size: 1.2em; color: #555; margin-bottom: 10px;}
.item_container .match a div.eye_catch h3 b{display: none;}
.item_container .match a div.eye_catch p{margin-bottom: 40px; font-size: 0.9em; color: #777; text-align: left;}

.item_container .match a div.eye_catch div.forProduct{position: absolute; bottom: 10px; background: #eaf0f8; width: calc(100% - 30px);
font-size: 0.8em; color: #777; padding: 2px 0 2px; height: 28px; display: flex; justify-content: center; align-items: center;}
.item_container .match a div.eye_catch div.forProduct i img{width: 20px; height: auto;}

.item_container .match a div.eye_catch div.forProduct i img.jsw{width: 26px; height: auto; position: relative; bottom: -2px;}


.item_container .match a div.eye_catch div.forProduct i.ico_cloud_onpre{margin-left: 10px;}
.item_container .match a div.eye_catch div.forProduct i.ico_cloud_onpre img.cloud{width: 26px; height: auto; margin: 0 5px 2px;}
.item_container .match a div.eye_catch div.forProduct i.ico_cloud_onpre img.onpre{width: 20px; height: auto; margin: 0 5px 2px;}

.item_container .match:hover{filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3)); border: 1px solid #aaa; transition : 0.5s;}

.item_container .match a div.eye_catch .logo_w90 img{width: 90%; height: auto;}
.item_container .match a div.eye_catch .logo_w80 img{width: 80%; height: auto;}
.item_container .match a div.eye_catch .logo_w70 img{width: 70%; height: auto;}
.item_container .match a div.eye_catch .logo_w50 img{width: 50%; height: auto;}
.item_container .match a div.eye_catch .logo_w45 img{width: 45%; height: auto;}
.item_container .match a div.eye_catch .logo_w40 img{width: 40%; height: auto;}

.item_container .match a div.eye_catch .logo_w10 img{width: 13%; height: auto; margin-right: 10px;}
.item_container .match a div.eye_catch .logo_w10 span{font-weight: bold; padding-left: 2px; font-size: 1.30em; text-align: left; line-height: 100%;}

.item_container .match a div.eye_catch .logo_w20 img{width: 18%; height: auto; margin-right: 10px;}
.item_container .match a div.eye_catch .logo_w20 span{font-weight: bold; padding-left: 2px; font-size: 1.40em; text-align: left; line-height: 100%;}

.item_container .inner_title{width: 100%; margin-top: 50px;}

@media (max-width: 600px) {
	.item_container{display: flex; flex-wrap: wrap; width: 100%; justify-content:center;}
	.item_container .match{border: 1px solid #ccc; border-radius: 6px; padding: 15px 10px 15px 10px; line-height: 120%; background: #FFF; width: calc(100% - 2px);  margin: 0 auto 20px auto;}
}


/* 20240726_add */
.hide_item1{display: none;}
.hide_item2{display: none;}
.hide_item_host{display: none;}

.item_host a div.eye_catch h3{width: 100%; font-weight: bold; text-align: center; font-size: 1.2em; color:#555; padding: 6px 0; margin-bottom: 20px;}
.item_host a div.eye_catch .logo_area{width: 100%; height: 70px; display: flex; justify-content: center; align-items: center; }
	
.item_host a div.eye_catch .logo_w90 img{width: 90%!important; height: auto!important;}
.item_host a div.eye_catch .logo_w80 img{width: 80%!important; height: auto!important;}
.item_host a div.eye_catch .logo_w70 img{width: 70%!important; height: auto!important;}
.item_host a div.eye_catch .logo_w50 img{width: 50%!important; height: auto!important;}
.item_host a div.eye_catch .logo_w45 img{width: 45%!important; height: auto!important;}
.item_host a div.eye_catch .logo_w40 img{width: 40%!important; height: auto!important;}
.item_host a div.eye_catch .logo_w30 img{width: 30%!important; height: auto!important;}


.logo_w10 img{width: 13%; height: auto; margin-right: 10px;}
.logo_w10 span{font-weight: bold; padding-left: 2px; font-size: 1.30em; text-align: left; line-height: 100%;}

.logo_w20 img{width: 18%; height: auto; margin-right: 10px;}
.logo_w20 span{font-weight: bold; padding-left: 2px; font-size: 1.40em; text-align: left; line-height: 100%;}
	
.item_host{border: 1px solid #ccc; border-radius: 6px; padding: 15px 10px 15px 10px; line-height: 120%; background: #FFF; width: calc(320px - 20px - 2px);  margin: 0 19px 20px 0;}

.item_host a{display: block; width: 100%; height: 100%; text-align: center; margin-bottom: 0em;}
.item_host a div.eye_catch{width: 100%; height: auto; background: #FFF; border-radius: 6px; padding: 0px; overflow: hidden;}
.item_host a div.eye_catch img{width: 100%; max-height: 70px; object-fit: contain; object-fit:cover; margin-top: 0px;}

.item_host a div.eye_catch .img_area{padding: 0; margin-bottom: 10px; position: relative;}
.item_host a div.eye_catch .img_area:after{content: ""; width: 100%; height: 100%; display: block; position: absolute; top:0; left: 0; background: rgba(0,0,0,0.1);}
	
.item_host{position: relative;}
.item_host a div.eye_catch p{text-align: center!important; margin-bottom: 30px; font-size: 1.04em!important; color: #444!important;}
.item_host a div.eye_catch div.forProduct{display: flex; justify-content: center; align-items: center; background: #ebebeb!important; padding: 4px 0 2px; height: 24px; position: absolute; bottom: 10px; width: calc(100% - 30px);}
.item_host a div.forProduct i.ico_cloud_onpre img.cloud{width: 26px; height: auto; margin: 0 5px 2px;}
.item_host a div.forProduct i.ico_cloud_onpre img.onpre{width: 20px; height: auto; margin: 0 5px 2px;}


.search_area form{display: flex; flex-wrap: wrap; align-items: flex-end;}
.search_area form h3{width: 70px; height: 20px; padding-bottom: 2px;}
.search_area form h3 + div{width: calc(100% - 70px); margin-top: 10px;}
	
/* キーワード（チェックボックス）の装飾*/
/* チェックボックス全体 */
.search_ui_lst label{display:inline-block; position: relative; cursor: pointer; margin: auto 20px;}
.search_ui_lst label .input_parts{display: none;}

.span_parts{position: relative;}
.span_parts img{margin-right: 0; }
.span_parts:before{content: ""; position: absolute; top: 0px; left: -20px; height: 16px; width: 16px; border: 2px solid #aaa;
box-sizing: border-box; border-radius: 2px; background: #FFF;}
.span_parts:after {content: ""; position: absolute; top: 2px; left: -15px; 
width: 4px; height: 8px; border: 2px solid #FFF; border-width: 0 2px 2px 0; transform: rotate(45deg); display: block;}
	
.input_parts:checked + .span_parts:before {background-color: #4da6b6; border: 2px solid #4da6b6; /* 146ce6 */}
.input_parts:checked + .span_parts:after {display: block;}

.span_parts:hover{cursor: pointer;}

.chek_clear span{border: none; background: #999; color: #FFF; font-weight: normal;
display: block; font-size: 11px; line-height: 1.2em; width: auto; height: auto; padding:2px 8px 1px;
position: relative; top:-2px; left:-38px;}
	
.chek_clear .span_parts:before{display: none;}
.chek_clear .span_parts:after{display: none;}

.item_container{margin-top: 10px;}

.search_ui_lst img.cloud{width: auto; height: 18px; position: relative; top:-6px;}
.search_ui_lst img.onpre{width: auto; height: 24px; position: relative; top:-5px;}


@media (max-width: 600px) {
	.search_area form{display: flex; flex-wrap: wrap; align-items: flex-end;}
	.search_area form h3{width: 100%; height: 20px; font-weight: bold;}
	.search_area form h3 + div{width: calc(100% - 0px); position: relative; margin-top: 0px;}
	.search_area form h3 + div .chek_clear{position: absolute; top:-20px; left: 80px;}
	.search_area form h3 + div .chek_clear span{display: block; width: 50px; text-align: center;}
	
	.search_ui_lst{margin-bottom: 10px;}
}

/* 個別設定 */
 .img_pos_focus img{object-position: center 57%;}


/* ロゴ画像無しホスト製品 */
.logo_txt{font-size: 1.8em; font-weight: bold; line-height: 1.3;}
@media (max-width: 600px) {
    .logo_txt{font-size: 3.0em; font-weight: bold;}
}
@media (max-width: 440px) {
    .logo_txt{font-size: 2.2em; font-weight: bold;}
}

.item_host_divider_tit{border-top: 1px dotted #999; padding-top: 10px;}