@charset "utf-8";
/*
	Last Update:2021/11/21
	Auther: okada
*/
/*===================================================================
	layout
===================================================================*/
a:link { color:#818181; }
a:visited { color:#818181; }

.wrapper, .wrapper-t, .wrapper-b { position:relative; }
@media (max-width: 767px){
	.wrapper, .wrapper-t { padding-top:30px; }
	.wrapper, .wrapper-b { padding-bottom:30px; }
}
@media (min-width: 768px){
	.wrapper, .wrapper-t { padding-top:50px; }
	.wrapper, .wrapper-b { padding-bottom:50px; }
}

.center, .center2 { width:100%; margin:0 auto; text-align:left; }
.center { max-width:1000px; }

	@media (max-width:1030px){
		.center { padding-left:15px; padding-right:15px; }
	}



/*===================================================================
	#head
===================================================================*/
#head {
	height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 10;
    background: #fff;
    width: 100%;
    box-shadow: 0 1px 10px rgb(0 0 0 / 16%);
}
#head .left{ display: flex;     padding-left: 20px; justify-content: center; align-items: center;}
#head .left img{ height: 60px; object-fit: contain; width: 100%;}
#head h1{position: relative; display: flex; justify-content: center; align-items: center;}
#head h1 a{display: block;}
#head h1::before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 0 10px;
}
body.logout #head .right{display: none;}
#head .right{ display: flex; justify-content: center; align-items: center;}


#notice_btn,
#user_btn,
#menu_btn { display: flex; justify-content: center;  z-index: 9999;  height: 80px; width: 65px;}



/*notice_btn*/
#notice_btn > a {padding: 5px 0 5px 0; background: url(../image/layout/head/bell.png) no-repeat center/ 25px auto; display: block; position: relative;}
#notice_btn a > span { visibility:hidden; }
#notice_btn a > .alert_num { right: -10px; top: 10px; width: 25px; height: 25px; font-size: 1em;}
#notice_navi {
	display: none;
	max-height: 450px;
	overflow-y: scroll;
	position: absolute;
    top: 70px;
	width: 400px;
    padding: 10px 15px 0px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
    right: 12px;
    background: #fff;
    z-index: 999;}
#notice_navi  .notice_unit{display: flex; padding-bottom: 15px; padding-top: 15px;}
#notice_navi  .notice_unit:not(:last-child){border-bottom: 1px solid #EBEBEB;}
#notice_navi .app_unit {width: 20%;}
#notice_navi .text {width:80%; padding:0 10px;}
#notice_navi .app_unit ul li  .img{margin-bottom: 0;}
#notice_navi .app_unit ul li {width: 100%; padding: 0; margin-bottom: 0;}
#notice_navi .bottom{border-top:1px solid #EBEBEB; text-align: center; padding-top: 5px;}
#base.notice_open #notice_navi{display: block;}




/*user_btn*/
#user_btn > a {     padding: 15px 0 15px 0;
    background: url(../image/layout/head/user.png) no-repeat center/ 50px auto;
    display: block;}
#user_btn a > span { visibility:hidden; }
#user_navi {
	position: absolute;
    top: 70px;
	width: 300px;
    padding: 20px 15px 5px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
    right: 12px;
    background: #fff;
	display: none;
    z-index: 999;}

#user_navi img{max-width: 70px;}
#user_navi .user_unit{    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 15px;
    margin-bottom: 20px;}
#user_navi .user_unit .switch a{text-decoration: underline;}

#user_navi .plan_unit .unit{    padding: 15px 25px;}
#user_navi .plan_unit .unit .contents .paln {color: #5EB65E;}
#user_navi .plan_unit .unit .contents .detail a{text-decoration: underline;}
#user_navi .plan_unit {border: 1px solid #5EB65E; margin-bottom: 25px;}
#user_navi .plan_unit .hl{background: #5EB65E; color: #fff; text-align: center; padding: 3px 0;}
#user_navi .bottom{border-top:1px solid #EBEBEB; text-align: center; padding-top: 5px;}
#base.user_open #user_navi{display: block;}


/*menu_btn*/
#menu_btn > a {
    padding: 5px 0 5px 0; background: url(../image/layout/head/menu.png) no-repeat center/ 30px auto; display: block;}
#menu_btn a > span { visibility:hidden; }
#menu_navi {
	max-height: 450px;
	overflow-y: scroll;
	display: none;
	position: absolute;
    top: 70px;
	width: 300px;
    padding: 20px 10px 5px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
    right: 12px;
    background: #fff;
    z-index: 999;}
