@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kosugi+Maru&family=M+PLUS+Rounded+1c:wght@700;900&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

@media screen and (min-width:800px){
	.xElements > *:nth-child(2) ,
	.nodispPC {
		display:none!important;
	}
	.tel {
		pointer-events:none;
	}

}
@media screen and (max-width:799px){
	.xElements > *:nth-child(1) ,
	.nodispSP {
		display:none!important;
	}
}

/* ======================================================================================================
	CSS reset
====================================================================================================== */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
html ,body ,div ,p ,span ,iframe ,a ,img ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
blockquote ,q ,pre ,em ,i ,strong ,small ,a
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	color:inherit;
	vertical-align:baseline;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:inherit;
}
button ,input ,textarea ,select {
	font-size:100%;
	padding:5px;
	letter-spacing:1px;
	font-family:'Noto Sans JP' ,sans-serif;
}
input[type="submit"] ,button {
	font-size:100%;
	padding:10px 30px;
	font-family:inherit;
}

html ,body {
	min-height:100%;
	height:100%;
	font-family:'Noto Sans JP' ,sans-serif;
}
a {
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
a:hover {
	text-decoration:none;
}

img {
	vertical-align:top;
	max-width:100%;
	max-height:100%;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

ol ,ul ,li {
	list-style:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

/* ======================================================================================================
	common
====================================================================================================== */
body{
	position:relative;
	font-size:16px;
	line-height:1.6;
	color:#000;
	background-color:#fff;
	-webkit-font-smoothing:antialiased
}

#bgLayer{
	position:relative;
	margin:0 auto;
	overflow:hidden;
}

.innerFrame {
	width:1200px;
	margin:0 auto;
}

@media screen and (max-width:799px){
	#bgLayer{
		width:480px;
	}
	.innerFrame {
		max-width:100%;
	}
}

.center {
	text-align:center;
}

.anchorLink {
	cursor:pointer;
}
.anchorLink:hover {
	opacity:0.8;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}

.altText {
	display:none;
}

.textShadow {
	text-shadow:
			2px 2px 0 #fff ,-2px 2px 0 #fff ,2px -2px 0 #fff ,-2px -2px 0 #fff
		,	0px 2px 0 #fff ,-2px 0px 0 #fff ,2px  0px 0 #fff , 0px -2px 0 #fff
		,	3px 3px 5px #000;
}



/* ====================================================================
	title (blue back)
==================================================================== */
.h1.blueback {
	padding:2em;
}
.h1.blueback h1 {
	font-size:350%;
	font-weight:900;
	letter-spacing:0.05em;
	text-indent:0.05em;
	color:#fff;
	text-shadow:3px 3px 5px #666;
	background:#06f;
	border-radius:3em;
	font-weight:900;
	font-family:'M PLUS Rounded 1c' ,sans-serif;
}

@media screen and (max-width:799px){
	.h1.blueback {
		padding:2em 1em;
	}
	.h1.blueback h1 {
		font-size:240%;
	}
}


/* ====================================================================
	title (pink back)
==================================================================== */
.h1.pinkback {
	padding:2em;
}
.h1.pinkback h1 {
	font-size:350%;
	font-weight:900;
	letter-spacing:0.05em;
	text-indent:0.05em;
	color:#fff;
	text-shadow:3px 3px 5px #666;
	background:#f9a;
	border-radius:3em;
	font-weight:900;
	font-family:'M PLUS Rounded 1c' ,sans-serif;
}

@media screen and (max-width:799px){
	.h1.pinkback {
		padding:2em 1em;
	}
	.h1.pinkback h1 {
		font-size:240%;
	}
}


/* ====================================================================
	font color
==================================================================== */
.orange {
	color:#f60;
}
.blue {
	color:#06f;
}
.skyblue {
	color:#39f;
}
.green {
	color:#083;
}
.pink {
	color:#f69;
}
.deeppink {
	color:#f36;
}


/* ====================================================================
	flex
==================================================================== */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex > * {
	height:100%;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}

.flex.between {
	justify-content:space-between;
}
.flex.evenly {
	justify-content:space-evenly;
}
.flex.around {
	justify-content:space-around;
}
.flex.wrap {
	flex-wrap:wrap;
}

.flex.col2 > * {
	width:calc(100% / 2);
}
.flex.col3 > * {
	width:calc(100% / 3);
}


.flex > .half {
	width:50%;
}
.flex > .full {
	width:100%;
}



/* ====================================================================
	pagetop button
==================================================================== */
#pagetopButton {
	display:none;
	position:fixed;
	right:1em;
	bottom:1em;
	width:4em;
	height:4em;
	z-index:100;
}
#pagetopButton .anchorLink {
	width:100%;
	height:100%;
	line-height:1.2;
	color:#fff;
	background:#933;
	border:2px solid #fff;
	border-radius:0.5em;
	box-shadow:1px 1px 3px #666;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	text-align:center;
}
#pagetopButton .anchorLink > span:nth-child(2) {
	font-size:80%;
	line-height:1;
}

