@charset "utf-8";

body {
	color: #000;
	font-size: 18px;
	width:100%;
	min-width: 375px;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	text-align: left;
	position: relative;
	font-feature-settings: "palt";
}

body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100vh;
	background: #FFF;
	z-index: 9999;
	-webkit-animation: opn-act 1.3s .3s ease-out forwards;
    animation: opn-act 1.3s .3s ease-out forwards;
	pointer-events: none;
}

@keyframes opn-act {
	0% { opacity: 1 }
    100% { opacity: 0 }
}

img { image-rendering: -webkit-optimize-contrast }

h2,h3,h4,h5,p {
	line-height: 160%;
	text-align: left;
}

h2,h3 { font-weight: bold}

h2 { 
	font-size: 48px;
	margin-bottom: 60px;
}

h3 { 
	font-size: 40px;
	margin-bottom: 40px;
}

h4 {
	font-size: 22px;
	margin-bottom: 25px;
}

p {
	line-height: 210%;
	margin-bottom: 10px;
	letter-spacing: 1px;
}

.tit-grn { color: #477737 }

.tit-no {
	width: 100%;
	border-bottom: 1px solid #477737;
	position: relative;
}

.tit-no::before,
.tit-no::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	bottom: -1px;
	left: -100%;
	border-bottom: 1px solid #477737;
}

.tit-no::before {
	right: -100%;
	left: auto;
}

.box-gry h2 {
	font-size: 38px;
	text-align: center;
}

.box-gry .txt-str {
	font-size: 50px;
	font-family: 'Shippori Mincho B1', serif;
	letter-spacing: -0.02em;
	text-align: center;
	line-height: 180%;
	margin-bottom: 0;
}

br.w460no { display: none }

@media(max-width:1000px){
	h2 {
		font-size: 26px;
		margin-bottom: 30px;
	}
	h3 {
		font-size: 24px;
		margin-bottom: 30px;
	}
	h4 {
		font-size: 18px;
		margin-bottom: 20px;
	}
	
	.box-gry h2 { font-size: 24px }
	.box-gry .txt-str { font-size: 30px }
	.tit-no .tit-num { width: 400px }
}

@media(max-width:640px){
	br.w640 { display: none }
	h2,
	.box-gry .txt-str { 
		font-size: 22px;
		text-align: center;
	}
	h3 { font-size: 20px }
	h3 small { font-size: 14px }
	h4,
	.box-gry h2 { font-size: 16px }
	.box-gry h2 { margin-bottom: 20px }
	.tit-no .tit-num { width: 300px }
	p { font-size: 17px }
}

@media(max-width:460px){
	br.w460 { display: none }
	br.w460no { display: block }
}

/***********************************
HEADER
***********************************/

header {
	position: fixed;
	top:0;
	display: block;
	width: 100%;
	background: #FFF;
	min-width: 375px;
	height: 115px;
	z-index: 999;
	opacity: 0;
	-webkit-animation: head-ant .3s .5s ease-out forwards;
    animation: head-ant .3s .5s ease-out forwards;
}

@keyframes head-ant {
	0% { 
		opacity: 0;
		top:-10px;
	}
    100% { 
		opacity: 1;
		top:0px;
	}
}

#h-logo {
	margin-left: 40px;
	top:20px;
	display: inline-block;
	position: relative;
	pointer-events: auto;
}

#h-logo a {	display: block }

#h-logo img { width: 230px }

.box-head { height: 115px }

.box-head p {
	font-size: 13px;
	position: relative;
	top: 15px;
	margin-left: 40px;
}

.box-head .bnr-head {
	position: absolute;
	top: 0;
	right: 30px;
	transition:all 0.3s ease;
	-webkit-transition: all .3s ease;
}

.box-head .bnr-head:hover { opacity: .8 }

.box-head .bnr-head img { width: 254px }

.box-head .h-tel {
	position: absolute;
	top: 74px;
	right: 30px;
	width: 254px;
	display: inline-block;
}

.box-head .h-tel img { width: 100% }

@media(max-width:900px){
	header,
	.box-head {	height: 56px }
	#h-logo {
		top:18px;
		margin-left: 20px;
	}
	#h-logo img { width: 140px }
	.box-head p { display: none }
	.box-head .bnr-head { right: 0 }
	.box-head .h-tel {
		top: 15px;
		right: 270px;
		width: 150px;
	}
}

