@charset "utf-8";



/* ==========================================================================================================================================
	初期設定
========================================================================================================================================== */
/* ============================================================================================
	外部フォント
============================================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@600&family=Noto+Serif+JP:wght@500;700;900&Noto+Sans+JP:wght@500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
/*
font-family:'Cormorant SC' ,serif;
font-family:'Noto Serif JP' ,serif;
font-family:'Noto Sans JP' ,sans-serif;
*/

@font-face {
	font-family:'CGothic';
	src:url('images/fonts/CGothic.ttf') format('truetype');
}
@font-face {
	font-family:'CSerif';
	src:url('images/fonts/CSerif.ttf') format('truetype');
}


/* ============================================================================================
	ＣＳＳ初期化
============================================================================================= */
*,*:before,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	margin:0;
	padding:0;
	border:0 none;
	vertical-align:inherit;
	color:inherit;
	line-height:inherit;
	font-size:inherit;
	font-style:inherit;
	font-weight:inherit;
	text-decoration:inherit;
/*
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
*/
}

ol,ul,li {
	list-style:none;
}
img {
	max-width:100%;
}
a {
	display:inline-block;
}
.anchorLink {
	cursor:pointer;
}


.noDisp {
	display:none;
}
@media screen and (min-width:800px) { 
	.sp {
		display:none !important;
	}
}
@media screen and (max-width:799px) { 
	.pc {
		display:none !important;
	}
}



/* ============================================================================================
	アニメーション設定
============================================================================================= */
/* ==============================================
	スクロールインアニメーション設定
=============================================== */
.aniFrame {
	position:relative;
	overflow:hidden;
}
.animated.off {
	opacity:0;
}


/* ==============================================
	フレームアニメーション設定（blink、marquee）
=============================================== */
@-webkit-keyframes blink {
	0%   {opacity:1;}
	100% {opacity:0;}
}
@keyframes blink {
	0%   {opacity:1;}
	100% {opacity:0;}
}
@keyframes marquee {
	from   { transform:translate(0%);}
	99%,to { transform:translate(-100%);}
}
@-webkit-keyframes marquee {
	from   { -webkit-transform:translate(0%);}
	99%,to { -webkit-transform:translate(-100%);}
}




/* ==========================================================================================================================================
	基本（共通）レイアウト
========================================================================================================================================== */
.code {
	width:100%;
	font-size:80%;
	line-height:1.4;
	height:5em;
}
em {
	color:#06f;
	padding:0 0.2em;
}
.textMemo {
	padding:1em 2em;
}

#clipMessage {
	position:fixed;
	top:-10em;
	right:1em;
	z-index:9900;
	padding:0.5em 1em;
	font-size:90%;
	line-height:1.6;
	color:#fff;
	background:#336;
	border-radius:0.5em;
	-webkit-transition:all 0.8s ease;
	transition:all 0.8s ease;
}
#clipMessage.on {
	top:1em;
}


img.lazy {
	background:url(images/icons/loading.gif) 50% 50% no-repeat;
}


/* ============================================================================================
	ポップアップカタログ（spotlight）
============================================================================================= */
body #spotlight .header {
	height:60px;
}
body #spotlight .header div {
	width:80px;
	height:60px;
	padding-top:20px;
	opacity:0.7;
}
body #spotlight .icon {
	background-size:40px;
}


.spotlight-cell {
	position:relative;
}
.spotlight-cell .base {
	position:relative;
	z-index:1;
}
.spotlight-cell .number {
	position:absolute;
	top:calc(1em + 360px - 1.4em);
	right:0.2em;
	z-index:2;
	display:block;
	width:1em;
	line-height:1.4em;
	color:#fff;
	background:rgba(0,0,0,0.4);
	text-align:center;
	display:none;
}

.spotlight-cell .spotlight-group {
	position:absolute;
	top:1em;
	left:0.2em;
	right:0.2em;
	z-index:3;
	display:block;
	height:360px;
	background:rgba(0,0,0,0);
	cursor:pointer;
	-webkit-transition:all 0.2s ease;
	transition:all 0.2s ease;
}
.spotlight-group .spotlight {
	cursor:pointer;
}
.spotlight-group .spotlight:hover:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.1);
}

.spotlight-cell .spotlight {
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:100%;
	height:100%;
	z-index:5;
}
.spotlight-cell .spotlight:nth-child(1) {
	z-index:6;
}

#spotlight {
	font-family:'Kosugi Maru' ,sans-serif !important;
}



/* ============================================================================================
	大枠
============================================================================================= */
body{
	font-size:18px;
	line-height:2;
	color:#333;
	background:#fff;
	font-family:'Kosugi Maru' ,sans-serif;
}
#outer {
	width:100%;
	min-width:1200px;
	max-width:1920px;
	box-shadow:10px 0 30px #999 ,-10px 0 30px #999;
	margin:0 auto;
	overflow:hidden;
}
.inner {
	width:100%;
	min-width:1200px;
	max-width:1400px;
	margin:0 auto;
	padding:0 10px;
}
.inner1400 {
	width:100%;
	max-width:1920px;
	padding-right:5%;
	margin:0;
	display:flex;
	justify-content:flex-end;
}

.image90 {
	width:90%;
	margin:0 auto;
	text-align:center;
}



/* ============================================================================================
	コンテンツ
============================================================================================= */
main {
	padding-top:60px;
}
main .inner {
	padding:0 30px;
}
section ,aside {
	padding:80px 0 120px;
}
section.b0 ,aside.b0 {
	padding-bottom:0 !important;
}
section.t0 ,aside.t0 {
	padding-top:0 !important;
}

#lightbox {
	position:fixed;
	top:50% !important;
	left:50% !important;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

.options {
}
.options .image {
	padding-top:2em;
	text-align:center;
}


.videoFrame {
	text-align:center;
}

/* ==============================================
	コンテンツヘッダー
=============================================== */
.h2-serif {
	width:100%;
	max-width:1400px;
	margin:0 auto;

	font-family:'Cormorant SC' ,'Noto Serif JP' ,serif;
	line-height:1;
	padding-bottom:3em;
}
.h2-serif .en {
	font-size:320%;
}
.h2-serif .ja {
	padding-left:0.5em;
	font-size:120%;
	font-family:'Kosugi Maru' ,sans-serif;
}
.h2-serif .sub {
	display:inline-block;
	font-size:200%;
	font-family:'Kosugi Maru' ,sans-serif;
	padding-bottom:0.3em;
}
.h2-serif .sub:before {
	content:"◆";
	font-size:90%;
	color:#06f;
}