@media screen and (max-width:799px){
	#pagetopButton {
		right:0.5em;
		bottom:0.5em;
		font-size:90%;
	}
}



/* ======================================================================================================
	header
====================================================================================================== */
#bgLayer {
	padding-top:103px;
}

#header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:100px;
	background:rgba(255,255,255,0.9);
	box-shadow:0 3px 5px #ccc;
	z-index:100;
}

#header > .innerFrame.flex.between {
	height:100px;
	padding:0.3em;
}
#header-logo ,
#header-logo * {
	height:100%;
}

#header-info {
	margin-left:auto;
	align-self:flex-end;
	height:auto;
	padding-bottom:0.2em;
}
#header-info p {
	font-size:85%;
}
#header-info .telLink a.flex {
	height:1em;
	line-height:1;
	font-size:240%;
	color:#f69;
	font-weight:bold;
}
#header-info .telLink a.flex .icon {
	padding-top:0.1em;
	padding-right:0.1em;
}

#header-form {
	margin-left:1em;
}
#header-form * {
	height:100%;
}


@media screen and (max-width:799px){
	#bgLayer {
		padding-top:73px;
	}

	#header ,
	#header > .innerFrame.flex.between {
		height:70px;
	}
	#header-logo {
		height:50px;
	}

	#header-info ,
	#header-info .telLink ,
	#header-info .telLink a.flex {
		height:100%;
		padding:0;
	}
	#header-info .telLink a.flex .icon {
		padding:0;
	}

	#header-form {
		margin-left:0.5em;
	}
}




/* ======================================================================================================
	FV
====================================================================================================== */
#FV-main {
	background:url(images2/FV_bg.jpg) 50% 0 no-repeat;
}

#FV-sub .sub2 {
	background:url(images2/main_sub_02bg.jpg) 50% 0 no-repeat;
}

#FV-sub .spot {
}

#FV-sub .sub3 {
	background:url(images2/main_sub_03bg.jpg) 50% 0 no-repeat;
}


/* ======================================================================================================
	CTA
====================================================================================================== */
.CTA {
	position:relative;
	padding:2em 0;
	color:#fff;
	background:#f9a;
}
.CTA:after {
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:block;
	width:1200px;
	height:100%;
	margin:auto;
	background:url(images2/CTA-fg.png) 0 100% no-repeat;
	background-size:22.5em;
	z-index:2;
}

.CTA .innerFrame {
}

.CTA .title {
	background:rgba(255,255,255,0.8);
	font-weight:900;
	font-family:'M PLUS Rounded 1c' ,sans-serif;
}
.CTA .title .innerFrame {
	padding-left:20em;
}
.CTA .title h1 {
	font-size:400%;
}


.CTA .info .innerFrame {
	position:relative;
	z-index:3;
	padding-top:1em;
	padding-left:20em;
}
.CTA .notes {
	font-size:200%;
	font-weight:700;
	font-family:'M PLUS Rounded 1c' ,sans-serif;
}

.CTA-buttons {
	line-height:1.4;
	padding:0 2em;
}
.CTA-buttons > * {
	padding:1em 0em 0;
}

