@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@500;600;700;900&display=swap');


@media screen and (min-width:800px){
	.noPC {
		display:none!important;
	}
	.event-none {
		pointer-events:none;
	}
}
@media screen and (max-width:799px){
	.noSP {
		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 Serif JP' ,serif;
}
input[type="submit"] ,button {
	font-size:100%;
	padding:10px 30px;
	font-family:inherit;
}

html ,body {
	min-height:100%;
	height:100%;
	font-family:'Noto Serif JP' ,serif;
}
a {
	display:inline-block;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}

@media screen and (min-width:800px){
	a:hover {
		text-decoration:none;
	}
}

@media screen and (max-width:799px){
	a.tel {
		color:#00f;
		text-decoration:underline;
	}
	a:focus {
		text-decoration:none;
	}
}


img ,video {
	vertical-align:top;
	max-width:100%;
	max-height:100%;
}

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;
/* position:sticky 対策
	overflow:hidden;
*/
}

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

@media screen and (min-width:800px){
	#bgLayer {
		min-width:1200px;
	}
}
@media screen and (max-width:799px){
	body{
		font-weight:600;
	}
	#bgLayer {
		width:480px;
		margin:0 auto;
	}
	.innerFrame {
		max-width:100%;
		padding:0 0.5em;
	}
}


main > section {
	padding:4em 0;
	background:50% 50% no-repeat;
	background-size:cover;

}
@media screen and (max-width:799px){
	main > section {
		padding:3em 0;
	}
}

.section-title {
	text-align:center;
	padding-bottom:3em;
}
.section-title .main {
	display:inline-block;
	padding:0 3em;
	font-size:250%;
	font-weight:bold;
	border-bottom:2px solid #039;
}
.section-title .sub {
	display:block;
	font-size:150%;
	color:#039;
}
@media screen and (max-width:799px){
	.section-title {
		width:100%;
		padding-bottom:2em;
	}
	.section-title .main {
		width:100%;
		padding:0;
		font-size:180%;
	}
	.section-title .sub {
		font-size:130%;
	}
	.section-image {
		height:140px;
	}
}



.center {
	text-align:center;
}

.nowrap {
	white-space;nowrap
}

.strong {
	font-size:240%;
	font-weight:bold;
}
@media screen and (max-width:799px){
	.strong {
		font-size:130%;
	}
}

.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;
}


.borderImage {
    border:1px solid #fff;
    box-shadow:1px 1px 5px #666;
}


.noData {
	padding:1em;
	text-align:center;
}


/* ==============================================
	instagram
=============================================== */
.instaImages {
	padding:0 1em 2em;
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.instaImages > div {
	width:calc(100% / 3);
	padding:3px;
}
.instaImages > div > a {
	position:relative;
	display:block;
}
.instaImages > div > a > * {
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
}
.instaImages > div.video > a:after {
	content:"";
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:25%;
	aspect-ratio:1/1;
	background:url(images/icons/instagram_reel_w.png) 50% 50% no-repeat;
	background-size:contain;
	filter:drop-shadow(0 0 3px #666);
	z-index:10;
}
.instaImages > div > a > span {
	display:none;
}
.instaImages > div.noData {
	width:100%;
	text-align:center;
	padding:3em 0;
	font-size:90%;
	color:#666;
}

@media screen and (min-width:800px) {
	.instaImages > div {
		width:calc(100% / 4);
	}
	.instaImages > div:nth-child(n + 9) {
		display:none;
	}
	.instaImages > div > a:hover {
		opacity:0.8;
	}

}




/* ====================================================================
	font color
==================================================================== */
.orange {
	color:#f60;
}
.blue {
	color:#06f;
}
.darkblue {
	color:#009;
}
.skyblue {
	color:#39f;
}
.green {
	color:#083;
}


/* ====================================================================
	flex
==================================================================== */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.between {
	justify-content:space-between;
}
.flex.around {
	justify-content:space-around;
}
.flex.evenly {
	justify-content:space-evenly;
}

.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}
.flex.stretch {
	align-items:stretch;
}

.flex.column {
	flex-direction:column;
}
.flex.rev {
	flex-direction:row-reverse;
}

.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%;
}

.height-inherit > * {
	height:100%;
}
.height-inherit-all * {
	height:100%;
}



/* ==============================================
	pager
=============================================== */
.pager {
}
.pager.flex {
}
.pager ul li {
	padding:0.3em;
}
.pager ul li a.flex {
	width:2.5em;
	height:2.5em;
	color:#666;
	background:rgba(255,255,255,0.9);
	border:1px solid #999;
	border-radius:0.3em;
}
.pager ul li.active a.flex span {
	padding-bottom:0.1em;
	font-size:150%;
	font-weight:bold;
	color:#00f;
}

.pager ul li:not(.active) a.flex:hover span {
	color:#f00;
	text-decoration:underline;
}