@media (min-width: 751px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}

@media(max-width:640px){
	.box-head .h-tel { display: none}
	.box-head .bnr-head { right: 0px }
}

@media(max-width:440px){
	.box-head .bnr-head img { width: 200px }
}


/***********************************
ALL
***********************************/

.box-wrap {	
	padding: 100px 50px;
	position: relative;
	/*overflow-x: hidden;*/
	z-index: 1;
}

.box {
	padding: 50px 0;
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

.i-show {
	opacity: 0;
	top:20px;
}
.i-show.act {
	-webkit-animation: box-act .5s .3s ease forwards;
    animation: box-act .5s .3s ease-out forwards;
}

@keyframes box-act {
	0% { 
		opacity: 0;
		top:5px;
		-ms-filter: blur(10px);
		filter: blur(10px);
	}
    100% { 
		opacity: 1;
		top:0px;
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}

.box-gry { 
	background:#F1F1F1;
	padding: 150px 0px;
	overflow-x: hidden;
}

.box-gry .box {	padding: 50px 0 30px }

.box-gry02 .box { padding: 50px 0 50px }

.img-w640 {
	display: none;
	width: 100%;
}

@media(max-width:1000px){
	.box-wrap {	padding: 80px 40px }
	.box-gry { padding: 80px 40px}
	.box {	padding: 20px 0 30px }
	.box-gry .box {	padding: 20px 0 10px }
	.box-gry02 .box {	padding: 20px 0 20px }
}

@media(max-width:640px){
	.box-wrap {	padding: 30px }
	.box-gry { padding: 60px 30px}
	.img-w640 { display: block}
}

/***********************************
Maintop
***********************************/

#maintop { padding: 265px 0 150px }

#maintop .box {
	opacity: 0;
	top:20px;
	-webkit-animation: top-act .5s 1s ease forwards;
    animation: top-act .5s 1s ease-out forwards;
}

@keyframes top-act {
	0% { 
		opacity: 0;
		top:5px;
		-ms-filter: blur(10px);
		filter: blur(10px);
	}
    100% { 
		opacity: 1;
		top:0px;
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}

/***********************************
Designers
***********************************/

#designers h2,
#maintop h2 {
	margin-bottom: 90px;
}

#designers .logo-casa,
#maintop .logo-casa {
	width: 370px;
}

#designers { 
	padding: 300px 50px;
	background: url("../img/bg_designers.jpg") no-repeat center center;
	background-size: cover;
}

#designers::before {
	content: "";
	position: absolute;
	top:0;
	left: 0;
	display: block;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.25);
}

#designers h2,
#designers h3,
#designers p { 
	color: #FFF;
	text-align: center;
	font-family: 'Shippori Mincho B1', serif;
}

#designers h3 { 
	font-size: 40px;
	font-weight: normal;
}

#designers p { font-size: 60px }

@media(max-width:1000px){
	#maintop { padding: 195px 40px 80px }
	
	#designers { padding: 150px 40px }
	#designers h3 { font-size: 24px }
	#designers p { font-size: 35px }
	#designers h2,
	#maintop h2 { margin-bottom: 40px }
	#designers .logo-casa,
	#maintop .logo-casa { width: 200px }
}

@media(max-width:900px){
	#maintop { padding: 136px 40px 80px }
}

@media(max-width:640px){
	#maintop { padding: 116px 30px 60px }
	#maintop h2 { margin-bottom: 20px }
	#designers { padding: 80px 30px }
	#designers h3 { font-size: 16px }
	#designers p { font-size: 30px }
}

@media(max-width:460px){
	#designers h3 { 
		font-size: 13px;
		margin-bottom: 15px;
	}
}

/***********************************
Directing
***********************************/

#directing { 
	background: url("../img/bg_directing.jpg") no-repeat center center;
	background-size: cover;
}

#directing p {
	margin-bottom: 70px;
	max-width: 640px;
}

#directing .img-sign { margin-bottom: 0 }

#directing .img-sign img { width: 580px }

#directing .img-fr {
	position: absolute;
	top:50px;
	right: 0px;
	box-shadow: 8px 8px 26px 1px rgba(0,0,0,.3);
}

