@charset "utf-8";

/* ----------------------------------------
* 横幅
---------------------------------------- */

@media screen and (max-width: 896px) {
.container{
	max-width:72%;
}
#area-fv .container{
	max-width:100%;
}
#area-1st .container {
	max-width:72%;
}
#area-2nd .container {
	max-width:72%;
}
#area-3ed .container {
	max-width:72%;
}
#area-4th .container {
	max-width:72%;
}
#area-5th .container {
	max-width:72%;
}
#area-6th .container {
	max-width:72%;
}
#area-7th .container {
	max-width:72%;
}
#area-8th .container {
	max-width:72%;
}
}
@media screen and (max-width: 768px) {
.container{
	max-width:76%;
}
#area-1st .container {
	max-width:76%;
}
#area-2nd .container {
	max-width:76%;
}
#area-3ed .container {
	max-width:76%;
}
#area-4th .container {
	max-width:76%;
}
#area-5th .container {
	max-width:76%;
}
#area-6th .container {
	max-width:76%;
}
#area-7th .container {
	max-width:76%;
}
#area-8th .container {
	max-width:76%;
}
}
@media screen and (max-width: 640px) {
.container{
	max-width:82%;
}
#area-1st .container {
	max-width:82%;
}
#area-2nd .container {
	max-width:82%;
}
#area-3ed .container {
	max-width:82%;
}
#area-4th .container {
	max-width:82%;
}
#area-5th .container {
	max-width:82%;
}
#area-6th .container {
	max-width:82%;
}
#area-7th .container {
	max-width:82%;
}
#area-8th .container {
	max-width:82%;
}
}
@media screen and (max-width: 400px) {
.container{
	max-width:90%;
}
#area-1st .container {
	max-width:90%;
}
#area-2nd .container {
	max-width:90%;
}
#area-3ed .container {
	max-width:90%;
}
#area-4th .container {
	max-width:90%;
}
#area-5th .container {
	max-width:90%;
}
#area-6th .container {
	max-width:90%;
}
#area-7th .container {
	max-width:90%;
}
#area-8th .container {
	max-width:90%;
}
}


/* レイアウト
/************************************************************/

@media screen and (max-width: 896px) {
header {
	min-width: 360px;
}
footer {
	min-width: 360px;
}
.action {
	min-width: 360px;
}
#area-fv {
	min-width: 360px;
}
#area-1st {
	min-width: 360px;
}
#area-2nd {
	min-width: 360px;
}
#area-3rd {
	min-width: 360px;
}
#area-4th {
	min-width: 360px;
}
#area-5th {
	min-width: 360px;
}
#area-6th {
	min-width: 360px;
}
#area-7th {
	min-width: 360px;
}
#area-8th {
	min-width: 360px;
}
}


/* ベース
/************************************************************/

@media screen and (max-width: 640px) {
p {
font-size: 15px;
}

}


/* 共通要素
/************************************************************/

@media screen and (max-width: 896px) {
.hide-sp {
	display: none;
}
.hide-pc {
	display:block;
}
.center {
	text-align: left;
}

}

@media screen and (max-width: 640px) {
.heading {
    font-size: 24px;
    margin-bottom: 24px;
}
.heading span {
    font-size: 14px;
    margin-top: 8px;
}
}



/* ヘッダー
/************************************************************/

@media screen and (max-width: 896px) {
header .text {
	right: 24px;
	left: auto;
}
}
@media screen and (max-width: 640px) {
header {
	height: 64px;
}
header .logo {
	top: 14px;
	left: 14px;
}
header .logo img {
	width: 81px;
}
header .text {
	top: 14px;
	right: 16px;
	font-size: 14px;
	line-height: 36px;

}
}

/* フッター
/************************************************************/
@media screen and (max-width: 640px) {
footer {
    padding: 32px 0px 32px;
	font-size: 15px;
}
}



/* FVエリア
/************************************************************/

@media screen and (max-width: 896px) {
#area-fv {
	height: auto;
}
#area-fv .container {
    padding: 0;
}
#area-fv .copy {
	position: static;
	padding: 48px 0 64px;
	text-align: center
}
#area-fv .copy h1 {
    font-size: 56px;
}
#area-fv .copy .btn {
	width: 56%;
}


}

