@charset "UTF-8";

/* ---------------------------------------------------------------------------------------------
	index.html
---------------------------------------------------------------------------------------------*/
article { overflow: hidden; }

/*
@media screen and ( min-width:671px ), print { #top-slider .sp { display: none; } }
@media screen and ( max-width:670px ) {	#top-slider .pc { display: none; } }
*/

#index [class*="div_"] { color: #fff; }
#index [class*="div_"] h2 { font-family: "Yu Gothic Regular"; font-size: 2em; letter-spacing: 3px; line-height: 1.5; }
#index [class*="div_"] h2 span { font-size: .2em; font-weight: normal; }

_:lang(x)::-ms-backdrop, #index [class*="div_"] h2 span { font-family: "Segoe UI", Meiryo, sans-serif; font-size: .4em; }

#index [class*="div_"] p { line-height: 2.1; margin-bottom: 2em; }
#index [class*="div_"] .flex { flex-wrap: wrap; justify-content: space-between; }

.button { line-height: 1.5; color: #fff; text-align: center; display: block; border: 1px solid #fff; position: relative; vertical-align: middle; margin-bottom: 15px; padding: 10px 10px 10px 10px; width: 49%; }

.button:hover { background: rgba(255,255,255,0.2); }

.button::after {
    margin-top: -3px;
    width: 5px;
    height: 5px;
    border: 1px solid;
    border-color: #fff #fff transparent transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    content: "";
}

#index [class*="div_"] { margin-top: 300px; position: relative; }

#index [class*="div_"] .bg {
	position: absolute;
    bottom: 80%;
	right: 0;
    width: 90%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	z-index: -3;
}

#index .div_outline .bg { background-image: url(../img/top_bg1.jpg); }
#index .div_service .bg { background-image: url(../img/top_bg2.jpg); }
#index .div_support .bg { background-image: url(../img/top_bg3.jpg); }
#index .div_product .bg { background-image: url(../img/top_bg4.jpg); }
#index .div_recruit .bg { background-image: url(../img/top_bg5.jpg); }
#index .div_info .bg { background-image: url(../img/top_bg6.jpg); }

#index [class*="div_"] .box { overflow-x: hidden; letter-spacing: 1.5px; }
#index [class*="div_"] .box .bg2 { position: absolute; top: 0; width: 90%; height: 100%; z-index: -1; }

#index .div_outline .bg2 { background: rgba(20, 164, 188, .9); }
#index .div_service .bg2 { background: rgba(66, 131, 195, .9); }
#index .div_support .bg2 { background: rgba(107, 91, 138, .9); }
#index .div_product .bg2 { background: rgba(212, 75, 91, .9); }
#index .div_recruit .bg2 { background: rgba(0, 137, 222, .9); }
#index .div_info .bg2 { background: rgba(240, 203, 53, .9); }

/*READ MORE ボタン*/
#index .RM_btn { width: 250px; }

@media screen and ( max-width:1024px ) {
	#index p br { display: none; }
	#index [class*="div_"] .flex { display: inherit; }
	#index [class*="div_"] .flex a { width: 100%; }
}

@media screen and ( max-width:670px ) {	
	#index [class*="div_"] { margin-top: 260px; }
	#index [class*="div_"] .bg { height: 300px; }
	#index [class*="div_"] .box { position: relative; }
	#index [class*="div_"] .content { width: 70%; margin: 0 auto; padding: 2em 0; position: relative; right: 1em; }
	#index [class*="div_"] .content figure img { width: 100%; }
}

@media screen and ( min-width:671px ) and ( max-width:1023px ) {
	#index [class*="div_"] { margin-top: 260px; }
	#index [class*="div_"] .bg { height: 300px; }
	#index [class*="div_"] .box { position: relative; }
	#index [class*="div_"] .content { width: 70%; margin: 0 auto; padding: 2em 0 }
	
	#index .div_product figure { white-space: nowrap; width: 30%; }
	#index .div_product figure img { max-width: 100%; }
	#index .div_product figure img:first-child { margin: 0 1em 1em 0; }
/*	#index .div_product figure img { width: 30%; }*/
}

@media screen and ( min-width:1024px ), print {
	#index [class*="div_"] .box { position: relative; }
	#index [class*="div_"] .content { width: 70%; margin: 0 auto; padding: 2em 0 }
	#index .div_product figure { white-space: nowrap; width: 30%; }
	#index .div_product figure img { max-width: 100%; }
	#index .div_product figure img:first-child { margin: 0 1em 1em 0; }
}

