@charset 'UTF-8';

@media screen and ( max-width: 1200px) {
	#headline .wrapper h1 img {
		width: 64.4%;
	}

	#feature .wrapper ul {
		display: block;
		width: 500px;
		margin: 100px auto 0;
	}
	#feature .wrapper ul li {
		width: 100%;
		display: flex;
		align-items: center;
		height: 140px;
		padding: 0 0 0 180px;
		background-position: left center;
		background-size: 120px;
	}
	#feature .wrapper ul li + li {
		margin-top: 0;
	}
	#feature .wrapper ul li h3 {
		margin-top: 0;
		text-align: left;
	}
	#feature .wrapper ul li p {
		text-align: left;
	}

	#flow .wrapper ul {
		justify-content: space-around;
		width: 980px;
		margin: 0 auto;
	}

	#news .caution {
		display: block;
		margin: 0;
		padding-left: 0;
		text-align: center;
	}
	#news .caution:before {
		position: relative;
		width: 293px;
		height: 204px;
		margin: 0 auto 25px;
	}
	#news .caution .caution_inner {
		display: inline-block;
		text-align: left;
	}
	#news .news li {
		justify-content: flex-end;
	}
	#news .news li .date {
		order: 1;
		width: auto;
		text-align: right;
	}
	#news .news li .category {
		order: 2;
		width: auto;
		margin-left: 2%;
	}
	#news .news li h3 {
		flex-grow: 1;
		order: 0;
		width: 100%;
		margin: 6px 0;
	}
	#news .news li .text {
		order: 3;
		width: 100%;
		margin: 0;
	}

	#disclaimer ul {
		margin: 50px 10% 0;
	}

	#company_information .wrapper {
		justify-content: space-around;
	}
	#company_information .box ul li p {
		width: calc(100% - 145px);
	}

}

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

	header .wrapper {
		width: 100%;
		max-width: none;
		padding: 0 0.835%;
	}
	header .wrapper nav {
		position: absolute;
		right: 0;
		width: 100%;
		height: 100%;
	}
	header .wrapper nav .menu {
		display: block;
		position: absolute;
		right: 2vw;
		width: 40px;
		height: 100%;
		cursor: pointer;
	}
	header .wrapper nav .menu span,
	header .wrapper nav .menu:before,
	header .wrapper nav .menu:after {
		display: block;
		position: absolute;
		width: 100%;
		height: 4px;
		background: #359239;
	}
	header .wrapper nav .menu:before,
	header .wrapper nav .menu:after {
		content: '';
		transition: .5s;
	}
	header .wrapper nav .menu span   { top: 50%; transition: .3s; transform: translateY(-50%); }
	header .wrapper nav .menu:before { top: calc(30% - 2px); }
	header .wrapper nav .menu:after  { top: calc(70% - 2px); }
	header .wrapper nav.active .menu span {
		opacity: 0;
	}
	header .wrapper nav.active .menu:before,
	header .wrapper nav.active .menu:after {
		top: calc(50% - 2px);
	}
	header .wrapper nav.active .menu:before { transform: rotateZ(-225deg); }
	header .wrapper nav.active .menu:after  { transform: rotateZ( 225deg); }
	header .wrapper nav .gNavi {
		display: block;
		position: absolute;
		top: 100%;
		width: 100%;
		border-bottom: 1px solid #000;
		background: rgba(255,255,255,.9);
		pointer-events: none;
		opacity: 0;
		z-index: 1000;
		transition: opacity .2s;
	}
	header .wrapper nav.active .gNavi {
		pointer-events: auto;
		opacity: 1;
	}
	header .wrapper nav .gNavi li + li {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
	header .wrapper nav .gNavi li a {
		display: block;
		padding: 3vw 0 3vw 5%;
		transition: opacity .3s padding .4s;
	}
	header .wrapper nav:not(.active) .gNavi li a {
		padding: 0 0 0 5%;
	}
	header .wrapper nav .gNavi li + li a {
		border-top: 1px solid rgba(0,0,0,.2);
	}

	#headline .wrapper {
		height: 400px;
	}
	#headline .wrapper h1 img {
		width: 644px;
	}

	#flow .wrapper ul {
		width: 100%;
	}

	#fee dl {
		width: 700px;
	}
	#fee dl dt {
		width: 280px;
	}
	#fee dl dd {
		width: 420px;
	}
	#fee .base ul {
		width: 700px;
	}
	#fee .estimate {
		width: 700px;
	}
	#fee .estimate table tr:first-of-type th:nth-of-type(1) { width: 35%; }
	#fee .estimate table tr:first-of-type th:nth-of-type(2) { width: 15%; }
	#fee .estimate table tr:first-of-type th:nth-of-type(3) { width: 25%; }
	#fee .estimate table tr:first-of-type th:nth-of-type(4) { width: 25%; }
	#fee .estimate table tr td .unit {
		padding-left: 1.4em;
	}

	#disclaimer ul {
		margin: 50px 0 0 5%;
	}

	#company_information .wrapper {
		display: block;
		width: 80%;
	}
	#company_information .wrapper .wrapper_inner {
		width: 100%;
	}
	#company_information .wrapper .wrapper_inner .box {
		margin-top: 40px;
	}
	#company_information .wrapper .wrapper_inner:first-of-type .box:first-of-type {
		margin-top: 0;
	}
}