@media screen and (max-width: 640px) {

#area-fv .copy {
	padding: 32px 0 48px;
}
#area-fv .copy h1 {
    font-size: 8.8vw;
}
#area-fv .img-sp {
margin: 16px 0 24px;
right: -8%;
}
#area-fv .copy dl {
    margin-bottom: 32px;
}
#area-fv .copy dt {
    font-size: 5.6vw;
    margin-right: 0px;
    margin-bottom: 4px;
	display: block;
}
#area-fv .copy dd {
	padding: 2px 8px;
    font-size: 5.6vw;

}
#area-fv .copy .btn {
	width: 80%;
}

#area-fv .copy .btn a {
    font-size: 18px;
    line-height: 64px;
	border-radius: 32px;
}
#area-fv .copy .btn a::after {
display: none;
}
}




/* 1stエリア
/************************************************************/


@media screen and (max-width: 896px) {
#area-1st section {
	text-align: left;
}
#area-1st section p {
	line-height: 175%;
}
#area-1st section:nth-child(3) {
    padding: 64px 0px 80px;
}
#area-1st section:nth-child(3) .text {
	width: auto;
	display: block;
	margin-bottom: 40px;
}
#area-1st section:nth-child(3) .text h2 {
	font-size: 32px;
	margin-bottom: 24px;
}
#area-1st section:nth-child(3) .img {
	width: auto;
	display: block;
	height: auto;
text-align: center;
}
#area-1st section:nth-child(3) .img img {
position: static;
}

}

@media screen and (max-width: 640px) {

#area-1st .slider {
	padding: 24px 0px;
}
#area-1st .slider li {
margin-left: 32px;
}
#area-1st .slider li img {
    max-height: 3.6rem;
}
#area-1st section {
    padding: 16px 0px 48px;
}
#area-1st section h2 {
    font-size: 22px;
    margin-bottom: 16px;
}
#area-1st section:nth-child(3) {
    padding: 48px 0px 48px;
}
#area-1st section:nth-child(3) .text h2 {
	font-size: 22px;
	margin-bottom: 16px;
}
#area-1st section:nth-child(3) .text {
	margin-bottom: 24px;
}
}




/* アクションエリア
/************************************************************/

@media screen and (max-width: 896px) {
.action .container {
	padding: 64px 0px 80px 0;
}
.action h2 {
	font-size: 32px;
	width: 420px;
	position: relative;
	margin: 0 auto 24px;
}
.action h2::before {
position:absolute;
bottom: 0px;
left: 0;
}
.action h2::after {
position:absolute;
bottom: 0px;
right: 0;
}
.action .box .btn {
	width: 80%;
}
.action .box .btn.monitor {
	margin-right:0px;
	margin-bottom:24px;
}
.action .box .gentei {
	font-size: 20px;
	border-radius: 24px;
	width: 48%;
	height: auto;
	position: static;
	line-height: 48px;
	display: inline-block;
	margin-bottom: 24px;
}
.action .box p {
	text-align: left;
}
}

@media screen and (max-width: 640px) {
.action .container {
padding: 40px 0px 48px 0;
}
.action h2 {
font-size: 22px;
	margin: 0 auto 16px;
	width: 288px;
}
.action .box {
    padding: 20px 16px;
}
.action .box .gentei {
font-size: 15px;
	line-height: 32px;
	margin-bottom: 16px;
}
.action .box h3 {
    font-size: 22px;
	margin-bottom: 8px;
}
.action .box h4 {
    font-size: 15px;
    margin-bottom: 24px;
}
    .action .box .btn {
        width: 88%;
    }
	.action .box .btn a {
    font-size: 18px;
    line-height: 64px;
}
    .action .box .btn.monitor {
        margin-bottom: 50px;
    }
	.action .box p {
    margin-top: 24px;
}
}


/* 2ndエリア
/************************************************************/

@media screen and (max-width: 896px) {
#area-2nd ul {
display: block;
}
#area-2nd li {
margin-top: 56px;
margin-right: 0px;
	width: auto;
}
#
}