/* ======================================================================================================
	button (border)
====================================================================================================== */
.borderButton-outer {
	display:inline-block;
	padding:0.3em;
	border:1px solid #9c3;
}
.borderButton-inner {
	display:inline-block;
	padding:0.2em 1em 0.2em 2em;
	font-size:160%;
	color:#fff;
	background:#9c3;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}

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


.borderButton-outer.white {
	border-color:#fff;
}
.borderButton-outer.white .borderButton-inner {
	color:#666;
	background:#fff;
}
.borderButton-outer.white .borderButton-inner.link-mark:after {
	border-color:#ccc;
}
.borderButton-outer.white:hover {
	border-color:#eee;
}
.borderButton-outer.white:hover .borderButton-inner {
	color:#333;
	background:#eee;
}

.borderButton-outer.gray {
	border-color:#9aa;
}
.borderButton-outer.gray .borderButton-inner {
	color:#fff;
	background:#9aa;
}
.borderButton-outer.gray:hover {
	border-color:#344;
}
.borderButton-outer.gray:hover .borderButton-inner {
	background:#344;
}

.borderButton-outer.skyblue {
	border-color:#09f;
}
.borderButton-outer.skyblue .borderButton-inner {
	color:#fff;
	background:#09f;
}
.borderButton-outer.skyblue:hover {
	border-color:#06f;
}
.borderButton-outer.skyblue:hover .borderButton-inner {
	background:#06f;
}

.borderButton-outer.green {
	border-color:#093;
}
.borderButton-outer.green .borderButton-inner {
	color:#fff;
	background:#093;
}
.borderButton-outer.green:hover {
	border-color:#063;
}
.borderButton-outer.green:hover .borderButton-inner {
	background:#063;
}




/* ====================================================================
	link with next-mark
==================================================================== */
.link-mark {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.link-mark:after {
	content:'>';
	line-height:1;
	width:calc(1em + 2px);
	height:calc(1em + 3px);
	border:1px solid #fff;
	text-align:center;
}

.borderButton-inner.link-mark:after {
	margin-left:1.5em;
}



/* ======================================================================================================
	bg
====================================================================================================== */
.bg1 {
	background-image:url(images/common/concept_bg.webp);
	background-color:rgba(255,255,255,0.4);
	background-blend-mode:screen;
}
.bg2 {
	background-image:url(images/common/service_works_bg.webp);
	background-color:rgba(204,204,204,0.4);
	background-blend-mode:soft-light;
}
.bg3 {
	background-position:0 100%;
	background-image:url(images/common/works_bg.webp);
}
.service-link.bg3 {
	background-color:rgba(255,255,255,0.6);
	background-blend-mode:lighten;
}
.bg4 {
	background-image:url(images/common/flow_bg.webp);
}
.bg5 {
}

.bg-s {
	background-color:rgba(240,240,240,0.8);
	background-blend-mode:color;
}
.bg-s.blue {
	background-color:rgba(0,204,255,0.3);
	background-blend-mode:soft-light;
}

.bg-s1 {
	background-image:url(images/common/service_kaitai_bg.webp);
}
.bg-s2 {
	background-image:url(images/common/service_hatsuri_bg.webp);
}
.bg-s3 {
	background-image:url(images/common/service_tairu_bg.webp);
}



.bg-c1 {
	background:#f4f8ff;
}
.bg-c2 {
	background:#eee;
}


@media screen and (max-width:799px){
	.bg1 {
		background-position:0 0;
	}
	.bg-s1 ,
	.bg-s3 ,
	.bg-s5 {
		background-position:0 100%;
	}
	.bg-s2 ,
	.bg-s4 ,
	.bg-s6 {
		background-position:0 0;
	}
	.bg-s {
		background-color:rgba(240,240,240,0.9);
	}
}




/* ======================================================================================================
	page header
====================================================================================================== */
main > section.page-header {
	padding-top:0;
}
.page-title {
	height:10em;
	background:#0cf;
}
.page-title .innerFrame {
	height:100%;
	background:95% 0 no-repeat;
	background-size:contain;
}
.page-title .innerFrame > .text {
	width:100%;
	height:100%;
	padding-right:50%;
	color:#fff;
}
.page-title .innerFrame > .text > h1 {
	font-size:250%;
	font-weight:bold;
}

@media screen and (max-width:799px){
	.page-title {
		height:9em;
	}
	.page-title .innerFrame {
		padding:0;
		background-position:50% 50%;
		background-size:cover;
	}
	.page-title .innerFrame > .text {
		padding-right:0;
		text-shadow:0 0 2px #000 ,0 0 4px #000 ,0 0 6px #000 ,0 0 8px #000 ,0 0 10px #000;
		text-align:center;
	}
	.page-title .innerFrame > .text > h1 {
		font-size:200%;
	}
}

.page-title.s1 .innerFrame {
	background-image:url(images/page-header/title_big_01.webp);
}
.page-title.s2 .innerFrame {
	background-image:url(images/page-header/title_big_02.webp);
}
.page-title.s3 .innerFrame {
	background-image:url(images/page-header/title_big_03.webp);
}
.page-title.s4 .innerFrame {
	background-image:url(images/page-header/title_big_04.webp);
}
.page-title.s5 .innerFrame {
	background-image:url(images/page-header/title_big_05.webp);
}
.page-title.s6 .innerFrame {
	background-image:url(images/page-header/title_big_06.webp);
}

.page-title.services .innerFrame {
	background-image:url(images/page-header/title_big_services.webp);
}
.page-title.works .innerFrame {
	background-image:url(images/page-header/title_big_works.webp);
}
.page-title.company .innerFrame {
	background-image:url(images/page-header/title_big_company.webp);
}
.page-title.recruit .innerFrame {
	background-image:url(images/page-header/title_big_recruit.webp);
}
.page-title.contact .innerFrame {
	background-image:url(images/page-header/title_big_contact.webp);
}


.page-title + div ,
.page-title + div + #works {
	padding-top:4em;
}
.page-photo {
	padding-bottom:4em;
}



@media screen and (max-width:799px){
	.page-title.company .innerFrame {
	
	}
}



/* ======================================================================================================
	type selector
====================================================================================================== */
.type-selector {
	padding:0 3em;
}
.type-selector .flex > li {
	padding:0.5em;
}

@media screen and (max-width:799px){
	.type-selector {
		padding:0;
	}

	.type-selector .flex.wrap.between.col3 > li {
		width:calc(100% / 2);
	}
}



/* ====================================================================
	service concept
==================================================================== */
.service-concept-text {
	padding:2em;
	font-size:120%;
}
.text-notes .service-concept-text {
	width:90%;
	margin:0 auto;
}

.service-text {
	padding-bottom:4em;
	width:80%;
	margin:0 auto;
}

#index-concept-message {
	margin:0 auto;
	padding:0 1em;
	line-height:1.8;
	font-size:140%;
}
#index-concept-message > .text {
	width:65%;
	padding-right:1.5em;
}
#index-concept-message > .image {
	width:35%;
}

.service-concept-stance {
	padding:1em 2em;
}
.service-concept-stance > li {
	padding:1em;
}
.service-concept-stance .frame {
	border:2px solid #999;
	padding:1em;
	background:rgba(255,255,255,0.9);
}
.service-concept-stance .number {
	font-size:150%;
	letter-spacing:0.05em;
	text-indent:0.05em;
}
.service-concept-stance .text {
	font-size:180%;
}

.service-concept-message {
	padding:0 2em;
	font-size:120%;
}
.service-concept-message > .text {
	width:60%;
	padding:1em;
}
.service-concept-message > .image {
	padding:1em;
}

