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

/* ホスト製品のCLOUD版　価格表共通設定 */
section.price_host_cloud{width: 1000px; margin: 0 auto; padding: 0;}
@media (max-width: 600px) {
	section.price_host_cloud{width: 94%; margin: 0 auto;}
}

input.acd-check{display: none;}
label.acd-label{display: block; width: 50%; margin: auto auto 20px auto;}

label.acd-label:after{display: none;} /*  */

label.acd-label h3 {width: calc(100% - 80px);  padding: 10px 40px; background: #0747a6; color: #FFF; border-radius: 30px;
box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .3); text-align: center; font-size: 25px; line-height: 1.3em; font-weight: 500; font-family: 'Noto Sans Japanese', sans-serif;}
label.acd-label h3:hover{cursor: pointer;}

label.acd-label h3{position: relative;}
label.acd-label h3:after {content:''; box-sizing: border-box; display: block; width: 10px; height: 10px; 
	position: absolute; top:calc(50% - 7px); right: 30px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 14px solid #FFF;}

label.acd-label h3 + p {display: none; position: absolute;}

input.acd-check + label.acd-label + div.acd-content{display: none;}
input.acd-check:checked + label.acd-label{ margin: auto auto 30px auto;}
input.acd-check:checked + label.acd-label + div.acd-content{display: block;}
input.acd-check:checked + label.acd-label h3:after{transform: rotate(-90deg);}

@media (min-width: 600px) {
	label.acd-label{position: relative;}
	label.acd-label h3 + p{ position: absolute; top:-65px; left: 0; border: 3px solid #0848db; padding: 10px 20px; border-radius: 10px; background: #FFF; z-index: 9;}
	label.acd-label h3 + p:before {content: ""; position: absolute; bottom: -25px; left: 50%; margin-left: -15px; 
    border: 13px solid transparent; border-top: 13px solid #FFF; z-index: 2;}
	label.acd-label h3 + p:after {content: ""; position: absolute; bottom: -30px; left: 50%; margin-left: -17px; 
    border: 14px solid transparent; border-top: 14px solid #0848db; z-index: 1; }
	label.acd-label h3:hover + p{display: block;}
}

@media (max-width: 600px) {
	label.acd-label{display: block; width: 80%; margin: auto auto 20px auto;}
	label.acd-label h3{font-size: 20px;}
	label.acd-label h3:after{right: 20px;}
}


/* ホスト製品のDC版価格表 */
.price_host_cloud{width: 100%; margin: auto auto 20px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.price_host_cloud li h3{width: 100%; height: 50px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; border-radius: 5px 5px 0 0; color: #FFF; font-weight: bold;}
.price_host_cloud li h3{/*position: sticky; top:96px; z-index: 9;*/}
.price_host_cloud li h3 + div{display:flex; flex-direction:column; /*height: calc(100% - 50px);*/ justify-content: center; align-items: center; width: calc(100% - 0px);}

.price_host_cloud li h3 + div dl{width: 100%;}
.price_host_cloud li h3 + div dl dt{display: none;}
.price_host_cloud li h3 + div dl dd{width: calc(100% - 10px); padding: 0 5px; height: 70px; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; font-size: 80%; text-align: center; line-height: 110%;}

.price_host_cloud li h3 + div dl dd.height_l{height: 100px;}
.price_host_cloud li h3 + div table tr.height_l{height: 100px;}

.price_host_cloud li h3 + div dl dd .check{display: block; width: 15px; height: 15px;
    background-image: url(/common/img/product/icon-check.png); background-repeat: no-repeat; background-size: 15px;}

.price_host_cloud li h3 + div dl dd .check span{display: none;}

.price_host_cloud li h3 + div dl dd p{text-align: center; line-height: 100%; margin: auto;}
/*.price_host_cloud li p{text-align: center; line-height: 120%;}*/


.price_host_cloud li h3 span{width: 100%; text-align: center; display: flex; justify-content: center;}
.price_host_cloud li h3 span + span{padding: 0 10px;}
.price_host_cloud li h3 a.dt_btn{width:60px; padding: 2px 2px 1px;}
.price_host_cloud li h3 .ico_AI{margin: auto;}


.price_host_cloud li.plan_title{width: calc(20% - 0px);}
.price_host_cloud li.plan_title h3{background: #FFF;}
.price_host_cloud li.plan_title h3 + div table{border: none;}
.price_host_cloud li.plan_title h3 + div table th,
.price_host_cloud li.plan_title h3 + div table td{border: none; padding: 4px 10px; font-size: 80%;}
.price_host_cloud li.plan_title h3 + div table td{width: 55%; height: calc(70px - 8px); border-left: 2px solid #FFF; }

.price_host_cloud li.plan_title h3 + div table tr:nth-child(even) {background: #eeeeee;}
.price_host_cloud li.plan_title h3 + div table tr:nth-child(odd) {background: #fcfcfc;}

.price_host_cloud li.plan_title h3 + div table th.bk_right{background: #fcfcfc;}



.price_host_cloud li.Standard{width: calc(15% - 5px); margin-left: 5px;}
.price_host_cloud li.Standard h3{background: #5490db;}
.price_host_cloud li.Standard h3 + div {backgrounddd: #fcfcfc;}
.price_host_cloud li.Standard h3 + div dl dd{background: #fcfcfc;}
.price_host_cloud li.Standard h3 + div dl dd:nth-child(4n) {background: #eeeeee;}

.price_host_cloud li.Premium{width: calc(15% - 5px); margin-left: 5px;}
.price_host_cloud li.Premium h3{background: #063269;}
.price_host_cloud li.Premium h3 + div {backgrounddd: #f8fbff;}
.price_host_cloud li.Premium h3 + div dl dd{background: #f8fbff;}
.price_host_cloud li.Premium h3 + div dl dd:nth-child(4n) {background: #eef4fd;}

.price_host_cloud li.Enterprise{width: calc(15% - 5px); margin-left: 5px;}
.price_host_cloud li.Enterprise h3{background: #222;}
.price_host_cloud li.Enterprise h3 + div {backgrounddd: #fcfcfc;}
.price_host_cloud li.Enterprise h3 + div dl dd{background: #fcfcfc;}
.price_host_cloud li.Enterprise h3 + div dl dd:nth-child(4n) {background: #eeeeee;}

.price_host_cloud li.plan_detail{width: calc(35% - 5px); margin-left: 5px;}
.price_host_cloud li.plan_detail h3{background: #579300;}
.price_host_cloud li.plan_detail h3 + div {backgrounddd: #FDFEFC;}
.price_host_cloud li.plan_detail h3 + div dl dd{background: #FDFEFC; text-align: left;}
.price_host_cloud li.plan_detail h3 + div dl dd:nth-child(4n) {background: #F2F5EE;}

.price_host_cloud li.plan_detail h3 + div dl dd .btn a{padding: 6px 16px!important; font-size: 10px!important;}


/*
.price_host_cloud li.user_cnt{width: calc(33% - 0px);}
.price_host_cloud li.user_cnt h3{background: #777;}
.price_host_cloud li.user_cnt h3 + div {background: #eeeeee;}
.price_host_cloud li.user_cnt h3 + div ul{width: 100%;}
.price_host_cloud li.user_cnt h3 + div ul li{width: 100%; height: 40px; display: flex; justify-content: center; align-items: center;}
.price_host_cloud li.user_cnt h3 + div ul li:nth-child(odd){background: #fcfcfc;}
.price_host_cloud li.user_cnt h3 + div ul li:nth-child(even){background: #eeeeee;}


.price_host_cloud li.try{width: calc(33% - 0px);}
.price_host_cloud li.try h3 {background: #FF9933;}
.price_host_cloud li.try h3 + div {background: #fff9f3; width: calc(100% - 40px); padding: 0px 20px;
	display: flex; justify-content: center; align-content: flex-start; align-items: flex-start;}
	
.price_host_cloud li.try h3 + div div.try_detail{margin: 50px auto auto; text-align: center;}
.price_host_cloud li.try h3 + div div.try_detail{position: sticky; top:176px;}
.price_host_cloud li.try h3 + div div.try_detail ul{margin: auto; width: fit-content;}
.price_host_cloud li.try h3 + div div.try_detail ul li{text-align: left;}

.price_host_cloud li.license{width: calc(33% - 0px);}
.price_host_cloud li.license h3 {background: #5490db}
.price_host_cloud li.license h3 + div {background: #fcfcfc;}
.price_host_cloud li.license h3 + div div.license_detail{margin: 100px auto auto; text-align: center; padding-bottom: 20px;}
.price_host_cloud li.license h3 + div div.license_detail{position: sticky; top:200px;}

*/
@media (max-width: 600px) {
	.price_host_cloud{width: 90%; justify-content: center; margin-bottom: 20px; flex-wrap: wrap;}
	
    .price_host_cloud li.plan_title{display: none;}
    .price_host_cloud li{width: calc(100% - 0px)!important; margin-left: auto!important;}
    .price_host_cloud li h3 + div{height: auto;}
    
    .price_host_cloud li h3 + div dl{display: flex; flex-wrap: wrap; margin-bottom: 30px;}
    .price_host_cloud li h3 + div dl dt{display: block; width: 50%; font-size: 80%; height: 40px; text-align: center; background: #eeeeee; align-content: center;}
    .price_host_cloud li h3 + div dl dd{width: calc(50% - 10px); height: 40px; background: #fcfcfc;}
    .price_host_cloud li.Standard h3 + div dl dd:nth-child(4n) {background: #fcfcfc;}
    .price_host_cloud li.Premium h3 + div dl dd:nth-child(4n) {background: #f8fbff;}
    .price_host_cloud li.Enterprise h3 + div dl dd:nth-child(4n) {background: #fcfcfc;}
    .price_host_cloud li.plan_detail h3 + div dl dd:nth-child(4n) {background: #FDFEFC;}
    
    .price_host_cloud li h3 + div dl dt,
    .price_host_cloud li h3 + div dl dd{border-top: 4px solid #FFF;}
    
    .price_host_cloud li h3 + div dl dd.height_l{height: 40px;}
    
    
    .price_host_cloud li.plan_detail h3 + div dl dt{width: 100%; background: #F2F5EE;}
    .price_host_cloud li.plan_detail h3 + div dl dd{width: 100%; background: #FDFEFC; text-align: left; height: auto; min-height: 40px;}
    

    .ico_AI {margin: 2px 40% 0!important;}
    
    .price_host_cloud li h3 span + span a.dt_btn{width: 100px!important; margin: auto 2px;}
    .price_host_cloud li h3 span + span .ico_AI {margin: 2px 2px 0!important;}
    
    
/*
<h3>
    <span>Enterprise</span>
    <span>
        <a class="dt_btn" href="/cloud/atlassian-cloud/enterprise.html">特集ページ</a>
        <i class="ico_AI">AI</i>
    </span>
</h3>
*/

    
    /*
	.price_host_cloud li.user_cnt{width: calc(100% - 2px); margin-bottom: 20px;}
	.price_host_cloud li.try{width: calc(100% - 2px);  margin-bottom: 20px;}
	.price_host_cloud li.try h3{position: relative; top:0;}
    .price_host_cloud li.try h3 + div div.try_detail{margin: 20px auto auto;}
	
	.price_host_cloud li.license{width: calc(100% - 2px);}
	.price_host_cloud li.license h3{position: sticky; top:105px; z-index: 9;}
    .price_host_cloud li.license h3 + div div.license_detail{margin: 20px auto; padding-bottom: 0px;}
    */
}