@media screen and (max-width: 640px) {
#area-2nd section {
    padding: 48px 0;
}
#area-2nd h2 {
    font-size: 22px;
    margin-bottom: 48px;
}
#area-2nd h2 em {
    font-size: 26px;
}
#area-2nd li {
	margin-top: 48px;
    padding: 48px 16px 16px;
}
#area-2nd ul li h3 {
    font-size: 18px;
    margin-bottom: 16px;
    height: 40px;
}
#area-2nd ul li .nth {
    font-size: 18px;
}
}

/* 3rdエリア
/************************************************************/

@media screen and (max-width: 896px) {
	#area-3rd h2 {
	  font-size: 4.5vw;
	  margin-bottom: 80px;
	}
	#area-3rd section {
	  padding: 56px 40px 40px;
	}
	#area-3rd section .nth {
	  left: 50%;
	  transform: translateX(-50%);
	}
	#area-3rd section h3 {
	  font-size: 28px;
	  margin-bottom: 24px;
	}
	#area-3rd section p {
	  text-align: left;
	}
	#area-3rd section .img li {
	  width: 100%;
	  margin-right: 0;
	}
	#area-3rd section .img li:last-child {
	  margin-top: 32px;
	}
	#area-3rd-swiper .container {
	  padding: 96px 0 96px;
	}
	#area-3rd-swiper .box .img img {
	  width: 90px;
	}
	#area-3rd-swiper .box h3 {
	  font-size: 28px;
	  display: block;
	  height: auto;
	}
	#area-3rd-swiper .box p {
	  font-size: 17px;
	}
	#area-3rd-swiper h2 {
	  font-size: 4.5vw;
	}
	.important--flex {
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  gap: 38px;
	}
	#area-3rd-important .important--wrap {
	  width: 100%;
	}
	#area-3rd-important .nth {
	  left: 50%;
	  transform: translateX(-50%);
	}
	#area-3rd-important .nth {
	  font-size: 16px;
	  line-height: 36px;
	  top: -18px;
	}
	#area-3rd-important .hand {
	  margin: 1.5rem 0;
	}
	#area-3rd-important img {
	  margin: 1rem 0;
	}
	#area-3rd-important h2 {
	  font-size: 4.5vw;
	}
	/* swiperカスタマイズ
	.swiper {
	  padding-bottom: 0px;
	}
	.swiper-wrapper {
	  flex-direction: column;
	  row-gap: 40px;
	} */
	.swiper-button-prev,
	.swiper-button-next {
	  display: none;
	}
  
	#area-3rd-merit ul {
	  padding: 0;
	}
  
	#area-3rd-merit li {
	  line-height: 150%;
	  padding: 24px 24px;
	  margin-bottom: 24px;
	  border-radius: 12px;
	  text-align: center;
	}
  
	#area-3rd-merit li::before {
	  display: none;
	}
  }
  
  @media screen and (max-width: 640px) {
	#area-3rd .container {
	  padding: 40px 0 48px;
	}
	#area-3rd h2 {
	  font-size: 25px;
	  margin-bottom: 46px;
	}
	#area-3rd h2 span {
	  margin-bottom: -6px;
	}
	#area-3rd section {
	  padding: 48px 24px 24px;
	  margin-bottom: 52px;
	}
	#area-3rd section .nth {
	  font-size: 16px;
	  line-height: 36px;
	  top: -18px;
	}
	#area-3rd section .nth i {
	  font-size: 20px;
	}
	#area-3rd section h3 {
	  font-size: 22px;
	  margin-bottom: 16px;
	}
	#area-3rd section p {
	  font-size: 15px;
	}
	#area-3rd section .img {
	  margin-top: 32px;
	}
	#area-3rd section .img li:last-child {
	  margin-top: 24px;
	}
	#area-3rd section .img li a::before {
	  width: 32px;
	  height: 32px;
	  bottom: -8px;
	  right: -8px;
	  border-radius: 16px;
	}
  
	#area-3rd-swiper .container {
	  padding: 48px 0 48px;
	}
	#area-3rd-swiper .box {
	  padding: 24px 24px 38px;
	  height: 410px;
	}
	#area-3rd-swiper .box .nth {
	  font-size: 16px;
	  line-height: 36px;
	  top: -18px;
	}
	#area-3rd-swiper .box .nth i {
	  font-size: 20px;
	}
	#area-3rd-swiper .box .img img {
	  width: 78px;
	}
	#area-3rd-swiper .text .name {
	  margin-bottom: 0;
	}
	#area-3rd-swiper .box h3 {
	  font-size: 22px;
	  margin-bottom: 16px;
	}
	#area-3rd-swiper .box p {
	  font-size: 15px;
	}
	#area-3rd-important h2 {
	  font-size: 25px;
	  margin-bottom: 26px;
	}
	/* swiperカスタマイズ */
	.swiper-wrapper {
	  row-gap: 32px;
	}
  
	#area-3rd-swiper::after {
	  width: 64px;
	  height: 32px;
	  bottom: -32px;
	}
	#area-3rd-swiper h2 {
	  font-size: 25px;
	  margin-bottom: 10px;
	}
	#area-3rd-merit .container {
	  padding: 64px 0 48px;
	}
  
	#area-3rd-merit h2 {
	  font-size: 28px;
	  margin-bottom: 24px;
	}
	#area-3rd-merit li {
	  font-size: 18px;
	  padding: 16px;
	  margin-bottom: 16px;
	}
	.important--flex {
	  margin-top: 2.5rem;
	}
  }
  
  @media screen and (max-width: 450px) {
	.swiper-slide__ribbon {
	  right: 18px;
	  padding: 7px 5px;
	  width: 34px;
	  font-size: 15px;
	}
  
	.swiper-slide__ribbon:after {
	  border-left: 22px solid #e95738;
	  border-right: 22px solid #e95738;
	}
	.sinki:after {
	  border-left: 22px solid #e93887 !important;
	  border-right: 22px solid #e93887 !important;
	}
  }


