@charset "utf-8";

/*******************************
 JS
*******************************/
.js-slick {
  overflow: hidden;
  opacity: 0;
  transition: all 300ms;
}

.js-slick.slick-initialized {
  opacity: 1;
}

/* ============================================
  KV
============================================ */
.kv {
}
.kv img {
	width: 100%;
}
/* ============================================
  共通
============================================ */
.pcObj{
	display: block;
}
.spObj{
	display: none;
}
#pankuz{
	display: flex;
	max-width: 1300px;
	margin: 10px auto;
	padding: 0 50px;
}

#pankuz li{
	font-size:1.4rem;
	padding-right: 10px;
}

#pankuz li a{
	margin-right: 10px;
}

#pankuz li:after{
	content:'>';
}

#pankuz li:last-child:after{
	content:'';
}
@media (min-width: 415px) and (max-width: 1500px) {
	#pankuz li{
		font-size: 1vw;
	}
}
@media (max-width: 414px) {
	.spObj{
		display: block;
	}
	.pcObj{
		display: none;
	}
	#pankuz{
	padding: 0 10px;
	}
	#pankuz li{
		font-size: 1.3rem;
	}
}



/* ============================================
  Contents
============================================ */
.contents {
  overflow: hidden;
}


@media (min-width: 415px) and (max-width: 1500px) {
}

@media (max-width: 414px) {
}

/* ============================================
  section
============================================ */
.section {
  position: relative;
  padding: 0 0 55px;
}

.heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #152267;
  font-size: 7.2rem;
  line-height: 1;
  width: 100%;
  max-height: 255px;
  height: 17vw;
}

.heading > span {
  color: #3e7fa7;
  font-size: 1.8rem;
  font-weight: 500;
  margin: 10px 0 0 0;
}

.section .btn {
  font-size: 1.6rem;
  max-width: 208px;
  width: 13.866666666vw;
  max-height: 52px;
  height: 3.466666666vw;
  margin: 55px 0 0 auto;
}

@media (min-width: 415px) and (max-width: 1500px) {
  .section {
    padding: 0 0 3.666666666vw;
  }

  .section .btn {
    font-size: 1.066666666vw;
    margin: 3.666666666vw 0 0 auto;
  }

  .heading {
    font-size: 4.8vw;
  }

  .heading > span {
    font-size: 1.2vw;
    margin: 0.8vw 0 0 0;
  }
}

@media (max-width: 414px) {
  .section {
    padding: 0;
  }
  .heading {
    font-size: 3.6rem;
    height: auto;
	margin: 30px 0 20px;
  }

  .heading > span {
    color: #3e7fa7;
    font-size: 1.3rem;
    margin-top: calc(5 / 414 * 100vw);
  }

  .section .btn {
    font-size: 1.2rem;
    max-width: unset;
    width: calc(210 / 414 * 100vw);
    max-height: unset;
    height: calc(52 / 414 * 100vw);
    margin: calc(40 / 414 * 100vw) auto 0;
  }
}

/* ============================================
company用
============================================ */
.contents{
	font-size: 1.5rem;
}
.contents h2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #152267;
  font-size: 4rem;
  line-height: 1;
  width: 100%;
  max-height: 255px;
  position: relative;
	margin: 30px 0;
}
.contents h2 > span {
  color: #3e7fa7;
  font-size: 1.3rem;
  font-weight: 500;
  margin: 5px 0 0 0;
}
.read_area{
	max-width: 1300px;
	padding: 0 50px 200px;
	margin: 0 auto;
}
.read_area h2{
	font-size: 3.3rem;
    font-weight: 600;
	color: #333333;
	text-align: center;
	font-style: italic;
}
.read_area p{
	margin: 60px 0;
}




.read_area div div{
	background: url(/wp-content/themes/microworld/business/solution/img/read_bg.jpg) no-repeat;
	background-size: cover;
	font-size: 2.6rem;
    font-weight: 500;
	text-align: center;
	color: #152266;
	padding: 50px;
	line-height: 2;
	margin: 0 auto;
	font-style: italic;
}