.list-photo {
	display: flex;
	flex-wrap: wrap;
}

.list-photo li { width:25% }

.list-photo li img { width: 100% }

@media(max-width:1200px){
	#directing .img-fr {
		width: 28%;
	}
}

@media(max-width:1000px){
	#directing p {
		margin-bottom: 40px;
		max-width: calc(100% - 250px);
	}	
	#directing .img-fr {
		width: 210px;
		top:20px;
	}	
	#directing .img-sign img { width: 300px }
}

@media(max-width:640px){
	#directing p { max-width: 100% }	
	#directing .img-sign { text-align: center }	
	#directing .img-sign img { width: 240px }	
	#directing .img-fr { display: none }	
	.list-photo li { width:50% }
}

/***********************************
Plan
***********************************/

#plan { 
	background: url("../img/bg_plan.jpg") no-repeat center center;
	background-size: cover;
}

#plan h2,
#plan p { margin-left: 700px }

#plan p { margin-bottom: 70px }

#plan .img-sign {
	margin-bottom: 0;
	text-align: right;
}

#plan .img-sign img { width: 380px }

#plan .img-fr {
	position: absolute;
	top:50px;
	left: 0px;
	box-shadow: 8px 8px 26px 1px rgba(0,0,0,.3);
}

@media(max-width:1300px){
	#plan .img-fr { width: 40% }
	#plan h2,
	#plan p { margin-left: calc( 40% + 40px ) }
}

@media(max-width:1000px){
	#plan p {
		margin-bottom: 40px;
		max-width: calc(100% - 250px);
	}
	#plan .img-fr { top:20px }
	#plan .img-sign img { width: 300px }
}

@media(max-width:640px){
	#plan h2,
	#plan p {
		max-width: 100%;
		margin-left: 0;
	}
	#plan .img-sign { text-align: center }
	#plan .img-sign img { width: 200px }
	#plan .img-fr { display: none }
}

/***********************************
Example
***********************************/

#example {
	background: url("../img/bg_example01.jpg") no-repeat center 100px;
	background-size: 100% auto;
	padding-top: 0;
}

#example::after {
	content: "";
	position: absolute;
	top:0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url("../img/bg_example02.png") no-repeat center bottom;
	background-size: 100% auto;
	z-index: -1;
}

#example .box-ex-head {
	text-align: center;
	width: 100%;
}

#example .box-ex-head img {
	max-width: 1437px;
	width: 100%;
}

#example p { margin-bottom: 20px }

#example .box {
	text-align: center;
	max-width: 1094px;
}

#example .box img {
	width: 100%;
	max-width: 1094px;
}

@media(max-width:1000px){
	#example {
		background: url("../img/bg_example01.jpg") no-repeat center 60px;
		background-size: 100% auto;
	}
	#example::after {
		background: url("../img/bg_example02.png") no-repeat center bottom;
		background-size: 130% auto;
	}
	#example .box { padding-bottom: 50px }
	#example .txt-data { font-size: 13px }
}

@media(max-width:640px){
	#example {
		background: url("../img/bg_example01.jpg") no-repeat center 40px;
		background-size: 100% auto;
	}
	#example::after {
		background: url("../img/bg_example02.png") no-repeat center bottom;
		background-size: 200% auto;
	}
}

/***********************************
Spec
***********************************/

#spec {
	background: url("../img/bg_spec01.jpg") no-repeat center top,url("../img/bg_spec02.jpg") no-repeat center bottom;
	background-size: 100% auto;
	overflow-x: hidden;
}

#spec .box { max-width: 1060px }

#spec h2 {
	width: 100%;
	border-bottom: 1px solid #B2B2B2;
	position: relative;
	font-size: 39px;
	font-family: 'Shippori Mincho B1', serif;
	font-weight: normal;
	letter-spacing: 0;
	padding-bottom: 20px;
	margin-bottom: 80px;
}

#spec h2::before,
#spec h2::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	bottom: -1px;
	left: -100%;
	border-bottom: 1px solid #B2B2B2;
}

#spec h2::before {
	right: -100%;
	left: auto;
}

#spec h2 img { margin: 0 4px 11px 0 }

#spec h3 { font-size: 50px }

#spec h4.tit-spec {
	font-size: 50px;
	font-weight: bold;
	border-bottom: 1px solid #E95504;
	position: relative;
}