@media screen and ( max-width: 720px) {
	main section .wrapper h2 {
		font-size: 35px;
	}

	#feature .wrapper ul li {
		padding-left: 140px;
		background-position: 20px center;
		background-size: 100px;
	}

	#flow .wrapper ul {
		display: block;
	}
	#flow .wrapper ul li {
		margin-left: auto;
		margin-right: auto;
	}

	#fee dl {
		display: block;
		width: auto;
	}
	#fee dl dt,
	#fee dl dd {
		width: auto;
	}
	#fee dl dd {
		margin: 0;
		padding: 0;
		text-align: center;
	}
	#fee .base ul {
		width: auto;
	}
	#fee .base ul li {
		display: block;
		height: auto;
		padding: 2%;
	}
	#fee .base ul li .body {
		margin-top: 2%;
		text-align: right;
	}
	#fee .estimate {
		width: auto;
	}
	#fee .estimate .total {
		margin-left: auto;
		margin-right: auto;
	}
	#fee .estimate table tr th,
	#fee .estimate table tr td {
		padding: 1%;
	}
	#fee .estimate table tr td .unit {
		padding-left: 1em;
	}

	#terms .terms_box {
		padding: 2%;
	}

	#contact .button_list {
		display: block;
		width: auto;
	}
	#contact .button_list li a {
		width: 400px;
		margin: 15px auto;
	}

	#company_information .wrapper {
		width: 90%;
	}
}