@media screen and (max-width:799px){
	.service-concept-text {
		padding:1em;
		font-size:105%;
	}
	.service-concept-text.center {
		padding:1em 0;
	}
	.text-notes .service-concept-text {
		width:100%;
		padding-top:1em;
		font-size:110%;
	}

	#index-concept-message.flex {
		padding:0 1em;
		align-items:center;
		flex-direction:column;
		font-size:120%;
	}
	#index-concept-message.flex > .text {
		width:100%;
		padding:0 0 1.5em;
	}
	#index-concept-message.flex > .image {
		width:100%;
	}
	#index-concept-message.flex > .image img {
		width:100%;
		aspect-ratio:3/1;
		object-fit:cover;
	}


	.service-concept-stance {
		padding:1em 0;
	}

	.service-concept-stance > li {
		padding:0.2em;
	}
	.service-concept-stance .frame {
		padding:0.3em;
	}
	.service-concept-stance .number {
		font-size:120%;
	}
	.service-concept-stance .text {
		font-size:120%;
	}

	.service-concept-message.flex.between.top {
		flex-direction:column;
		padding:0;
		font-size:100%;
	}
	.service-concept-message.flex.between.top > .text {
		width:100%;
		padding:0 1em;
	}
	.service-concept-message.flex.between.top > .image {
		width:100%;
		padding:1em 5em;
		text-align:center;
	}
}



/* ======================================================================================================
	work cell
====================================================================================================== */
.work-slider-cell-inner {
	width:100%;
	margin:0 auto;
	border:1px solid #fff;
	background:#fff;
}
.work-slider-cell-inner .image img {
	width:100%;
	aspect-ratio:3/2;
	object-fit:cover;
}

.work-slider-cell-inner .detail {
	padding:0.2em 0.5em;
}
.work-slider-cell-inner .title {
	font-size:120%;
	color:#00c;
	font-weight:bold;
}
.work-slider-cell-inner .info {
	color:#393;
	font-weight:900;
}
.work-slider-cell-inner .text {
	font-size:90%;
	word-break:break-all;

	display: block;
	height:calc(16px * 0.9 * 1.6 * 3);
	overflow-y:auto;
	background:#fcfcff;
}
.works-button {
	padding-top:30px;
}

.work-title a.link-mark {
	padding:0.5em 0.3em 0.5em 0.5em;
	line-height:1;
	font-size:180%;
	color:#fff;
	background:#339;
	z-index:2;
}
.work-title.active a.link-mark {
	background:#0c3;
}
.work-title:not(.active) a.link-mark:hover {
	background:#39f;
}


@media screen and (max-width:799px){
	.work-title a.link-mark {
		font-size:130%;
	}
}

@media screen and (max-width:799px){
	.work-slider-cell-inner {
	}
	.work-slider-cell-inner .image img {
	}
	.work-slider-cell-inner .detail {
		font-size:90%;
	}
}


/* ======================================================================================================
	CTA button
====================================================================================================== */
.CTA-button {
	line-height:1;
}
.CTA-button.wide a.flex {
	padding:0 2em;
}

.CTA-button a.flex > .icon {
	width:1.4em;
	height:1.4em;
}
.CTA-button a.flex > .icon img {
	border-radius:0.1em;
}
.CTA-button a.flex > .icon.small {
	width:1em;
	height:1em;
}

.CTA-button a.flex > .text {
	padding-left:0.2em;
}
.CTA-button a.flex > .text span {
	display:block;
}
.CTA-button a.flex > .text .large {
	font-size:200%;
	font-weight:bold;
}
.CTA-button .large {
	font-size:200%;
	font-weight:bold;
}

@media screen and (max-width:799px){
	.CTA-button {
		line-height:1.2;
	}
	.CTA-button a.flex > .text .large {
		font-size:110%;
	}
}



.CTA-button.full {
	width:100%;
	padding:1em;
}
.CTA-button.full a.flex {
	font-size:120%;
	background:#009;
	padding:1em;
}
.CTA-button.full a.flex:hover {
	background:#06c;
}

.CTA-button.full a.flex .time {
	font-size:120%;
	line-height:1.2;
	font-weight:bold;
}
.CTA-button.full a.flex .icon {
	width:3em;
	text-align:center;
}
.CTA-button.full a.flex .text {
	padding-left:0;
}
.CTA-button.full a.flex .text .large {
	font-size:250%;
}

@media screen and (max-width:799px){
	.CTA-button.full {
		padding:0.3em;
	}
	.CTA-button.full a.flex {
		font-size:80%;
		padding:1em 0;
	}
	.CTA-button.full a.flex .icon {
		width:2em;
	}
}


.CTA-button.half {
	width:50%;
	padding:1em;
}
.CTA-button.half a.flex {
	background:#39f;
	padding:1.2em;
}
.CTA-button.half a.flex:hover {
	background:#06f;
}
.CTA-button.half a.flex > .text {
	padding-left:0.5em;
}

.CTA-button.line a.flex {
	background:#096;
}
.CTA-button.line a.flex:hover {
	background:#063;
}

.CTA-button.line a.flex > .qr {
	margin:-0.4em 0em -0.4em 0.8em;
	width:2.2em;
}


@media screen and (min-width:800px){
	.CTA-button.half.line a.flex {
		padding-left:2em;
	}
}
@media screen and (max-width:799px){
	.CTA-button.half {
		padding:0.3em;
	}
	.CTA-button.half a.flex {
		padding:1.2em 0.2em;
		font-size:75%;
	}
	.CTA-button.half a.flex > .text {
		padding-left:0.2em;
		font-size:120%;
	}

}


.contact-CTA {
	padding:2em 0 1em;
}
.contact-CTA .innerFrame {
	width:100%;
}
.contact-CTA .CTA-box {
	width:1200px;
	max-width:100%;
	margin:0 auto;
}
.contact-CTA .CTA-box > .flex {
	max-width:900px;
	margin:0 auto;
}

.contact-CTA .CTA-button.full.line a.flex .text .large {
	font-size:200%;
}


@media screen and (min-width:800px){
	.contact-CTA .CTA-title .main {
		font-size:240%;
	}
}
@media screen and (max-width:799px){
	.contact-CTA .CTA-title .main {
		font-size:160%;
	}
	.contact-CTA .CTA-button.full.line a.flex .text .large {
		font-size:180%;
	}
}