#spec h4.tit-spec02 { border-bottom: 1px solid #009844 }
#spec h4.tit-spec03 { border-bottom: 1px solid #D3C1A2 }
#spec h4.tit-spec04 { border-bottom: 1px solid #003F76 }

#spec h4.tit-spec::after {
	content: "Natural materials";
	position: absolute;
	bottom: -22px;
	right: 0;
	font-size: 13px;
	letter-spacing: 0.16em;
}

#spec h4.tit-spec span {
	display: block;
	position: relative;
	padding-left: 70px;
}

#spec h4.tit-spec span::after {
	content: "";
	position: absolute;
	top:14px;
	left: 0;
	display: block;
	height: 48px;
	width: 48px;
	border-top: 10px solid #D2D2D3;
	border-left: 10px solid #D2D2D3;
}

#spec h4.tit-spec02 span::after {
	border-top: 10px solid #009844;
	border-left: 10px solid #009844;
}

#spec h4.tit-spec03 span::after {
	border-top: 10px solid #E4D0AE;
	border-left: 10px solid #E4D0AE;
}

#spec h4.tit-spec04 span::after {
	border-top: 10px solid #000000;
	border-left: 10px solid #000000;
}

#spec h4.tit-spec span::before {
	content: "";
	position: absolute;
	top:38px;
	left:24px;
	display: block;
	height: 24px;
	width: 24px;
	background: #E95504;
}

#spec h4.tit-spec02 span::before {
	background: #E50012;
}

#spec h4.tit-spec03 span::before {
	background: #487836;
}

#spec h4.tit-spec04 span::before {
	background: #003F76;
}

#spec h5 {
	font-size: 38px;
	text-align: left;
	font-weight: bold;
	margin-bottom: 40px;
}

.box-spec {
	position: relative;
	margin-bottom: 100px;
}

.box-spec:last-child { margin-bottom: 0 }

.list-spec {
	display: flex;
	margin-bottom: 20px;
}

.list-spec li {
	width:100%;
	margin-right: 10px;
}

.list-spec li:last-child { margin-right: 0 }

.list-spec li img { width: 100% }

.list-spec li img { max-width: 520px }

.list-spec02 li img { max-width: 252px }

br.spec-w500,
br.spec-w480 { display: none }

@media(max-width:1000px){
	.box-spec { margin-bottom: 80px	}
	#spec h2 { 
		font-size: 24px;
		margin-bottom: 60px;
	}
	#spec h2 img {
		width: 180px;
		margin-bottom: 8px;
	}
	#spec h4.tit-spec,
	#spec h3 { font-size: 26px }
	#spec h5 { 
		font-size: 20px;
		margin-bottom: 30px;
	}
	#spec h4.tit-spec::after {
		bottom: 0px;
		font-size: 11px;
	}
	#spec h4.tit-spec span {
		padding-left: 50px;
		padding-bottom: 10px;
	}
	#spec h4.tit-spec span::after {
		top:4px;
		height: 30px;
		width: 30px;
		border-top: 8px solid #D2D2D3;
		border-left: 8px solid #D2D2D3;
	}
	#spec h4.tit-spec02 span::after {
		border-top: 8px solid #009844;
		border-left: 8px solid #009844;
	}
	#spec h4.tit-spec03 span::after {
		border-top: 8px solid #E4D0AE;
		border-left: 8px solid #E4D0AE;
	}
	#spec h4.tit-spec04 span::after {
		border-top: 8px solid #000000;
		border-left: 8px solid #000000;
	}
	#spec h4.tit-spec span::before {
		top:20px;
		left:16px;
		height: 14px;
		width: 14px;
	}
	#spec h4.tit-spec02 span::before { background: #E50012 }
	#spec h4.tit-spec03 span::before { background: #487836 }
	#spec h4.tit-spec04 span::before { background: #003F76 }
}