/* ============================================================================================
	衣装タイプリンク（イメージ）
============================================================================================= */
.category-image-link {
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
	line-height:1;
}
.category-image-link > li {
	width:calc(100% / 5);
	padding:5px;
}
.category-image-link > li img {
	border-radius:10px;
}
.category-image-link > li:hover {
	opacity:0.8;
}





/* ==============================================
	テキストボタン
=============================================== */
.linkButtons {
	padding-top:3em;
	display:flex;
	justify-content:center;
	align-items:center;
}
.linkButton {
	padding:0 2em;
}
.linkButton a {
	width:20em;
	padding:0.5em 0;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	text-align:center;
	color:#fff;
	text-shadow:0 0 0.5em rgba(255,255,255,0);
	background:#333;
	border:1px solid #ccc;
	border-radius:0.5em;
	-webkit-transition:.3s ease;
	transition:.3s ease;
}
.linkButton a span {
	line-height:1.4;
}
.linkButton a span:nth-child(2) {
	font-size:160%;
}
.linkButton a:hover {
	color:#fff;
	text-shadow:0 0 0.5em rgba(255,255,255,1);
	background:#000;
}
@media screen and (max-width:799px) { 
	.linkButton a span:nth-child(2) {
		font-size:120%;
	}
}


.linkButtons.around {
}
.linkButtons.around .linkButton {
	padding:0 1em;
}
.linkButtons.around .linkButton a {
	width:18em;
}



.linkButtons.large {
	flex-direction:column;
}
.linkButtons.large .linkButton {
	padding-bottom:2em;
}
.linkButtons.large a {
	width:24em;
	font-size:160%;
	padding:0.5em 0;
}

.linkButtons.large.r2 a {
	font-size:100%;
}



.linkButton.green a {
	background:#3ab54a;
}
.linkButton.green a:hover {
	background:#008980;
}

.linkButton.sky a {
	background:#29aae3;
}
.linkButton.sky a:hover {
	background:#2955b5;
}

.linkButton.orange a {
	background:#f93;
}
.linkButton.orange a:hover {
	background:#c63;
}
.linkButton.red a {
	background:#f39;
}
.linkButton.red a:hover {
	background:#c36;
}
.linkButton.blue a {
	background:#39f;
}
.linkButton.blue a:hover {
	background:#36c;
}



/* ============================================================================================
	ロゴ（イメージ、テキスト併用）
============================================================================================= */
.text-logo {
	text-align:center;
	line-height:1;
	overflow:hidden;
}
.text-logo .logo-inner {
	display:inline-block;
}
.text-logo .en {
	letter-spacing:0;
	text-indent:0;
	font-size:110px;
	transform:scaleX(0.7);
	padding-bottom:10px;
}
.text-logo .en > span {
	display:inline-block;
	padding:0 0.05em;
}
.text-logo .ja {
	font-family:'Kosugi Maru' ,sans-serif;
	font-size:16px;
	font-weight:bold;
	padding-bottom:10px;
}







/* ==========================================================================================================================================
	ヘッダ部
========================================================================================================================================== */
header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:60px;
	background:rgba(255,255,255,0.95);
	z-index:9001;
	box-shadow:0 3px 5px #666;
}
header #headerNav {
	height:100%;
}
header .inner {
	width:100%;
	height:100%;
	max-width:1400px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	line-height:1;
	overflow:hidden;
}
header .inner > * {
}



#headerLogo img {
	max-height:60px;
}

header .tel {
	text-align:center;
	display:flex;
	align-items:center;
}
header .tel > div {
	padding-right:10px;
	font-size:70%;
	line-height:1.4;
	text-align:right;
}
header .tel > a {
	font-family:'Kosugi Maru' ,sans-serif;
	font-size:42px;
}



.logo-flex {
	display:flex;
	justify-content:center;
	align-items:flex-end;
	text-align:center;
	height:100%;
}
.logo-flex > img {
	max-height:100%;
}
.logo-flex > span {
	padding-bottom:5px;
	font-weight:bold;
}







/* ==========================================================================================================================================
	フッター部
=========================================================================================================================================== */
footer {
}
footer #footer {
	padding:20px 0 60px;
	text-align:center;
	color:#fff;
	background:rgba(0,0,0,0.8);
	box-shadow:0 1px 5px 1px #666;
}


/* ============================================================================================
	フッター　＞　メニュー部分
============================================================================================= */
footer .inner nav {
	padding-bottom:3em;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	font-size:75%;
	line-height:1;
	text-align:left;
}
footer .inner nav ul {
	width:30em;
}
footer .inner nav ul li {
	width:100%;
	padding:0.3em 1em;
}
footer .inner nav ul li.title {
	padding-top:2em;
	padding-left:0;
	width:100% !important;
}

footer .inner nav ul li a {
	padding:0.3em 0;
}
footer .inner nav ul li a:hover {
	text-shadow:0 0 3px #fff;
}

footer .inner nav ul.catalog-link {
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-wrap:wrap;
}
footer .inner nav ul.catalog-link > li {
	width:13em;
}

footer .inner nav ul.ex-site {
	padding-top:0.3em;
}
footer .inner nav ul.ex-site a[target="_blank"] span {
	padding-left:17px;
	background:url(images/icons/ex-link_w.png) 0 50% no-repeat;
	image-rendering:pixelated;
}



/* ============================================================================================
	フッター　＞　ロゴ部分
============================================================================================= */
footer #footer .text-logo {
	text-shadow:0 0 3px #000,0 0 5px #fff,0 0 10px #fff,0 0 20px #fff;
}

#footer .logo-flex {
	width:400px;
	margin:0 auto;
	flex-wrap:wrap;
}
#footer .logo-flex > * {
	width:100%;
}
#footer .logo-flex > span {
	text-shadow:0 0 3px #000,0 0 5px #fff,0 0 10px #fff,0 0 20px #fff;
}


/* ============================================================================================
	フッター　＞　コピーライト
============================================================================================= */
#copyright {
	text-align:center;
	line-height:3;
	font-family:'Kosugi Maru' ,sans-serif;
}