/* ====================================================================
	CTA button - contact
==================================================================== */
#header .CTA-button.contact a.flex ,
#footer .CTA-button.contact a.flex {
	color:#fff;
	background:#f90;
}
#header .CTA-button.contact a.flex:hover ,
#footer .CTA-button.contact a.flex:hover {
	background:#fb0;
}


#header .CTA-button.line a.flex ,
#footer .CTA-button.line a.flex {
	color:#fff;
	background:#096;
}
#header .CTA-button.line a.flex:hover ,
#footer .CTA-button.line a.flex:hover {
	background:#063;
}


/* ====================================================================
	CTA button - contact
==================================================================== */
#header .CTA-button.tel a.flex .icon {
	background:-webkit-gradient( linear ,right top ,left bottom ,from(#0f6) ,to(#0c3) );
	background:linear-gradient( -135deg ,#0f6 ,#0c3 );
}

#footer .CTA-button.tel a.flex > .icon {
	background:#888;
}



/* ====================================================================
	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:#06f;
	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;
	}
	.open #pagetopButton {
		display:none !important;
	}
}



/* ======================================================================================================
	header
====================================================================================================== */
#header {
	height:113px;
	border-bottom:3px solid #06f;
	background:rgba(255,255,255,0.9);
}


#header > .innerFrame.flex.between {
	height:110px;
}

#header-left .logo img {
	max-height:100%;
}

#header-right {
	align-self:flex-end;
	height:auto;
	padding-bottom:0.3em;
	text-align:right;
}

#header-right p {
	font-size:85%;
}

#header-right .CTA-button {
	display:inline-block;
}


@media screen and (max-width:799px){
	#header {
		position:sticky;
		left:0;
		right:0;
		top:0;
		height:63px;
		z-index:200;
	}
	#header > .innerFrame.flex.between {
		width:480px;
		height:60px;
		padding:0;
	}

	#header #SPmenu .icon {
		padding:2px;
		text-align:center;
		line-height:1;
	}
	#header #SPmenu .icon > * {
		display:block;
		width:56px;
		height:56px;
		color:#fff;
		background:-webkit-gradient( linear ,right top ,left bottom ,from(#09f) ,to(#06f) );
		background:linear-gradient( -135deg ,#09f ,#06f );
		border-radius:0.3em;
		overflow:hidden;
		cursor:pointer;
	}

	#header #SPmenu .icon img {
		width:100%;
		height:40px;
		object-fit:contain;
		object-position:50% 50%;
	}
	#header #SPmenu .icon .text {
		display:block;
		font-size:10px;
	}

	body:not(.open) #header #SPmenu .openIcon {
	}
	body:not(.open) #header #SPmenu .closeIcon {
		display:none;
	}

	body.open #header #SPmenu .openIcon {
		display:none;
	}
	body.open #header #SPmenu .closeIcon {
	}

}


/* ======================================================================================================
	header - navi
====================================================================================================== */
@media screen and (min-width:800px){
	#headerNav-pc {
		position:sticky;
		top:0;
		left:0;
		right:0;
		background:rgba(255,255,255,0.95);
		border-bottom:1px solid #06f;
		z-index:100;
	}
	#headerNav-pc .innerFrame {
		padding:1em 0;
	}

	#headerNav-pc .navMenu {
		display:flex;
		justify-content:center;
		border-left:1px solid #ccc;
		text-align:center;
	}
	#headerNav-pc .navCell {
		padding:0.1em 0.2em;
		flex-grow:1;
		border-right:1px solid #ccc;
	}

	#headerNav-pc .navCell a {
		position:relative;
		display:block;
		padding:0.2em 0.3em;
	}
	#headerNav-pc .navCell a > span:nth-child(2) {
		display:none;
	}
	#headerNav-pc .navCell a:after {
		content:"";
		position:absolute;
		bottom:-3px;
		left:0;
		right:0;
		display:block;
		width:100%;
		height:3px;
		background:#06f;
		transform:scaleX(0.8);
		transform-origin:50% 50%;
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	#headerNav-pc .navCell:not(.active) a:after {
		background:#0cf;
		transform:scaleX(0);
	}
	#headerNav-pc .navCell:not(.active) a:hover:after {
		transform:scaleX(0.8);
	}
}

@media screen and (max-width:799px){
	#headerNav-pc {
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		width:100%;
		height:100%;
		background:rgba(255,255,255,0.9);
		z-index:100;
		margin-top:-110vh;
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	.open #headerNav-pc {
		margin-top:-0vh;
	}

	#headerNav-pc .innerFrame {
		width:480px;
		padding:80px 1em 0;
	}

	#headerNav-pc .navMenu {
		padding-bottom:2em;
	}
	#headerNav-pc .navCell {
		padding:0.1em 0;
		font-size:120%;
	}
	#headerNav-pc .navMenu > .navCell {
	}
	#headerNav-pc .navMenu > .navCell.id7 {
		display:none;
	}

	#headerNav-pc .navCell a {
		position:relative;
		display:block;
		font-weight:bold;
		padding:0.5em 1em;
		background:rgba(255,255,255,0.9);
		border:1px solid #ccc;
	}
	#headerNav-pc .navMenu a:hover {
		background:#def;
	}
	#headerNav-pc .navMenu > .navCell > a:before {
		content:"\025b6\020";
		color:#0cf;
	}
	#headerNav-pc .navCell a > span:nth-child(2) {
		display:none;
	}

	#headerNav-pc .CTA .innerFrame {
		padding:0;
	}
	#headerNav-pc .CTA-title {
		padding-bottom:0.5em;
	}
	#headerNav-pc .CTA-title .main {
		font-size:130%;
	}

}