@media(max-width:640px){
	.box-spec { margin-bottom: 50px	}
	#spec h2 { 
		font-size: 20px;
		margin-bottom: 40px;
	}
	#spec h2 img {
		width: 140px;
		margin-bottom: 6px;
	}
	#spec h3 { text-align: center }
	#spec h4.tit-spec,
	#spec h3 { font-size: 22px }
	#spec h5 { 
		font-size: 18px;
		margin-bottom: 20px;
	}
	#spec h4.tit-spec::after { font-size: 11px }
	#spec h4.tit-spec span::after {	top:0px }
	#spec h4.tit-spec span::before { top:16px }
	#spec h4.tit-spec span {
		padding-left: 40px;
		padding-bottom: 5px;
	}
}

@media(max-width:500px){
	br.spec-w500 { display: block }
}

@media(max-width:480px){
	br.spec-w480 { display: block }
	#spec h4.tit-spec::after { font-size: 8px }
}

/***********************************
Support
***********************************/

#support .box { max-width: 1060px }

#support .box-inner { position: relative }

#support p {
	max-width: calc(100% - 380px);
	margin-bottom: 0;
}

#support p.img-sign {
	position: absolute;
	right: -20px;
	bottom: 0;
}

.list-support {
	display: flex;
	margin-bottom: 60px;
}

.list-support li {
	width:100%;
	margin-right: 10px;
}

.list-support li:last-child { margin-right: 0 }

.list-support li img { width: 100% }

.list-support li img { max-width: 515px }

#support h2 br.support-w640 { display: none }

@media(max-width:1000px){
	.list-support { margin-bottom: 40px }
	#support p {max-width: 100%}
	#support p.img-sign {
		position: relative;
		right: 0px;
		text-align: right;
		padding-top: 20px;
	}
	#support p.img-sign img {width: 300px}
}

@media(max-width:640px){
	.list-support { margin-bottom: 30px }
	#support p.img-sign {text-align: center }
	#support p.img-sign img {width: 220px}
	#support h2 br { display: none }
	#support h2 br.support-w640 { display: block }
}

/***********************************
Achieve
***********************************/

#achieve {
	background: url("../img/bg_achieve.png") no-repeat center bottom;
	background-size: 100% auto;
}

#achieve .box {
	max-width: 1170px;
	text-align: center;
}

#achieve .box-inner {
	position: relative;
	max-width: 1030px;
	margin: 0 auto 100px;
}

#achieve h2 {
	text-align: center;
	color: #487836;
	font-size: 53px;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 100px;
}

#achieve h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	height: 4px;
	border-bottom: 1px solid #B3A53F;
	border-top: 1px solid #B3A53F;
}

#achieve p.img-sign {
	position: absolute;
	right: 0;
	top: 0;
}

.list-achieve {
	display: flex;
	margin-bottom: 100px;
}

.list-achieve02 { margin-bottom: 0 }

.list-achieve01 li {
	width:100%;
	margin-right: 20px;
}

.list-achieve02 li {
	width:100%;
	margin-right: 10px;
}

.list-achieve li:last-child { margin-right: 0 }

.list-achieve li img { width: 100% }

.list-achieve01 li img { max-width: 558px }

.list-achieve02 li img { max-width: 366px }

@media(max-width:1136px){
	.list-achieve01 li { margin-right: 10px }
}

@media(max-width:1000px){
	#achieve { background-size: 130% auto }
	#achieve .box-inner { margin-bottom: 60px }
	#achieve h2 { 
		font-size: 30px;
		margin-bottom: 60px;
	}
	.list-achieve01 {
		margin-bottom: 60px;
	}
	#achieve p.img-sign { top: -20px }
	#achieve p.img-sign img {width: 280px}
}

@media(max-width:700px){
	#achieve p.img-sign { top: 0 }
	#achieve p.img-sign img {width: 240px}
}

@media(max-width:640px){
	#achieve { background-size: 180% auto }
	#achieve h2 { 
		font-size: 22px;
		margin-bottom: 30px;
	}
	.list-achieve01 { margin-bottom: 30px }
	#achieve h3 { text-align: center }
	#achieve p.img-sign {
		text-align: center;
		position: relative;
		top:0;
		padding-top: 20px;
	}
	#achieve p.img-sign img {width: 200px}
}

@media(max-width:480px){
	#achieve { background-size: 200% auto }
}

/***********************************
Partners
***********************************/

#partners { background:#FBF8F3 }

#partners .box {
	max-width: 1000px;
	text-align: center;
}

#partners .box-inner {
	position: relative;
	max-width: 1030px;
	margin: 0 auto 60px;
}