/* ==========================================================================================================================================
	「▲ページトップ」ボタン
========================================================================================================================================== */
#pageTop {
	position:fixed;
	right:10px;
	bottom:10px;
	width:60px !important;
	height:60px !important;
	padding:0;
	display:none;
	z-index:9990;
}
#pageTop div {
	width:100%;
	height:100%;

	color:#333;
	text-shadow:1px 1px 0 #fff;
	background:#ebebeb;
	border:1px solid #fff;
	border-radius:3px;
	box-shadow:0px 0px 3px #000;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;

	font-size:12px;
	line-height:1.2;
	letter-spacing:1px;
	text-indent:1px;
	text-align:center;
	font-family:"Noto Sans JP" ,sans-serif;
	-webkit-transition:.3s ease-out;
	transition:.3s ease-out;
}
#pageTop div span {
	width:100%;
}
#pageTop div:hover {
	color:#fff;
	text-shadow:1px 1px 0 #000;
	background:#666;
}


/* --------- pagetop Link ------------------ */
.infoBloc {
	text-align:center;
	margin:0 auto 30px;
	width:96%;
}






/* ==========================================================================================================================================
	コンテンツ
=========================================================================================================================================== */



/* ============================================================================================
	メインブロック
============================================================================================= */
.mainBlock {
	position:relative;
	width:100%;
}


#mainContents {
}
#mainContents > section {
	padding:3em 0;
}
#mainContents .subSection {
	padding-top:2em;
}

#mainContents .inner {
	max-width:1200px;
	min-width:800px;
	margin:0 auto;
	padding:0;
}

#mainContents .image {
	text-align:center;
}

#mainContents .innerContents {
	padding:2em 5% 0;
}

#mainContents .h2-serif {
	padding:0 1em 0.3em;
	border-bottom:0.5em solid #ccc;
	text-align:left;
}

#mainContents .imageTitle {
	text-align:center;
	font-size:180%;
	border-bottom:3px solid #666;
}

#mainContents .imageTitle.block {
	font-size:160%;
	background:#eee;
	border:2px solid #666;
}

#mainContents .mainText {
	padding:1em 5% 0;
}
#mainContents .mainText.b3 {
	padding-bottom:3em;
}

section#pageHeader {
	padding-bottom:0;
}

#mainContents .linkText {
	padding:1em 2em 2em;
}
#mainContents .linkText a {
	color:#f06;
}
#mainContents .linkText a:hover {
	text-decoration:underline;
}


.catalogText {
	padding:1em 1em 0;
	font-size:120%;
}
.catalogDL {
	width:80%;
	min-width:900px;
	margin:0 auto;
	padding-top:1.5em;
	font-size:120%;
	line-height:1;
}
.catalogDL li {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}
.catalogDL li > .fileTitle {
	width:50%;
	padding:0.3em 0;
}
.catalogDL li > .fileTitle:before {
	content:"■";
}
.catalogDL li > .link ,
.catalogDL li > .dl {
	width:25%;
	padding:0.3em;
	text-align:center;
}

.catalogDL a:hover {
	opacity:0.8;
}

#categories .mainText {
	width:90%;
	margin:0 auto;
	padding-top:1em;
}

/* ============================================================================================
	上部カテゴリリスト（小さめ）
============================================================================================= */
#mainContents .categoryList {
	padding:3em 3em 0;
}
#mainContents .categoryList .imageTitle {
	text-align:left;
	padding-left:0.5em;
	font-size:160%;
}
#mainContents .categoryList .category-image-link {
	padding:2em 2em 0;
}



/* ============================================================================================
	汎用プロック（イメージ＋テキスト）
============================================================================================= */
.imageFlex {
	padding:1.5em;
	display:flex;
	align-items:flex-start;
}
.imageFlex.rev ,
.flexAlter .imageFlex:nth-child(2n) {
	flex-direction:row-reverse;
}
.imageFlex > .image {
	width:45%;
	padding:0.5em 1em 0;
	text-align:center;
}
.imageFlex > .text {
	width:calc(100% - 45%);
	padding:0 1em;
}
.imageFlex > .text .title {
	color:#00f;
	font-size:130%;
	font-weight:bold;
}
.imageFlex > .text .body {
	padding-top:0.3em;
	padding-left:0.5em;
}



.image.button {
	padding-top:120px;
}


.imageFlex .h3title {
	font-size:120%;
	font-weight:bold;
}
@media screen and (max-width:799px) { 
	.imageFlex .h3title {
		text-align:center;
	}
}


/* ============================================================================================
	カタログリスト
============================================================================================= */
.catalog-flex {
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.catalog-flex > li {
	width:calc(100% / 6);
	padding:1em 0.2em;
}

.catalog-flex > li .image {
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	background:#ccc;
}
.catalog-flex > li .image img {
	height:360px;
	max-width:inherit;
}
.catalog-flex > li .name {
	padding:0.2em;
	line-height:1.4;
	font-size:90%;
	border-bottom:2px solid #666;
	overflow:hidden;
	white-space:nowrap;
	-webkit-text-overflow:ellipsis;
	text-overflow:ellipsis;
}
.catalog-flex > li .name .title {
	display:block;
	font-size:90%;
	overflow:hidden;
	white-space:nowrap;
	-webkit-text-overflow:ellipsis;
	text-overflow:ellipsis;
}




/* ============================================================================================
	実績リスト
============================================================================================= */
.works-flex {
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.works-flex > li {
	position:relative;
	width:calc(100% / 6);
	padding:0.5em;
}

.square-link {
	position:relative;
	overflow:hidden;
}
#worksHtmlBody .square-link {
	cursor:pointer;
}
.square-link:before {
	content:"";
	display:block;
	width:100%;
	height:0;
	line-height:1;
	padding-top:100%;
}
.square-link .image {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	background:#ccc;
}
.square-link .image img {
	height:100%;
	max-width:inherit;
}
.square-link .name {
	position:absolute;
	bottom:-2em;
	left:0;
	right:0;
	z-index:10;
	height:1.6em;
	line-height:1.6em;
	background:rgba(255,255,255,0.8);
	overflow:hidden;
	white-space:nowrap;
	-webkit-text-overflow:ellipsis;
	text-overflow:ellipsis;
	-webkit-transition:.1s ease;
	transition:.1s ease;
	text-align:center;
}

/* マウスオーバーなし
.square-link:hover .name {
	bottom:0em;
}
*/

.works-flex > li.noData {
	width:100%;
	padding:2em;
	text-align:center;
	color:#999;
}


.exSite {
	padding-top:1em;
	text-align:right;
	font-size:80%;
	line-height:1.6;
}
.exSite a span {
	color:#00f;
}
.exSite a:hover span {
	text-decoration:underline;
}


/* ============================================================================================
	取引先リスト
============================================================================================= */
.customers-flex {
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.customers-flex > li {
	position:relative;
	min-width:calc(100% / 4);
	padding:0.5em;
}



/* ============================================================================================
	リンクリスト
============================================================================================= */
.links-flex {
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
	border-top:3px dotted #eee;
	border-left:3px dotted #eee;
}
.links-flex > li {
	position:relative;
	width:calc(100% / 2);
	border-bottom:3px dotted #eee;
	border-right:3px dotted #eee;
}
.links-flex > li a {
	height:100%;
	padding:0.5em;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
}
.links-flex > li a > .image {
	width:30%;
	padding-top:0.5em;
	text-align:center;
}
.links-flex > li a > .body {
	width:calc(100% - 30%);
	padding-left:0.5em;
	line-height:1.8;
}
.links-flex > li a > .body .title {
	display:block;
}
.links-flex > li a:hover {
	color:#f00;
	background:#eee;
}



/* ==========================================================================================================================================
	個別ブロック
=========================================================================================================================================== */
/* ============================================================================================
	トップページ　＞　コンテンツブロック設定
============================================================================================= */
#indexHtmlBody section {
}
#indexHtmlBody section .inner {
}