.CTA-buttons .tel {
	width:100%;
}
.CTA-buttons .tel > * {
	padding:0.2em 0.5em;
	background:-webkit-gradient( linear ,center top ,center bottom ,from(#3cf) ,to(#39f) );
	background:linear-gradient( 180deg ,#3cf ,#39f );
	border-radius:0.5em;
	box-shadow:3px 3px 5px #333;
}
.CTA-buttons .tel > *:hover {
	box-shadow:0px 0px 5px #fff;
}
.CTA-buttons .tel .head {
	font-size:150%;
	font-weight:700;
	letter-spacing:0.05em;
}
.CTA-buttons .tel .telno {
	padding-top:0.1em;
	padding-left:1.2em;
	line-height:1;
	font-size:500%;
	font-weight:900;
	letter-spacing:0.05em;
	background:url(images2/CTA-tel.png) 0 50% no-repeat;
	font-family:'Bebas Neue' ,sans-serif;
}

.CTA-buttons .half {
	width:49%;
}
.CTA-buttons .half > * {
	padding:0.5em 0.5em;
	background:-webkit-gradient( linear ,center top ,center bottom ,from(#6c3) ,to(#3c0) );
	background:linear-gradient( 180deg ,#3e0 ,#3c0 );
	border-radius:0.5em;
	box-shadow:3px 3px 5px #333;
}
.CTA-buttons .half > *:hover {
	box-shadow:0px 0px 3px #fff;
	opacity:1;
}

.CTA-buttons .half .icon {
	padding-left:5.2em;
	padding-bottom:0.5em;
	background:0 50% no-repeat;
	background-size:contain;
	line-height:1.3;
}
.CTA-buttons .half.form .icon {
	background-image:url(images2/CTA-contact.png);
}
.CTA-buttons .half.line .icon {
	background-image:url(images2/CTA-line.png);
}

.CTA-buttons .half .icon > span {
	display:block;
	font-size:120%;
}
.CTA-buttons .half .icon > span.head {
	font-size:200%;
	font-weight:700;
}

@media screen and (max-width:799px){
	.CTA {
		padding-top:1em;
	}
	.CTA:after {
		width:100%;
		background-position:100% 3em;
		background-size:13em
	}
	.CTA .title .innerFrame ,
	.CTA .info .innerFrame {
		padding:0;
		text-align:center;
	}
	.CTA .title h1 {
		font-size:180%;
	}
	.CTA .notes {
		font-size:140%;
		padding-right:7.5em;
		padding-top:1em;
		padding-bottom:1.5em;
	}

	.CTA-buttons {
		padding:0 0.5em;
	}
	.CTA-buttons .tel {
		padding-top:0;
	}
	.CTA-buttons .tel > * {
		padding:0.5em 0.5em;
	}
	.CTA-buttons .tel .head {
		font-size:120%;
	}
	.CTA-buttons .tel .telno {
		padding-left:1.1em;
		font-size:300%;
		background-size: contain;
	}

	.CTA-buttons .half .icon {
		padding-bottom:0;
	}

	.CTA-buttons .half.form .icon {
		padding-left:4em;
	}
	.CTA-buttons .half.line .icon {
		padding-left:3em;
	}

	.CTA-buttons .half .icon > span.head {
		font-size:130%;
	}
	.CTA-buttons .half .icon > span {
		font-size:90%;
	}

}



/* ======================================================================================================
	section1
====================================================================================================== */
#section1 {
	padding:2em 0;
}
#section-photo {
}

#section1-title {
	padding:3em 0;
	font-weight:900;
	font-family:'M PLUS Rounded 1c' ,sans-serif;
}

#section1-title h1 {
	font-size:500%;
}
#section1-title p {
	font-size:150%;
}
#section1-title p em {
	font-size:130%;
}

#work-list {
}
#work-list > li {
	padding:1em;
}

#work-list .work-inner {
	padding:0.5em 1em;
	box-shadow:1px 1px 5px #666;
	border-radius:1em;
}

#work-list h2 {
	padding:0.1em;
	font-size:180%;
	font-weight:bold;
	line-height:1.4;
	height:6em;
	background:100% 100% no-repeat;
	background-size:contain;
}
#work-list p {
	font-size:95%;
	font-weight:500;
	padding:0.5em 0;
}

#work-list .work_1 h2 {
	background-image:url(images2/work-1_bg.png);
}
#work-list .work_2 h2 {
	background-image:url(images2/work-2_bg.png);
}
#work-list .work_3 h2 {
	background-image:url(images2/work-3_bg.png);
}
#work-list .work_4 h2 {
	background-image:url(images2/work-4_bg.png);
}
#work-list .work_5 h2 {
	background-image:url(images2/work-5_bg.png);
}
#work-list .work_6 h2 {
	background-image:url(images2/work-6_bg.png);
}