/* 4thエリア
/************************************************************/

@media screen and (max-width: 896px) {

#area-4th h3 {
    font-size: 22px;
    line-height: 135%;
	padding: 20px 16px 18px;
}
#area-4th .function {
    margin: 40px 0 40px;
}
#area-4th .function li {
    padding: 24px;
    margin-top: 20px;
    width: 100%;
    margin-right: 0;
}
#area-4th .box h4 {
text-align: center;
	margin-bottom: 12px;
}
#area-4th .price {
    margin: 48px 0 0;
}
#area-4th .price .table {
    border-top: none;
    border-left: none;
	margin-bottom: 0px;
}
#area-4th .price .table dt {
	display: block;
	width: 100%;
	border-top: 1px solid #333333;
	border-left: 1px solid #333333;
	border-bottom: 1px solid #333333;
	height: auto;
	line-height: 80px;
}
#area-4th .price .table dd {
	display: block;
	width: 100%;
	border-left: 1px solid #333333;
	border-bottom: 1px solid #333333;
	height: auto;
	line-height: 80px;
	margin-bottom: 32px;
}
#area-4th .price .support dt {
	display: block;
	width: auto;
	height: auto;
	padding: 24px 24px 0px;
}
#area-4th .price .support dd {
	display: block;
	width: auto;
	height: auto;
	padding: 8px 24px 24px;
	text-align: center;
}

}


@media screen and (max-width: 640px) {
#area-4th {
    padding: 48px 0 0;
}
#area-4th h2 {
	margin: 0 8% 40px;
}
#area-4th section {
	margin-bottom: 48px;
}
#area-4th h3 {
	font-size: 18px;
	padding: 16px 16px 14px;
	    margin-bottom: 24px;
}
#area-4th .img {
    margin-bottom: 24px;
}
#area-4th .function {
	margin: 24px 0 24px;
	padding: 16px;
}
#area-4th .function h4 {
font-size: 15px;
margin-bottom: 4px;
}
#area-4th .function li {
	padding: 20px;
	margin-top: 12px;
}
#area-4th .function li .icon {
margin-bottom: 20px;
}
#area-4th .function li h5 {
    font-size: 15px;
}
#area-4th .box {
    padding: 20px 16px;
    margin-top: 16px;
}
#area-4th .box h4 {
    font-size: 18px;
}
    #area-4th .price {
        margin: 24px 0 0;
    }