#index2HtmlBody section:nth-child(4n+1) ,section.bg1 ,
#indexHtmlBody section:nth-child(4n+1) ,section.bg1 {
	background:rgba(127,127,127,0.08);
}
#index2HtmlBody section:nth-child(4n+2) ,section.bg2 ,
#indexHtmlBody section:nth-child(4n+2) ,section.bg2 {
	background:rgba(127,127,127,0.16);
}
#index2HtmlBody section:nth-child(4n+3) ,section.bg2 ,
#indexHtmlBody section:nth-child(4n+3) ,section.bg2 {
	background:rgba(127,127,127,0.24);
}



/* ============================================================================================
	トップページ　＞　メイン背景スライダー
============================================================================================= */
#demo-1 .bx-wrapper {
	min-width:1400px;
	right:0;
}
#demo-1 {
	position:relative;
    overflow:hidden;
    width: 100vw;
	min-width:1000px;
    height:750px;
	padding:0;
}
#demo-1 .slide-frame {
	position:absolute;
	top:0;
	left:0;
	width:1920px;
	height:100%;
	line-height:1;
}
#homeCatchBloc img {
	width:100%;
}
@media screen and (max-width:1900px) { 
	#demo-1 .slide-frame {
		margin-left:calc(50% - 960px);
	}
}


#demo-1 .inner-content{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1000;
	width:100%;
	min-width:1000px;
	height:100%;
/*
	display:flex;
	justify-content:center;
	align-items:center;
*/
}



/* ============================================================================================
	トップページ　＞　メインメニュー
============================================================================================= */
.topMenu {
	width:580px;
	padding:30px 15px;
	font-family:'Cormorant SC' ,'Kosugi Maru' ,serif;
	text-shadow:1px 1px 1px #fff ,0 0 3px #fff ,0 0 3px #fff ,0 0 5px #fff;
	text-align:right;
	background:linear-gradient(to right ,rgba(255,255,255,0.0) ,rgba(255,255,255,0.8)) rgba(255,255,255,0.6);
	background:-webkit-gradient(linear ,left top ,right top, from(rgba(255,255,255,0.0)) ,to(rgba(255,255,255,0.6)) );
}

.topMenu .text-logo {
	width:400px;
	margin:0 auto;
}


.topMenu-main > li {
}
.topMenu-main > li .topMenu-block {
	display:block;
	text-align:right;
	padding:20px 10px 10px;
	line-height:0.9;
	-webkit-transition:.3s ease-out;
	transition:.3s ease-out;
	border-bottom:2px dotted #999;
}
.topMenu-main > li .topMenu-block .ja {
	display:block;
	font-size:18px;
}
.topMenu-main > li .topMenu-block .en {
	display:block;
	font-size:60px;
}
.topMenu-main > li a:hover {
	color:#fff;
	text-shadow:1px 1px 3px #000;
	background:rgba(0,0,0,0.3);
}

.topMenu-sublist {
	width:100%;
	padding:5px 0 5px 1.5em;
	border-bottom:2px dotted #999;
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	text-align:left;
	font-size:18px;
	line-height:32px;
	font-family:'Kosugi Maru' ,sans-serif;
	letter-spacing:-1px;
	text-indent:0;
	color:#000;
}
.topMenu-sublist > li {
	width:auto;
	min-width:150px;
	padding:5px;
}
.topMenu-sublist > li:nth-child(3n+1) {
	min-width:185px;
}
.topMenu-sublist > li:nth-child(3n+2) {
	min-width:165px;
}


.topMenu-sublist > li a {
	display:inline-block;
	padding:0 5px;
}
.topMenu-sublist > li a:before {
	content:"●";
	display:inline-block;
	font-size:10px;
	padding-right:2px;
	vertical-align:top;
}



/* ============================================================================================
	トップページ　＞　新着情報
============================================================================================= */
.news-frame {
	width:100%;
	max-width:1200px;
	height:600px;
	margin:0 auto;
	padding:20px;
	box-shadow:0 0 20px #ccc inset;
} 
.news-frame ul{
	height:100%;
	overflow:auto;
	border:2px solid #fff;
}
.news-frame li {
	padding:20px;
	background:#fff;
	border-bottom:5px solid #fff;
	box-shadow:0 0 10px #ddd inset;
}
.news-frame li:last-child {
	border-bottom:0 none;
}
.news-frame li .date {
	font-family:'Cormorant SC' ,'Noto Serif JP' ,serif;
	font-size:150%;
}
.news-frame li .date span:nth-child(2) {
	padding-left:0.3em;
	font-size:16px;
}
.news-frame li .text {
	padding-left:1.5em;
	word-break: break-all;
}



/* ============================================================================================
	トップページ　＞　コンセプト　＞　デザイン
============================================================================================= */
.design_flex {
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:20px 20px 0;
	display:flex;
	justify-content:center;
	align-items:stretch;
}
.design_flex > div {
	width:calc(100% / 3);
	padding:0 20px;
}
.design_flex > div img {
	vertical-align:top;
	border:1px solid #eee;
	box-shadow:3px 3px 5px #ccc;
}
@media screen and (max-width:799px) { 
	.design_flex {
		padding:0;
	}
	.design_flex > div {
		padding:0;
	}
}