@media screen and (max-width:799px){
	#section-photo.flex {
		flex-wrap:wrap;
	}
	#section-photo.flex.col3 > * {
		width:calc(100%  / 2);
	}

	#section1-title {
	}
	#section1-title h1 {
		font-size:220%;
	}
	#section1-title p {
		font-size:120%;
	}

	#work-list.flex.col3 > * {
		width:100%;
	}
	#work-list h2 {
		height:4em;
	}
	#work-list p {
		padding-top:0;
		font-size:110%;
	}
}


/* ======================================================================================================
	section2
====================================================================================================== */
#section2 {
	padding:2em 0;
	background:#fd3;
}
#section2-title {
	background:-webkit-gradient( linear ,center top ,center bottom ,color-stop(83% ,rgba(255,255,255,0.6)) ,color-stop(83% ,transparent) );
	background:linear-gradient( 180deg ,rgba(255,255,255,0.6) 83% ,transparent 83% );
}


#pack-list {
	padding-bottom:2em;
}

#pack-list > li {
	padding:0.5em;
}
#pack-list .pack-inner {
	padding-top:1em;
	box-shadow:1px 1px 5px #666;
	border-radius:1em;
	background:rgba(255,255,255,0.9);
}
#pack-list .h2 {
	padding:0 1em;
}
#pack-list h2 {
	color:#fff;
	background:#f63;
	font-size:200%;
	font-weight:900;
	font-family:'M PLUS Rounded 1c' ,sans-serif;
	border-radius:0.5em;
}
#pack-list .staff {
	padding:0.3em 1em;
	font-size:160%;
	font-weight:700;
	background:#cff;
}
#pack-list .capacity {
	padding:0.3em 1em;
	font-size:160%;
	font-weight:700;
	background:#cfc;
}

@media screen and (max-width:799px){
	#pack-list.flex {
		flex-wrap:wrap;
	}
	#pack-list.flex.col3 > * {
		width:100%;
	}

	.pack-inner {
		display:flex;
		justify-content:space-between;
		align-items:center;
		flex-wrap:wrap;
	}
	.pack-inner > .h2 {
		width:100%;
	}
	.pack-inner > .image {
		width:55%;
	}
	.pack-inner > .info {
		padding-top:0.5em;
		width:45%;
	}

	#pack-list .staff ,
	#pack-list .capacity {
		padding:0.3em 0.5em;
		font-size:130%;
	}
	.pack-inner > .price img {
		width:60%;
	}
}


/* ======================================================================================================
	section3
====================================================================================================== */
#section3 {
	background:url(images2/speed_bg.jpg) 50% 50%;
}




/* ======================================================================================================
	section4
====================================================================================================== */
#section4 {
	padding:2em 0;
}
#section4-title {
	padding:2em 0;
	font-weight:900;
	font-family:'M PLUS Rounded 1c' ,sans-serif;
}
#section4-title h1 {
	font-size:400%;
	background-image:radial-gradient( #fc9 70%, transparent 70.1% );
}
#section4-title p {
	padding-top:1em;
}
#section4-title p em {
	font-size:200%;
}

#detail-list > li {
	position:relative;
	padding:1.5em 1em 1em;
}

#detail-list > li:after {
	content:"";
	position:absolute;
	top:0em;
	left:1.5em;
	display:block;
	width:10em;
	height:10em;
	background:0 0 no-repeat;
	background-size:contain;
}
#detail-list > li.detail_1:after {
	background-image:url(images2/detail-1_label.png)
}
#detail-list > li.detail_2:after {
	background-image:url(images2/detail-2_label.png)
}
#detail-list > li.detail_3:after {
	background-image:url(images2/detail-3_label.png)
}
#detail-list > li.detail_4:after {
	background-image:url(images2/detail-4_label.png)
}
#detail-list > li.detail_5:after {
	background-image:url(images2/detail-5_label.png)
}
#detail-list > li.detail_6:after {
	background-image:url(images2/detail-6_label.png)
}


#detail-list .detail-inner {
	padding-top:17em;
	border:3px solid #6c0;
	border-radius:1em;
	background:50% 0 no-repeat;
	background-size:100%;
	box-shadow:1px 1px 5px #999;
	overflow:hidden;
}