/* ====================================================================
	header nav lv2
==================================================================== */
@media screen and (min-width:800px){
	#headerNav-pc .navCell {
		position:relative;
	}
	#headerNav-pc .navCell .lv2 {
		display:none;
		position:absolute;
		top:100%;
		left:-1px;
		right:-1px;
		padding-top:0.3em;
		border-style:none solid solid ;
		border-width:0 1px 1px;
		border-color:#ccc;
	}
	#headerNav-pc .navCell .lv2 ul{
		padding:0.3em;
		background:rgba(255,255,255,0.95);
	}
	#headerNav-pc .navCell .lv2 .navCell {
		border-right:0 none;
	}
	#headerNav-pc .navCell .lv2 .navCell a {
	}
	#headerNav-pc .navCell:hover .lv2 {
		display:block;
	}
}
@media screen and (max-width:799px){
	#headerNav-pc .navCell .lv2 {
		display:none;
		padding-left:2em;
	}
	#headerNav-pc .navCell .lv2 ul {
		display:flex;
		flex-wrap:wrap;
	}
	#headerNav-pc .navCell .lv2 ul > .navCell {
		padding:0.2em 0 0 0.2em;
		width:50%;
	}
	#headerNav-pc .lv2 ul > .navCell > a:before {
		content:"\025b7\020";
		color:#06f;
	}

}



/* ======================================================================================================
	CTA section
====================================================================================================== */
.CTA {
}
.CTA .innerFrame {
	padding:0 3em;
	color:#fff;
	background:#9c0;
}
.CTA-box {
	padding:2em;
}

.CTA-title {
	padding-bottom:1.5em;
	text-align:center;
	font-weight:bold;
}
.CTA-title .main {
	display:block;
	padding-bottom:0.5em;
	font-size:250%;
	border-bottom:3px solid #fff;
}

.CTA .CTA-button a.flex > .text > :nth-child(1) {
	letter-spacing:0.05em;
}


@media screen and (max-width:799px){
	.CTA .innerFrame {
		padding:0 0.5em;
	}
	.CTA-box {
		padding:1em 0.5em;
	}
	.CTA-title .main {
		font-size:200%;
	}
}



/* ======================================================================================================
	index
====================================================================================================== */
#catch {
}
#catch .innerFrame {
	position:relative;
	padding:0;
}
@media screen and (min-width:800px){
	#catch h1 {
		width:100%;
		display:flex;
		justify-content:center;
		overflow:hidden;
	}
	#catch h1 img {
		max-width:none;
		object-fit:cover;
	}
}

#catch .innerFrame > p {
	position:absolute;
	top:33%;
	left:2%;
	width:15%;
}


/* ====================================================================
	index - services
==================================================================== */
#index-services-list {
	padding:1em 0 3em;
}
#index-services-list.flex > li {
	padding:1em;
	max-width:100%;
}
#index-services-list.flex .frame {
	position:relative;
	width:500px;
	max-width:100%;
	margin:0 auto;
}
#index-services-list.flex .frame .title {
	position:absolute;
	top:0.5em;
	left:-0.5em;
}

#index-services-list.flex .frame .title a.link-mark {
	width:10em;
}


#index-services-list.flex .text {
	padding:0.5em;
}


@media screen and (max-width:799px){
	#index-services-list {
		padding:0;
	}

	#index-services-list.flex .frame .title {
		top:1em;
	}
}




/* ====================================================================
	index - works
==================================================================== */
.swiper.work-slider {
	padding-bottom:3em;
	min-width:1200px;
}
.swiper.work-slider .swiper-slide {
	width:382px;
	padding:0 20px;
}
.swiper.work-slider .swiper-pagination-bullet {
	width:0.8em;
	height:0.8em;
	background:#fff;
	opacity:1;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
.swiper.work-slider .swiper-pagination-bullet:hover {
	background:#39f;
}
.swiper.work-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background:#06f;
}

.swiper.work-slider .work-slider-cell-inner .text {
	height:1.6em;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

#index-works .work-slider-cell-inner .text {
	overflow:hidden;
}


@media screen and (max-width:799px){
	.swiper.work-slider {
		min-width:480px;
	}
	.swiper.work-slider .swiper-slide {
		width:224px;
		padding:0 15px;
	}

}


/* ====================================================================
	index - flow
==================================================================== */
#index-flow-list.flex {
	padding-bottom:3em;
}
#index-flow-list.flex > li {
	position:relative;
	padding:1em;
}
#index-flow-list.flex > li:not(:first-child):after {
	content:"\025b6";
	position:absolute;
	top:calc(50% - 0.5em);
	left:-0.5em;
	color:#06f;
}

#index-flow-list.flex .frame {
	padding:0.5em 0;
	border-radius:0.5em;
	color:#fff;
	background:#339;
}


@media screen and (min-width:800px){
	#index-flow-list.flex > li {
		flex-grow:1;
	}
}

@media screen and (max-width:799px){
	#index-flow-list.flex {
		flex-wrap:wrap;
	}
	#index-flow-list.flex > li {
		width:32%;
		padding:0.8em;
	}
	#index-flow-list.flex .frame {
		font-size:90%;
	}
	#index-flow-list.flex .image {
		padding:0 2em;
	}

	#index-flow-list.flex > li:nth-child(3) {
		margin-right:auto;
	}
	#index-flow-list.flex > li:nth-child(4) {
		margin-left:auto;
	}
}




/* ====================================================================
	index - about
==================================================================== */
#index-about-list > li.flex:nth-child(2n) {
	flex-direction:row-reverse;
}

#index-about-list .text.flex {
	padding:1em 0;
}
#index-about-list .text.flex .section-title {
	padding-bottom:1em;
}
#index-about-list .text.flex p {
	padding:0 2em;
}
#index-about-list .text.flex a {
	margin-top:auto;
}

@media screen and (max-width:799px){
	#index-about-list > li.flex.stretch.col2 {
		flex-direction:column;
	}
	#index-about-list > li.flex.stretch.col2 > div {
		width:100%;
	}

	#index-about-list .text.flex p {
		padding:0 1em 2em;
	}
	#index-about-list .image {
		padding:1em 2em 2em;
	}
}


/* ====================================================================
	index - news
==================================================================== */
.news-list {
	padding:1em 1em 3em;
}

.news-list-cell {
	padding-bottom:1px;
}
.news-list-cell .title.flex {
	width:100%;
	padding:1em 1em;
	background:url(images/common/icon-more.png) calc(100% - 1em) 50% no-repeat rgba(255,255,255,0.9);
	font-size:130%;
	cursor:pointer;
}
.news-list-cell .title.flex.open {
	background-image:none;
}
.news-list-cell .title:hover {
	background-color:#def;
}
.news-list-cell .title.flex > .date {
	width:7em;
	font-weight:bold;
	color:#093;
}
.news-list-cell .title.flex > .category {
	width:8em;
	font-size:90%;
	color:#fff;
	background:#093;
	border-radius:0.3em;
	text-align:center;
}
.news-list-cell .title.flex > .head {
	width:calc(100% - 7em - 8em);
	flex-grow:1;
	padding-left:1.5em;
	padding-right:2em;
}