/* ============================================================================================
	トップページ　＞　ＳＮＳ
============================================================================================= */
.sns_flex {
	width:100%;
	max-width:1400px;
	margin:0 auto;
	display:flex;
	justify-content:center;
	align-items:stretch;
}
.sns_flex > div {
/* 2022.2.14
	width:calc(100% / 3);
*/
	width:calc(100% / 2);
	max-width:502px;
	margin:0 20px;
	border:1px solid #eee;
	box-shadow:3px 3px 5px #ccc;
}
.sns_flex > div .image {
	padding-top:10px;
	background:#fff;
	display:flex;
	justify-content:center;
}
.sns_flex > div .image img {
	width:360px;
	max-width:60%;
}
.sns_flex > div .frameOuter {
	position:relative;
	width:100%;
	background:#fff;
}
.sns_flex > div .frameOuter > .frame {
	width:100%;
	overflow:auto;
}
#insta-window {
	border:0 none !important;
	border-radius:0 !important;
}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width:100% !important;
    height:100% !important;
}



/* ============================================================================================
	トップページ　＞　メディア情報
============================================================================================= */
.cm-frame ul {
	width:100%;
	max-width:1200px;
	margin:0 auto;
}
.cm-frame ul li {
	width:100%;
	padding:1em;
	box-shadow:0 0 1em #ccc inset;
}
.cm-frame .imageFlex {
	background:#fff;
}



/* ============================================================================================
	リンクページ　＞　ダームバナーリスト
============================================================================================= */
.darmBanners {
	padding-top:2em;
}
.darmBanners .imageFlex {
	padding-bottom:0;
	align-items:center;
}
.darmBanners .imageFlex > .image {
	width:30%;
	padding-bottom:0.5em;
	font-size:80%;
	color:#999;
	line-height:1.3;
}
.darmBanners .imageFlex > .text {
	width:calc(100% - 30%);
}



/* ============================================================================================
	サイトマップ
============================================================================================= */
#sitemap {
	display:flex;
	flex-wrap:wrap;
	white-space:nowrap;
}
#sitemap > .col {
	padding-right:2em;
}
#sitemap > .col:last-child {
	padding-right:0;
}
#sitemap h3 {
	padding-left:1em;
	padding-right:3em;
	border-bottom:2px solid #999;
}

#sitemap a:hover {
	color:#f00;
	text-decoration:underline;
}

#sitemap ul.lv1 {
	padding:0.5em 2.5em 2em;
}
#sitemap ul.lv1 > li {
	list-style:disc;
}
#sitemap ul.lv2 {
	padding-left:2em;
}
#sitemap ul.lv2 > li {
	list-style:circle;
}

.subFlex {
	display:flex;
	flex-wrap:wrap;
}
.subFlex h3 {
	width:100%;
}



/* ============================================================================================
	会社概要
============================================================================================= */
.infoTable {
	width:80%;
	margin:2em auto 0;
	border-collapse:collapse;
	font-size:90%;
}
.infoTable th ,
.infoTable td {
	border:1px solid #ccc;
	padding:0.5em 1em;
}
.infoTable th {
	min-width:8em;
	white-space:nowrap;
	vertical-align:top;
}

.infoTable td iframe {
	width:100% !important;
	height:400px !important;
}

.tdFlex {
	display:flex;
	flex-wrap:wrap;
}
.tdFlex > span {
	width:calc(100% / 3);
}





/* ==========================================================================================================================================
	フォーム
=========================================================================================================================================== */
input,textarea,select,button {
	padding:0.3em 0.5em;
	letter-spacing:1px;
	font-family:'Kosugi Maru' ,sans-serif;
	border:1px solid #999;
	border-radius:5px;
}
select {
    padding: 0.6em 0.5em;
}
button {
	padding:0.3em 1.5em;
}
input[type="file"] {
	max-width:100%;
}


#contactForm {
	padding-top:100px;
}

#form {
	display:block;
	padding:0 2em 2em;
	line-height:1.8;
}

dl.form-table {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}
dl.form-table dt {
	width:30%;
	padding:1em 0;
	font-size:120%;
	text-align:right;
	border-bottom:1px solid #ccc;
}
dl.form-table dd {
	width:calc(100% - 30%);
	padding-left:2em;
	padding-top:1em;
	padding-bottom:1em;
	border-bottom:1px solid #ccc;
}