#detail-list .detail_1 .detail-inner {
	background-image:url(images2/detail-1_bg.png)
}
#detail-list .detail_2 .detail-inner {
	background-image:url(images2/detail-2_bg.png)
}
#detail-list .detail_3 .detail-inner {
	background-image:url(images2/detail-3_bg.png)
}
#detail-list .detail_4 .detail-inner {
	background-image:url(images2/detail-4_bg.png)
}
#detail-list .detail_5 .detail-inner {
	background-image:url(images2/detail-5_bg.png)
}
#detail-list .detail_6 .detail-inner {
	background-image:url(images2/detail-6_bg.png)
}


#detail-list .h2 {
	color:#fff;
	text-shadow:1px 1px 5px #000;
	background:rgba(102,204,0,0.8);
	font-weight:900;
	font-family:'M PLUS Rounded 1c' ,sans-serif;
}
#detail-list h2 {
	font-size:280%;
}
#detail-list .info {
	padding:0.5em;
	background:#fff;
}

#detail-list .info .strong {
	font-size:150%;
}
#detail-list .info ul {
	padding:0.5em 1em;
	font-size:130%;
}



@media screen and (max-width:799px){
	#section4-title h1 {
		font-size:160%;
	}
	#section4-title p em {
		font-size:130%;
	}


	#detail-list.flex.col2 > * {
		width:100%;
	}
	#detail-list .detail-inner {
		padding-top:13em;
	}
	#detail-list h2 {
		font-size:200%;
	}
	#detail-list .info .strong {
		font-size:120%;
	}
	#detail-list .info ul {
		font-size:100%;
	}

	#detail-list > li:after {
		left:1.2em;
		width:8em;
		height:8em;
	}

}



/* ======================================================================================================
	section5
====================================================================================================== */
#section5 {
	padding:2em 0;
}
#section5 .h1 + p {
	padding:0.5em 0 1em;
	font-size:280%;
	font-weight:900;
	font-family: 'M PLUS Rounded 1c' ,sans-serif;
}

.item-list > li {
	padding:1em;
}

.item-inner {
	padding:0 1em 1em;
	border:3px solid #f90;
	border-radius:1em;
	background:50% 0 no-repeat;
	background-size:100%;
	box-shadow:1px 1px 5px #999;
	overflow:hidden;
}
.item-inner h2 {
	margin-top:-25px;
	line-height:2;
	font-size:200%;
	background-image:radial-gradient( ellipse 70% 25% at 50% 75% ,#fc0 48% ,transparent 52% );
}

.item-inner ul {
	padding-top:1em;
	padding-left:1em;
}

@media screen and (max-width:799px){
	#section5 .h1 + p {
		padding:0 0 1em;
		font-size:200%;
	}

	.item-list.flex.col3 > * {
		width:100%;
	}
	.item-inner .flex.col2 > * {
		width:calc(100% / 3);
	}

}



@media screen and (min-width:800px){
	.items-9.flex > li:nth-child(9n + 1){ order:1; }
	.items-9.flex > li:nth-child(9n + 2){ order:2; }
	.items-9.flex > li:nth-child(9n + 3){ order:3; }
	.items-9.flex > li:nth-child(9n + 4){ order:4; }
	.items-9.flex > li:nth-child(9n + 5){ order:5; }
	.items-9.flex > li:nth-child(9n + 6){ order:6; }
	.items-9.flex > li:nth-child(9n + 7){ order:7; }
	.items-9.flex > li:nth-child(9n + 8){ order:8; }
	.items-9.flex > li:nth-child(9n + 9){ order:9; }

	.items-6.flex > li:nth-child(6n + 1){ order:1; }
	.items-6.flex > li:nth-child(6n + 2){ order:2; }
	.items-6.flex > li:nth-child(6n + 3){ order:3; }
	.items-6.flex > li:nth-child(6n + 4){ order:4; }
	.items-6.flex > li:nth-child(6n + 5){ order:5; }
	.items-6.flex > li:nth-child(6n + 6){ order:6; }
}




/* ======================================================================================================
	section6
====================================================================================================== */
#section6 {
	padding:2em 0;
}

#section6 .info {
	padding:2em 0;
}

#area.flex.col2 {
	padding:0 1em;
	align-items:flex-start;
}
#area.flex.col2 > .map {
	padding:1.5em;
}
#area.flex.col2 > .info {
	padding:1em;
}