#area-4th .price .table dt {
    line-height: 80px;
    font-size: 15px;
}
#area-4th .price .table dd {
	margin-bottom: 16px;
}
#area-4th .price .support {
    margin-bottom: 24px;
}
#area-4th .price .support dt {
	padding: 20px 20px 0px;
	font-size: 16px;
}
#area-4th .price .support dd {
	padding: 8px 20px 20px;
}
}

/* 5thエリア
/************************************************************/

@media screen and (max-width: 896px) {
#area-5th h2 {
font-size: 32px;
	text-align: left;
	margin-bottom: 40px;
}
#area-5th h3 {
font-size: 32px;
	text-align: left;
}
#area-5th .img {
    padding: 32px;
    width: auto;
}
}
@media screen and (max-width: 640px) {
#area-5th {
    padding: 32px 0 48px;
}
#area-5th h2 {
font-size: 24px;
	margin-bottom: 24px;
}
#area-5th h2 span {
    border-bottom: 3px solid #fff;
    padding-bottom: 2px;
}
#area-5th h2::before {
    width: 48px;
    height: 24px;
    margin: 0 auto 16px;
}
#area-5th .img {
    margin: 24px auto;
    padding: 16px;
	border-radius: 0px;
}
    #area-5th h3 {
        font-size: 22px;
    }
}

/* 6thエリア
/************************************************************/

@media screen and (max-width: 896px) {
#area-6th h2 {
    font-size: 32px;
}
#area-6th ul {
    display: block;
}
#area-6th li {
    padding: 56px 32px 40px;
    margin-right: 0;
	margin-top: 56px;
    width: auto;
}
}
@media screen and (max-width: 640px) {
#area-6th {
padding: 48px 0 48px;
}
#area-6th h2 {
font-size: 22px;
margin-bottom: 48px;
}
#area-6th li {
padding: 40px 32px 32px;
margin-top: 48px;
font-size: 18px;
}
#area-6th li::before {
    width: 60px;
    height: 42px;
    top: -21px;
}
}

/* 7thエリア
/************************************************************/

@media screen and (max-width: 896px) {
#area-7th .voice .box h3 {
    font-size: 22px;
}
#area-7th .voice .box .inner {
	padding: 32px;
}
#area-7th .voice .box .left {
	display: block;
	width: auto;
	margin-bottom: 40px;
}
#area-7th .voice .box .right {
	display: block;
}
#area-7th .faq section {
	padding: 40px 32px 32px;
	margin-bottom: 40px;
}
#area-7th .faq section .nth {
	left: 32px;
	top: -20px;
	background-color: #FFFFFF;
	padding: 0 8px;
}
}

@media screen and (max-width: 640px) {
#area-7th {
    padding: 48px 0 48px;
}
#area-7th .voice {
    margin-bottom: 48px;
}
#area-7th .voice .box {
    margin-top: 24px;
}
    #area-7th .voice .box h3 {
        font-size: 18px;
    }
    #area-7th .voice .box .inner {
        padding: 24px 16px 20px;
    }
	    #area-7th .voice .box .left {
        margin-bottom: 24px;
    }
#area-7th .voice .box p {
    margin-bottom: 16px;
}


#area-7th .faq section {
    padding: 28px 16px 20px;
    margin-bottom: 24px;
}
#area-7th .faq section .nth {
    font-size: 22px;
    top: -13px;
	left: 20px;
}
#area-7th .faq section h3 {
    font-size: 17px;
	margin-bottom: 12px;
}
}



/* 8thエリア
/************************************************************/

@media screen and (max-width: 896px) {
#area-8th .table dl {
	display: block;
}

#area-8th .table dt {
	display: block;
	width: auto;
	border-right: none;
	border-bottom: 1px solid #ccc;
	padding: 20px 28px;
	text-align: center;
}
#area-8th .table dd {
	display: block;
}
}


@media screen and (max-width: 640px) {
#area-8th {
    padding: 48px 0 0px;
}

#area-8th .table dt {
    padding: 12px 16px;
	font-size: 15px;
}
#area-8th .table dd {
    padding: 16px 16px;
	font-size: 15px;
}
}