#menu_navi .app_unit ul li{width: calc(100% / 3);  padding: 0 10px; margin-bottom: 20px;}
#menu_navi .app_unit ul li  .img{border-radius: 200px; margin-bottom: 0;   background: #F7F7F7; box-shadow: none;}
#menu_navi .bottom{border-top:1px solid #EBEBEB; text-align: center; padding-top: 5px;}
#base.menu_open #menu_navi{display: block;}

@media(min-width:576px){
	#notice_btn,
	#user_btn,
	#menu_btn {  position: relative; }

}
@media(max-width:575px){
	#menu_navi,
	#user_navi,
	#notice_navi{max-width: 90vw;}

	{width: 90vw;}
	#notice_btn,
	#user_btn,
	#menu_btn{width: 55px;}
	#head .right{position: relative;}
	#head .left{padding-left: 15px; padding-right: 15px;}
}


/*===================================================================
	#foot
===================================================================*/
#copyright{display: flex; justify-content: center; align-items: center; background: #fff; color: #AFAFAF; padding: 15px 0;}
#copyright img{    height: 40px; margin-left: 5px;}

/*===================================================================
	common
===================================================================*/
.hl_1{font-weight: bold; font-size: 1.25em; ;}

.alert_num{     position: absolute;
    top: -15px;
    right: -15px;
    background: #EF3749;
    color: #fff;
    font-weight: bold;
	width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    font-size: 1.25em;}

.btn{    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    background: #E45E39;
    border: transparent;
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    padding: 10px 0;}

.app_unit ul{ display: flex; flex-wrap: wrap;}
.app_unit ul li{width: 20%; padding: 0 20px; margin-bottom: 30px;}
.app_unit ul li a{display: block;}
.app_unit ul li  .img{
	background: #fff;
	display: block;
	text-align: center;
	position: relative;
	margin-bottom: 10px;
	border-radius: 20px;
	box-shadow: 0 1px 3px rgb(0,0,0,16%);
}
.app_unit ul li.add_app .img_back{max-width: 30%;}
.app_unit ul li  .img_back{max-width: 60%; margin: 0 auto;     background-size: contain;}
.app_unit .add_app .detail .form{padding: 50px;}
.add_detail{padding: 50px 0;}

.app_unit ul li .name{text-align: center;}
#menu_navi .app_unit ul li .name{font-size: 0.8em;}

@media(max-width:991px){
	.app_unit ul li{width: 25%; }
}

@media(max-width:767px){
	.app_unit ul li{width: calc(100% / 3); }
}
@media(max-width:575px){
	.app_unit ul li{width: 50%; }
}


.comming_soon{    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: rgb(0,0,0,0.5);
    width: 100%;
    height: 100%;
    border-radius: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;}
.corporate{padding: 15px;}
.b_btm{border-bottom: 1px solid #DEDEDE;}

.star_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC;
    font-size: 25px; /*フォントサイズ 自由に設定化 */
}

.star_rating:before, .star_rating:after{
    content: '★★★★';
}

.star_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #E5A700;
}


/*.star_rating[data-rate="5"]:after{ width: 100%; }  星5 */
/*.star_rating[data-rate="4.5"]:after{ width: 95%; }  星4.5 */

.star_rating[data-rate="4"]:after{ width: 100%; } /* 星4 */
.star_rating[data-rate="3.5"]:after{ width: 88%; } /* 星3.5 */
.star_rating[data-rate="3"]:after{ width: 75%; } /* 星3 */
.star_rating[data-rate="2.5"]:after{ width: 63%; } /* 星2.5 */
.star_rating[data-rate="2"]:after{ width: 50%; } /* 星2 */
.star_rating[data-rate="1.5"]:after{ width: 38%; } /* 星1.5 */
.star_rating[data-rate="1"]:after{ width: 25%; } /* 星1 */
.star_rating[data-rate="0.5"]:after{ width: 13%; } /* 星0.5 */
.star_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */


.base_info  .link_btn a{
	background: #535353;
	color: #fff;
	display: block;
	padding: 3px 10px;}
.base_info  .hl{    display: flex;
	border-bottom: 1px solid rgb(112,112,112,0.2);
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 15px;
	align-items: center;}
.base_info .text_unit {padding: 15px;}