#partners p {
	position: absolute;
	top:0;
	left: 0;
}

#partners .img-map {
	position: relative;
	top: 0;
	right: 0;
	max-width: 100%;
}

@media(max-width:800px){
	#partners p { position: relative }
	#partners p br { display: none }
}

/***********************************
Form
***********************************/

#form-head {
	background: #EEEBE6;
	padding-bottom: 0;
	position: relative;
}

#form-head::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 80px;
	display: block;
	background: #FFF;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -2;
}

#form-head::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	display: block;
	border-style: solid;
	border-width: 280px 415px 0 415px;
	border-color: #EEEBE6 transparent transparent transparent;
	left: 0;
	right: 0;
	bottom: -200px;
	margin: auto;
	z-index: -1;
}

#form-body { padding-top: 260px }

#form-head .box { padding-bottom: 0 }

#form-head .box,
#form-body .box { max-width: 1060px }

#form-head h2,
#form-head h3,
#form-head p,
#form-body h2,
#form-body h3,
#form-body p,
#form-body { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif }

#form-head h2 {
	font-weight: bold;
	text-align: center;
	color: #C65E66;
	font-size: 38px;
}

#form-head h2 small{ 
	color: #221714;
	font-size: 30px;
}

#form-head p { margin-bottom: 0 }

#form-head p.img-sign {
	text-align: center;
	margin-bottom: 20px;
}

#form-head .box-inner { position: relative }

#form-head .box-inner p { 
	text-align: center;
	font-size: 30px;
	font-weight: bold;
}

#form-head .box-inner p span {
	font-size: 38px;
	color: #C75F67;
}

.list-form {
	display: flex;
	margin: 0 auto 120px;
	max-width: 568px;
	width: 100%;
}

.list-form li {
	width:100%;
	margin-right: 70px;
}

.list-form li:last-child { margin-right: 0 }

.list-form li h3 {
	text-align: center;
	font-size: 20px;
	margin-bottom: 20px;
}

.list-form li h3 small,
.list-form li p {
	font-size: 16px;
	text-align: center;
}

.list-form br.form-w640 { display: none }

.list-form li img {
	width: 100%;
	max-width: 248px;
	box-shadow: 4px 4px 15px 2px rgba(0,0,0,.3);
	margin-bottom: 30px;
}

#form-body .box-message {
	background: #D9E3D6;
	padding: 30px 60px;
	border-radius: 5px;
	margin-bottom: 0;
}

#form-body .box-message p,
#form-body .box-form-head p { font-size: 16px }

#form-body .box-message p:last-child { margin-bottom: 0 }

#form-body .box-form-head { margin-bottom: 30px }

#form-body .box-form-head:first-child { padding-top: 70px }

#form-body .box-form-head-q,
#form-body .box-form-head-p { margin-bottom: 0 }

#form-body .box-form-body { margin-bottom: 40px }

#form-body .box-form-body .box-inner {
	position: relative;
	border-bottom: 1px solid #B1B1B1;
	padding: 25px 20px;
	text-align: left;
	display: flex;
	flex-flow: row wrap;
}

#form-body .box-form-body .box-inner dt { flex-basis: 275px }

#form-body .box-form-q .box-inner dt {
	flex-basis: 100%;
	margin-bottom: 20px;
}

#form-body .box-form-body .box-inner dd {
	flex-basis: calc(100% - 300px);
	padding-left: 25px;
}

#form-body .box-form-q .box-inner dd,
#form-body .box-form-p .box-inner dd {
	flex-basis: 100%;
	padding-left: 0px;
}

#form-body .box-form-head h2,
#form-body .box-form-body h3 { font-size: 18px }

#form-body .box-form-head h2 {
	padding: 0 10px 15px;
	margin-bottom: 30px;
	border-bottom: 2px solid #467737;
	text-align: left;
}

#form-body .box-form-head-q h2,
#form-body .box-form-head-p h2 { margin-bottom: 0 }

#form-body .box-form-head p {
	padding: 0 15px;
	margin-bottom: 0;
}

#form-body .box-form-body h3 {
	border-left: 10px solid #E3CFAE;
	padding-left: 10px;
	margin-bottom: 0;
}

#form-body .box-form-body .tit {
	font-weight: bold;
	margin-bottom: 0;
	position: relative;
}