dl.form-table dt.required > span {
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
dl.form-table dt.required > span:before {
	content:"必須";
	display:block;
	margin-right:0.3em;
	padding:0.2em 0.5em;
	font-size:70%;
	line-height:1;
	color:#fff;
	background:#f00;
	border-radius:3px;
}


form.status2 dl.form-table dt {
	font-size:100%;
}



/* ============================================================================================
	フォームパーツ
============================================================================================= */
input[type='text'] {
	width:60%;
	padding:0.3em;
	border:1px solid #999;
	border-radius:5px;
}
textarea {
	width:80%;
	height:10em;
	padding:0.3em;
	border:1px solid #999;
	border-radius:5px;
}

.form-button {
	text-align:center;
	padding-top:2em
}
input[type='submit'] {
	padding:0.5em 3em;
	border:1px solid #999;
	border-radius:5px;
	background:linear-gradient(#fff, #ccc) #ccc;
	background:-webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
	cursor:pointer;
}

span.radio ,
span.check {
	position:relative;
	display:inline-block;
	padding-right:1em;
}
span.radio label ,
span.check label {
	position:relative;
	display:block;
	min-width:200px;
	padding:0.5em 1em 0.5em 2em;
	line-height:1em;
	border-radius:5px;
}
span.radio label:before ,
span.check label:before {
	content:"";
	position:absolute;
	top:50%;
	left:1em;
	margin-top:-0.5em;
	margin-left:-0.5em;
	display:block;
	width:1em;
	height:1em;
	background:#fff;
	border:1px solid #999;
	border-radius:5px;
}
span.radio input[type='radio'] ,
span.check input[type='checkbox'] {
	display:none;
}
span.radio input[type='radio']:checked + label ,
span.check input[type='checkbox']:checked + label {
	color:#fff;
	background:#f06;
	text-shadow:0 0 1px rgba(0,0,0,.7);
	font-size:95%;
}
span.radio input[type='radio']:checked + label:after ,
span.check input[type='checkbox']:checked + label:after {
	content:"";
	position:absolute;
	top:50%;
	left:1em;
	margin-top:-0.35em;
	margin-left:-0.35em;
	display:block;
	width:0.7em;
	height:0.7em;
}

span.radio {
	padding-right:2em;
}
span.radio label {
	border-radius:1.6em;
	background:#eee;
	text-align:center;
}
span.radio label:before {
	border-radius:50%;
}
span.radio input[type='radio']:checked + label:after {
	background:#999;
	border-radius:50%;
}

span.check {
	width:240px;
	padding-bottom:0.5em;
}
.bunny span.check {
	min-width:50%;
	white-space:nowrap;
}

span.check input[type='checkbox']:checked + label:after {
	content:"」";
	font-weight:bold;
	font-size:120%;
	font-weight:bold;
	color:#000;
	text-shadow:1px 0px 1px #fff;;
	transform:rotate(45deg);
	transform-origin:70%;
}





.error {
	display:block;
	color:#f00;
}


.form-comment {
	display:block;
	padding:0.1em 0;
	color:#444;
	font-size:80%;
}
.form-comment a {
	color:#c33;
}
.form-comment a:hover {
	color:#f00;
	text-decoration:underline;
}


.form-image {
	padding:0 1em 0.5em;
	font-size:90%;
}
div + .form-image {
	border-top:1px solid #ccc;
}
.form-image img {
	max-width:40%;
}
.form-image input {
	font-size:90%;
}
.form-image summary {
	cursor:pointer;
	background:#def;
	padding:0 1em;
}
.form-image summary ~ div {
	margin-left:1em;
}

.imageHeader {
}
.imageHeader > .imageHeaderInner {
}
.imageBody {
	margin-left:1em;
}

.status2 .form-image {
	padding:0.3em 1em;
}


/* ==========================================================================================================================================
	SP用調整
=========================================================================================================================================== */
@media screen and (max-width:799px) { 
	body {
		font-size:16px;
		line-height:1.8;
	}
	#outer {
		width:480px;
		min-width:480px;
		max-width:480px;
	}
	.inner {
		width:100%;
		min-width:100%;
		max-width:100%;
	}

	main {
		padding-top:80px;
	}

	#mainContents .inner {
		width:100%;
		padding:0 0.5em;
		min-width:100%;
		max-width:100%;
	}

	.textMemo {
		padding:1em;
	}

	.image90 {
		margin-top:1.5em;
		width:100%;
	}

	section, aside {
		padding:2em 0 4em;
	}



	/* ============================================================================================
		ヘッダー
	============================================================================================= */
	header {
		height:80px;
		padding:5px 0
	}

	header .inner {
		flex-wrap:wrap;
	}

	header .logo-flex {
		flex-direction: column;
	}
	header .logo-flex img {
		height:56px;
	}


	/* ==============================================
		TEL部分は分割して、下部に固定
	=============================================== */
	header .tel {
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		width:100%;
		height:calc(40px + env(safe-area-inset-bottom) );
		padding-bottom:env(safe-area-inset-bottom);
		background:rgba(255,255,255,0.95);
		z-index:9001;
		box-shadow:0 -3px 5px #666;
		justify-content:center;
	}
	header .tel p {
		padding-top:0;
		text-align:right;
	}
	header .tel a {
		font-size:32px;
	}


	/* ============================================================================================
		共通部分
	============================================================================================= */
	.h2-serif ,
	#mainContents .h2-serif {
		text-align:center;
		border-bottom:0.3em solid #ccc;
		padding-bottom:0.5em;
		margin-bottom:1.5em;
	}
	#mainContents .h2-serif {
		margin-bottom:0;
	}
	.h2-serif {
		font-size:130%;
	}
	.h2-serif .en {
		display:block;
		font-size:210%;
	}
	.h2-serif .ja {
		display:block;
		font-size:90%;
	}
	.h2-serif .sub {
		font-size:130%;
	}

	#mainContents .imageTitle {
		font-size:160%;
		margin-bottom:1em;
	}

	#mainContents .innerContents {
		padding:1.5em 1em 0;
	}

	#mainContents .mainText {
		padding:1em 1em 0;
	}

	#mainContents .linkText {
		text-align:center;
	}

	#indexHtmlBody section#original {
		padding-bottom: 1em;
	}

	#categories .mainText {
		padding-top:0;
	}
	.catalogText {
		padding:0;
		font-size:100%;
		text-align:center;
	}
	.catalogDL {
		min-width:100%;
		padding-top:0.5em;
		font-size:100%;
	}
	.catalogDL li > .fileTitle {
		padding:1em 0 0.3em;
		width:90%;
	}
	.catalogDL li > .link ,
	.catalogDL li > .dl {
		width:40%;
	}

	#mainContents .categoryList {
		padding:1.5em 1em 0;
	}
	#mainContents .categoryList .imageTitle {
		font-size:130%;
		line-height:1.4;
	}
	#mainContents .categoryList .category-image-link {
		padding:0 1em;
	}

	#mainContents #pageHeader .image {
		display:flex;
		justify-content:center;
	}
	#mainContents #pageHeader .image img {
		max-width:inherit;
		height:18em;
	}
	#companyHtmlBody #mainContents #pageHeader .image img ,
	#contactHtmlBody #mainContents #pageHeader .image img ,
	#bunnyHtmlBody #mainContents #pageHeader .image img ,
	#bunny_orderHtmlBody #mainContents #pageHeader .image img {
		height:11em;
	}

	/* ============================================================================================
		共通部分
	============================================================================================= */
	.catalog-flex > li {
		width:calc(100% / 4);
	}

	.catalog-flex > li .image img {
		height:200px;
	}

	#typeHtmlBody .catalog-flex > li:nth-child(n + 5) {
		display:none;
	}

	.spotlight-cell .number {
		position:absolute;
		top:calc(1em + 200px - 1.4em);
	}
	.spotlight-cell .spotlight-group {
		height:200px;
	}

	/* ============================================================================================
	============================================================================================= */
	.imageFlex ,
	#concept .imageFlex {
		flex-direction:column-reverse;
		padding:0 0 1.5em;
	}
	.imageFlex > .text {
		width:100%;
	}
	.imageFlex > .text .body {
		padding-left:0;
	}
	.imageFlex > .image {
		width:100%;
		text-align:center;
		padding:0 3em 1em;
	}



	/* ============================================================================================
	============================================================================================= */
	.linkButtons {
		padding-top:1.5em;
		flex-direction:column;
	}
	.linkButton {
		width:100%;
		padding:1em;
		font-size:90%;
	}

	.linkButton a {
		margin:0 auto;
		width:24em;
	}
	.linkButtons.large a {
		width:100%;
	}

	.linkButtons.around .linkButton {
		padding:0 1em 1em;
	}
	.linkButtons.around .linkButton a {
		width:22em;
	}

	/* ============================================================================================
	============================================================================================= */
	.category-image-link {
	}
	.category-image-link > li {
		width:calc(100% / 3);
	}
	.category-image-link > li img {
		border-radius:5px;
	}



	/* ============================================================================================
	============================================================================================= */
	footer .inner nav {
		flex-direction:column;
		padding-left:2em;
		font-size:90%;
	}
	footer .inner nav ul {
		display:flex;
		flex-wrap:wrap;
	}
	footer .inner nav ul li {
		width:40%;
	}
	footer .inner nav ul li:nth-child(odd) {
		width:60%;
	}
	footer .inner nav ul li:not(.title):before {
		content:"●";
		padding-right:0.2em;
	}
	footer .inner nav ul li.title {
		padding-right:2em;
		padding-bottom:1.2em;
		text-align:center;
	}
	footer .inner nav ul li.title span {
		font-size:120%;
	}
	footer .inner nav ul li.title span:after {
		content:"■";
	}

	#copyright {
		line-height:1.5;
		padding:1em 0 4em;
		font-size:80%;
	}



	/* ============================================================================================
	============================================================================================= */
	main .inner {
		padding:0 1em;
	}

	/* ============================================================================================
	============================================================================================= */
	#demo-1 {
		height:290px;
		min-width:100%;
	}
	#demo-1 .slide-frame {
		position:relative;
		width:640px;
		margin-left:0;
		z-index:10;
		overflow:hidden;
	}
	#demo-1 .bx-wrapper {
		min-width:inherit;
		width:calc(1920px / 3);
	}

	#homeCatchBloc img {
		height:290px;
		object-fit:cover;
	}


	#demo-1 .inner-content {
		position:relative;
		z-index:-1;
		min-width:inherit;
	}

	.inner1400 {
		padding-right:0;
	}
	.topMenu {
		padding-top:1em;
	}
	.topMenu .text-logo {
		width:75%;
	}
	.topMenu-main > li .topMenu-block {
		text-align:left;
	}
	.topMenu-main > li .topMenu-block .en {
		font-size:320%;
	}
	.topMenu-sublist {
		justify-content:flex-start;
	}
	.topMenu-sublist > li {
		min-width:48% ! important;
		padding-left:1em;
	}


	.sns_flex {
		flex-direction:column;
		padding:0 0 1.5em;
	}
	.sns_flex > div {
		width:calc(100% - 6em);
		margin:0 3em 1.5em;
	}

	.news-frame {
		width:calc(100% - 1em);
		margin:0 0.5em;
		padding:0.5em;
		box-shadow:0 0 1em #ccc inset;
	}
	.news-frame li {
		padding:0.5em;
		box-shadow:0 0 0.5em #ccc inset;
	}
	.news-frame li .text {
		padding-left:0.5em;
		padding-bottom:0.5em;
	}

	.cm-frame ul {
		width:calc(100% - 2em);
		margin:0 1em;
	}
	.cm-frame ul li {
		padding:0.5em;
		box-shadow:0 0 0.5em #ccc inset;
	}

	#youtube iframe {
		width:calc(16px * 25) !important;
		height:calc(9px * 25) !important;
	}
	.videoFrame {
	}

	/* ============================================================================================
	============================================================================================= */
	#sitemap > .col {
		padding-bottom:2em;
	}
	#sitemap ul.lv1 {
		width:100%;
		padding-top:0;
		padding-bottom:0;
	}


	/* ============================================================================================
	============================================================================================= */
	.works-flex > li {
		width:calc(100% / 3);
	}



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


	dl.form-table dt {
		width:100%;
		padding:0.5em 0.5em 0;
		border-bottom:0 none;
		text-align:left;
	}
	dl.form-table dt.required > span {
		justify-content:flex-start;
	}
	dl.form-table dd {
		width:100%;
		padding:0.5em 0.5em 1em 1.5em;
	}

	form.status2 dl.form-table dt ,
	form.status2 dl.form-table dd {
		font-size:110%;
	}

	span.check {
		width:48%;
		padding-right:0;
	}

	span.radio label ,
	span.check label {
		min-width:6em;
		padding-right:0.2em;
	}

	.bunny span.check {
		min-width:100%;
	}
	input[type='text'] ,
	textarea {
		width:90%;
	}

	.infoTable {
		width:100%;
	}
	.infoTable th ,
	.infoTable td {
		padding:0.5em 0.5em;
	}
	.infoTable th {
		padding:0.5em 0.2em;
		white-space:inherit;
	}
	.tdFlex > span {
		width:auto;
		min-width:calc(100% / 2);
	}

	.darmBanners .imageFlex {
		flex-direction:column;
	}
	.darmBanners .imageFlex > .image {
		width:100%;
	}
	.darmBanners .imageFlex > .text {
		width:100%;
		padding-bottom:2em;
	}
	.code {
		height:6em;
	}


	/* ************************************************************ */
	/* ヘッダー - スマートフォンメニューアイコン					*/
	/* ************************************************************ */
	.menu-button {
		width:70px;
		aspect-ratio:1/1;
		padding:8px 12px 0;
		border:3px solid #000;
		border-radius:5px;
		display:flex;
		justify-content:center;
		align-items:flex-start;
		flex-wrap:wrap;
		font-size:20px;
		letter-spacing:0.1em;
		text-indent:0.1em;
		line-height:1;
		cursor:pointer;
	}
	.menu-button > .menu-icon {
		position:relative;
		width:100%;
		padding:12px 0;
	}
	.menu-button > .menu-icon span {
		display:block;
		width:100%;
		height:4px;
		background:#000;
	}
	.menu-button > .menu-icon:before ,
	.menu-button > .menu-icon:after {
		content:"";
		position:absolute;
		left:0;
		right:0;
		display:block;
		height:4px;
		background:#000;
	}
	.menu-button > .menu-icon:before {
		top:0;
	}
	.menu-button > .menu-icon:after {
		bottom:0;
	}
	
	.menu-button > .menu-text {
		padding-top:0.2em;
		font-weight:bold;
	}
	.menu-button > .menu-text:before {
		content:"MENU";
	}


