@charset "utf-8";
/*------------------------------------------------------------
共通
------------------------------------------------------------*/

body {
  font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", sans-serif;
  color: #000;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper {
    overflow: hidden;
}
img {
 max-width: 100%;
 vertical-align: bottom;
}
ul,li{
	list-style: none;
	margin: 0;
}
a {
	text-decoration: none;
}
p {
	font-size: clamp(16px, 2vw, 18px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 2px;
}

/*pc・sp responsive*/
@media screen and (max-width:768px){
    .sp{
        display: inline-block;
    }
    .pc{
        display: none !important;
    }
}
@media screen and (min-width:768px){
    .sp{
        display: none !important;
    }
    .pc{
		display: inline-block;
    }
}

/* ------------ヘッダー------------ */
header {
	background: #fff;
}
.header_inner {
	width: 60%;
	margin: 0 auto;
}
.header_logo {
	width: 15%;
	padding: 15px 0;
}
@media screen and (max-width: 1920px) {
    .header_inner {
        width: calc(1200 / 1920* 100vw);
    }
}
@media screen and (max-width: 768px) {
	.header_inner {
		width: calc(700 / 768* 100vw);
	}
	.header_logo {
		width: 30%;
		padding: 10px 0;
	}
}

/*---------- タイトル ----------*/
.content_title {
	margin: 0 auto;
	text-align: center;
}
.title_main {
	font-size: clamp(30px, 4vw, 55px);
    letter-spacing: 2px;
	color: #000;
	font-weight: bold;
	line-height: 1.4;
}
.title_size_s {
    color: #cd010d;
	font-size: clamp(18px, 3vw, 25px);
	letter-spacing: 4px;
	font-weight: bold;
}
.title_sub span{
	background: #919a9c;
	color: #fff;
	font-size: clamp(20px, 2vw, 28px);
	letter-spacing: 2px;
	padding: 5px 25px;
	border-radius: 100px;
	font-weight: bold;
}
.title_red {
	color: #cd010d;
}
.title_number {
	font-family: 'Alte DIN 1451 Mittelschrift', sans-serif;
}
@media screen and (max-width: 1920px) {
	.content_title {
		width: calc(1000 / 1920* 100vw);
	}
	.title_size_s, .title_sub {
		margin-bottom: calc(20 / 1920* 100vw);
	}
}
@media screen and (max-width: 768px) {
	.content_title {
		width: calc(700 / 768* 100vw);
	}
	.title_size_s, .title_sub {
		margin-bottom: calc(30 / 768* 100vw);
	}
}


/*----------voice----------*/
.voice {
	background: #ebebeb;
}
.voice_inner {
    margin: 0 auto;
}
.voice_box {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.voice_box_item {
	width:  calc(97%/3);
	margin: 5px;
}
@media screen and (max-width: 1920px) {
	.voice {
		padding-top: calc(20 / 1920* 100vw);
        padding-bottom: calc(90 / 1920* 100vw);
	}
    .voice_inner {
        width: calc(1000 / 1920* 100vw);
		margin-top: calc(50 / 1920* 100vw);
    }
}
@media screen and (max-width: 768px) {
	.voice {
		padding-top: calc(20 / 768* 100vw);
        padding-bottom: calc(90 / 768* 100vw);
	}
	.voice_inner {
		width: 100%;
		margin-top: calc(50 / 768* 100vw);
	}
	.slides_contents {
		margin: 0 auto;
		width: calc(690 / 768* 100vw);
	}
}

/*----------cta----------*/
.cta {
	position: relative;
}
.cta_btn_inner {
	position: relative;
    width: 100%;
    overflow: hidden;
}
.cta_btn {
	position: absolute;
	transition: all 0.3s;
}
.cta_btn:hover,
.cta_btn:focus {
  filter: drop-shadow(0 7px 7px #ad0003);
}
.cta_btn:hover {
  transform: translateY(-2px);
  transform: scale(1.1,1.1);
}
.cta_btn:active {
  transform: translateY(0);
}
@media screen and (max-width: 1920px) {
	.cta_btn {
		top: calc(130 / 1920* 100vw);
		left: calc(650 / 1920* 100vw);
	}
	.cta_btn img {
		width: calc(600 / 1920* 100vw);
	}
}
@media screen and (max-width: 768px) {
	.cta_btn {
		top: calc(220 / 768* 100vw);
		left: calc(34 / 768* 100vw);
	}
	.cta_btn img {
		width: calc(700 / 768* 100vw);
	}
}

/*----------problem----------*/
.problem {
	background: linear-gradient(0deg, transparent 70px, #c5ced0 0) top, linear-gradient(0, transparent 0px, #fff 0) bottom;
}
.problem_ttl {
	margin: 0 auto;
	text-align: center;
}
.problem_inner {
    margin: 0 auto;
}
.problem_img {
	text-align: center;
}
@media screen and (max-width: 1920px) {
	.problem_ttl {
		width: calc(1000 / 1920* 100vw);
	}
	.problem {
		padding-top: calc(90 / 1920* 100vw);
	}
    .problem_inner {
        width: calc(1000 / 1920* 100vw);
    }
}
@media screen and (max-width: 768px) {
	.problem_ttl {
		width: calc(700 / 768* 100vw);
		padding-bottom: calc(50 / 768* 100vw);
	}
	.problem {
		padding-top: calc(90 / 768* 100vw);
	}
	.problem_inner {
		width: calc(700 / 768* 100vw);
	}
}

/*----------confidence----------*/
.confidence {
	position: relative;
}
.confidence_ttl, .confidence_img {
	position: absolute;
}
@media screen and (max-width: 1920px) {
	.confidence_ttl {
		top: calc(90 / 1920* 100vw);
		left: calc(480 / 1920* 100vw);
		width: calc(940 / 1920* 100vw);
	}
	.confidence_img {
		top: calc(310 / 1920* 100vw);
		left: calc(550 / 1920* 100vw);
		width: calc(790 / 1920* 100vw);
	}
}
@media screen and (max-width: 768px) {
	.confidence_ttl {
		top: calc(60 / 768* 100vw);
		left: calc(0 / 768* 100vw);
		width: 100%;
	}
	.confidence_img {
		top: calc(450 / 768* 100vw);
		left: calc(60 / 768* 100vw);
		width: calc(640 / 768* 100vw);
	}
}

/*----------success----------*/
.success {
	background-image: linear-gradient(0deg, transparent 19px, #ebebeb 20px), linear-gradient(90deg, transparent 19px, #ebebeb 20px);
    background-size: 20px 20px;
}
.success_inner {
	margin: 0 auto;
}
.success_img01 {
	text-align: center;
}
.success_img02 {
	margin: 0 auto;
	text-align: center;
}
.success_box {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.success_box_item {
	width:  calc(97%/3);
	margin: 5px;
}
@media screen and (max-width: 1920px) {
    .success_inner {
        width: calc(1000 / 1920* 100vw);
    }
	.success_img02 {
		margin-top: calc(50 / 1920* 100vw);
		margin-bottom: calc(50 / 1920* 100vw);
	}
	.success_img03 {
		margin-top: calc(50 / 1920* 100vw);
	}
}
@media screen and (max-width: 768px) {
	.success_inner {
		width: 100%;
	}
	.success_img02 {
		margin-top: calc(50 / 768* 100vw);
		margin-bottom: calc(50 / 768* 100vw);
		width: calc(700 / 768* 100vw);
	}
	.success_img03 {
		margin-top: calc(50 / 768* 100vw);
	}
}

/*----------reason----------*/
.reason {
	background: #ebebeb;
}
.reason_ttl {
	margin: 0 auto;
	text-align: center;
}
.reason_inner {
	margin: 0 auto;
}
.reason_point {
	position: relative;
	background: #fff;
	padding: 5%;
}
.reason_point:not(:last-child) {
    margin-bottom: 7%;
}
.reason_point_icon {
	position: absolute;
}
.reason_point_img {
	text-align: center;
}
.reason_box {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.reason_box_item {
	width:  calc(97%/3);
	margin: 5px;
}
.reason_point02_img02 {
	margin-top: calc(30 / 1920* 100vw);
	margin-bottom: calc(30 / 1920* 100vw);
}
.reason_point02_img03 {
	margin-top: calc(30 / 1920* 100vw);
}
@media screen and (max-width: 1920px) {
	.reason {
		padding-top: calc(90 / 1920* 100vw);
        padding-bottom: calc(90 / 1920* 100vw);
	}
    .reason_inner {
        width: calc(1000 / 1920* 100vw);
		padding-top: calc(90 / 1920* 100vw);
    }
	.reason_point_icon {
		top: calc(-30 / 1920* 100vw);
		left: calc(-30 / 1920* 100vw);
		width: calc(200 / 1920* 100vw);
	}
}
@media screen and (max-width: 768px) {
	.reason {
		padding-top: calc(90 / 768* 100vw);
        padding-bottom: calc(90 / 768* 100vw);
	}
	.reason_inner {
		width: calc(700 / 768* 100vw);
		padding-top: calc(90 / 768* 100vw);
	}
	.reason_point_icon {
		top: calc(-30 / 768* 100vw);
		left: calc(-40 / 768* 100vw);
		width: calc(250 / 768* 100vw);
	}
	.reason_point {
		padding: 7%;
	}
	.reason_point:not(:last-child) {
		margin-bottom: 10%;
	}
	.reason .slides_contents {
		margin: 0 auto;
		width: calc(600 / 768* 100vw);
	}
	.reason .slick-prev {
		left: calc(-32 / 768* 100vw);
	}
	.reason .slick-next {
		right: calc(0 / 768* 100vw);
	}
	.reason_point02_img02 {
		margin-top: calc(70 / 768* 100vw);
		margin-bottom: calc(50 / 768* 100vw);
	}
	.reason_point02_img03 {
		margin-top: calc(50 / 768* 100vw);
	}
}

/*---------- support ----------*/
.support {
	background: url(../img/support_bg_pc.jpg) no-repeat center;
	background-size: cover;
}
.support_inner {
	margin: 0 auto;
}
.support_img {
	text-align: center;
}
@media screen and (max-width: 1920px) {
	.support {
		padding-top: calc(90 / 1920* 100vw);
        padding-bottom: calc(90 / 1920* 100vw);
	}
    .support_inner {
        width: calc(1000 / 1920* 100vw);
		padding-top: calc(50 / 1920* 100vw);
    }
}
@media screen and (max-width: 768px) {
	.support {
		background: url(../img/support_bg_sp.jpg) no-repeat center;
	    background-size: cover;
		padding-top: calc(90 / 768* 100vw);
	}
	.support_inner {
		width: calc(700 / 768* 100vw);
		padding-top: calc(50 / 768* 100vw);
	}
}

/*---------- strength ----------*/
.strength_bg {
	background: #fffadf;
}
.strength_inner {
	margin: 0 auto;
}
.strength_img {
	text-align: center;
}
@media screen and (max-width: 1920px) {
    .strength_inner {
        width: calc(1200 / 1920* 100vw);
		padding-top: calc(30 / 1920* 100vw);
    }
}
@media screen and (max-width: 768px) {
	.strength_inner {
		width: calc(700 / 768* 100vw);
		padding-top: calc(30 / 768* 100vw);
	}
}	

/*----------howto----------*/
.howto {
	background-image: radial-gradient(#f1f1f1 5%, transparent 10%), radial-gradient(#f1f1f1 5%, transparent 10%);
    background-position: 0 0, 11px 11px;
    background-size: 25px 25px;
}
.howto_inner {
	margin: 0 auto;
}
.howto_img {
	text-align: center;
}
@media screen and (max-width: 1920px) {
	.howto {
		padding-top: calc(90 / 1920* 100vw);
        padding-bottom: calc(90 / 1920* 100vw);
	}
    .howto_inner {
        width: calc(1000 / 1920* 100vw);
		padding-top: calc(50 / 1920* 100vw);
    }
}
@media screen and (max-width: 768px) {
	.howto {
		padding-top: calc(90 / 768* 100vw);
		padding-bottom: calc(90 / 768* 100vw);
	}
	.howto_inner {
		width: calc(700 / 768* 100vw);
		padding-top: calc(50 / 768* 100vw);
	}
}

/*----------caution----------*/
.caution {
	background: url(../img/caution_bg.jpg) repeat center;
}
.caution_inner {
	margin: 0 auto;
	position: relative;
}
.caution_img {
	text-align: center;
}
.caution_arrow {
	position: absolute;
}
@media screen and (max-width: 1920px) {
	.caution {
        padding-bottom: calc(90 / 1920* 100vw);
	}
    .caution_inner {
        width: calc(1000 / 1920* 100vw);
		padding-top: calc(50 / 1920* 100vw);
    }
	.caution_arrow {
		bottom: calc(-130 / 1920* 100vw);
		left: calc(450 / 1920* 100vw);
	}
}
@media screen and (max-width: 768px) {
	.caution {
        padding-bottom: calc(90 / 768* 100vw);
	}
    .caution_inner {
        width: calc(700 / 768* 100vw);
		padding-top: calc(50 / 768* 100vw);
    }
	.caution_arrow {
		bottom: calc(-140 / 768* 100vw);
		left: calc(280 / 768* 100vw);
		width: calc(150 / 768* 100vw);
	}
}

/*----------introduce----------*/
.introduce {
	background: #fffadf;
}
.introduce_inner {
	margin: 0 auto;
}
.introduce_img01, .introduce_img02 {
	text-align: center;
}
@media screen and (max-width: 1920px) {
	.introduce {
		padding-top: calc(90 / 1920* 100vw);
		padding-bottom: calc(90 / 1920* 100vw);
	}
	.introduce_inner {
		width: calc(1000 / 1920* 100vw);
	}
	.introduce_img02 {
		padding-top: calc(50 / 1920* 100vw);
	}
}
@media screen and (max-width: 768px) {
	.introduce {
		padding-top: calc(90 / 768* 100vw);
		padding-bottom: calc(90 / 768* 100vw);
	}
	.introduce_inner {
		width: calc(700 / 768* 100vw);
	}
	.introduce_img02 {
		padding-top: calc(50 / 768* 100vw);
	}
}

/*----------company_voice----------*/
.company_voice {
	background: #ebebeb;
}
.company_voice_inner {
	margin: 0 auto;
}
.company_voice_box {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.company_voice_box_item {
	width:  calc(97%/3);
	margin: 5px;
}
@media screen and (max-width: 1920px) {
	.company_voice {
		padding-top: calc(90 / 1920* 100vw);
        padding-bottom: calc(90 / 1920* 100vw);
	}
	.company_voice_ttl_sub {
		margin-bottom: calc(20 / 1920* 100vw);
	}
    .company_voice_inner {
        width: calc(1000 / 1920* 100vw);
		margin-top: calc(50 / 1920* 100vw);
    }
}
@media screen and (max-width: 768px) {
	.company_voice {
		padding-top: calc(90 / 768* 100vw);
        padding-bottom: calc(90 / 768* 100vw);
	}
	.company_voice_ttl_sub {
		margin-bottom: calc(20 / 768* 100vw);
	}
	.company_voice_inner {
		width: 100%;
		margin-top: calc(50 / 768* 100vw);
	}
}

/*----------qa----------*/
.qa_inner {
	margin: 0 auto;
}
.qa_item {
	font-weight: bold;
	font-style: normal;
	border-bottom: 1px solid #d0d0d0;
    padding: 4% 3%;
}
.qa_item:nth-of-type(1) {
	border-top: 1px solid #d0d0d0;
}
.question_content {
	display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.question_content:hover {
	cursor: pointer;
}
.question_content::before, 
.question_content::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.question_content::before {
	right: 4%;
	width: 14px;
	height: 14px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	transition: all 0.5s ease-in-out;
	border-radius: 2px;
}
.open::before {
    -webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.question_content img {
    width: 5%;
}
.question_content h2 {
  font-size: clamp(20px, 2vw, 25px);
  font-weight: bold;
  text-align: left;
  letter-spacing: 2px;
  line-height: 1.3;
  margin: 0 10% 0 2%;
  color: #000;
}
.answer_content {
	padding: 3% 3% 0;
    display: none;
}
.answer_content p{
    text-align: justify;
    letter-spacing: 1px;
    line-height: 1.3;
}
@media screen and (max-width: 1920px) {
	.qa {
		padding-top: calc(90 / 1920* 100vw);
        padding-bottom: calc(90 / 1920* 100vw);
	}
    .qa_inner {
        width: calc(900 / 1920* 100vw);
		margin-top: calc(50 / 1920* 100vw);
    }
}
@media screen and (max-width: 768px) {
	.qa {
		padding-top: calc(90 / 768* 100vw);
        padding-bottom: calc(90 / 768* 100vw);
	}
	.qa_inner {
		width: calc(700 / 768* 100vw);
		margin-top: calc(50 / 768* 100vw);
	}
	.question_content::before {
		width: 10px;
		height: 10px;
	}
	.question_content img {
		width: 8%;
	}
	.question_content h2 {
		margin: 0 12% 0 3%;
	}
}

/*----------form----------*/
.form {
	background-image: radial-gradient(#f1f1f1 5%, transparent 10%), radial-gradient(#f1f1f1 5%, transparent 10%);
    background-position: 0 0, 11px 11px;
    background-size: 25px 25px;
	margin: 0 auto;
	text-align: center;
}
@media screen and (max-width: 1920px) {
	.form {
		padding-top: calc(90 / 1920* 100vw);
        padding-bottom: calc(90 / 1920* 100vw);
	}
	.form iframe{
		width: calc(900 / 1920* 100vw);
		margin-top: calc(50 / 1920* 100vw);
		height: calc(1000 / 1920* 100vw);
	}
}
@media screen and (max-width: 768px) {
	.form {
		padding-top: calc(90 / 768* 100vw);
        padding-bottom: calc(90 / 768* 100vw);
	}
	.form iframe{
		width: calc(700 / 768* 100vw);
		margin-top: calc(50 / 768* 100vw);
		height: calc(1200 / 768* 100vw);
	}
}

/*----------footer----------*/
footer{
    background: #000;
}
.footer_inner {
	margin: 0 auto;
	text-align: center;
}
.footer_txt {
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
}
.footer_txt a {
	margin: 10px;
	color: #fff;
	text-decoration: none;
}
.footer_txt a:hover {
	opacity: 0.5;
	transition: 0.3s;
}
.footer_copyright p{
	color: #fff;
	text-align: center;
	font-size: 10px;
}

@media screen and (max-width: 1920px) {
	footer {
		padding-top: calc(90 / 1920* 100vw);
        padding-bottom: calc(90 / 1920* 100vw);
	}
	.footer_inner {
		width: calc(900 / 1920* 100vw);
	}
	.footer_txt {
		margin-bottom: calc(30 / 1920* 100vw);
	}
}
@media screen and (max-width: 768px) {
	footer {
		padding-top: calc(90 / 768* 100vw);
        padding-bottom: calc(90 / 768* 100vw);
	}
	.footer_inner {
		width: calc(700 / 768* 100vw);
	}
	.footer_txt {
		margin-bottom: calc(30 / 768* 100vw);
	}
}

/*----------追従----------*/
#page-top {
	position: fixed;
	z-index: 999;
	transition: all 0.3s;
	bottom: 0;
	right: 0;
	text-align: center;
}
#page-top:hover {
  opacity: 0.5;
}
@media screen and (max-width: 1920px) {
	#page-top {
		padding-right: calc(20 / 1920* 100vw);
        padding-bottom: calc(20 / 1920* 100vw);
		width: calc(400 / 1920* 100vw);
	}
  }
@media screen and (max-width:768px){
  #page-top {
	  width: calc(700 / 768* 100vw);
	  padding-top: calc(30 / 768* 100vw);
      padding-bottom: calc(30 / 768* 100vw);
	  padding-right: calc(30 / 768* 100vw);
	  padding-left: calc(30 / 768* 100vw);
  }
}