#area .head {
	padding-bottom:0.8em;
	font-size:250%;
	font-weight:bold;
	line-height:1.4;
}
#area .text {
	padding-bottom:0.5em;
	font-size:160%;
}

@media screen and (max-width:799px){
	#area.flex.col2 {
		flex-direction:column;
		text-align:center;
	}
	#area.flex.col2 > * {
		width:100%;
	}
	#area.flex.col2 > .map {
		padding:0 3em 1em;
	}

	#area .head {
		font-size:200%;
	}
	#area .text {
		font-size:120%;
	}
}



/* ======================================================================================================
	footer
====================================================================================================== */
#footer {
	padding-top:1em;
	color:#222;
	background:#fdb;
}


#footer-info {
	padding-top:1em;
	background:rgba(255,255,255,0.3);
}

#footer-info a {
	display:inline-block;
}


#footer-logo {
}
#footer-logo .koai {
	width:280px;
	margin:0 auto;
}
#footer-logo .koai a {
	padding:0.3em 0.5em;
	background:#fff;
}



#footer-info table {
}
#footer-info table caption {
	font-size:120%;
	line-height:2;
}

#footer-info table th {
	text-align:center;
	padding:0.3em 1.5em;
	border:1px solid #fff;
}
#footer-info table td {
	text-align:left;
	padding:0.3em 1em;
	border:1px solid #fff;
}

#footer-info .tel {
	font-size:150%;
	line-height:1.2;
}


#footer-copyright {
	padding:1em;
	background:rgba(255,255,255,0.3);
}

@media screen and (max-width:799px){
	#footer-info .flex.evenly {
		flex-direction:column;
		padding:1em 0;
	}
	#footer-logo {
		padding:0 4em;
	}
	#footer-copyright {
		font-size:85%;
	}
}


/* ======================================================================================================
	footer - works
====================================================================================================== */
.footer_works {
	padding-top:3em;
}

.footer_works-title {
	font-weight:700;
}
.footer_works-title h1 {
	font-size:200%;
}
.footer_works-title p {
	font-size:120%;
}
.footer_works-title p em {
	font-size:130%;
}


#footer_works-list {
	padding-top:1em;
	text-align:left;
}
#footer_works-list > li {
	padding:0.3em;
}

#footer_works-list .work-inner {
	padding:0 1em 0.5em;
	background:rgba(255,255,255,0.6);
	box-shadow:1px 1px 5px #666;
	border-radius:1em;
}

#footer_works-list h2 {
	padding:0.5em 0.1em;
	font-size:120%;
	font-weight:bold;
	line-height:1.4;
	background:100% 100% no-repeat;
	background-size:contain;
}
#footer_works-list p {
	font-size:90%;
	font-weight:500;
	text-shadow:1px 1px 3px #fff;
	height:calc(3em * 1.6);
}

#footer_works-list .work_1 h2 {
	background-image:url(images2/work-1_bg.png);
}
#footer_works-list .work_2 h2 {
	background-image:url(images2/work-2_bg.png);
}
#footer_works-list .work_3 h2 {
	background-image:url(images2/work-3_bg.png);
}
#footer_works-list .work_4 h2 {
	background-image:url(images2/work-4_bg.png);
}
#footer_works-list .work_5 h2 {
	background-image:url(images2/work-5_bg.png);
}
#footer_works-list .work_6 h2 {
	background-image:url(images2/work-7_bg.png);
}

@media screen and (max-width:799px){
	.footer_works {
		padding-top:2em;
	}

	.footer_works-title h1 {
		font-size:150%;
	}
	.footer_works-title p {
		font-size:100%;
	}
	.footer_works-title p em {
		font-size:120%;
	}



	#footer_works-list.flex.col3 > * {
		width:50%;
		padding:0.1em;
	}
	#footer_works-list .work-inner {
		padding:0 0 0.5em;
	}
	#footer_works-list h2 {
		height:4em;
		padding:0.6em 0.6em 0;
	}
	#footer_works-list p {
		padding:0 0.5em;
		font-size:85%;
		line-height:1.4;
		height:calc(4em * 1.4);
	}
}