#menuOpen:checked + header .menu-button > .menu-icon span {
	background:transparent;
}
	#menuOpen:checked + header .menu-button > .menu-icon:before {
		left:0;
		right:0;
		top:12px;
		transform:rotate(-45deg);
	}
	#menuOpen:checked + header .menu-button > .menu-icon:after {
		left:0;
		right:0;
		bottom:12px;
		transform:rotate(45deg);
	}

	#menuOpen:checked + header .menu-button > .menu-text:before {
		content:"CLOSE";
		letter-spacing:-0.5px;
	}


	#spNaviMenu {
		color:#000;
		background:rgba(255,255,255,0.95);
		position:fixed;
		top:-200%;
		bottom:200%;
		left:0;
		right:0;
		width:100%;
		padding-top:80px;
		padding-bottom:30px;
		z-index:900;
		overflow:hidden;
		-webkit-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	#spNaviMenu .inner-content {
		height:100%;
		overflow:auto;
	}
	#spNaviMenu .topMenu {
		padding-bottom:20px;
	}

	#menuOpen:checked ~ #spNaviMenu {
		top:0;
		bottom:0;
	}

	body.menuOn {
		overflow:hidden;
	}
	.menuOn #pageTop {
		display:none !important;
	}


}



/* ==========================================================================================================================================
	2021.8.31
	ページ遷移
=========================================================================================================================================== */
.dispNumbers {
	padding:0.5em;
	text-align:center;
}
.dispNumbers .max {
	padding-right:0.3em;
}
.dispNumbers .now {
	color:#00f;
}
.dispNumbers .number {
	font-size:130%;
}