.thingsleder_area{
	background-color: #eef6fc;
	width: 85%;
	margin: 0 auto;
	overflow: hidden;
}
.thingsleder_area h2,.smart_area h2{
	font-size: 6.6rem;
	text-align: center;
	font-family: din-condensed,sans-serif;
    font-weight: 500;
	padding: 30px 0 40px;
	position: relative;
}
.thingsleder_area h2::after,.smart_area h2::after{
	content: "";
	width:80px;
	height: 10px;
	background-color: #152267;
	position: absolute;
	left: calc(50% - 40px);
	bottom: 10px;
}
.contents01 figure{
	position: relative;
}
.contents01 figure img{
	width: 100%;
}
.contents01_inn{
	max-width: 1300px;
	width: 90%;
	padding: 50px;
	margin: -50px auto 0;
	background-color: #ffffff;
	position: relative;
}
.contents01_inn p{
	text-align: center;
	font-size: 1.5rem;
	font-weight: 500;
}
.contents01_inn ol{
	margin: 40px 0;
}
.contents01_inn ol li{
	list-style: none;
	font-size: 2.6rem;
	font-weight: 500;
    padding: 10px 0 30px 80px;
    position: relative;
    max-width: 840px;
    margin: 0 auto;
}
.contents01_inn ol li:nth-child(1)::before{
	content: "01";
}
.contents01_inn ol li:nth-child(2)::before{
	content: "02";
}
.contents01_inn ol li::before{
	 position: absolute;
    top: 5px;
    left: 0;
    display: block;
    font-size: 50px;
    font-size: 7rem;
    color: #1577c6;
    font-weight: 500;
    line-height: 1;
	font-family: din-condensed,sans-serif;

}
/**.contents01_inn div{
	max-width: 630px;
	margin: 50px auto 0;
	text-align:center; 
}**/
h3{
	display: flex;
    flex-direction: column;
    justify-content: center;
    color: #152267;
    font-size: 4rem;
    line-height: 1;
    width: 100%;
    max-height: 255px;
    padding-left: 60px;
    position: relative;
    margin: 30px 0;
}
h3 span{
	color: #3e7fa7;
    font-size: 1.3rem;
    font-weight: 500;
    margin: 5px 0 0 0;
}
h3.icon01{
	background: url(/wp-content/themes/microworld/business/solution/img/title_icon01.png) no-repeat;
	background-size: auto 100%;
	background-position: left;
    padding-left: 80px;
}
h3.icon02{
	background: url(/wp-content/themes/microworld/business/solution/img/title_icon02.png) no-repeat;
	background-size: auto 100%;
	background-position: left;
    padding-left: 80px;
}

.contents02{
	position: relative;
	margin-top: 100px;
}
.contents02::before{
	margin: 2% -10% 0;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 100%;
    background: #ffffff;
    z-index: 0;
}

.contents02_inn{
	max-width: 1300px;
	width: 90%;
	margin: 0 auto;
    padding-bottom: 80px;
	position: relative;
	padding-top: 1px;
}
.contents02 figure{
	width: 50%;
	max-width: 500px;
	margin: 60px auto;
}
.contents02 figure img{
	width: 100%;
}

.contents03{
	position: relative;
}
.contents03::before{
	margin: 2% -10% 0;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 100%;
    background: #1d6393;
    z-index: 0;
}

.contents03_inn{
	max-width: 1300px;
	width: 90%;
	margin: 0 auto;
	padding: 1px 0 80px;
	position: relative;
}
.contents03 h3,.contents03 h3 span{
	color: #ffffff;
}
.contents03 figure{
	width: 80%;
	max-width: 800px;
	margin: 60px auto;
}
.contents03 figure img{
	width: 100%;
}

.contents04{
	max-width: 1300px;
	width: 90%;
	margin: 0 auto;
    padding-bottom: 80px;
}
.contents04 figure{
	width: 80%;
    max-width: 800px;
    margin: 60px auto;
}
.contents04 figure img{
	width: 100%;
}
.contents05{
	position: relative;
}
.contents05::before{
	margin: 2% -10% 0;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 100%;
    background: #ffffff;
    z-index: 0;
}
.contents05_inn{
	max-width: 1300px;
	width: 90%;
	margin: 0 auto;
    padding-bottom: 80px;
	position: relative;
	padding-top: 1px;
}
.contents05 figure{
	width: 80%;
	max-width: 800px;
	margin: 60px auto;
}
.contents05 figure img{
	width: 100%;
}
.contents05 h4{
	font-size: 2.6rem;
	color: #333333;
	text-align: center;
}
.contents06{
	position: relative;
}
.contents06::before{
	margin: 2% -10% 0;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
    background: #1d6393;
    z-index: 0;
}
.contents06_inn{
	max-width: 1300px;
	width: 90%;
	margin: 0 auto;
    padding: 1px 0;
	position: relative;
}
.contents06 h3,.contents06 h3 span{
	color: #ffffff;
}
.contents06 figure{
	width: 80%;
	max-width: 800px;
	margin: 0 auto 50px auto;
}
.contents06 figure img{
	width: 100%;
}
.contents06 h4{
	width: 80%;
	max-width: 800px;
	font-size: 2.6rem;
	color: #ffffff;
	margin: 0 auto 10px;
}

.smart_area{
background-color: #eef6fc;
    width: 85%;
    margin: 100px auto;
}
.smart_area_inn{
	max-width: 1300px;
    width: 90%;
    padding: 50px;
	margin: 0 auto;
}
.smart_area_inn h3.no02{
    margin-left: calc(100% - 280px);
}
.smart_area_inn h3.no01::before{content: "01";}
.smart_area_inn h3.no02::before{content: "02";}
.smart_area_inn h3.no03::before{content: "03";}
.smart_area_inn h3::before {
    position: absolute;
    top: 3px;
    left: 0;
    display: block;
    font-size: 50px;
    font-size: 6rem;
    color: #8c92b4;
    font-weight: 400;
    line-height: 1;
}

.smart_cassette{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin: 40px 0 100px;
}
.smart_cassette:nth-of-type(even){
	flex-direction: row-reverse;
}
.smart_cassette figure{
	width: 45%;
}
.smart_cassette figure img{
	width: 100%;
}
.smart_text{
	width: 50%;
}
.smart_text h4{
	font-size: 2.6rem;
	color: #152266;
	font-weight: 400;
	margin-bottom: 20px;
	font-style: italic;
}