.news-list-cell > .body-outer {
	display:none;
	width:100% !important;
}
.news-list-cell .body.flex {
	width:100%;
	padding:1em 1em;
	background:rgba(255,255,255,0.9);
}
.news-list-cell .body.flex > .image {
	width:40%;
	text-align:right;
	padding-right:3em;
}
.news-list-cell .body.flex > .text {
	width:60%;
}


@media screen and (max-width:799px){
	.news-list-cell .title.flex {
		flex-wrap:wrap;
		font-size:90%;
		justify-content:flex-start;
	}
	.news-list-cell .title.flex > .head {
		width:100%;
		padding-top:0.3em;
		padding-left:1em;
		font-size:120%;
	}

	.news-list-cell .body.flex.bertween.top {
		padding:1em 0.5em;
		flex-direction:column;
	}
	.news-list-cell .body.flex > .image {
		width:100%;
		padding:0 5em 1em;
		text-align:center;
	}
	.news-list-cell .body.flex > .text {
		width:100%;
		padding:0 1em;
	}
}



/* ====================================================================
	index - map
==================================================================== */
#index-map iframe {
	display:block;
	width:100% !important;
	height:30em !important;
}
@media screen and (max-width:799px){
	#index-map iframe {
		height:20em !important;
	}
}



/* ======================================================================================================
	services
====================================================================================================== */
.service-about-main.flex {
	width:90%;
	margin:0 auto;
}
.service-about-main.flex.small {
	width:80%;
}

.service-about-main.flex > .image {
	width:380px;
	padding-top:0.5em;
}
.service-about-main.flex.rev > .image {
	text-align:right;
}

.service-about-main.flex > .text {
	width:calc(100% - 380px);
	padding:0 2em;
}

@media screen and (max-width:799px){
	.service-about-main.flex {
		width:100%;
		flex-direction:column;
	}
	.service-about-main.flex > .image {
		width:100%;
		padding:0 4em 1em;
		text-align:center;
	}
	.service-about-main.flex > .text {
		width:100%;
		padding:0 1em;
	}
}


.service-list {
	width:85%;
	margin:0 auto;
}
.service-cell {
	padding-bottom:4em;
}

.service-cell h2.flex {
}
.service-cell h2.flex > span {
	margin-right:0.8em;
	padding:0.3em 2em;
	font-size:180%;
	color:#fff;
	background:#039;
}

.service-cell .main.flex {
	padding:2em 3em 0;
}
.service-cell .main.flex > .image {
	width:300px;
}
.service-cell .main.flex > .text {
	width:calc(100% - 300px);
}


.service-cell h2.flex:not(.rev) > span {
	margin-right:0.8em;
}
.service-cell h2.flex.rev > span {
	margin-left:0.8em;
}

.service-cell .main.flex.rev > .text {
	padding-right:3em;
}
.service-cell .main.flex:not(.rev) > .text {
	padding-left:3em;
}


@media screen and (min-width:800px){
	.service-cell h2.flex:after {
		content:"";
		display:block;
		flex-grow:1;
		height:0.5em;
		background:#039;
	}
}
@media screen and (max-width:799px){
	.service-about-main.flex.small {
		width:95%;
	}
	.service-list {
		width:95%;
	}
	.service-cell {
		padding-bottom:2em;
	}
	.service-cell h2.flex > span {
		width:100%;
		margin:0 auto !important;
		padding:0.3em 1em;
		font-size:130%;
	}

	.service-cell .main.flex ,
	.service-cell .main.flex.rev {
		display:block;
		padding:1em;
	}
	.service-cell .main.flex > .image {
		display:inline-block;
		float:left;
		width:45%;
		padding:0.5em 1em 0.5em 0;
		text-align:center;
	}
	.service-cell .main.flex.rev > .image {
		float:right;
		padding:0.5em 0 0.5em 0.5em;
	}
	.service-cell .main.flex > .text {
		padding:0 !important;
		display:inline;
		font-size:95%;
	}

}


main > section.service-link {
	padding:8em 0;
}
.service-link .innerFrame {
	width:1000px;
	max-width:100%;
	margin:0 auto;
	padding:0 2em;
}

@media screen and (max-width:799px){
	main > section.service-link {
		padding:4em 0;
	}

	.service-link .type-selector .flex.col2 > * {
		width:100%;
	}
}


/* ====================================================================
	hatsuri
==================================================================== */
.hatsuri-detail-list.flex {
	padding-top:3em;
	width:80%;
	margin:0 auto;
}
.hatsuri-detail {
	width:48%;
	padding:0 1em 1em;
	color:#fff;
	background:#39f;
}
.hatsuri-detail h2 {
	font-size:180%;
	line-height:2;
}
.hatsuri-detail .text {
	padding-top:0.5em;
}

@media screen and (max-width:799px){
	.hatsuri-detail-list.flex  {
		width:90%;
		flex-wrap:wrap;
	}
	.hatsuri-detail {
		width:98%;
		border-bottom:2px solid #f4f8ff;
	}
}



/* ====================================================================
	flow list
==================================================================== */
#flow-list {
	width:80%;
	margin:0 auto;
}
#flow-list li {
	position:relative;
}
#flow-list li:not(:last-child):after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	display:block;
	width:0;
	height:0;
	margin:auto;
	border-style:solid;
	border-width:2em 8em 0;
	border-color:#6cf transparent transparent transparent;
}

#flow-list .frame {
	padding:1em 0 3em;
	min-height:350px;
}

#flow-list h2 {
	padding-left:100px;
	font-weight:bold;
}
#flow-list h2 > span {
	display:block;
}
#flow-list h2 .number {
	padding-left:50px;
	font-size:130%;
	color:#039;
}
#flow-list h2 .main {
	padding-left:60px;
	font-size:160%;
	color:#fff;
	background:#039;
}