.pager {
	padding-bottom:1em;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}
.pager a {
	display:block;
	margin:0.2em;
	width:2.4em;
	height:2.4em;
	background:#eee;
	border:1px solid #000;
	display:flex;
	justify-content:center;
	align-items:center;
	-webkit-transition:0.3s ease;
	transition:0.3s ease;
}
.pager a.active {
	color:#fff;
	background:#666;
}
@media screen and (min-width:800px) {
	.pager a:not(.active):hover {
		background:#ccc;
	}
}


.textMemo.allLink {
	padding-top:0;
	text-align:center;
}
.textMemo.allLink .small {
	font-size:90%;
}
.textMemo.allLink .small a {
	padding:0 0.3em;
	color:#f00;
}

.dispNumbers + .works-flex > li {
	width:calc(100% / 4);
}
@media screen and (max-width:799px) {
	.dispNumbers + .works-flex > li {
		width:calc(100% / 2);
	}
}



/* ==========================================================================================================================================
flow
=========================================================================================================================================== */
.flow-title-image{
	text-align:center;
}

.flow-all .contents-flow-outer{
	padding-top: 1em;
}

.flow-all .contents-flow-wrapper{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

.flow-all .contents-flow-out{
	position: relative;
	padding-top:2em;
}

.flow-all .contents-flow-out:nth-child(4){
	margin-left: auto;
	margin-right: 1em;
}

.flow-all .contents-flow-out:nth-child(5){
	margin-right: auto;
	margin-left: 1em;
}

.flow-all .contents-flow-cover {
    width: 310px;
    height: 380px;
    border: solid 2px #666;
    border-radius: 10px;
    padding: 1em;
	margin-left: 1em;
	margin-right: 1em;
}

.flow-all .contents-flow-img{
	text-align: center;
}
.flow-all .contents-flow-img img{
	border-radius: 0.5em;
}

.flow-all .circle {
    text-align: center;
    border-radius: 25px;
    background-color: #00a99e;
	line-height: 1.2;
    padding: 0.3em;
}

.flow-all .circle-text {
	color: #fff;
	padding-left: 0.3em;
	padding-right: 0.3em;
}

.flow-all .contents-flow-text-cover{
	padding-top: 0.5em;
}

.flow-all .contents-flow-text {
    text-align: left;
    line-height: 1.6;
    font-size: 85%;
	text-align: justify;
}

.flow-all .number,
.flow-all .c-text{
	font-size: 135%;
}

.flow-all .arrow::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2em 0 2em 1.5em;
    border-color: transparent transparent transparent #ccc;
    position: absolute;
    top: 125px;
    left: 0;
    margin-top: 3em;
    margin-left: -1.1em;
}

.flow-all .contents-flow-out:nth-child(4).arrow::before,
.flow-all .contents-flow-out:nth-child(5).arrow::before{
    margin-left: -1.5em;
}

.flow-all .under-text-cover{
	padding-top: 4em;
	text-align: center;
}

.flow-all .under-text{
	font-size: 125%;
	padding: 0.5em 5.2em;
	border: solid 2px #666;
	border-radius: 10px;
	display: inline-block;
}


@media screen and (max-width:799px) {
	.flow-title-image img{
		height:10em;
		object-fit:cover;
	}


	.flow-all .contents-flow-outer {
		padding-top: 0;
	}

	.flow-all .contents-flow-wrapper{
		display: block;
	}
	
	.flow-all .contents-flow-out {
		padding-top: 4em;
	}

	.flow-all .contents-flow-out:nth-child(1){
		padding-top: 1em;
	}

	.flow-all .contents-flow-out:nth-child(4){
		margin-right: 0;
	}

	.flow-all .contents-flow-out:nth-child(5) {
		margin-left: 0;
	}

	.flow-all .contents-flow-cover {
		width: auto;
		height: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		padding: 1.5em 1.5em 1em;
		margin-left: 1.5em;
		margin-right: 1.5em;
	}

	.flow-all .circle-cover {
		width: 100%;
		order: 1;
	}

	.flow-all .contents-flow-text-cover {
		padding: 1em 1em 0;
		order: 2;
	}

	.flow-all .contents-flow-text {
		font-size: 100%;
	}

	.flow-all .contents-flow-img {
		order: 3;
		width: 75%;
		padding-top: 1em;
	}

	.flow-all .arrow::before {
		border-width: 1.5em 2em 0;
		border-color: #ccc transparent transparent;
		top: 7%;
		left: 50%;
		margin-top: -0.5em;
		margin-left: -2em;
	}

	.flow-all .under-text-cover{
		padding-top: 2em;
	}
	
	.flow-all .under-text{
		font-size: 125%;
		padding: 0.5em 4.5em;
	}
}




/* ==========================================================================================================================================
 2025.2.3
=========================================================================================================================================== */
.footer-text {
	max-width:800px;
	margin:0 auto;
	padding:1em 1em 0;
	font-size:80%;
}

@media screen and (max-width:799px) {
	.footer-text {
		font-size: 66%;
	}
}