.area_list {
	padding:1em;
	text-align:left;
}
.area_list dd {
	padding-left:2em;
	font-size:80%;
	word-break:keep-all;
}
.area_list + .footer_works-title {
	padding-bottom:3em;
}

@media screen and (max-width:799px){
	.area_list dd {
		padding-left:2em;
		font-size:70%;
	}
}



/* ======================================================================================================
	footer - curama
====================================================================================================== */
#footer_curama {
	padding:1em 0;
	text-align:left;
	line-height:1.4;
	background:rgba(255,51,0,0.1);
}
#footer_curama .innerFrame {
	padding-left:9em;
	padding-right:8em;
}
#footer_curama .para {
	padding:0.3em 0;
}
#footer_curama .para p {
	font-size:80%;
}

#footer_curama a {
	display:inline-block;
	padding:0.2em;
	line-height:1;
	background:rgba(255,255,255,0.6);
	border:1px solid #eee;
}
#footer_curama a img {
	width:240px;
}

@media screen and (max-width:799px){
	#footer_curama .innerFrame {
		padding:0 1em;
	}
}


/* ======================================================================================================
	form
====================================================================================================== */
#form {
	padding-top:2em;
}
.form-header {
	color:#fff;
	background-color:#f9a;
	text-align:center;
}
.form-header h1 {
	padding:0.5em 0;
	font-size:300%;
	font-weight:700;
}

.form-wrapper {
	padding:2em 0 6em;
	background-color:#ffe;
}
.form-frame {
	width:800px;
	max-width:100%;
	margin:0 auto;
	font-size:140%;
}

.form-wrapper dl{
	width:100%;
}

.form-wrapper dt{
	padding:1.5em 0 0;
}

.form-wrapper dd{
	padding-left:1em;
	padding-top:0.5em;
}

@media screen and (max-width:799px){
	.form-header h1 {
		font-size:240%;
	}
	.form-wrapper dl {
		padding:0 0.5em;
		font-size:120%;
	}
}




/* ====================================================================
	form - optional / required
==================================================================== */
.optional,
.required{
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.optional:before,
.required:before{
	content:attr(data-text);
	display:inline-block;
	margin-right:0.5em;
	padding:0.1em 0.5em 0.2em;
	background-color:#f60;
	border-radius:0.3em;
	color:#ffffff;
	font-size:80%;
}
.optional:before{
	background-color:#06f;
}

@media screen and (max-width:799px){
	.required{
		justify-content:flex-start;
	}

	.optional:before,
	.required:before{
		margin-right:0.3em;
		padding:0.1em 0.3em 0.2em;
	}
}



/* ====================================================================
	form - field
==================================================================== */
input ,textarea{
	width:100%;
	-webkit-appearance:none; 
	appearance:none;
	border-radius:0.5em;
	font-size:90%;
}
input[type='radio'] ,input[type='checkbox']{
	width:1em;
	height:1em;
	-webkit-appearance:auto; 
	appearance:auto;
}

input:not([type="submit"]){
	border:2px solid #999;
	padding:0.3em 0.5em;
}

.textarea-text{
	padding:2.5em 5em !important;
}

textarea{
	resize:none;
	height:8em;
	padding:0.5em;
	border:2px solid #999;
}

span.check {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
span.check > label {
	padding-left:0.3em;
}


@media screen and (max-width:799px){
	input[type="submit"]{
		width:auto;
		padding:0.5em 1em;
	}

	input:focus ,textarea:focus{
		border:solid 2px #000000;
		outline:none;
		background-color:#99e5ff;
	}

	input:focus[type="submit"]{
		opacity:0.8;
		border:none;
		outline:none;
		background-color:#000f4c;
	}
}



/* ====================================================================
	form - button
==================================================================== */
.formButton{
	padding-top:2em;
	padding-left:1em;
	text-align:center;
}

input[type="submit"] ,.formButton a{
	width:auto;
	padding:0.5em 2em 0.6em;
	background-color:#83b300;
	color:#ffffff;
	font-size:120%;
	line-height:1;
	text-indent:0.3em;
	letter-spacing:0.3em;
	border:none;
	outline:none;
	transition:all 0.2s ease;
	-webkit-transition:all 0.2s ease;
	cursor:pointer;
}
input[type="submit"]:hover ,.formButton a:hover {
	background-color:#690;
}

.formButton a{
	font-size:100%;
	text-indent:0.1em;
	letter-spacing:0.1em;
	border-radius:0.5em;
}

@media screen and (max-width:799px){
	.button-wrapper{
		padding:2em 7em 0;
	}
}


/* ====================================================================
	form - error
==================================================================== */
.error {
	margin:0.3em 0 0.5em;
	display:inline-block;
	padding:0.2em 2em;
	color:#f00;
	border:1px solid #f00;
	background:rgba(255,255,255,0.6);
	border-radius:0.2em;
	font-size:90%;
}


/* ====================================================================
	form - confirm
==================================================================== */
.status2 #form-table {
	line-height:1.4;
}



/* ====================================================================
	form - customize
==================================================================== */
.form-5 .field-group.flex {
	flex-wrap:wrap;
}
.form-5 .field-group.flex > .check {
	width:calc(100% / 2);
}

@media screen and (max-width:799px){
	.form-5 .field-group.flex > .check {
		width:100%;
	}
}


#privacyBox {
	height:12em;
	padding:0.5em;
	font-size:65%;
	line-height:1.4;
	color:#333;
	background:rgba(255,255,255,0.9);
	border:2px solid #999;
	border-radius:0.5em 0 0 0.5em;
	overflow:auto;
}
#privacyBox > h2{
	font-weight:bold;
}
#privacyBox > div{
	padding-left:1em;
	padding-bottom:0.5em;
}
#privacyBox dt{
}