#form-body .box-form-q .tit {
	display: inline-block;
	padding-right: 90px;
}

#form-body .box-form-head-p .tit-ck { position: relative }

#form-body .box-form-body .tit-ck::after,
#form-body .box-form-head-p .tit-ck::after {
	content: "必須";
	display: block;
	position: absolute;
	top:5px;
	right: 0;
	background: #467737;
	width: 70px;
	height: 24px;
	text-align: center;
	color: #FFF;
	font-size: 14px;
	line-height: 24px;
	border-radius: 3px;
}

#form-body .box-form-q .tit-ck::after { right: 0 }

#form-body .box-form-head-p .tit-ck::after {
	right: inherit;
	left: 245px;
	top:2px;
}

#form-body .box-form-body p,
#form-body .box-form-body .txt,
#form-body .box-form-body label,
#form-body .box-form-body span { font-size: 16px }

#form-body .box-form-body input.txt,
#form-body .box-form-body select,
#form-body .box-form-body textarea {
	border: 1px solid #B1B1B1;
	border-radius: 3px;
	padding: 8px;
	width: 300px;
}

#form-body .box-form-body .select-wrap { position: relative }

#form-body .box-form-body .select-wrap::before {
	content: "";
	position: absolute;
	display: block;
	top: 0.4em;
	right: 1.2em;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #111;
    border-left: 2px solid #111;
	transform: rotate(-45deg);
	z-index: 1;
	pointer-events: none;
}

#form-body .box-form-body input#post-code1 { width: 80px }
#form-body .box-form-body input#post-code2 { width: 100px }
#form-body .box-form-body select { width: 160px }
#form-body .box-form-body textarea { width: 100% }

#form-body .box-form-body #plan2-txt,
#form-body .box-form-body #ck6-txt,
#form-body .box-form-body #ck8-txt {
	width: calc(100% - 30px);
	max-width: 400px;
	margin-left: 30px;
}

#form-body .box-form-body #ck6-txt { margin-bottom: 15px }

#form-body .box-form-body .txt-sub {
	padding-top: 15px;
	display: block;
	line-height: 160%;
}

input[type="radio"],
input[type="checkbox"]{
  	position: relative;
	top: 1px;
	margin: 10px 5px 15px 10px;
}

@media(max-width:1000px){
	#form-head h2 { font-size: 24px }
	#form-head h2 small { font-size: 18px }
	#form-head .box-inner p { font-size: 26px}
	#form-head .box-inner p span { font-size: 30px }
	#form-head::before {
		border-width: 180px 250px 0 250px;
		bottom: -100px;
	}
	.list-form { margin-bottom: 80px }
	#form-body { padding-top: 120px }
	#form-body .box-message { padding: 30px 40px }
	#form-body .box-form-head:first-child { padding-top: 50px }
	#form-body .box-form-body .box-inner dt {
		flex-basis: 100%;
		margin-bottom: 20px;
	}
	#form-body .box-form-body .box-inner dd { 
		flex-basis: 100%;
		padding-left: 0px;
	}
	#form-body .box-form-body input.txt,
	#form-body .box-form-body select,
	#form-body .box-form-body textarea {
		padding: 15px;
		width: 100%;
	}
}

@media(max-width:640px){
	#form-head h2 { font-size: 22px }
	#form-head h2 small { font-size: 16px }
	#form-head h3 { font-size: 18px }
	#form-head .box-inner p { font-size: 18px}
	#form-head .box-inner p span { font-size: 22px }
	#form-head::before {
		border-width: 140px 200px 0 200px;
		bottom: -60px;
	}
	#form-body { padding-top: 80px }
	#form-head p.img-sign img { width: 160px }
	.list-form { margin-bottom: 40px }
	.list-form li {
		width:100%;
		margin-right: 5%;
	}
	.list-form br.form-w640 { display: block}
	.list-form li p { font-size: 14px }
	.list-form li p br { display: none}
	#form-body .box-message { padding: 20px 30px }
	#form-body .box-form-head:first-child { padding-top: 40px }
	#form-body .box-form-body p,
	#form-body .box-form-body .txt,
	#form-body .box-form-body label { font-size: 18px }
	input[type="radio"],
	input[type="checkbox"]{
		margin: 10px 5px 18px 2px;
	}
}