@media screen and ( max-width: 500px) {
	*,input,textarea {
		font-size: 3.6vw;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}

	header .wrapper {
		height: 15.6vw;
	}
	header .wrapper h1 {
		width: 56vw;
	}
	header .wrapper nav ul li {
		line-height: 3.2vw;
	}
	header .wrapper nav ul li + li {
		margin-left: 3.2vw;
		padding-left: 3.2vw;
		border-left: 1px solid #A3A3A3;
	}
	header .wrapper nav .menu {
		width: 8vw;
	}
	header .wrapper nav .menu span,
	header .wrapper nav .menu:before,
	header .wrapper nav .menu:after {
		height: .8vw;
	}
	header .wrapper nav .menu:before { top: calc(30% - .4vw); }
	header .wrapper nav .menu:after  { top: calc(70% - .4vw); }
	header .wrapper nav.active .menu:before,
	header .wrapper nav.active .menu:after {
		top: calc(50% - .4vw);
	}

	footer {
		padding: 14vw 0 0;
	}
	footer .copyright {
		padding: 3vw 0;
		font-size: 3.2vw;
	}

	main {
		margin-top: 15.6vw;
	}
	main section {
		padding: 14vw 0;
	}

	main section .wrapper h2 {
		font-size: 7vw;
	}
	main section .wrapper h3,
	main section .wrapper h2 span {
		line-height: 4.4vw;
		margin-top: 4vw;
		font-size: 4.4vw;
	}

	#headline .wrapper {
		height: 80vw;
	}

	#feature .wrapper ul {
		width: 100vw;
		margin: 20vw auto 0;
	}
	#feature .wrapper ul li {
		padding-left: 28vw;
		background-position: 4vw center;
		background-size: 20vw;
	}
	#feature .wrapper ul li {
		height: 28vw;
	}
		#feature .wrapper ul li h3 {
		margin-bottom: 4.8vw;
		font-size: 4.8vw;
	}
	#feature .wrapper ul li p {
		font-size: 3.2vw;
	}

	#flow .wrapper ul li {
		width: 64vw;
		height: 56vw;
		margin-top: 11.2vw;
		border-radius: 3vw;
	}
	#flow .wrapper ul li:before {
		width: 18vw;
		line-height: 46vw;
		font-size: 26vw;
	}
	#flow .wrapper ul li:after {
		top: 14vw;
		right: 20vw;
		width: 20.8vw;
		height: 18.8vw;
	}
	#flow .wrapper ul li h3 {
		padding-top: 4vw;
		font-size: 4.4vw;
	}
	#flow .wrapper ul li p {
		height: 20vw;
		margin: 0 5vw;
		font-size: 2.9vw;
		line-height: 5vw;
	}

	#fee dl {
		margin: 12.8vw auto;
	}
	#fee dl dt {
		line-height: 11.6vw;
		margin-top: 6vw;
	}
	#fee dl dt .s {
		font-size: 2vw;
	}
	#fee dl dd .b {
		line-height: 11.6vw;
		font-size: 6.4vw;
	}
	#fee .base ul li {
		margin: 4vw 0;
	}
	#fee .base ul li .title .repletion {
		font-size: 2.4vw;
	}
	#fee .base ul li .body .b {
		font-size: 6.4vw;
	}
	#fee .base ul li.text p,
	#fee .base ul li.text p a {
		font-size: 2.4vw;
	}
	#fee .estimate {
		margin: 12.8vw auto 0;
	}
	#fee .estimate .total {
		width: 90vw;
		margin: 8vw auto 5vw;
		border-bottom: 2px solid #000;
	}
	#fee .estimate .total li:last-of-type {
		font-size: 2.4vw;
	}
	#fee .estimate .total li:last-of-type .b {
		font-size: 4.8vw;
	}
	#fee .estimate table tr th,
	#fee .estimate table tr td {
		font-size: 3.2vw;
	}
	#fee .estimate p,
	#fee .estimate p a {
		font-size: 2.8vw;
	}

	#faq ul {
		margin: 8vw auto;
	}
	#faq ul li {
		margin: 7vw auto;
	}
	#faq ul li .q {
		height: 14vw;
	}
	#faq ul li .q:hover {
		opacity: 1;
	}
	#faq ul li .q .inner {
		padding-left: 20vw;
		padding-right: 10vw;
	}
	#faq ul li .a .inner {
		padding: 4vw 4vw 4vw 20vw;
		font-size: 2.8vw;
	}
	#faq ul li .q .inner:before,
	#faq ul li .a .inner:before {
		width: 20vw;
		line-height: 13.6vw;
		font-size: 18.4vw;
	}
	#faq ul li .q .inner .i {
		right: 5vw;
	}
	#faq ul li .q .inner .i:before,
	#faq ul li .q .inner .i:after {
		width: 4vw;
		height: 0.6vw;
	}

	#news .caution {
		padding: 14vw 0 12vw;
	}
	#news .caution:before {
		width: 58.6vw;
		height: 40.8vw;
		margin: 0 auto 5vw;
	}
	#news .caution .caution_inner {
		line-height: 6vw;
		font-size: 3.2vw;
	}
	#news .news li + li {
		margin-top: 5.6vw;
		padding-top: 5.6vw;
	}
	#news .news li .date {
		padding-top: 1.8vw;
		font-size: 2.8vw;
	}
	#news .news li .category span {
		width: 22.6vw;
		padding: 1.8vw 0;
		border-radius: 20vw;
		font-size: 2.8vw;
	}
	#news .news li h3 {
		margin: 1.2vw 0;
		font-size: 3.6vw;
	}
	#news .news li .text {
		font-size: 2.8vw;
	}
	#news .news li .text p,
	#news .news li .text p a {
		line-height: 6.4vw;
		font-size: 3vw;
	}

	#disclaimer ul {
		margin-top: 10vw;
	}
	#disclaimer ul li {
		line-height: 6vw;
		font-size: 2.8vw;
	}

	#terms .terms_box {
		height: 56vw;
		margin: 8vw auto 0;
	}
	#terms .terms_box h3 {
		margin: 10vw auto 3vw;
	}
	#terms .terms_box p,
	#terms .terms_box p a {
		margin: 3vw auto;
		line-height: 6vw;
		font-size: 2.8vw;
	}

	#contact .wrapper {
		width: 160vw;
	}
	#contact p,
	#contact p a {
		margin: 6vw auto;
		line-height: 6vw;
		font-size: 2.8vw;
	}
	#contact .button_list {
		margin: 6vw auto 12vw;
	}
	#contact .button_list li a {
		width: 80vw;
		line-height: 12vw;
		margin: 3vw auto;
		font-size: 2.8vw;
		border-radius: 20vw;
	}
	#contact .button_list li a:after {
		right: 3vw;
		width: 2vw;
		height: 2vw;
		border-top: solid 0.6vw #359239;
		border-right: solid 0.6vw #359239;
	}
	#contact dl dt,
	#contact dl dd,
	#contact dl dd input[type='text'] {
		font-size: 2.8vw;
	}
	#contact dl dt {
		margin-bottom: 1vw;
	}
	#contact dl dt:nth-of-type(n+2) {
		margin-top: 4vw;
	}
	#contact dl dd input[type='text'] {
		height: 10vw;
		padding-left: 2vw;
	}
	#contact dl dd label {
    font-size: 2.8vw;
    display: block;
    padding: 3px;
    margin: 3px 0;
	}
	#contact dl dd label:not(:last-of-type) {
		margin-right: 3vw;
	}
	#contact dl dd label input[type='radio'] {
		margin-right: 1vw;
	}
	#contact  input[type=submit],
	#contact  input[type=button]{
		width: 80vw;
		line-height: 16vw;
		margin: 11vw auto 0;
		border-radius: 20vw;
	}

	#company_information .wrapper .wrapper_inner .box {
		margin-top: 8vw;
	}
	#company_information .box h3 {
		margin: 0 auto 3vw;
	}
	#company_information .box ul {
		padding: 5vw;
		border-radius: 3vw;
		box-shadow: 0 0 2vw rgba(0,0,0,.2);
	}
	#company_information .box ul li {
		display: block;
	}
	#company_information .box ul li + li {
		margin-top: 1vw;
	}
	#company_information .box ul li .title {
		width: auto;
		line-height: 4.8vw;
		font-size: 2.8vw;
	}
	#company_information .box ul li p {
		width: auto;
		padding-left: 4vw;
	}
	#company_information .box ul li p,
	#company_information .box ul li p a {
		line-height: 4.8vw;
		font-size: 2.8vw;
	}
}