@charset "UTF-8";

/*トップイメージ*/
.topBox{
    width: 100%;
    position: relative;
    top: 10%;
}
.topBox video {
    width: 100%;
}
.topBox h1{
    position: absolute;
    top: 27%;
    left: 0;
    right: 0;
    z-index: 1;
    color: #365399;
    font-size: 2.3vw;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.4;
}
.topsmarthome{
    display: flex;
    justify-content: space-between;
    margin: 100px auto 80px;
    width: 80%;
}
.open{
    width: 100%;
}
.youtubeinner{
    width: 41%;
    margin: 60px auto 0;
}
.open_detail{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.open_detail > div {
    width: 47%;
}
.open_detail > div iframe{
    margin-top: 20px;
    width: 100%;
}
.open_detail dl {
    min-height: 22vh;
}
.open_detail dt{
    font-size: 2.5vw;
    background-color: #008095;
    color: #fff;
    text-align: center;
}
.open_detail dd:first-of-type {
    padding-top: 10px;
}
.open_detail dd a{
    text-decoration: underline;
}
.top-youtube{
    position: relative;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.top-youtube iframe{
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
.topsmarthome h4{
	color: #365399;
	margin: 30px 0 0 0;
}
@media screen and (max-width: 768px) {
.topBox h1{
    font-size: 5vw;  
    top: 25%;
    line-height: 2;
}
.topBox p{
    top: 18%;
    line-height: 1.8;
}
.topsmarthome h4{
    margin-left:2%;
    margin-top: 0;
}
.open_detail{
    display: block;
    margin-top: 20px;
}
.open_detail > div iframe {
    width: 100%;
}
.open_detail dl {
    min-height: auto;
}
.open_detail > div {
    width: 100%;
}
.open_detail dl {
    width: 100%;
    margin: 0 auto;
}
.open_detail dt {
    font-size: 5vw;
    padding-left: 5%;
}
.open_detail div:nth-child(2) dl {
    margin-top: 40px;
}
.open_detail dd {
    width: 90%;
    margin: 0 auto;
}
.youtubeinner h4{
    margin-top: 10px;
}
.top-youtube{
    width: 100%;
}
.top-youtube iframe{
    width: 100%;
    overflow: hidden;
}
.topsmarthome{
    flex-direction: column-reverse;
    width: 100%;
    margin-top: 20px;
}
.youtubeinner {
    width: 100%;
    margin-top: 40px;
}
.open{
    width: 100%;
    margin-top: 20px;
}


}
/*press release*/
.press{
	max-width: 90%;
	margin: 0 auto;
}
.press ul{
	border-top: 2px solid #365399;
	width: 80%;
	margin: 0 auto;
}
.press dl{
	display: flex;
	flex-wrap: nowrap;
	justify-content:flex-start;
	padding: 30px 0 ;
	border-bottom: 1px solid #cacaca;
}
.press li {
    margin: 0;
}
.press dt{
	width: 23%;
	font-size: 15px;
	padding-left: 20px;
	padding-left: 30px;
}
.more_blue a {
    color: #fff;
}
/*こうだったらいな*/
.iina_head{
    margin-top: 100px;
}
.iina_head.ball_back{
    background-size: 37%;
    background-position: 50% 36%;
}
.iinatxt {
    text-align: center;
    margin-top: 3%;
    line-height: 2;
}
.iinaex{
	background-color: #f3f3f3;
	padding: 90px 0;
}
.iinaex ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
    max-width: 80%;
	margin: 0 auto;
}
.iinaex li{
	width: 47%;
    position: relative;
}
.iinaex li:nth-child(n+3){
	margin-top: 30px;
}
.iinaex li img{
	border: 2px solid #4bbcd0;
}
.iinaex h4{
	color: #365399;
	margin: 10px 0 0 0;
}
.iinaex li p{
	margin-top: 10px;
}
.iinaex a{
	color: #fff;
}
.iinaex li p.btn{
    position: absolute;
    right: 2%;
    top: 58%;
}
.iinaex h3{
    color: 
    #fff;
    font-weight: bold;
    position: absolute;
    top: 9%;
    left: 0;
    right: 0;
    text-shadow: 1px 1px #365399;
    font-size: 2vw;
}
/*bottom image*/
.bottomimg{
	position: relative;
	display: block;
    text-align: center;
	padding: 60px 0;
}
.bottomimg .inner{
    display: flex;
}
.bottomimg.ball_back{
	background-size:100%;
	background-position: -50px;
}
.bottomtxt{
	position: absolute;
	font-size: 1.2vw;
	font-weight: bold;
	color: #fff;
    top: 20%;
    left: 46%;
}
.bottomtxt.otherhesta{
    left: 11%;
}
.gradient {
    width: 30%;
	margin: 40px auto;
	position: relative;
}
.bottombtn{
    width: 9vw;
    background-color: #fff;
    position: absolute;
    bottom: 13%;
    left: 64%;
    color: #365399;
    font-weight: bold;
    font-size: .9vw;
}
.bottomimg .arrow::after{
    border-top: .1vw solid #365399;
    border-right: .1vw solid #365399;
}

@media screen and (max-width: 768px) {
h4{
	font-size: 1rem;
}
.topimg{
	margin-top: 100px;
    width: 100%;
}
.top_back {
    top: 7vw;
    left: 24vw;
}
.top_home {
    right: 6%;
    width: 85%;
}
.top_smartphone {
    width: 23%;
}
.topimgtxt1, .topimgtxt2, .topimgtxt3, .topimgtxt4 {
    width: 300px;
}
.topimgtxt1{
	top: 25%;
    right: 60%;
}
.topimgtxt2{
	top: 22%;
    right: 10%;
}
.topimgtxt3{
	bottom: 34%;
	left: 0;
}
.topimgtxt4{
	bottom: 7%;
    right: 0%;
}
.iinaex li p.btn{
   top: 48%; 
}
/*press release*/
.press{
	max-width: 100%;
}
.press dt,.press dd {
    font-size: 0.9rem;
}
.press ul{
    width: 90%;
}
.press li{
	margin:0;
}
.more_blue{
	margin-right: 5%;
}

/*いいな*/
.iinatxt {
	padding: 0 30px;
}
.iinaex ul{
	max-width: 90%;
}
.iinaex li {
    width: 48%;
}
.iinaex li p{
	margin-top: 10px;
}
.bottomtxt{
	right: 10%;
}
.bottombtn {
	right: 16%;
}
.gradient {
    width:30%;
}
}
@media screen and (max-width: 480px) {
.topimg {
    margin-top: 70px;
	height: 450px;
	width: 100%;
}
.topimg h1 {
	font-size: 5vw;
	top: 8%;
}
.topimg h1 span {
    font-size: 1.5rem;
}
.top_back{
    width: 50vw;
    top: 7vw;
    left: 23vw;
}
.top_home{
	width: 94%;
    right: 3%;
	top: 30%;
}
.topimgtxt1, .topimgtxt2, 
.topimgtxt3, .topimgtxt4 {
    width: 180px;
}
.topimgtxt1 {
    top: 26%;
    left: 0;
}
.topimgtxt2 {
    top: 20%;
    right: 0;
}
.topimgtxt3 {
    bottom: 0;
    left: 0;
}
.topimgtxt4 {
    bottom: 10%;
    right: 0%;
}
.pres h3{
    margin: 30px 0;
}
.press ul {
    width: 100%;
}
.press li{
	margin: 0;
}
.press dl {
    display: block;
	padding: 20px 0;
}
.press dt {
    padding-left: 0;
}
.press dd {
    margin-top: 5px;
}
.press dt,.press dd{
    padding: 0 20px;
}
.more_blue{
	margin: 20px;
}
/*いいな*/
.iina_head h2 {
	font-size: 1.1rem;
}
.iinaex h3{
    font-size: 5vw;
    top: 2%;
}
.iinatxt {
	padding: 0 20px;
	text-align: justify;
	margin: 40px auto;
}
.iinaex{
    padding: 40px 0;
}
.iinaex ul{
	display: block;
}
.iinaex li {
    width: 100%;
}
.iinaex li:nth-child(2) {
    margin-top: 20px;
}
.iinaex li:nth-child(n+3) {
    margin-top: 30px;
}
.iinaex li:nth-child(n+3) p.btn{
    top: 42%;
} 
.iinaex li:nth-child(4) h3 {
    top: -4%;
}
.more_green{
	margin: 22px 0 30px 0;
}
.gradient {
	padding: 40px 30px;
    margin: 0 auto;
    width: 100%;
}
.gradient:nth-child(2) {
    padding: 0 30px;
}
.gradient:nth-child(2) .bottombtn{
    bottom: 19%;
}
.gradient:nth-child(2) .bottomtxt{
    top: 24%;
}
.gradient img{
	width: 100%;
}
.bottomtxt{
	font-size: 5vw;
	top: 33%;
    left: 20%;
	text-shadow: 2px 2px #3290a1;
}
.bottomtxt:first-of-type{
	text-shadow: none;
}
.bottomtxt.otherhesta{
    font-size: 4vw;
    left: 10%;
    top: 30%;
    text-align: center;
}
.bottomimg .inner{
    display: block;
}
.bottombtn {
    bottom: 30%;
    left: 30%;
    width: 150px;
    font-size: 3vw;
    padding: 5px;
}
.bottomimg{
    padding:0;
}
}
/*パートナーシップ*/
.partnertop{
	margin: 79px auto 0 auto;
	position: relative;
	text-align: center;
}
.partnertop h1{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-weight: bold;
}
.hexagonimg{
	margin: 60px auto 76px auto;
	border: 1px solid #4294d6;
	width: 750px;
	height: 600px;
	text-align: center;
}
.hexagon h2{
	color: #365399;
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	margin: 80px 0 0 0;
}
.hexagon p, .whatai p{
	font-size: 16px;
	width: 800px;
	margin: 70px auto ;
	line-height: 2;
}
.hexagonimg{
	position: relative;
}
.hexagon_img,.hexagon_logo{
	position: absolute;
}
.hexagon_img{
	display: inline-block;
	width: 50%;
    top: 15%;
    left: 24%;
	animation:10s linear infinite rotation1;
}

.hexagon_logo{
	width: 22%;
    top: 35%;
    left: 37%;
}
.round1,.round2,.round3,.round4,.round5,.round6{
	position: absolute;
	width: 20%;
}

.round1{
	top: 2%;
    left: 39%;
}
.round2{
	top: 19%;
    right: 17%;
}
.round3{
	bottom:19%;
	right:17%;
}
.round4{
	bottom: 2%;
    left: 39%;
}
.round5{
	top: 19%;
    left: 17%;
}
.round6{
	bottom:19%;
	left:17%;
}
.partnerwrap{
	background-color: #f3f3f3;
	padding: 100px 0 80px 0;
}
.partnerwrap h3{
	text-align: left;
	font-size: 20px;
	margin: 0;
}
.partnerbox{
	width: 800px;
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.partnerbox .item1{order: 1;}
.partnerbox .item2{order: 2;}
.partnerbox .item3{order: 4;}
.partnerbox .item4{order: 3;}
.partnerbox p{
	margin-top: 20px;
}
.partnerbox div{
	width: 48%;
	margin: 0
}
.partnerbox div:nth-child(n+3){
	margin-top:60px; 
}
.patnerbottom{
	position: relative;
	font-size: 20px;
	text-align: center;
}
.pabottomtxt{
	position: absolute;
	color: #fff;
	text-align: center;
	top: 25%;
	left: 0;
	right: 0;
}
.patnerbtn{
	position: absolute;
	top: 49%;
    left: 43%;
	width: 17%;
	background-color: #fff;
	color: #3a529c;
	border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    text-align: center;
    font-weight: bold;
	padding: 0.5em 0.5em 0.5em 2.5em;
    display: block;
    font-size: 1.3vw;
}
.patnerbtn::before{
	content: url(../images/mail_blue.svg);
    width: 2vw;
    height: 2vw;
    display: inline-block;
    position: absolute;
    top: 27%;
    left: 17%;
}
@media screen and (max-width: 768px) {
.partnertop img{
    object-fit: cover;
	height: 200px;
	margin-top: 23px;
}
.partnertop h1{
    font-size: 4.5vw;
	top: 41%;
	left: 18%;
}
.hexagon h2 {
    margin: 40px 0 0 0;
}
.hexagon p {
    margin: 70px auto 0 auto;
	width: 90%;
}
.partnerbox{
	width: 90%;
	display: block;
}
.partnerbox div {
    width: 100%;
}
.partnerbox div:nth-child(2) img{
	margin-top: 20px;
}
.partnerbox .item1{order: 1;}
.partnerbox .item2{order: 2;}
.partnerbox .item3{order: 3;}
.partnerbox .item4{order: 4;}
.partnerbox div:nth-child(n+3) {
    margin-top: 20px;
}
.pabottomtxt{
    font-size: 1.8rem;
    top: 19%;
}
.patnerbtn{
	width: 36%;
	top: 55%;
    left: 20%;
}
.patnerbottom{
	padding: 0 10%;
	margin: 80px auto;
}
.patnerbottom img{
    object-fit: cover;
	height: 277px;
	object-position: 100% 100%;
}
}
@media screen and (max-width: 480px) {
.partnertop img {
    object-fit: cover;
    height: 200px;
}
.hexagon h2{
     font-size: 1.5rem;
}
.hexagonimg{
	width: 100%;
	height: 400px;
}
.hexagon p {
    margin: 30px auto 0 auto;
	font-size: 0.8rem;
}
.hexagon_img {
    width: 80%;
    top: 7%;
    left: 10%;
}
.round1, .round2, .round3, .round4, .round5, .round6,.hexagon_logo {
    width: 30%;
}
.round1 {
    top: 2%;
    left: 35%;
}
.round4 {
    bottom: 2%;
    left: 35%;
}
.round6,.round3 {
	bottom: 17%;
}
.round2,.round3{
	right: 3%;
}
.round5,.round6{
	left: 3%;
}
.partnerwrap {
    padding: 50px 0 40px 0;
}
.pabottomtxt {
    font-size: 1rem;
}
.patnerbtn {
    width: 60%;
}
.patnerbottom img {
    height: 170px;
}
.patnerbottom {
    padding: 0 5%;
}
}
/*サービス*/
.serviceinner{
	width: 800px;
	margin: 0 auto;
}
.service .top {
	position: relative;
    top: 75px;
}
.service h1{
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	font-weight: bold;
}
.service h2{
	margin: 0;
}
.service .different, .about .aboutouter,
.scene ul{
 	padding: 40px 0 90px 0;
}
.serviceinner p, .about .abouttxt{
	margin-top: 44px;
	line-height: 2;
}
.service .toptxt .service_smartphone{
	width: 90%;
}
.service .serviceouter h2{
	margin-top: 90px;
}
.service .boxwrap{
	margin-top:80px; 
}
.service h3{
	text-align: left;
}
.service .box_l{
	text-align: center;
}
.service .merit, .about .aboutwrap{
	display:flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	margin-top: 50px;
}
.service .merit .meritinner,.about .aboutwrap div{	
	width: 46%;
}
.service .merit  h4{
	background-color: #18b7cd;
	text-align: center;
	padding: 5px 10px;
	color: #fff;
	font-weight: 100;
	font-size: 1.3rem;
    letter-spacing: 2px;
}
.service .merit .meritinner:first-child{
	border-radius: 10px;
	border: 2px solid #18b7cd;
	box-shadow: 2px 2px 2px 2px #ccc;
	background-color: #fff;
	padding: 30px;
	color: #36539b;
}
.service .merit .meritinner ul{
	margin-top: 30px;
}
.service .merit .meritinner li{
	margin-top: 10px;
	margin-left: 1rem;
	text-indent: -1rem;
}
@media screen and (max-width: 480px) {
.serviceinner {
    width: 100%;
}
.service h1 {
    font-size: 1.2rem;
    font-weight: bold;
}
.service .serviceouter h2 {
    margin-top: 40px;
    font-size: 0.9rem;
}
.service h3 {
    margin: -50px 0 0 0;
    font-size: 1rem;
}
.service .top {
    margin-top: 100px;
}
.service .boxwrap{
	flex-flow: column-reverse;
	flex-wrap: wrap;
}
.service .merit{
	display: block;
}
.meritinner img {
    margin-top: 20px;
}
.box_r, .box_l {
    width: 86%;
    margin: 0 auto;
}
.service .box_l {
    width: 100%;
    margin-top: 40px;
    background-image: url(../images/ball.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 90%;
    padding: 0 20%;
}
.service .meritinner{
	width: 86%;
}
.service .different h2 {
    font-size: 0.8rem;
    margin: 0 0 20px 0;
}
.service .ball_back{
	background-image:none;
}
.different .serviceinner p{
	width: 86%;
	margin: 0 auto;
}
.service .merit .meritinner, .about .aboutwrap div {
    width: 89%;
    margin: 0 auto;
}
.service .merit .meritinner:first-child {
    border-radius: 10px;
    border: 2px solid #18b7cd;
    box-shadow: 2px 2px 2px 2px #ccc;
    background-color: #fff;
    padding: 20px;
}
}

/*AI+IoTについて*/
.about .abouttop{
	position: relative;
	margin-top: 4%;
}
.about .abouttop h1 {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
	font-weight: bold;
}
.aboutinner{
	width: 1000px;
	margin: 0 auto;
}
.aboutlink a{
	color: #365399;
	margin-top: 40px;
}
@media screen and (max-width: 768px) {
.aboutinner{
	width: 100%;
}
}
@media screen and (max-width: 480px) {
.about .abouttop h1 {
    font-size: 1.5rem;
}
.whatai h2, .aboutouter h2{
	font-size: 1rem;
	margin-top: 30px;
}
.whatai h3{
	font-size: 1rem;
    margin: 30px 0;
}
.whatai, .abouttxt{
	padding: 0 20px;
}
.about .abouttxt{
	margin: 0;
}
.whatai p{
	width: 100%;
	margin: 30px auto;
}
.aboutouter{
	margin-top: 30px;
}
.about .aboutwrap{
	display: block;
}
.aboutwrap p{
	margin-top: 20px;
}
.about .aboutouter{
	padding:40px 0;
}
}
/*利用シーン*/
.scene {
	margin-top: 70px;
}
.scene h1 {
    position: absolute;
    top: 4.5%;
    left: 0;
    right: 0;
	font-weight: bold;
}
.smarthometop h1,.smartcitytop h1{
    top: 6%;
}
.reform h1{
    top: 1.3%;    
}
.scene .scenettl{
	padding: 90px 0;
	width: 1000px;
	margin: 0 auto;
}
.scene .scenettl.ball_back{
	background-size:100%;
}
.scene .sceneindex h2{
	margin-top: 0;
}
.scene .sceneindex li a{
	background-color: #fff;
	width: 1000px;
	margin: 50px auto 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 50px;
}
.scene .scenel,.scene .scener{
	width: 48%;
}
.scene .scener{
	text-align: left;
}
.scene h3.toph3{
	color: #4bbcd0;
	font-size: 27px;
	text-align: left;
	margin: 0;
}
.scene .scener .scenetxt{
	font-size: 18px;
	margin-top: 50px;
}
.scene .scenebtn{
	color: #4bbcd0;
	border: 1px solid #4bbcd0;
	border-radius:10% /50%; 
	padding: 5px 10px;
	width: 135px;
	position: relative;
	font-size: 13px;
	font-weight: bold;
	bottom: -85px;
}
.scene .scenebtn a{
	color: #4bbcd0;	
}
.scene .scenebtn::after{
	content: '';
    right: 18px;
    top: 39%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #4bbcd0;
    border-right: 2px solid #4bbcd0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
}
.scene .sceneinner{
	width: 800px;
	margin: 0 auto;
	padding: 60px 0;
}
.scene .sceneinner:first-of-type {
    padding: 60px 0 0 0;
}
.scene .sceneunder h2{
	margin :0 0 60px 0;
}
.scene h3.sceneh3{
	color: #365399;
	font-size: 18px;
	text-align: left;
	margin: 30px 0;
}
.scene h3.sceneh3+p{
	line-height: 2;
}
.sceneunder .ball_back{
	background-size:80%;
	background-position: 120px;	
}
@media screen and (max-width: 768px) {
.reform {
    position: relative;
}
.scene h1 {
    top: 35%;
    font-size: 2rem;
    position: absolute;
}
.scene .scenettl{
	width: 100%;
}
.scene .sceneindex li a{
	width: 100%;
}
.scene .sceneinner{
	width: 100%;
}
}
@media screen and (max-width: 480px) {
.scene h1 {
    font-size: 1.5rem;
    top: 3%;
}
.reform h1{
    top: 38%;
    text-shadow: 1px 1px #000;
}
.sceneindex h2, .sceneunder h2,.pack h2{
	font-size: 1rem;
    margin-top: 40px;
}
.scenettl{
	padding: 30px 0;
}
.scene .sceneindex li a{
	margin: 0;
	display: block;
}
.scene .scenel, .scene .scener {
    width: 100%;
}
.scene .scenettl.ball_back{
	padding: 30px 0;
}
.scene .sceneindex ul{
	padding: 20px;
}
.scene .sceneindex li a{
    padding: 20px 20px 40px 20px;
}
.scene h3.toph3{
	margin-top: 20px;
    font-size: 1.2rem;
}
.scene .scener .scenetxt{
	margin-top: 20px;
    font-size: 0.9rem;
}
.scene .scenebtn{
	bottom: -15px;
}
.scene .sceneindex li:nth-child(n+2){
	margin-top: 3px;
} 
.scene .sceneinner {
    padding: 30px 0;
}
.scene .sceneunder h2 {
    margin: 0 0 30px 0;
}
.scene h3.sceneh3{
	font-size: 1rem;
	padding: 0 20px;
}
.packh3{
    margin: 40px 0 20px;
}
.packh3 img {
    object-fit: cover;
    height: 80px;
}
.sceneinner p{
	padding: 0 20px;
}
}
/*プライバシーポリシー・プラットフォーム*/
.privacy, .platform{
	margin: 100px 0;
}
.privacy .inner, .platform .inner{
	max-width: 60%;
	margin: 0 auto;
}
.privacy h1, .platform h1{
	color: #000;
	margin: 200px 0 100px 0;
}
.privacy h2{
	font-weight: normal;
    font-size: 1.8rem;
}
.privacy h2+p{
	margin-top: 30px;
}
.privacy p,.privacy li, .platform p, .platform li{
	margin-top: 20px;
}
.privacy a, .platform a{
	 text-decoration: underline;
}
.privacy ul > li{
	padding-left: 0.7rem;
	text-indent: -0.7rem;
}
.privacy ol li dl dd{
	padding-left: 1rem;
	text-indent: -1rem;
}
.platform ol li dl dd{
	padding-left: 2rem;
	text-indent: -1.8rem;
	margin-top: 10px;
}
.platform ol li dl dd ul li{
	padding-left: 2rem;
	text-indent: -1.8rem;
	margin-top: 10px;
}
.platform ol > li > dl > dt{
	font-size: 1.5rem;
	margin-top: 50px;
}
@media screen and (max-width: 768px) {
.privacy .inner,.platform .inner{
	max-width: 80%;
}
.privacy h1{
	font-size: 2rem;
}
}
@media screen and (max-width: 480px) {
.privacy h1, .platform h1 {
    margin: 100px 0 50px 0;
	font-size: 1.5rem;
}
.privacy h2{
	font-size: 1.2rem;
}
.footer ul:nth-child(3) {
    margin-top: 0;
}
}
/*リフォーム*/
h2+p,.pack p{
    margin-top: 20px;
    text-align: center;
}
.pack p+img{
    margin-top: 20px;
}
.pack h4{
	background-color: #18b7cd;
	text-align: center;
	padding: 5px 10px;
	color: #fff;
	font-weight: 100;
	font-size: 1.3rem;
    letter-spacing: 2px;
    margin-top: 80px;
}
.pack h4:first-of-type,
.pack h4:nth-of-type(4){
    margin-top: 0;
}
.pack table{
    width: 100%;
    margin: 20px auto 0;
}
.pack table img{
     max-width: 80px;
}
.pack table th,
.pack table td{
    vertical-align: middle;
    text-align: center;
    padding: 5px 20px;
    border: 1px solid #ccc;
    white-space: nowrap;
    height: 100px;
}
.pack table th{
    background-color: #e6e6e6;
}
p.reformbtn{
    padding: 10px 30px;
    position: relative;
    padding-left: 50px;
    background-color: #18c7cd;
    border-radius: 3px;
    width: 20vw;
    margin: 60px auto;
}
p.reformbtn::after{
    content: '';
    right: 50px;
    top: 41%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
}
p.reformbtn::before {
    content: url(../images/mail.svg);
    position: absolute;
    top: 25%;
    left: 20%;
    display: inline-block;
    width: 24px;
}
.reformbtn a{
     color: #fff;
     display: block;
}
@media screen and (max-width: 768px) {
.pack table{
    width: 90%;
}
.pack table tr{
    display: grid;
    grid-template-columns: 50% 50%;
    height: auto;
}
.pack table th,.pack table td{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}
.pack table img {
    max-width: 50px;
}
.none{
    display: none!important;
}
}
@media screen and (max-width: 480px) {
p.reformbtn {
    width: 60%;
}
p.reformbtn::after {
    right: 40px;
}
}