@media(max-width:480px){
	#form-head h2 small {
		font-size: 16px;
		line-height: 160%;
		display: inline-block;
		margin-bottom: 10px;
	}
	#form-head::before {
		border-width: 100px 150px 0 150px;
		bottom: -60px;
	}
	#form-head::after { height: 30px }
}
/***********************************
Present
***********************************/

.box-present { background:#507E41 }

.box-present h2,
.box-present p { color: #FFF }

.box-present p.txt-str { 
	font-size: 40px;
	letter-spacing: 0;
	margin-bottom: 20px;
}

.box-present p.txt-str .txt-spc {
	letter-spacing: -0.2em;
}

.box-present h3 { 
	color: #E3CFAE;
	margin-bottom: 5px;
}

.box-present dl {
	margin-bottom: 20px;
}

.box-present dd {
	padding-left: 20px;
	position: relative;
	margin-bottom: 15px;
}

.box-present dd::before {
	content: "●";
	position: absolute;
	top:15px;
	left: 0;
	color: #F4A911;
	font-size: 12px;
}

@media(max-width:1000px){
	.box-present dd::before {
		top:12px;
	}
}

@media(max-width:640px){
	.box-present dd::before {
		top:9px;
		font-size: 10px;
	}
	.box-present p.txt-str { 
		font-size: 22px;
	}
}

/***********************************
Button
***********************************/

.bnr-present {
	position: fixed;
	bottom: 5px;
	left: -5px;
	display: inline-block;
	z-index: 999;
	background: #FFF;
	opacity: 0;
	-webkit-animation: bnr-ant .3s .8s ease-out forwards;
    animation: bnr-ant .3s .8s ease-out forwards;
}

@keyframes bnr-ant {
	0% { 
		opacity: 0;
		left: -5px;
	}
    100% { 
		opacity: 1;
		left: 5px;
	}
}

.bnr-present img {
	width: 280px;
	transition:all 0.3s ease;
	-webkit-transition: all .3s ease;
}

.bnr-present:hover img { opacity: .8 }

.btn {
	position: relative;
	display: block;
	text-align: center;
	border-radius: 8px;
	transition:all 0.3s ease;
	-webkit-transition: all .3s ease;
}

.btn-partners {
	background: rgb(231,226,219);
	background: linear-gradient(180deg, rgba(231,226,219,1) 0%, rgba(231,226,219,1) 50%, rgba(199,189,172,1) 50%, rgba(225,218,209,1) 100%);
	width: 500px;
	height: 90px;
	font-size: 18px;
	box-shadow: 0 3px 1px 0 rgba(204, 193, 175, .95);
	margin: 0 auto;
}

.btn-partners:hover {
	box-shadow: 0 5px 5px 0 rgba(204, 193, 175, .95);
	filter: brightness(105%);
}

.btn-partners .txt-up,
.btn-partners .txt-down {
	display: block;
	width: 100%;
	height: 45px;
	font-weight: bold;
	line-height: 45px;
}

.btn-form {
	background: #323232;
	color: #FFF;
	width: 250px;
	height: 54px;
	font-size: 18px;
	margin: 0 auto;
	font-weight: bold;
}

.btn-form:hover { opacity: .8 }

@media(max-width:1000px){
	.bnr-present img { width: 180px }
	.btn { width: 100% }
	.btn-form { height: 80px }
}

@media(max-width:640px){
	.bnr-present img { width: 140px }
}

/***********************************
FOOTER
***********************************/

footer.box-wrap {
	background: #F1F1F1;
	display: block;
	position: relative;
	z-index: 1;
	padding: 55px 0 45px;
}

footer .box { padding:0 }

footer .f-logo { margin-bottom: 30px }

footer h2,
footer p {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	text-align: center;
	font-size: 17px;
}

footer h2 { margin-bottom: 10px }

footer p { 
	font-size: 16px;
	margin-bottom: 0;
}

footer p br { display: none }

@media(max-width:1200px){
	footer.box-wrap { padding: 55px 40px 45px }
	footer p { font-size: 14px }
	footer p br { display: block }
}

@media(max-width:900px){
	footer .f-logo { width: 140px }
}

@media(max-width:1200px){
	footer.box-wrap { padding: 55px 30px 45px; }
}