#flow-list .image {
	position:absolute;
	top:1em;
	left:0;
	width:140px;
	height:140px;
	padding:10px;
	background:#039;
	border:3px solid #fff;
	border-radius:50%;
}

#flow-list .text {
	line-height:1.8;
	padding-top:1em;
	padding-left:150px;
	padding-right:340px;
}


@media screen and (min-width:800px){
	#flow-list .photo {
		position:absolute;
		top:4em;
		right:1em;
		width:300px;
	}
}
@media screen and (max-width:799px){
	#flow-list {
		width:95%;
	}
	#flow-list h2 {
		padding-left:50px;
		padding-top:0.5em;
	}
	#flow-list .image {
		width:100px;
		height:100px;
	}

	#flow-list .photo {
		text-align:center;
		padding:0 3em;
	}
	#flow-list .text {
		padding:1.5em 0.5em 1em;
	}

}






/* ======================================================================================================
	works
====================================================================================================== */
#work-details .swiper-slide {
	padding:0 1em 2em;
}

@media screen and (max-width:799px){
	#work-details .flex.col3 > .swiper-slide {
		width:calc(100% / 2);
		padding: 0 0.5em 2em;
	}
}


/* ======================================================================================================
	costs
====================================================================================================== */
.cost-detail {
	width:800px;
	max-width:100%;
	margin:0 auto;
	padding:1em 0 4em;
}
.cost-table {
	width:100%;
	font-size:120%;
	background:#fff;
}
.cost-table caption {
	padding:0.3em 1em;
	font-size:120%;
	color:#fff;
	background:#039;
	border-bottom:1px solid #fff;
}
.cost-table tr.title {
	color:#fff;
	background:#69f;
}

.cost-table th ,
.cost-table td {
	padding:0.5em 1em;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	text-align:center;
	vertical-align:middle;
}
.cost-table th {
	border-left:1px solid #ccc;
}

.cost-table tbody th {
	width:40%;
	text-align:left;
}
.cost-table td {
	width:20%;
	white-space:nowrap;
}

.cost-table .kei {
	text-align:right;
}
.cost-table tfoot span {
	font-size:120%;
	font-weight:bold;
}


.cost-table.col2 th {
	width:60%;
}
.cost-table.col2 td {
	width:40%;
}
.cost-table.col2 .comment {
	display:none;
}



@media screen and (max-width:799px){
	.cost-table {
		width:100%;
		font-size:100%;
	}
	.cost-table caption {
		font-size:130%;
	}
	.cost-table th ,
	.cost-table td {
		padding:0.5em;
	}
	.cost-table .kei {
		padding-right:1em;
	}
}


/* ======================================================================================================
	company
====================================================================================================== */
#company-message .signature {
	padding-top:2em;
	padding-right:10em;
	text-align:right;
}

#company-details {
	width:80%;
	margin:0 auto;
	font-size:120%;
	border-top:1px solid #006;
}
#company-details th {
	color:#fff;
	background:#039;
	text-align:right;
}
#company-details th ,
#company-details td {
	padding:1em 2em;
	border-bottom:1px solid #006;
}

@media screen and (max-width:799px){
	#company-message .signature {
		padding-top:1em;
		padding-right:2em;
	}

	#company-details {
		width:95%;
		font-size:100%;
	}
	#company-details th ,
	#company-details td {
		width:auto;
		padding:1em 0.5em;
	}
	#company-details th {
	}

}



/* ======================================================================================================
	recruit
====================================================================================================== */
.recruit-title {
	padding:0.3em 1em;
	font-size:200%;
	font-weight:bold;
	color:#fff;
	background:#39f;
	text-align:center;
}

.recruit-details-outer {
	padding-top:4em;
}
.recruit-details {
	width:80%;
	margin:0 auto;
	font-size:120%;
}
.recruit-details caption {
	padding:0.75em 1em;
	font-size:120%;
	font-weight:bold;
	color:#fff;
	background:#39f;
	border-bottom:1px solid #006;
	text-align:center;
}
.recruit-details th ,
.recruit-details td {
	padding:1em 2em;
	border-bottom:1px solid #006;
}
.recruit-details th {
	width:15em;
	color:#fff;
	background:#39f;
	text-align:right;
}
.recruit-details td {
	width:calc(100% - 15em);
	background:#f4faff;
}

@media screen and (max-width:799px){
	.recruit-title {
		font-size:150%;
	}

	.recruit-details {
		width:95%;
		font-size:100%;
	}
	.recruit-details caption {
		font-size:120%;
	}

	.recruit-details th ,
	.recruit-details td {
		width:auto;
		padding:1em 0.5em;
	}
	.recruit-details th {
		width:7em;
		text-align:center;
	}
}




/* ======================================================================================================
	area
====================================================================================================== */
.area-list {
	margin:0 auto;
	padding:2em 8em;
	max-width:100%;
	background:url(images/index/map.webp) 20% 50% no-repeat;
	background-color:rgba(255,255,255,0.9);
	background-size:cover;
	background-blend-mode:soft-light;
}
.area-list > dd {
	word-break:keep-all;
	padding-bottom:1em;
}



@media screen and (max-width:799px){
	.area-list {
		font-size:90%;
		padding:1em;
	}
	.area-list > dd {
		font-size:90%;
	}
}


/* ======================================================================================================
	contact
====================================================================================================== */


/* ======================================================================================================
	link
====================================================================================================== */
table.bannerTable {
	margin:2em auto 0;
	line-height:1.4;
}
table.bannerTable td {
	padding:10px;
}
table.bannerTable td img {
	box-shadow:0 0 3px #999;
}

@media screen and (max-width:799px){
	table.bannerTable ,
	table.bannerTable tbody ,
	table.bannerTable tr ,
	table.bannerTable th ,
	table.bannerTable td {
		display:block;
		text-align:center;
	}
}


.link-list {
	margin:0 auto;
}
.link-cell a.flex {
	padding:1em;
	display:flex;
}
.link-cell a.flex > .image {
	width:40%;
	padding-right:2em;
	text-align:right;
}
.link-cell a.flex > .image img {
	box-shadow:0 0 3px #ccc;
}
.link-cell a.flex > .text {
	width:calc(100% - 40%);
}