#index .div_recruit .content { padding: 6em 0; }
/*#index .div_recruit .bg { padding-top: 2em; }*/


#index .recruit {
	position: relative;
	height: 250px;
	text-align: center;
	margin: 3em 0;
}

#index .recruit h2 {
	color: #fff;
    font-family: "Yu Gothic Regular";
    font-size: 2em;
    letter-spacing: 3px;
    line-height: 1.5;
}

#index .recruit h2 span { font-size: .2em; font-weight: normal; }

#index .recruit .text-box {
	width: 50%;
	background: linear-gradient(rgb(112, 211, 216), rgb(23, 182, 178));
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#index .recruit .image {
	position: absolute;
	top: 0;
	right: 0;
	background-image: url(../img/recruit_image.jpg);
	width: 50%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 100%;
}

#index .div_info {}
#index .div_info .cat-data { white-space: nowrap; margin-bottom: .5em; }
#index .div_info [class*="cat_"] { display: inline-block; color: #fff; width: 9em; text-align: center; background: #333; border-radius: 5px; padding: 1px 5px; margin-right: 1em; }


#index .div_info .cat_info { background: #D7A100; }
#index .div_info .cat_outline { background: #14A4BB; }
#index .div_info .cat_service { background: #003F9A; }
#index .div_info .cat_works { background: #E3003E; }
#index .div_info .cat_support { background: #68006B; }

#index .div_info .item { color: #664D00; }
#index .div_info a { color: #664D00;  text-decoration: underline; }
#index .div_info a:hover { text-decoration: none; }



@media screen and ( max-width:670px ) {
	#index .recruit .text-box { width: 100%; background: linear-gradient(rgba(112, 211, 216, .8), rgba(23, 182, 178, .99)); }
	#index .recruit .image { width: 100%; z-index: -1; }
	#index .div_product figure img:first-child { margin: 0 0 1em 0; }
}

@media screen and ( max-width:1023px ) {
	#index .div_info .item + .item { margin-top: 1.5em; }
}

@media screen and ( min-width:1024px ), print {
	#index .div_info .item { display: flex; }
	#index .div_info .data { margin-right: 1em; }
	#index .div_info .item + .item { margin-top: .5em; }
}

.right { text-align: right; }

/* ---------------------------------------------------------------------------------------------
	
---------------------------------------------------------------------------------------------*/

/* ----- Information ----- */
/*タブ切り替え全体のスタイル*/
.notice {
	margin-top: 30px;
	padding-bottom: 40px;
	background-color: #fff;
	max-width: 1024px;
	margin: 0 auto;
}


/*タブのスタイル*/
.tab_item {
	width: calc(100%/3);
	height: 50px;
	border: 1px solid #096;
	border-bottom: 3px solid #096;
	border-radius: 7px 7px 0 0;
	background-color: #fff;
	line-height: 50px;
	font-size: 16px;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	cursor : pointer;
}
.tab_item:hover { opacity: 0.75; background: #e6f7f2; }

input[name="tab_item"] { display: none; }

/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 10px 5px;
	clear: both;
	overflow: hidden;
}

.tab_content div {
	display: flex;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
}

.tab_content .date { margin-right: 20px; }

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content,
#force:checked ~ #force_content {
	display: block;
}