.base_info .plan_unit { padding: 25px 15px; text-align: center;}
.base_info .plan_unit .unit .contents .paln {color: #5EB65E;}
.base_info .plan_unit .unit .contents .detail a{text-decoration: underline;}
.base_info .plan_unit .batch img{max-width: 100px;}

.base_info .server_info,
.base_info .wc_info,
.base_info .plan_unit{background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 16%);}
.base_info .server_info .date{color: #A7A7A7;}


.box { background: #fff; width: 100%; box-shadow: 0 1px 3px rgb(0 0 0 / 16%); padding: 15px;}

.tbl_form {width: 100%;}
.tbl_form th,
.tbl_form td { vertical-align: middle;    padding: 15px;}
.tbl_form tbody th {font-weight:bold; position: relative; }
.tbl_form tr:not(:last-child)  { border-bottom: 1px solid #ccc; }

@media (min-width: 768px){
	.tbl_form tbody td {width: calc(100% - 210px);   }
	.tbl_form tbody th {width: 210px;}

}

@media (max-width: 767px){
	.tbl_form tbody td{    padding: 0px 15px 15px;}
	.tbl_form, .tbl_form tbody, .tbl_form tr, .tbl_form th, .tbl_form td {display: block;}
}

/*===================================================================
	icon
===================================================================*/
.icon { display:inline-block; line-height:100%; background-repeat:no-repeat; background-size:contain; background-position:left center; }

.icon_i1 { background-image:url(../image/layout/icon/i1.png); background-size:15px; background-position:left center; padding: 5px 0px 5px 15px; }
.icon_i2 { background-image:url(../image/layout/icon/i2.png); background-size:20px; background-position:left center; padding: 5px 0px 5px 30px; }
.icon_i3 { background-image:url(../image/layout/icon/i3.png); background-size:20px; background-position:left center; padding: 5px 0px 5px 30px; }
.icon_i4 { background-image:url(../image/layout/icon/i4.png); background-size:20px; background-position:left center; padding: 5px 0px 5px 30px; }
.icon_i5 { background-image:url(../image/layout/icon/i5.png); background-size:20px; background-position:left center; padding: 5px 0px 5px 30px; }


/*===================================================================
	common
===================================================================*/
.mb0 { margin-bottom:0 !important; }
.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }

.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }
.p0 { padding:0 !important; }

.disp_b { display:block; }
.disp_ib { display:inline-block; }
.disp_tbl { display:table; width:100%; height:100%; }
.disp_td { display:table-cell; vertical-align:middle; }
.disp_td_b { display:table-cell; vertical-align:bottom; }

.img_back { background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden; }
.img_back > img { visibility:hidden; width:1px; height:1px; }
.img_rect { padding-top:65%; line-height:1px; }
.img_sq { padding-top:100%; line-height:1px; }

.parallax,
.parallax:before,
.parallax:after { transition:opacity .7s, transform .7s, left .7s, right .7s; }
.parallax[data-parallax-in="vertical"],
.parallax[data-parallax-in="vertical2"],
.parallax[data-parallax-in="vertical3"] { opacity:1; transform:translateY(0); -webkit-transform:translateY(0); -ms-transform:translateY(0); }
.parallax[data-parallax-in="vertical"]:not(.parallax_on),
.parallax[data-parallax-in="vertical2"]:not(.parallax_on),
.parallax[data-parallax-in="vertical3"]:not(.parallax_on) { opacity:0 !important; }
.parallax[data-parallax-in="vertical"]:not(.parallax_on) { transform:translateY(30px); -webkit-transform:translateY(30px); -ms-transform:translateY(30px); }
.parallax[data-parallax-in="vertical2"]:not(.parallax_on) { transform:translateY(60px); -webkit-transform:translateY(60px); -ms-transform:translateY(60px); }
.parallax[data-parallax-in="vertical3"]:not(.parallax_on) { transform:translateY(90px); -webkit-transform:translateY(90px); -ms-transform:translateY(90px); }
.parallax[data-parallax-in="left"] { position:relative; left:0; }
.parallax[data-parallax-in="left"]:not(.parallax_on) { left:-100vw; }
.parallax[data-parallax-in="right"] { position:relative; right:0; }
.parallax[data-parallax-in="right"]:not(.parallax_on) { right:-100vw; }

.parallax[data-parallax-in="slide_right"],
.parallax[data-parallax-in="slide_left"] { display:inline-block; position:relative; }
.parallax[data-parallax-in="slide_right"] > *,
.parallax[data-parallax-in="slide_left"] > * { position:relative; display:block; transform:translateX(0vw); transition:all .5s; transition-delay:.4s; }
.parallax[data-parallax-in="slide_right"]:before,
.parallax[data-parallax-in="slide_left"]:before { content:""; position:absolute; top:0; width:100%; height:100%; background:#9CB5A7; transition:all .5s; }
.parallax[data-parallax-in="slide_right"]:before { right:0; }
.parallax[data-parallax-in="slide_left"]:before { left:0; }
.parallax[data-parallax-in="slide_right"]:not(.parallax_on):before,
.parallax[data-parallax-in="slide_left"]:not(.parallax_on):before { width:0%; }
.parallax[data-parallax-in="slide_right"]:not(.parallax_on)  > * { transform:translateX(100vw); }
.parallax[data-parallax-in="slide_left"]:not(.parallax_on)  > * { transform:translateX(-100vw); }