.link-cell a.flex .title {
	font-size:110%;
	font-weight:bold;
}
.link-cell a.flex> .text {
}

 a.flex:hover {
	background:rgba(255,204,204,0.4);
}


@media screen and (max-width:799px){
	.link-cell a.flex {
		flex-direction:column-reverse;
		font-size:90%;
	}
	.link-cell a.flex > .image {
		width:100%;
		padding:0.5em 1em;
	}
	.link-cell a.flex > .text {
		width:100%;
	}
	.link-cell a.flex .title {
		padding-left:1em;
	}
	.link-cell a.flex .body {
		padding-left:2em;
	}
}






/* ======================================================================================================
	footer
====================================================================================================== */
#footer {
	border-top:6px solid #09f;
}
#footer-main {
	padding:2em 0;
	color:#333;
	background:#eee;
}

#footer-info.flex {
	padding:0 1em 2em;
}

#footer-left {
	width:30%;
}
#footer-left .addr {
	padding-left:3.5em;
	padding-top:0.5em;
}

#footer-right {
	align-self:flex-end;
	height:auto;
	text-align:center;
}

#footer .CTA-button.wide {
	padding-top:0.8em;
	font-size:130%;
}
#footer .CTA-button.wide a.flex {
	padding:0.2em 1em;
}


@media screen and (max-width:799px){
	#footer-info.flex.between {
		flex-direction:column;
		text-align:center;
	}
	#footer-info.flex.between > #footer-left {
		width:100%;
	}

	#footer-left .logo {
		width:60%;
		margin:0 auto;
	}
	#footer-left .addr {
		padding:0.5em 0 1em;
	}

	#footer-right {
		align-self:center;
	}
}


/* ====================================================================
	footer - navi
==================================================================== */
#footerNav {
}
#footerNav .innerFrame {
	padding:2em 1em 0;
	border-top:1px solid #999;
}

#footerNav .navMenu {
	display:flex;
	justify-content:center;
	border-left:1px solid #ccc;
	text-align:center;
}
#footerNav .navCell {
	padding:0.1em 0.2em;
	flex-grow:1;
	border-right:1px solid #ccc;
}

#footerNav .navCell a {
	display:block;
	padding:0.2em 0.3em;
}
#footerNav .navCell a:hover {
	background:rgba(255,255,255,0.6);
}

#footerNav .navCell a > span:nth-child(2) {
	display:none;
}

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

	#footerNav .navMenu {
		flex-wrap:wrap;
		border-left:0 none;
	}
	#footerNav .navCell {
		padding:0.1em 0.5em;
		border-right:0 none;
	}
	#footerNav .navCell a {
		padding:0.5em 0.3em;
	}
}


/* ====================================================================
	footer - copyright
==================================================================== */
#footer-copyright {
	color:#666;
	padding:0.5em 0;
}


/* ======================================================================================================
	form
====================================================================================================== */
#form {
	padding-top:2em;
}

.form-notes {
	width:800px;
	max-width:100%;
	margin:0 auto;
	font-size:120%;
	line-height:1.8;
}
.form-notes.wide {
	width:1000px;
}
.form-notes.top-padding {
	padding-top:2em;
}

.form-wrapper {
	padding:2em 0 6em;
}
#form-table {
	width:800px;
	max-width:100%;
	margin:0 auto;
	font-size:120%;
}


.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-notes {
		padding:0 1em;
		font-size:100%;
		line-height:1.6;
	}
	.form-header h1 {
		font-size:240%;
	}
	.form-wrapper dl {
		padding:0 0.5em;
		font-size:120%;
	}

	.form-wrapper {
		padding:0 0 3em;
	}
}




/* ====================================================================
	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;
	background-color:#06f;
	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:#303f7c;
}

.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 ,
.form-17 .field-group.flex {
	flex-wrap:wrap;
	justify-content:flex-start;
}
.form-5 .field-group.flex > .check ,
.form-17 .field-group.flex > .check {
	width:calc(100% / 2);
}

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



/* ====================================================================
	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%;
	}
}



/* ====================================================================
	instagram
==================================================================== */
@media screen and (min-width:800px){
	#index-insta .instaImages>span {
		width:calc(100% / 4);
	}
	#index-insta .instaImages>span:nth-child(n + 9) {
		display:none;
	}
}
@media screen and (max-width:799px){
	#index-insta .instaImages>span:nth-child(n + 10) {
		display:none;
	}
}



/* ====================================================================
	movie
==================================================================== */
.movie-list.flex > li {
	padding:0 1em 2em
}
.movie-list.flex > li > video {
	border:3px solid #fff;
	box-shadow:0 0 5px 0 #666;
}



.alert {
	font-size:80%;
	font-weight:bold;
}
.fax {
	padding-top: 0.3em;
	line-height: 1.4;
}
@media screen and (max-width:799px){
	.fax {
		padding-top: 0.1em;
	}
}

header .alert {
	line-height:1.3;
}
#headerNav-pc .CTA .alert {
	font-size:110%;
}

.CTA .alert {
	font-size:130%;
	text-align:center;
}

.form-notes .alert {
	padding-top:0.5em;
	font-size:100%;
}




/* ====================================================================
	sp tel confirm panel
==================================================================== */

#tel-confirm {
	display:none;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:2000;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.9);
}
#tel-confirm .CTA.flex {
	width:100%;
	height:100%;
	padding:5em 0.5em;
}
#tel-confirm .CTA.flex > * {
	width:100%;
}
#tel-confirm .CTA.flex .logo {
	padding-bottom:1em;
}
#tel-confirm .CTA.flex .alert {
	font-size:120%;
}

#tel-confirm .closeIcon {
	position:absolute;
	top:2px;
	right:2px;
	display:block;
	width:56px;
	height:56px;
	color:#fff;
	background:-webkit-gradient( linear ,right top ,left bottom ,from(#09f) ,to(#06f) );
	background:linear-gradient( -135deg ,#09f ,#06f );
	border-radius:0.3em;
	text-align:center;
	overflow:hidden;
	cursor:pointer;
}
#tel-confirm .closeIcon img {
	width:100%;
	height:40px;
	object-fit:contain;
	object-position:50% 50%;
}
#tel-confirm .closeIcon .text {
	display:block;
	font-size:10px;
	line-height: 1.2;
}