@charset "UTF-8";
/* CSS Document */

body{ font: 18px/1.6 'Noto Sans JP'; width: 100%; max-width: 100%; box-sizing: border-box; color: #333; font-display: swap;}
* { margin: 0 auto;}
img{ max-width: 100%;}
.inner{ max-width: 1200px; margin: 0 auto;}

.red{color: #ea0e00; font-weight: 600;}
.yellow{ background: linear-gradient(transparent 50%, yellow 50%); display: inline;}


.sp_br,.tab_br,.sp_view{ display: none;}
a{ text-decoration: none; color: inherit;}

h2{ font-size: 2.1em; font-weight: 500;}

/*header*/
header{ background: rgba(255,255,255,0.7);}
header > div{ width: 1200px; display: flex; justify-content: space-between; align-items: baseline; padding: .5em 1em;}
header > div > p{ display: flex; width: 30%; align-items: center;}
header > div > h1 > a > img{ height: 3em;}

/*main-key*/
main{ background: url("img/back-pc.jpg") no-repeat 0 0/cover; height: 900px; width: 100%;}
.main-key{ position: relative; padding: 1em 0 0;}
.main-key > div:nth-child(1){ display: flex; justify-content: center; align-items: center;}
.main-key > div:nth-child(1) > img{ width: 50%; margin: 0;}
.main-key > div:nth-child(1) > img:nth-of-type(1){ width: 50%; margin: 0 0 1.5em;}
.main-key > div:nth-child(2) > p{ position: absolute;}
.main-key > div:nth-child(2) > p > img{ display: block; text-align: center;}
.main-key > div:nth-child(2) > p:nth-child(1){ top: 93.5%; right: 0; left: 0; background: #fff; border-radius: 20px; padding: 3em; box-shadow:0px 0px 14px 0px #333;}
.main-key > div:nth-child(2) > p:nth-child(1) > img{ width: 70%;}
.main-key > div:nth-child(2) > p:nth-child(2){ top: 175%; right: 0; left: 0;}
.main-key > div:nth-child(2) > p:nth-child(2) > img{ width: 65%;}

.main-key > div:nth-child(3){ position: absolute; bottom: 8%; left: 0; right: 0; display: flex;}
.top-cmnt{ color: #fff; font-size: .9em;}

/*sec01*/
.sec01{ background: url("img/back-img.jpg") repeat 0 0 / cover; padding: 410px 0 120px; text-align: center;}
.box{ display: flex; justify-content: center; margin: 2em 0 0;}
.ps-cmnt{ font-size: .8em; margin-bottom: 3em;}
.box > p{ width: 20%; margin: 0 1em;}
.point{ font-size: 1.7em; font-weight: 500;}
.figure{ width: 60%; margin: 1em 0;}
.figure-bg{ background: linear-gradient(transparent 12%, #fff 12%); position: relative; padding: 0 0 3em; margin-bottom: 5em;}
.figure-bg.fig-af{ margin-bottom: 100px;}
.figure-bg.fig-af::after{ margin: 0 0 -4vw -5vw; content: ""; position: absolute; top: auto; bottom: -15px; left: 50%; border-left: 5vw solid transparent; border-right: 5vw solid transparent; border-top: 5vw solid #37AD62; width: 0; height: 0;}
.figure-bg2{ background: #fff; position: relative; padding: 2em 0 3em; margin-top: 2em;}
.figure.img-cnt2{ margin: 2em 0 0; position: relative;}
.figure.img-cnt2:nth-of-type(2){ margin: 0;}
.point2{ font-size: 2em;}
.number > p,.number2 > p{ position: absolute; font-weight: 500; font-size: 1.2em; line-height: 1.3; }
.number2 > p{ color: #fff;}

/*.number2 > p{ color: #fff;}
.number > p:nth-child(1){ top: 30%; left: 23.5%;}
.number > p:nth-child(2){ top: 36.5%; left: 38.9%;}
.number > p:nth-child(3){ top: 30%; right: 22%;}*/
.number2 > p:nth-child(odd){ bottom: 19.5%;}
.number2 > p:nth-child(even){ bottom: 11.5%;}
.number2 > p:nth-child(1){ left: 25%;}
.number2 > p:nth-child(2){ left: 31%;}
.number2 > p:nth-child(3){ left: 39%;}
.number2 > p:nth-child(4){ left: 48%;}
.number2 > p:nth-child(5){ right: 39.5%;}
.number2 > p:nth-child(6){ right: 30.5%;}
.number2 > p:nth-child(7){ right: 23.5%;}

.number > div{ position: absolute; top: 30%; zoom: .6;}
.number > div:nth-child(1){ top: 30%; left: 25%;}
.number > div:nth-child(2){ top: 34%; left: 38%;}
.number > div:nth-child(3){ right: 25%;}
.swiper-container{ height: 155px; overflow: hidden;}


/*hr*/
.hr{ position: relative; height: 180px;}
.hr > p{ position: relative; z-index: 10; text-align: center; top: 30%; color: #fff; font-size: 2.1em; font-weight: 500;}
.hr:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 50.01%; background: #38ad60;
    -webkit-transform: skew(0deg, 5deg);
    -moz-transform: skew(0deg, 5deg);
    -ms-transform: skew(0deg, 5deg);
    -o-transform: skew(0deg, 5deg);
    transform: skew(0deg, 5deg);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;}
.hr:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 50.01%; background: #38ad60;
    -webkit-transform: skew(0deg, -5deg);
    -moz-transform: skew(0deg, -5deg);
    -ms-transform: skew(0deg, -5deg);
    -o-transform: skew(0deg, -5deg);
    transform: skew(0deg, -5deg);
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;}

/*sec02*/
.sec02{ background: url("img/bcg_a.png") no-repeat 0 0 / cover; padding: 150px 0 120px; text-align: center; margin-top: -5em;}
.bgpt{ position: absolute; top: 33%; left: 0; right: 0; font-weight: 500;}

/*sec03*/
.sec03{ background: #f4f4f4; padding: 150px 0 120px; margin-top: -5em;}
.content{ display: flex; margin: 2em auto; flex-wrap: wrap;}
.content > div{ width: 340px; background: #fff; border-radius: 10px; padding: 1em; margin-bottom: 1em;}
.content > div > div:nth-child(2) > p{ padding: .5em;}
.sec03 > .point,.sec04 > .point{ text-align: center;}
.cnt-in > p + p,.cnt-txt{ margin: .5em 0;}
.cnt-img{ margin: 1em 0 .5em;}
.cnt-p{ font-size: .8em; padding-top: 0;}
.cnt-bf,.cnt-af{ display: flex; justify-content: space-between; align-items: center;}
.cnt-bf > span,.cnt-af > span{ margin: 0;}
.cnt-bf > span:nth-of-type(1){ background: #f4f4f4; padding: .5em;}
.cnt-af > span:nth-of-type(1){ background: #e53e1a; padding: .5em; color: #fff;}
.cnt-bf > span:nth-of-type(2),.cnt-af > span:nth-of-type(2){ font-size: 1.3em; color: #e53e1a; font-weight: 500;}
span.sml{ color: #333; font-size: 18px; font-weight: normal;}
.cnt-af > span:nth-of-type(2){ font-size: 1.6em; font-weight: 600;}
.cnt-bf > span:nth-of-type(2){ color: inherit;}
.cnt-txt{ font-size: 1.2em; text-align: center; border: 2px dotted #e53e1a; border-radius: 10px; padding: 1em 0;}
.cnt-ttl{ font-size: 1.2em; font-weight: 500;}
span.bg{ font-size: 1.7em; font-weight: 500;}

/*Q&A*/
.sec04{ padding: 150px 0 90px; margin-top: -5em; text-align: center;}
.list_qaa{ text-align: left; width: 90%; margin: 1em auto 3em;}
.list_qaa > input { display: none;}
.list_qaa > label { display: block; width: 100%; padding: 0px; margin: 0px; cursor: pointer;}
.list_qaa > label > dt,
.list_qaa > label > dd{ position: relative; border-bottom: 1px solid #bfbfbf; background-color: #fff;}
.list_qaa > label > dd{ background: #f4f4f4; border: none;}
.list_qaa > label > dt:before,
.list_qaa > label > dd:before { position: absolute; top: 0px; left: 0.5em; font-size: 2em;}
.list_qaa > label > dt:before { content: "Q"; color: #033C73;}
.list_qaa > label > dd:before { content: "A"; color: #e53e1a;}
.list_qaa > label > dt { padding: 1em 1em 1em 3.5em;}
.list_qaa > label > dt:after { display: inline-block; position: relative; top: 50%; right: -1em; transform: translateY(-50%) rotate(135deg); width: 0.5em; height: 0.5em; border-top: 2px solid #bfbfbf; border-right: 2px solid #bfbfbf; content: "";}
.list_qaa > .check_open:checked + label > dt:after { transform: rotate(-45deg);}
.list_qaa > label > dd { padding: 0px 1em 0px 3.5em;; position: relative; z-index: -1; height: 0px; transform: translateY(-2em); visibility: hidden; transition: none;}
.list_qaa > .check_open:checked + label > dd { padding: 1em 1em 1em 3.5em;; height: 100%; visibility: visible; transform: translateY(0px); transition: 0.5s;}
.icn{ color: #033C73; margin: 0 .3em 0 .5em;}

/*form*/
.sec05{ background: #f4f4f4; padding: 150px 0 60px; margin-top: -5em;}
.container{ background: #fff; border-radius: 10px; padding: 2em;}
.row { display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: flex-start;}
.form-group.row{ align-items: center;}
.col-sm-6{ width: 45%;}
.sec_form label .badge { margin-left: .25rem; }
.badge-warning { color: #fff; background-color: #DD5600;}
.badge { display: inline-block; padding: .5em; font-size: .7em; font-weight: 500; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;}

.list_qaa.frm > label > dd{ z-index: 0;}
.list_qaa.frm > label > dd:before,.list_qaa.frm > label > dt:before{ display: none;}
.list_qaa.frm > label > dt{ border: none; background: #f4f4f4; padding: .5em 2em; border-radius: 10px;}
.list_qaa.frm > label{ display: inline-grid;}
.list_qaa.frm > label > dt::after{ top: 0;}
.list_qaa.frm > .check_open:checked + label > dd{ padding: 1em 1em 0;}
.list_qaa.frm{ margin-bottom: 2em;}

.open_button02{ display: block; width: 500px; margin: 1.5em auto 1em; border: none; background: #f4f4f4; padding: .5em 2em; border-radius: 10px; text-align: center; font-size: .8em;}

.col-sm-5,.col-sm-7{ margin: 0;}
.sec_form .form-control { height: calc(1.25em + 0.75rem + 2px); font-size: .875rem;}
.form-control { display: block; width: 250px; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;}
.form-group{ margin: 0 0 1em;}
.notice{ text-align: center; margin: 0 0 2em;}
input:focus,select:focus{ outline-color: #ccc;}
#files{ display: none;}
.filelabel{ background: #e53e1a; color: #fff; padding: .5em 2em; border-radius: 10px; font-size: .8em; display: block; margin: 0;}
label{ cursor: pointer;}
.form-group.row.filesgrp{ align-items: baseline; margin: 0;}

.modal_wrap input{ display: none;}
.modal_overlay{ display: flex; justify-content: center; overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background: rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.5s, transform 0s 0.5s; transform: scale(0);}
.modal_trigger{ position: absolute; width: 100%; height: 100%;}
.modal_content{ align-self: flex-start; width: 60%; padding: 45px 30px 15px; box-sizing: border-box; background: #fff; line-height: 1.4em; transform: translateY(-100%); transition: 0.5s;}
.close_button{ position: absolute; top: 14px; right: 16px; font-size: 24px; cursor: pointer;}
.modal_wrap input:checked ~ .modal_overlay{ opacity: 1; transform: scale(1); transition: opacity 0.5s;}
.modal_wrap input:checked ~ .modal_overlay .modal_content{ transform: translateY(20%);}
.open_button{ display: flex; justify-content: center; align-items: center; width: 40%; height: 100px; margin: auto; text-align: center; color: #444; border-radius: 10px; cursor: pointer; background: #f4f4f4;}
.col-8.sam{ width: 57%; font-size: .8em; margin: 0; padding-left: 1em;}
.open_button{ margin: 0;}
.card-text,.card-text{ font-size: .8em; margin-bottom: 1em; text-align: initial;}
.card-title{ margin-bottom: 1em;}
.thx .sec02{ margin: 0; padding: 0 0 50px;}

input[type="submit"],input[type="button"]{ background-image: linear-gradient(#e12b31, #C71C22 60%, #b5191f); color: #fff; font-size: 1em; border-radius: 10px; font-weight: 600; padding: 1em 1.5em; display: block; cursor: pointer; border: none; transition: all 0.3s ease 0s;}
.open_button,.open_button02,.filelabel{ transition: all 0.3s ease 0s;}
input[type="submit"]:hover,input[type="button"]:hover,.open_button:hover,.open_button02:hover,.filelabel:hover{ background-color: #f9f9f9; border-bottom-color: transparent; transform: translateY(0.1875em); opacity: .8;}
.filelabel:hover{ color: #e53e1a; opacity: 1;}

/*footer*/
footer{ background: #38ad60; color: #fff; padding: 20px 0; text-align: center;}

/*company*/
#company > .sec02{ padding: 0 0 50px; margin: 0 auto;}
.list{ background: #fff; border-radius: 10px; padding: 2em 0;  margin: 50px 0;}
.com{ text-align: left;}
.com > div{ display: flex; width: 85%; align-items: center; border-bottom: 1px solid #ccc; padding: 1.4em;}
.com dt{ margin: 0; width: 30%;}
.com dd{ margin: 0; width: 60%;}
#company .point{ padding: 1em 0 .5em;}

/*form*/
.hr.bg-ttl > p{ top: -6%; width: 35%;}
#confm .sec02,#thx .sec02{ margin: 0 auto; padding: 0;}
.container.cfm,#sec99{ margin: 100px auto;}
.row.cnf{ padding: 1em 0;}
.btn{ width: 250px; height: 60px; background: #f4f4f4; margin: 2em auto; display: flex; border-radius: 10px; align-items: center; border: none;}
.col p{ padding: 1em 0;}

.delighter { transition: all .4s ease-out; transform: translateY(8%); opacity: 0; } 
.delighter.started { transform: none; opacity: 1;}
.cnt-in.delighter.started.ended { box-shadow: 2px 4px 10px 4px rgba(0,0,0,0.2);}

#animate {
  animation-duration: 1.5s; /* アニメーションの時間 */
  animation-delay: 1.5s; /* アニメーション開始時間 */
  animation-iteration-count: infinite; /* アニメーションの繰り返し回数 */
}

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

/*pad pro*/
@media screen and (max-width:1024px) {
	header > div{ width: 100%; padding: 0;}
	.inner{ margin: 0 1em;}
	.sec01{ padding: 23vw 0 120px;}
	.point{ font-size: 1.5em;}
	.content{ margin: 2em 1em;}
	.hr{ height: 130px;}
	.hr > p{ top: 20%;}
	.hr.bg-ttl > p{ width: 50%;}
	
	.content{ flex-direction: column;}
	.content > div{ width: 100%; padding: 0; display: flex; align-items: flex-end;}
	.content > div + div{ margin-top: 1em;}
	.content > div > div{ padding: 1em; width: 50%;}
	.content > div > div:nth-child(2) > p{ padding: .3em 0;}
	.cnt-txt{ margin: .3em 0;}
	.form-control{ width: 200px;}
	.container.cfm,#sec99{ margin: 100px 1em;}
	.number2 > p{ font-size: 1.15em;}
	
    .number > div:nth-child(2){ left: 39.5%;}
}			

/*pad*/
@media screen and (max-width: 768px) {
	main{ height: 80vw; }
	header{ padding-top: .5em;}
	header > div > h1 > a > img{ height: 2em;}
	.main-key > div:nth-child(2) > p:nth-child(1) > img{ width: 100%;}
	.main-key > div:nth-child(2) > p:nth-child(1){ background: none; border-radius: 0; padding: 0; box-shadow: none;}
	.tab_br{ display: inherit;}
	.pc_br{ display: none;}
	.main-key > div:nth-child(2) > p:nth-child(3){ top: 88%;}
	.sec01{ padding: 53vw 0 120px;}
	h2,.hr > p{ font-size: 1.5em;}
	.hr > p{ top: 30%;}
	.bgpt{ top: 31.5%;}
	.box > p{ padding: 0; width: 30%;}
	.point{ font-size: 1.3em;}
	.cnt-img > img{ height: 205px; object-fit: cover;}
	.card-body > .row{ flex-direction: column;}
	.col-sm-6{ width: 100%;}
	.form-control{ width: 300px;}
	.number2 > p{ font-size: .85em;}
	
	.number > div{ zoom: .5;}
	.number > div:nth-child(1){ left: 22%;}
	.number > div:nth-child(2){ left: 38%;}
    .number2 > p:nth-child(odd){ bottom: 21.5%;}
    .number2 > p:nth-child(even){ bottom: 14%;}

	input[type="submit"], input[type="button"]{ font-size: 1em;}
}


/*sp*/
@media screen and (max-width: 767px) {
	body{ font-size: 14px; width: 100%; box-sizing: border-box;}
	.sp_br,.sp_view{ display: inherit;}
	.pc_view{ display: none;}
	header > div{ align-items: center;}
	header > div > h1 > a > img{ height: 45px; max-width: none;}
	header > div > p > span > img{ height: 50px;}
	header > div > p{ display: inline-block; width: auto;}
	.container{ padding: 0 .8em;}
	main{ height: 110vw; background: url("img/back-sp.jpg") no-repeat 0 0/cover;}
	.main-key{ padding: 0;}
	.main-key > div:nth-child(1){ position: relative; height: 60vw; overflow: hidden;}
	.main-key.inner{ margin: 0;}
	.sec01{ padding: 53vw 0 15vw;}
	.sec02,.sec03,.sec04,.sec05{ padding: 26vw 0 10vw;}
	.form-group.row{ flex-direction: column; align-items: baseline;}
	.main-key > div:nth-child(1) > img:nth-of-type(1),.main-key > div:nth-child(1) > img{ width: 70%; position: absolute; right: -7%;}
	.main-key > div:nth-child(1) > img:nth-of-type(1){ z-index: 1; left: 1vw; top: 3vw;}
	.main-key > div:nth-child(1) > img:nth-of-type(2){ width: 60%; bottom: 1%;}
	.top-cmnt{ font-size: 3vw; padding: 0 3vw; font-weight: bold; line-height: 1.1;}
	.box{ justify-content: space-evenly;}
	.box > p{ margin: 0;}
	.figure{ width: 90%; margin: 1em 0;}
	.hr{ height: 20vw;}
	.hr > p{ top: 25%;}
	.point{ font-size: 1.15em;}
	.bgpt{ top: 30%;}
	.content > div{ flex-direction: column; padding: 1em 0;}
	.content > div > div{ width: 90%; padding: 0 1em;}
	.cnt-img{ margin: 1em 0 0;}
	.content{ margin: 1em 1em 0;}
	.main-key > div:nth-child(2) > p:nth-child(3){ top: 91%;}
	.container{ padding: 1em .8em; box-sizing: content-box;}
	.col-sm-7{ padding: .5em 0;}
	.form-group.row.filesgrp,.form-group.row.samplegrp{ flex-direction: row; justify-content: space-between; }
	.form-group.row.samplegrp{ align-items: center;}
	.list_qaa{ width: 100%;}
	.modal_content{ width: 90%; padding: 45px 10px 15px;}
	.list_qaa.frm > label{ display: block;}
	.list_qaa > label{ width: 98%;}
	
	.com dt{ width: 40%;}
	.com dd{ width: 80%;}
	.container.cfm, #sec99{ margin: 50px auto;}
	.btn{ margin: .5em auto;}
	.thx .sec02{ padding: 0 0 5vw; margin: 0;}
	#sec99{ margin: 50px 1em;}
	.container.cfm{ margin: 50px auto; padding: 0;}
	.hr.bg-ttl > p{ width: 80%; top: -18%;}
	
	#confm header > div > h1 { padding: 0 .3em .3em;}
	.col-lg-10.offset-lg-1{ margin: 0; padding: 1em 2em;}
	.card-body{ text-align: center;}
	.open_button02{ width: 200px;}
	.sam-txt{ text-align: left;}
	.form-control{ width: 80%; margin: 0;}
	.form-control.slct{ width: 120%;}
	.index .col-lg-10.offset-lg-1{ padding: 0;}
	.sec_form .form-control{ font-size: 14px;}
	
	.thx p{ text-align: left;}
	.thx footer > p{ text-align: center;}
	span.sml{ font-size: 14px;}
	
	.figure-bg.fig-af{ margin-bottom: 10vw;}
	.figure-bg.fig-af::after{ margin-bottom: -1vw;}
	.figure-bg2{ margin-top: 1em;}
	
    .number2 > p{ font-size: .8em;}
    .number > div{ position: absolute; top: 30%; zoom: .3;}
	.swiper-container{ height: 160px;}
    .number > div:nth-child(1){ left: 14%;}
    .number > div:nth-child(2){ left: 35%;}
    .number > div:nth-child(3){ right: 12%;}
    .number2 > p:nth-child(1){ left: 13%;}
    .number2 > p:nth-child(2){ left: 22%;}
    .number2 > p:nth-child(3){ left: 34.5%;}
    .number2 > p:nth-child(4){ left: 47%;}
    .number2 > p:nth-child(5){ right: 34%;}
    .number2 > p:nth-child(6){ right: 19%;}
    .number2 > p:nth-child(7){ right: 10%;}   
}