.status2 #privacyBox {
	display:none;
}

@media screen and (max-width:799px){
	#privacyBox {
		font-size:50%;
	}
}


/* ====================================================================
	thankyou page
==================================================================== */
#page-thankyou .form-wrapper {
	padding:2em 1em 6em;
	line-height:1.8;
	font-size:120%;
}
#page-thankyou .form-wrapper p {
	padding-top:0.5em;
}
.sendIP {
	padding-top:3em;
	color:#99c;
	font-size:12px;
	line-height:1.4;
}
.sendIP:before {
	content:"[ Form Data ]";
	display:block;
}

@media screen and (max-width:799px){
	.form-frame{
		font-size:130%;
	}
}



/* ======================================================================================================
	other pages
====================================================================================================== */
.footer-link {
	font-size:120%;
	font-weight:bold;
	line-height:2;
}
.footer-link li {
	padding:0 1em;
}
.footer-link a:hover {
	color:#fff;
	text-shadow: 2px 2px 0 #f06, -2px 2px 0 #f06, 2px -2px 0 #f06, -2px -2px 0 #f06, 0px 2px 0 #f06, -2px 0px 0 #f06, 2px 0px 0 #f06, 0px -2px 0 #f06, 3px 3px 5px #000;
}
@media screen and (max-width:799px){
	.footer-link {
		font-size:110%;
		padding-top:1em;
	}
}


/* ====================================================================
	about us
==================================================================== */
.title-image {
	background:url(images2/about_us_.jpg) 50% 0 no-repeat;
}

#aboutus {
	padding-bottom:4em;
}
#aboutus .table-cover {
	margin:auto;
	width:800px;
	max-width:95%;
	padding:0.5em 0;
	box-shadow:1px 1px 5px #666;
	border-radius:1em;
	font-size:130%;
	font-weight:bold;
	font-family:'Kosugi Maru' ,sans-serif;
}
#aboutus table {
	margin:auto;
}
#aboutus table th ,
#aboutus table td {
	padding:0.5em 2em;
}
#aboutus table th {
	color:#083;
}
#aboutus table td {
	color:#333;
}
#aboutus table .tel {
	font-size:110%;
}
@media screen and (max-width:799px){
	#aboutus .table-cover {
		font-size:100%;
	}
	#aboutus table th ,
	#aboutus table td {
		padding:0.5em;
	}
}


/* ====================================================================
	privacy policy
==================================================================== */
#policy {
	width:100%;
	max-width:1000px;
	margin:auto;
	padding:0 1em 4em;
}
#policy > h2 {
	color:#06f;
	font-weight:bold;
}
#policy > div {
	padding-left:1em;
}
#policy > div + h2 {
	padding-top:2em;
}
#policy .pl1{
	padding-left:1em;
}
@media screen and (max-width:799px){
	#policy > div {
		padding-left:0.5em;
		font-size:85%;
	}
}