/*選択されているタブのスタイルを変える*/
.notice input:checked + .tab_item { background: #096; color: #fff; }

@media screen and ( max-width:670px ) {
	.tab_item { font-size: 11px; }
	.tab_content div { display: block; }
}



/* ---------------------------------------------------------------------------------------------
	下層ページ
---------------------------------------------------------------------------------------------*/

.second-layer { margin-bottom: 4em; }
.second-layer h2 { font-size: 2.5em; letter-spacing: 3.5px; text-align: center; margin-bottom: 1em; padding-top: 1.5em; }

@media screen and ( min-width:1024px ), print { .second-layer h2 { font-size: 2.5em; } }
@media screen and ( min-width:671px ) and ( max-width:1023px ) { .second-layer h2 { font-size: 3.5vw; } }
@media screen and ( max-width:670px ) { .second-layer h2 { font-size: 5vw; letter-spacing: 2px; } }

.second-layer .top-image { width: 100%; }
.second-layer .top-image img { width: 100%; }

.second-layer .text-area { margin-bottom: 2em; }
/*
.second-layer .link-area { list-style: none; display: flex; justify-content: space-between; }
.second-layer .link-area li { position: relative; width: 23%; border: 1px solid #fff; display: flex; }
.second-layer .link-area a { display: block; color: #fff; text-align: center; padding: .5em 0em; width: 100%; margin: auto 0; }
*/

.second-layer .link-area { list-style: none; display: flex; justify-content: space-between; }
.second-layer .link-area a { position: relative; display: block; width: 23%; color: #fff; text-align: center; border: 1px solid #fff; display: flex; justify-content: center; align-items: center; }
.second-layer .link-area a:hover { background: rgba(255,255,255,0.2); }
.second-layer .link-area li { padding: .5em 0em; }
.second-layer .link-area li::after { margin-top: -3px; width: 5px; height: 5px; border: 1px solid; border-color: #fff #fff transparent transparent; transform: rotate(45deg); position: absolute; top: 50%; right: 15px; content: ""; }

@media screen and ( min-width:1024px ), print {
	.second-layer .link-area { font-size: .8em; }
}

@media screen and ( min-width:671px ) and ( max-width:1023px ) {
	.second-layer .link-area { flex-wrap: wrap; }
	.second-layer .link-area a { width: 49%; margin-bottom: 1.5em; }
}

@media screen and ( max-width:670px ) {
	.second-layer .link-area { flex-wrap: wrap; }
	.second-layer .link-area a { width: 100%; margin-bottom: 1.5em; }
	.second-layer .link-area li br { display: none; }
}



.second-layer .link-area a:hover { background: rgba(255,255,255,0.2); }

.second-layer .link-area a::after {
    margin-top: -3px;
    width: 5px;
    height: 5px;
    border: 1px solid;
    border-color: #fff #fff transparent transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    content: "";
}

@media screen and ( max-width:670px ) {
	.second-layer .link-area { flex-wrap: wrap; }
	.second-layer .link-area li { width: 100%; }
}

.second-layer .link-areas { list-style: none; display: flex; justify-content: space-between; }
.second-layer .link-areas a { position: relative; display: block; width: 23%; color: #fff; text-align: center; border: 1px solid #fff; display: flex; justify-content: center; align-items: center; }
.second-layer .link-areas a:hover { background: rgba(255,255,255,0.2); }
.second-layer .link-areas li { padding: .5em 0em; }
.second-layer .link-areas li::after { margin-top: -3px; width: 5px; height: 5px; border: 1px solid; border-color: #fff #fff transparent transparent; transform: rotate(45deg); position: absolute; top: 50%; right: 15px; content: ""; }

@media screen and ( min-width:1024px ), print {
	.second-layer .link-areas { font-size: .8em; }
	.second-layer .link-areas a { width: 32%; margin-bottom: 1.5em; }
}

@media screen and ( min-width:671px ) and ( max-width:1023px ) {
	.second-layer .link-areas { flex-wrap: wrap; }
	.second-layer .link-areas a { width: 49%; margin-bottom: 1.5em; }
}

@media screen and ( max-width:670px ) {
	.second-layer .link-areas { flex-wrap: wrap; }
	.second-layer .link-areas a { width: 100%; margin-bottom: 1.5em; }
	.second-layer .link-areas li br { display: none; }
}



.second-layer .link-areas a:hover { background: rgba(255,255,255,0.2); }

.second-layer .link-areas a::after {
    margin-top: -3px;
    width: 5px;
    height: 5px;
    border: 1px solid;
    border-color: #fff #fff transparent transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    content: "";
}

@media screen and ( max-width:670px ) {
	.second-layer .link-areas { flex-wrap: wrap; }
	.second-layer .link-areas li { width: 100%; }
}


/*.second-layer section { margin-bottom: 2em; }*/

.sumally-area { color: #fff; padding: 2% 0; }
.sumally-area .headline { margin-bottom: 2em; text-align: center; }
/*.sumally-area .text-area p { text-indent: 1em; }*/
.sumally-area h1 { font-size: 5em; line-height: 1.1; color: #fff; text-align: center; }
.sumally-area h1:first-letter { color: #f4ac1a; }

/* ---------------------------------------------------------------------------------------------
	Outline - 企業情報
---------------------------------------------------------------------------------------------*/

#Outline .sumally-area { background: #14a4bc; }
#Outline .sumally-area .headline p { color: #a1e6eb; }
/*#Outline h1:first-letter { color: #f4ac1a; }*/

#Outline h2 { color: #17A2B9; }

/*#Outline table[class*="table"] { margin-left: 2.5em; }*/
#Outline .flex figure img { width: 100%; }

#Outline .flex { width: 100%; justify-content: space-between; }
#Outline .flex .table-wrap { width: 100%; }

#Outline table[class*="table"] { width: 100%; border-collapse: collapse; }
#Outline table[class*="table"] th, #Outline table[class*="table"] td { padding: 0.5em 0.5em; }

#Outline table[class*="table"] tr {
	background-image: repeating-linear-gradient(90deg, #999, #999 8px, transparent 0, transparent 15px);
	background-size: 12px 1px;
	background-position: top left;
	background-repeat: repeat-x;
}

#Outline table[class*="table"] tr:first-child { background: none; }
#Outline table[class*="table"] th { white-space: nowrap; }

@media screen and ( max-width:670px ) {
	#Outline .flex { display: inherit;}
	#Outline .flex figure { width: 100%; }
	#Outline table[class*="table"] { margin-left: 0; margin-top: 2em; }
	#Outline .arrow_btn a { margin: .5em auto 0 auto; }
	#Outline .history_images figure:nth-last-child(n+2) { display: none; }
}

@media screen and ( min-width:671px ), print {
	#Outline .flex figure { max-width: 100%; margin-right: 2.5em; }
	#Outline .history_images figure + figure { margin-top: 1em; }
	#Outline .arrow_btn a { margin: 0 0 0 auto; }
}

@media screen and ( min-width:671px ) and ( max-width:1023px ) {
	
}

@media screen and ( min-width:1024px ), print {
	#Outline .sumally-area .link-area a { width: 19%; }
	#Outline .arrow_btn a { position: relative; bottom: 45px; }
}

#Outline .arrow_btn a { width: 10em; display: block; border: 1px solid #999; padding: .5em 1em .5em 1em; }
#Outline .arrow_btn a { width: 13em; position: relative; }


.arrow_btn a::before,
.arrow_btn a::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: -73%;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arrow_btn a::before {
	background: #999;
    left: -18px;
    width: 40px;
    height: 1px;
}

.arrow_btn a::after {
    left: 14px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    transform: rotate(45deg);
}

#Outline .arrow_btn2 { white-space: nowrap; }
#Outline .arrow_btn2 a { width: 26em; bottom: 0; margin: 0 auto; padding: .5em 2em; }
#Outline .arrow_btn2 a::before, #Outline .arrow_btn2 a::after { right: -78%; }

@media screen and ( max-width:670px ) {
	#Outline .arrow_btn2 a { width: 24em; padding: .5em 1em; }
	#Outline .arrow_btn2 a::before, #Outline .arrow_btn2 a::after { right: -83%; }
}

/* ---------------------------------------------------------------------------------------------
	SDGs - SDGsへの取り組み
---------------------------------------------------------------------------------------------*/

#Outline.SDGs h1 span { color: #f4ac1a; }
#Outline.SDGs .text-area { margin: 3em 0 0 0; }
#Outline.SDGs h3 { color: #fff; font-size: 1.1em; font-weight: normal; background: #14a4bc; border-radius: 7px; padding: .4em .6em; margin-bottom: .8em; }
#Outline.SDGs ul.check { list-style: none; margin-left: .6em; }
#Outline.SDGs ul.check li { text-indent: -1.65em; margin-left: 1.65em; }
#Outline.SDGs ul.check li::before { font-family: "Font Awesome 5 Free"; content: "\f058"; color: #14a4bc; font-size: 1.1em; font-weight: 900; vertical-align: -1px; text-decoration: none; margin-right: .5em; }
#Outline.SDGs ul.SDGs_icon { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; margin: .8em 0; }
#Outline.SDGs ul.SDGs_icon li { width: 20%; display: inline-block; margin: .5em; }
#Outline.SDGs ul.SDGs_icon img { width: 100%; }
#Outline.SDGs ul.SDGs_poster { list-style: none;justify-content: center; margin: .8em 0 0 0; }
#Outline.SDGs ul.SDGs_poster li { display: inline-block; text-align: center; }
#Outline.SDGs ul.SDGs_poster li + li { margin-top: 2em; }
#Outline.SDGs ul.SDGs_poster li figcaption { margin-top: 5px; }
#Outline.SDGs ul.SDGs_poster img { width: 100%; border: 1px solid #ccc; }

@media screen and ( min-width:671px ), print {
	#Outline.SDGs h3 { font-size: 1.4em; }
	#Outline.SDGs ul.check { margin-left: 1em; }
	#Outline.SDGs ul.SDGs_icon { flex-wrap: nowrap; }
	#Outline.SDGs ul.SDGs_icon li { margin: .8em; }
	#Outline.SDGs ul.SDGs_poster { display: flex; margin: 0; }
	#Outline.SDGs ul.SDGs_poster li { width: 40%; margin: 0; }
	#Outline.SDGs ul.SDGs_poster li + li { margin: 0 0 0 1.5em; }
}

/* ---------------------------------------------------------------------------------------------
	Service - サービス案内
---------------------------------------------------------------------------------------------*/

#Service .sumally-area { background: #2F6FB7; }
#Service .sumally-area .headline p { color: #BFD3EB; }
#Service .sumally-area .link-area { flex-wrap: wrap; }
/*#Service .sumally-area .link-area li { width: 23%; margin-bottom: 1em; }*/
#Service h2 { color: #2F6FB7; }
/*#Service .textarea p { text-indent: 1em; }*/

#Service [class*="image_list"] { list-style: none; display: flex; }
#Service [class*="image_list"] li { margin: 5px; }
#Service [class*="image_list"] img { width: 100%; }

#Service .list_check li::before { color: #2F6FB7; }

#Service .works_link { width: 100%;  }
#Service .works_link a { position: relative; display: block; width: 16em; text-align: center; border: 1px solid #aaa; display: flex; justify-content: center; align-items: center; margin: 1em auto 0 auto; padding: .5em; }
#Service .works_link a::after { margin-top: -3px; width: 5px; height: 5px; border: 1px solid; border-color: #333 #333 transparent transparent; transform: rotate(45deg); position: absolute; top: 50%; right: 15px; content: ""; }

.second-layer .works_link a:hover { background: rgba(47,111,183,0.2); }

#Service .works_banner { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
#Service .works_banner li img { width: 100%; border: 1px solid #ccc; }
#Service .works_banner li { margin: .5%; }
#Service .works_banner li:hover { opacity: 1; animation: flash 0.6s ease 0s  alternate; }

@media screen and ( max-width:670px ) {
	#Service .none-sp { display: none; }
	#Service .sumally-area .link-area li { width: 100%; }
	#Service [class*="image_list"] { flex-wrap: wrap; }
	#Service [class*="image_list"] li { width: 46.5%; }
	#Service .works_banner { flex-wrap: wrap; }
	#Service .works_banner li { width: 49%; }
}

@media screen and ( min-width:671px ), print {
	#Service .works_banner li { width: 32%; }
	#Service .none-pc { display: none; }
}


/* ---------------------------------------------------------------------------------------------
	Support - サポート体制
---------------------------------------------------------------------------------------------*/

#Support .sumally-area { background: #89479E; }
#Support .sumally-area .headline p { color: #cfa1eb; }
#Support .sumally-area .link-area li { width: 32% }
#Support h2 { color: #68016C; }

#Support h3 { font-size: 1.2em; background: #efe6f3; border-top: 1px solid #ccc; padding: 1em; }
#Support .message { margin: 1.5em 0 0 0; }
#Support .message figure img { width: 100%; }

@media screen and ( max-width:670px ) {
	#Support .department + .department { margin-top: 4em; }
	#Support .message figure { margin-top: 1.5em; }
}

@media screen and ( min-width:671px ), print {
	#Support .message { display: flex; }
	#Support .department + .department { margin-top: 2em; }
	#Support .message .text { width: 65%; margin-left: .5em; }
	#Support .message figure { width: 35%; }
	#Support .message .text + figure { margin-left: 1.5em;}
}

@media screen and ( min-width:1024px ), print {
	#Support .sumally-area .link-area a { width: 19%; }
}


/* ---------------------------------------------------------------------------------------------
	Works - 制作実績
---------------------------------------------------------------------------------------------*/

#Works .sumally-area { background: #c74d6e; }

#Works h2 { color: #C74A6C; }
#Works h3 { font-size: 1.4em; }
#Works .image_list { display: flex; flex-wrap: wrap; margin-bottom: 1em; }
#Works .image_list > div { width: 24%; border: 1px solid #ccc; margin: .5%; }
#Works .image_list img { width: 100%; }

#Works .image_list > div:hover { opacity: 1; animation: flash 0.6s ease 0s  alternate; }

#Works .list_check li::before { color: #C74A6C; }

#Works .works_banner { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
#Works .works_banner li img { width: 100%; border: 1px solid #ccc; }
#Works .works_banner li { margin: .5%; }
#Works .works_banner li:hover { opacity: 1; animation: flash 0.6s ease 0s  alternate; }


@media screen and ( max-width:670px ) {
	#Works .image_list > div { width: 49%; }
	#Works .works_banner { flex-wrap: wrap; }
	#Works .works_banner li { width: 49%; }
}

@media screen and ( min-width:671px ), print {
	#Works .works_banner li { width: 24%; }
	#Works .works_banner li { width: 32%; }
/*	#Works .sumally-area .link-area li { width: 19%; font-size: .8em; }*/
}

@media screen and ( min-width:1024px ), print {
	#Works .sumally-area .link-area a { width: 19%; }
}

/*#Works h4 { font-size: 1.2em; }*/
/*
#Works dl { margin-left: 1em; }
#Works dd { margin-bottom: 1em; margin-left: 1em; }
*/

/* ---------------------------------------------------------------------------------------------
	Pastwork - 制作実績
---------------------------------------------------------------------------------------------*/

#Pastwork .sumally-area { background: #c74d6e; }
#Pastwork section { display: flex; justify-content: space-between; padding: 1em 0; }
#Pastwork section + section { border-top: 1px dotted; }
#Pastwork section h3 { font-size: 1.4em; }
#Pastwork section figure { margin: 0 0 0 1em; }

@media screen and ( max-width:670px ) {
	#Pastwork section { display: inherit; }
	#Pastwork section figure { text-align: center; margin: 1em 0 0 0 ; }
}

/* ---------------------------------------------------------------------------------------------
	Recruit - 採用情報
---------------------------------------------------------------------------------------------*/

#Recruit .sumally-area { background: #48AEDF; }
#Recruit .no_recruitment { text-align: center; margin: 20vh 0; }

/* ---------------------------------------------------------------------------------------------
	Contact - お問い合わせ
---------------------------------------------------------------------------------------------*/

#Contact .sumally-area { background: #39AC87; }
#Contact .table01 th, #Contact .table01 td { padding: 1em; }
#Contact .table01 th { background: #f5f5f5; width: 20%; }


#Contact .Privacy { height: 250px; overflow-y: scroll; border: 1px solid #ccc; margin-bottom: 1em; }
#Contact .Privacy dl { padding: 15px; }
#Contact .Privacy dd { margin-bottom: 1.5em; margin-left: 8px; }
#Contact .Privacy dd:last-child { margin-bottom: 0; }
#Contact .Privacy ul { margin-left: 20px; }

@media screen and ( max-width:670px ) {
	#Contact .btn input { font-size: .99em; }
}

.contact_table { width: 100%; text-align: left; font: 14px/2 "Meiryo",Hiragino Kaku Gothic Pro; margin-bottom: 2em; }
.contact_table tbody,th,td {}
.contact_table input, textarea { border: 1px #ccc solid; border-radius: 5px; padding: 5px; margin: 3px; }
/*.contact_table input[type="text"] { width: 80%; }*/
.contact_table textarea[name="message"] { width: 98%; }

.contact_table .required { background: #39AC87; color: #fff; font-size: 10px; font-weight: 700; border-radius: 3px; padding: 2px 5px; margin-right: 10px; vertical-align: 2px; }
.contact_table .optional { background: #fff; font-size: 10px; font-weight: 700; border: 1px #ccc solid; border-radius: 3px; padding: 2px 4px; margin-right: 10px; vertical-align: 2px; }

@media screen and ( max-width:670px ) {
	.contact_table input[name="name"] { width: 100%; }
	.contact_table input[name="company"] { width: 100%; }
	.contact_table input[name="department"] { width: 100%; }
	.contact_table input[name="position"] { width: 100%; }
	.contact_table input[name*="address"] { width: 55%; }
	.contact_table input[name*="tel"] { width: 27%; }
	.contact_table input[name*="fax"] { width: 27%; }
	.contact_table input[name="mail"] { width: 100%; }
	#Contact .btn input { width: 49%; }
}

@media screen and ( min-width:671px ) and ( max-width:1023px ) {
	.contact_table input[name="name"] { width: 40%; }
	.contact_table input[name="company"] { width: 40%; }
	.contact_table input[name="department"] { width: 40%; }
	.contact_table input[name="position"] { width: 40%; }
	.contact_table input[name*="address"] { width: 50%; }
	.contact_table input[name="mail"] { width: 40%; }
	#Contact .btn input { width: 25%; }
}

@media screen and ( max-width:1023px ) {
	.contact_table th {border-collapse: collapse; display: block; border-top: 1px #ccc solid;  padding: .5em .5em 0 .5em ; }
	.contact_table td { padding: 0 .5em 1em .5em; }
	.contact_table tr:last-of-type td { border-bottom: 1px solid #ccc; }
	.contact_table textarea[name="message"] { width: 100%; }
	.contact_table td { display: block; }
}

@media screen and ( min-width:1024px ), print {
	.contact_table tbody th { border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; border-collapse: collapse; }
    .contact_table th { width: 20%; white-space: nowrap; padding: 10px; vertical-align: middle; text-align: left; }
    .contact_table td { padding: 10px; vertical-align: middle; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; border-collapse: collapse; }
	.contact_table input[name="name"] { width: 20em; }
	.contact_table input[name="company"] { width: 20em; }
	.contact_table input[name="department"] { width: 20em; }
	.contact_table input[name="position"] { width: 20em; }
	.contact_table input[name*="address"] { width: 50%; }
	.contact_table input[name="mail"] { width: 20em; }
	#Contact .btn input { width: 20%; }
	.contact_table .br-sp { display: none; }
}

#Contact .btn input:hover { background-color: #ddd; transition: .6s; }
#Contact .btn input { background: #F1F1F1; color: #454545; border-radius: 5px; padding: .7em; cursor: pointer; transition: .6s; }


[class*=""] {}
/* ---------------------------------------------------------------------------------------------
	privacy - プライバシーポリシー
---------------------------------------------------------------------------------------------*/

#privacy .sumally-area { background: #ffbe00; }
#privacy .sumally-area .headline p { color: #fff; }
/*#privacy .sumally-area .link-area li { width: 32% }*/
#privacy h2 { color: #d69711; }
#privacy .sumally-area h1:first-letter { color: #d69711 }


#privacy .handling dl { counter-reset: number; }
#privacy .handling dt { font-weight: bold; font-size: 1.1em; padding-left: 1.5em; margin-bottom: 4px; position: relative; }

#privacy .handling dt:before {
	position: absolute;
	counter-increment: number;
	content: counter(number) ".";
	left: 0;
	top: 50%;
	display: inline-block;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#privacy .handling dd { margin: 0 0 2em 1.5em; }
#privacy .handling ol { list-style: none; counter-reset: number; margin-left: 1em; }
#privacy .handling li { font-size: 1.1em; padding-left: 1.5em; margin-bottom: 4px; position: relative; }

#privacy .handling li:before {
	position: absolute;
	counter-increment: number;
	content: "("counter(number)")";
	left: 0;
	bottom: 100%;
	display: inline-block;
	text-align: center;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

#privacy [src$="mail.jpg"] { vertical-align: baseline; }

#privacy table { margin-bottom: 1em; }
#privacy table caption { font-size: 1.1em; text-align: left; font-weight: bold; text-indent: -.5em; margin-bottom: .5em; }
#privacy table th {background: #F5F5F5; }

@media screen and ( min-width:1024px ), print {
	#privacy .link-area a { width: 30%; }
	#privacy .sumally-area .link-area { justify-content: center; }
	#privacy .sumally-area .link-area a + a { margin-left: 2%; } 
}

/* ---------------------------------------------------------------------------------------------
	Access - アクセス
---------------------------------------------------------------------------------------------*/

#Access .sumally-area { background: #da7373; }


/* ---------------------------------------------------------------------------------------------
	Information - お知らせ
---------------------------------------------------------------------------------------------*/

#info .sumally-area { background: #EFA718; }
#info .sumally-area h1:first-letter { color: #1877F2; }
#infotitle { background-color: #F1F1F1; font-size: 2em; font-weight: 700; text-align: center; }
#infoday { text-align: right; margin: 1em 0 5em 0; }
#infotable { width: 100%; }
#infotable td { border: 1px #CCCCCC solid; padding: 2em; }


@media screen and ( max-width:700px ) {
	#infotitle { font-size: 1.5em; }
	#infoday { margin: 1em 0 3em 0; }
}