.smart_text p {
	text-align: justify;
}

@media (min-width: 415px) and (max-width: 1500px) {
	.contents {
		font-size: 1vw;
	}
	.read_area h2{
		font-size: 2.1vw;
	}
	.read_area div div{
		font-size: 1.73vw;
	}
	.contents01_inn p{
		font-size: 1vw;
	}
	.contents01_inn ol{
		margin: 30px 0; 
	}
/**	.contents01_inn div{
		margin-top: 30px;
	}**/
	.contents01_inn ol li{
		font-size: 1.73vw;
		padding-bottom: 20px;
	}
	.contents01_inn ol li::before{
		font-size: 4.6vw;
	}
	h3{
		font-size: 2.6vw;
		padding-left: 4.2vw;
	}
	h3 span{
		font-size: 1vw;
	}
	.smart_area_inn h3::before {
    font-size: 4vw;
}
	.smart_text h4,.contents05 h4,.contents06 h4{
		font-size: 1.73vw;
	}
	h3.icon01,h3.icon02{
		padding-left: 6vw;
	}
	.thingsleder_area h2,.smart_area h2{
		font-size: 4.3vw;
		padding: 30px 0 40px;
	}
}
@media (max-width: 768px) {
	.read_area{
		padding: 0 50px 100px;
	}
	.smart_cassette{
	    margin: 20px 0 50px;
	}
	.smart_cassette{
		align-items: flex-start;
	}
}


@media (max-width: 414px) {
	.contents {
		font-size: 1.3rem;
	}
	.contents h2{
		font-size: 2rem;
	}
	.read_area p{
		margin: 30px 0;
	}
	.read_area{
		padding: 0 20px 60px;
	}
	.read_area div div{
	    font-size: 1.4rem;
	    padding: 20px;
		text-align: left;
	}
	.thingsleder_area{
		width: 90%;
	}
	.contents01_inn{
		padding: 10px;
		margin: -20px auto 0;
	}
	.contents01_inn p{
		font-size: 1.3rem;
		text-align: left;
	}
	.contents01_inn ol {
		margin: 20px 0;
	}
	.contents01_inn ol li{
		font-size: 1.5rem;
		font-weight: 600;
		padding: 10px 0 10px 50px;
	}
	.contents01_inn ol li::before{
		font-size: 5rem;
	}
/**	.contents01_inn div{
		margin-top: 20px;
		text-align: left;
	}**/
	.contents02 figure,.contents03 figure,.contents04 figure,.contents05 figure,.contents05 figure{
		width: 100%;
	    margin: 40px auto;
	}
	.contents06 figure{
		width: 100%;
	    margin: 0 auto 40px;
	}
	.contents05 h4,.contents06 h4{
		font-size: 1.6rem;
		text-align: left;
		width: 100%;
	}
	.smart_area{
		width: 90%;
		margin: 50px auto;
	}
	.smart_area_inn{
		padding: 20px;
		width: 100%;
	}
	.smart_cassette{
		display: block;
	    margin: 20px 0 50px;
	}
	.smart_cassette figure{
		width: 100%;
	}
	.smart_text{
		width: 100%;
	}
	.smart_text h4{
		font-size:  1.9rem;
		margin-bottom: 10px;
	}
	h3{
		font-size: 3rem;
	}
	.smart_area_inn h3{
		margin: 20px 0
	}
	.smart_area_inn h3::before{
		top: -3px;
	}
	.smart_area_inn h3.no02 {
		margin-left: 0;
	}
	.contents03::before,.contents05::before,.contents06::before{
	left: -20%;
    width: 150%;
	}
	h3.icon01,h3.icon02{
		padding-left: 50px;
	}
	h3.icon01 span,h3.icon02 span{
		font-size: 1.2rem;
	}
	.contents02_inn,.contents04,.contents03_inn,.contents05_inn{
		padding-bottom: 40px;
	}
		.thingsleder_area h2,.smart_area h2{
			font-size: 3.6rem;
			padding: 0 0 20px;
		    margin: 20px 0;
		}
	.thingsleder_area h2::after, .smart_area h2::after {
		content: "";
		width: 50px;
		height: 7px;
		background-color: #152267;
		position: absolute;
		left: calc(50% - 25px);
		bottom: 0px;
	}

}

/*-------臨時対応--------*/
.snsList {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex: 1 1 auto;
    opacity: 0;
    pointer-events: none;
}


/**
メモ
.read_area div を .read_area div divに変更

**/

.smart_cassette figure {width: 100%;}

.t_001 {
	max-width: 630px;
    margin: 50px auto 0;
    text-align: center;
}
@media (min-width: 415px) and (max-width: 1500px) {.t_001 {margin-top: 30px;}}
@media (max-width: 414px) {.contents01_inn div{margin-top: 20px; text-align: left;}}

@media (max-width: 414px) {
.smart_cassette {
    display: block !important;
    margin: 20px 0 50px;
}
}