@charset "UTF-8";

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
/** Remove default margin. */
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
/* Links ========================================================================== */
a { background: transparent; }
a:active, a:hover { outline: 0; }
/* Text-level semantics ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: 0.67em 0; }
mark { background: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* Embedded content ========================================================================== */
img { border: 0; }
svg:not(:root) { overflow: hidden; }
/* Grouping content ========================================================================== */
figure {
	margin: 0px auto;
    text-align: center;
    width: 100%;
	vertical-align: middle;
}
hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }

@-webkit-keyframes $animation-name { 0% { opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-moz-keyframes $animation-name { 0% { opacity: 0;
    transform: translateX(100%); }
  100% { opacity: 1;
    transform: translateX(0); } }
@keyframes $animation-name { 0% { opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }


/*==============================================================================================================================================
COMMON_SET
================================================================================================================================================*/
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
body {
	position: relative;
	font-size: 18px;/*16px*/
	color: #464646;
	letter-spacing: 0.02em;
	line-height: 1.8em;
	letter-spacing: 0.07em;
}
@media screen and (max-width: 640px) { body { line-height: 190%; font-size: 14px; } }
html { height: 100%; }
body {
	min-height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
h1, h2, h3, h4, h5, h6 {font-weight: normal; margin: 0; }
main { display: block; }
a {
	color: #0074cc;
	cursor: pointer;
	outline: none; background-color: transparent; border: 0; overflow: hidden; -moz-transition: 0.2s ease; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; -ms-transition: 0.2s ease; transition: 0.2s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
a:before, a:after { -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease; transition: 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
a img { -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease; transition: 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

a:link { color: #0074cc; }
a:visited { color: #00349a; }
a:hover { color: #00b1fd; text-decoration: none; }
a:active { color: #0074cc; }
a:hover img { opacity: .8; }
ul, dl, dt, dd { margin: 0; padding: 0; text-align: left; }
li { list-style: none; }
input, button, select, textarea { border-style: none; border-width: 0; border: none; border-radius: 0; border: 1px solid #cccccc; padding: 5px 10px; width: 100%; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -moz-transition: 0.2s ease; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; -ms-transition: 0.2s ease; transition: 0.2s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
input[type=radio], input[type=checkbox] { display: none; }
input[type=radio] + label, input[type=checkbox] + label { position: relative; display: inline-block; margin-right: 12px; cursor: pointer; line-height: 140%; }
input[type=radio]:checked + label:before, input[type=radio]:checked + .mfp_element_all + .mfp_ok + label:before, input[type=checkbox]:checked + label:before, input[type=checkbox]:checked + .mfp_element_all + .mfp_ok + label:before { background: #FFFFFF; border: 1px solid #0074cc; }
input[type=radio]:checked + label:after, input[type=radio]:checked + .mfp_element_all + .mfp_ok + label:after, input[type=checkbox]:checked + label:after, input[type=checkbox]:checked + .mfp_element_all + .mfp_ok + label:after { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
/* custom */
label { position: relative; display: inline-block; padding-left: 25px; cursor: pointer; }
label:before, label:after { position: absolute; content: ''; top: 0; bottom: 0; margin: auto; -moz-transition: 0.2s ease; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; -ms-transition: 0.2s ease; transition: 0.2s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
label:before { left: 0; width: 18px; height: 18px; border: 1px solid #cccccc; background: #FFFFFF; }
label:after { opacity: 0; left: 4px; width: 10px; height: 10px; background: #0074cc; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); }
label:hover:before { background: #FFFFFF; }

select { width: auto; }
input:focus, select:focus, textarea:focus { outline: none; background: #f0faeb; }
button {
	border-style: none;
	border-width: 0;
	border: none;
	border-radius: 0;
	background: #0074cc;
	color: #FFFFFF;
}
::-webkit-input-placeholder { color: #cccccc; opacity: 1; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; }
::-moz-placeholder { color: #cccccc; opacity: 1; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; }
:-moz-placeholder { color: #cccccc; opacity: 1; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; }
:-ms-input-placeholder { color: #cccccc; opacity: 1; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; }
::-placeholder { color: #cccccc; opacity: 1; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; }
:focus::-webkit-input-placeholder { opacity: .7; }
:focus:-moz-placeholder { opacity: .7; }
:focus::-moz-placeholder { opacity: .7; }
:focus:-ms-input-placeholder { opacity: .7; }
:focus::-placeholder { opacity: .7; }
i, em, address, b { font-style: normal; font-weight: normal; }
.tel-link a { display: inline-block; }
img, canvas, video, svg { max-width: 100%; }
.overflow-container { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
@media screen and (max-width: 768px) {
	body {
		letter-spacing: 0.03em;
	}
}

/*------------------------------------------------------------------------------------------------
#CONTENT
--------------------------------------------------------------------------------------------------*/
#wrapper {
	position: relative;
	z-index: 1;
}
.index #wrapper {
    border-top: none;
    margin-bottom: 150px;
}
#main {
	overflow: hidden;
	margin-bottom: 0px;
}
#mainColumn {
	max-width: 1200px;
	margin: 0 auto;
}
body.index #mainColumn {
	max-width: 1200px;
}

/*コメントテキスト*/
.cmt {
    font-size: 0.65em;
    font-weight: normal;
}
.cmt p::before {content: "※"}
.cmt p {padding-left: 1em; text-indent: -1em; margin: 0px;}

@media screen and (max-width: 640px) {
	#main {
		margin-bottom: 0px;
	}
    .index #wrapper {
        margin-bottom: 20px;
    }
    .cmt {
        font-size: 0.6em;
    }
}
/*-works-----------------------------------------------------------*/
.head {
	position: relative;
	text-align: center;
	/*text-align: left;*/
	font-size: 32px;
	font-family: Arial, Helvetica;
	color: #61aabf;
	padding-bottom: 15px;
	margin: 30px auto 40px;
	line-height: 120%;
}
#mainColumn .head {
	position: relative;
    text-align: center;
    color: #004898;
    font-weight: bold;
    background-color: #f7de33;
    margin: 20px auto;
    padding: 10px;
}
#mainColumn .head:after {
    background:no-repeat;
}
#mainColumn p.head {
	text-align: center;
    font-size: 1.5em;
	color: #464646;
	margin: 0px auto 10px;
}
h2.subTitle{
    font-weight: bold;
    padding: 0px;
    margin: 30px auto;
    text-align: center;
    line-height: 1.65em;
}
#mainColumn h3.head {
	font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    color: #FFF;
    margin: 30px 0px;
    padding: 10px;
    background: #539ed9;
    border: none;
}
#mainColumn h3.head p {
    padding: 15px;
    margin: 0px;
}
@media screen and (max-width: 768px) {
	.head {
		font-size: 20px;
		margin: 0px;
	}
	#mainColumn h3.head {
		font-size: 1.1em;
        margin: 20px 0px;
        padding: 5px 10px;
    }
	#mainColumn h3.head p {
		padding: 10px;
	}
}
@media screen and (max-width: 640px) {
    #mainColumn .head {
        padding: 6px;
        margin: 0px;
    }
    h2.subTitle {
        font-size: 1.15em;
        margin: 10px 0px;
    }
}
@media screen and (max-width: 640px) {
.head {
    padding-bottom: 0px;
    margin: 10px auto 10px;
	}
}
.head + section { margin-top: 30px; }
@media screen and (max-width: 640px) { .head + section { margin-top: 15px; } }

.subHead { 
	display: block;
	text-align: left;
	font-size: 32px;
	color: #000000;
	line-height: 100%;
	margin-bottom: 20px;
}
@media screen and (max-width: 768px) { .subHead { font-size: 22px; } }
@media screen and (max-width: 640px) { .subHead { font-size: 18px; margin-bottom: 15px; } }

.copyText {
	font-size: 24px;
	color: #0074cc;
	line-height: 140%;
	margin-bottom: 25px;
}
@media screen and (max-width: 768px) { .copyText { font-size: 22px; } }
@media screen and (max-width: 640px) { .copyText { font-size: 16px; margin-bottom: 15px; } }

p {margin: 20px auto;}
@media screen and (max-width: 640px) { p { margin: 10px auto; } }
p + .ex { margin-top: -20px; }
@media screen and (max-width: 640px) { p + .ex { margin-top: -15px; } }
p.img + .ex { margin-top: 10px; }
figure p { text-align: center; }
.ex { font-size: 90%; font-weight: normal; vertical-align: top; }
b { font-weight: bold; }

#footer .pageTop, #footer .ctabtn {
    position: relative;
    text-align: right;
    margin: 0;
    width: 100%;
}
/*メニューをページ下部に固定*/
#footer .ctabtn {
    position: fixed;
    width: 100%;
    bottom: 0px;
    font-size: 0;
    opacity: 0.95;
    z-index: 99;
    background-color: #fff9ac;
}
/*PCの場合にはメニューを表示させない*/
@media (min-width: 768px) {
   .for-sp{
      display:none;
    }
}
#footer .pageTop a {
    position: fixed;
    bottom: 150px;
    right: 60px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    width: 60px;
    height: 60px;
    background: #004898;
    z-index: 100;
}
#footer .pageTop a span {
    position: relative;
    display: block;
    text-indent: 130%;
    white-space: nowrap;
    overflow: hidden;
    height: 60px;
}
#footer .pageTop a span:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -9px 0 0 -7px;
    border-top: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    -webkit-transform: rotate(
-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(
-45deg);
    zoom: 1;
    -moz-transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    transition: 0.2s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#footer .pageTop a span:after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 2px;
    height: 21px;
    margin: -9px 0 0 -1px;
    background: #FFFFFF;
    -moz-transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    transition: 0.2s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media screen and (max-width: 640px) {
	#footer .group {
        font-size: 0.75em;
    }
    #footer .group img {
        width: 100%;
    }
	#footer .pageTop a {
		bottom: 50px;
		right: 10px;
	}
}

/*------------------------------------------------------------------------------------------------
#section
--------------------------------------------------------------------------------------------------*/
.inner {
	position: relative;
	max-width: 1200px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}
section#points, section#logo {
    background: #f5faf1;
    padding: 20px 40px 40px;
    margin: 30px 0px;
}
section#points {
    margin-top: 60px;
}
section#Notes h2.head{
    color: #464646;
    background: none;
    display: flex;
    align-items: center;
}
section#Notes h2.head:before,
section#Notes h2.head:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #464646;
}
section#Notes h2.head:before {
    margin-right: 1rem;
}
section#Notes h2.head:after {
    margin-left: 1rem;
}
section#points h3.head, section#logo h3.head {
    font-size: 1.6em;
    text-align: center;
    color: #539ed9;
    margin: 30px 0px;
    padding: 0px 0px;
    background: none;
}
section#points p.link{
    text-align: center;
    display: block;
    margin: 5px 0px;
}

@media screen and (max-width: 640px) {
	section#info .inner .btn a, section#info .inner .btn input {
		font-size: 1.2em;
		width: 90%;
		padding: 10px;
		margin: 0px auto;
	}
	#mainColumn p.head {
		font-size: 1.2em;
		margin: 0px auto;
		line-height: 1.4em;
	}
    section#banner {
        margin: 0px 0px;
    }
    section#points {
        padding: 10px 20px;
        margin: 20px 0px;
    }
    section#points h3.head {
        font-size: 1.2em;
        margin: 20px 0px 10px;
        padding: 0px;
    }
    section#points, section#logo {
        margin-top: 15px;
    }
}
section {
    margin: 10px 0px;
}
section#topic {
    margin-top: 0px;
}
section#topic .service{
    width: 50%;
    display: block;
}
@media screen and (max-width: 640px) {
    section {
        line-height: normal;
    }
	section .head:first-child, section .subHead:first-child {
		margin-top: 0;
	}
	.head + section {
		padding-top: 0;
	}
    
	body.index .columnBox p {
		font-weight: normal;
		text-align: left;
		line-height: 1.8em;
	}
	body.index .columnBox h3 {
		font-size: 1.5em;
		font-weight: bolder;
		text-align: left;
		line-height: 2.0em;
		margin-top: 50px;
	}
}

@media screen and (max-width: 640px) {
	body.index .columnBox h3 {
		font-size: 1.0em;
		margin: 0px 0px 30px;
		line-height: 1.8em;
	}
}

body.index h2.newsTTl {
	font-size: 2.4em;
    line-height: 1.2em;
    font-style: oblique;
}

@media screen and (max-width: 1200px) { #mainColumn {
	padding: 0 0px;
	}
}
@media screen and (max-width: 1200px) { #mainColumn { padding: 0 30px; } }
@media screen and (max-width: 768px) { #mainColumn { padding: 0 10px; } }

#mainColumn figure.img { margin: 40px auto; }
@media screen and (max-width: 640px) {
    #mainColumn figure.img {
        margin: 20px auto;
    }
}
#mainColumn header h1.head { color: #464646; margin-bottom: 15px; }
@media screen and (max-width: 640px) {
	#mainColumn header h1.head {
		font-size: 22px;
		margin-bottom: 7px;
	}
}
#bnr{
    margin: 0px 0px;
    padding: 10px 20px 0px;
	text-align: right;
}
@media screen and (max-width: 640px) {
#bnr{
	display: none;
	}
}
@media screen and (max-width: 640px){
.topImg {
    margin-left: 0px;
    margin-right: 10px;
	}
}
@media screen and (max-width: 1200px) {
.topImg {
	margin-left: -30px;
	margin-right: -30px;
	}
}
#bnr .topImg img {
    /*margin: 0px 20px 0px;*/
    width: 20% !important;
}
@media screen and (max-width: 640px){
#bnr .topImg img {
	width: 50% !important; 
	}
}
img {
	max-width: 100%;
    vertical-align: top;
}
.columnBox {
	overflow: hidden;
    margin: 50px 0px;
}
.columnBox p{
    font-weight: 800;
    color: #333333;
}
@media screen and (max-width: 640px) {
	.columnBox {
		margin: 0px 0px;
	}
}
.frame{
	border: 1px solid;
	padding: 10px;
}
h3.companyTitle{
	color: #333333;
    margin: 1em 0 0.5em 0;
    text-align: left;
    font-weight: bold;
}
.columnBox span{
    margin-left: 28px;
    display: block;
}
@media screen and (max-width: 640px) {
.columnBox span {
	margin-left: 0px;
    text-align: left;
	}
}
.columnBox > *:first-child { margin-top: 0; }

@media screen and (max-width: 640px) {
	.imgArea, .textArea {
		margin-top: 10px;
	}
}
.imgArea.left, .textArea.left {
    float: left;
    width: 60%;
}
.imgArea.right, .textArea.right {
    float: right;
    width: 39%;
}
@media screen and (max-width: 640px) {
	.imgArea.left, .textArea.left,
	.imgArea.right, .textArea.right {
		float: none;
		width: 100%;
		margin: 0px auto;
		padding: 0px;
	}
}
@media screen and (max-width: 640px) {
    .imgArea.right, .textArea.right {
        float: none;
        width: 100%;
	}
}
.imgArea > *:first-child, .textArea > *:first-child { margin-top: 0; }
.imgArea p { text-align: left; }
@media screen and (max-width: 768px) { .imgArea { width: 41.5%; } }
@media screen and (max-width: 640px) { 
	.imgArea {
		width: auto;
		padding: 0px;
	}
}
.imgArea img {margin-top: 10px;}
@media screen and (max-width: 640px) {
	.textArea {
		width: auto;
	}
	.imgArea img {
		margin-top: 0px;
		padding: 0px 30px;
	}
}
p.caption {
	text-align: left;
	font-size: 16px;
	line-height: 140%;
}
@media screen and (max-width: 640px) {
	p.caption {
		text-align: center;
		font-size: 13px;
	}
}
p.caption span { display: inline-block; font-size: 12px; margin-right: 1em; }

h2.head .tag.topics {
    background: #efc930;
}
h2.head .tag {
	text-align: center;
    padding: 6px 6px;
    font-size: 0.75rem;
    color: #FFFFFF;
    background: #61aabf;
    margin: 0px 10px 0px 0px;
    vertical-align: top;
}
button {
	position: relative;
	display: block;
	text-align: center;
	padding: 15px 0;
	margin: 0 auto;
	color: #FFFFFF;
	border: 1px solid #0074cc;
	background: #0074cc;
	margin: 0 auto 0;
	font-size: 14px; letter-spacing: 0.05em; -moz-transition: 0.2s ease; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; -ms-transition: 0.2s ease; transition: 0.2s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
button[type="reset"] {
    background: #cccccc;
    border-color: #cccccc;
}

.btn_set {
    text-align: center;
}
.btn {
    display: inline-block;
	z-index: 1;
    margin: 0px 10px;
}
@media screen and (max-width: 640px) { .btn { margin-top: 15px; } }
.btn a, .btn input {
	margin: 0 auto 0;
	width: 280px;
    max-width: 280px;
    color: #fff;
    padding: 10px 10px;
    border-radius: 3px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-decoration: none;
	background: #0055a1;
	/*font-size: 15px;*/
	letter-spacing: 0.05em;
    transition: 0.3s ease-in-out;
    font-weight: bold;
}
.btn a:hover {
    background: #61aabf;
    color: #FFF;
}
.btn a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.btn a:hover:after {
    border-color: #fff;
}
@media screen and (max-width: 640px) { .btn a, .btn input { padding: 10px 30px 10px 15px; } }
a.link {
	display: inline;
	text-decoration: underline;
	color: #0074cc;
}
a.link:hover {background: #61aabf; text-decoration: none; }

.banner { margin: 40px auto; }
@media screen and (max-width: 1200px) { .banner { padding: 0 30px; } }
@media screen and (max-width: 768px) { .banner { margin: 30px auto; padding: 0 20px; } }
@media screen and (max-width: 640px) { .banner { margin: 20px auto; padding: 0 15px; } }
.bgBox + .indent { margin-top: 20px; }

.column05, .column04, .column03, .column02, .column01 {
    margin: 10px 0px;
    padding: 0px;
    overflow: hidden;
	/*margin: 20px -10px;*/
}
@media screen and (max-width: 640px) {
	.column05, .column04, .column03, .column02, .column01 {
		margin: 15px -8px;
	}
}
.column05 > li, .column04 > li, .column03 > li, .column02 > li, .column01 > li {
	float: left;
	margin: 0 10px;
	/*margin: 0 8px 0px 0px;*/
	overflow: hidden;
}
@media screen and (max-width: 640px) { .column05 > li, .column04 > li, .column03 > li, .column02 > li, .column01 > li { float: none; margin: 0 8px 10px; } }
.column05 > li .bgBox, .column04 > li .bgBox, .column03 > li .bgBox, .column02 > li .bgBox, .column01 > li .bgBox { padding: 20px; margin-top: 30px; }
.column05.slim, .column04.slim, .column03.slim, .column02.slim, .column01.slim { margin: 20px 0; }
.column05.slim li, .column04.slim li, .column03.slim li, .column02.slim li, .column01.slim li { margin: 0 0 10px; }
.column05 > li .subHead, .column04 > li .subHead, .column03 > li .subHead, .column02 > li .subHead, .column01 > li .subHead { font-size: 22px; padding-bottom: 10px; margin-bottom: 20px; }
@media screen and (max-width: 640px) { .column05 > li .subHead, .column04 > li .subHead, .column03 > li .subHead, .column02 > li .subHead, .column01 > li .subHead { font-size: 17px; padding-bottom: 5px; margin-bottom: 15px; } }
.column05 > li { width: calc((100% - (20px * 5)) / 5); }
.column05.slim > li { width: calc(100% / 5); }
.column04 > li { width: calc((100% - (20px * 4)) / 4); }
.column04.slim > li { width: calc(100% / 4); }
.column03 > li { width: calc((100% - (20px * 3)) / 3); }
.column03.slim > li { width: calc(100% / 3); }
.column02 > li { width: calc((100% - (20px * 2)) / 2); }
.column02.slim > li { width: calc(100% / 2); }
.column01 > li { width: calc((100% - (20px * 1)) / 1); }
.column01.slim > li { width: calc(100% / 1); }
@media screen and (max-width: 640px) { .column05 > li, .column04 > li { float: left; width: calc((100% - (16px * 2)) / 2); }
  .column05.slim > li, .column04.slim > li { float: left; width: calc(100% / 2); }
  .column03 > li, .column03.slim, .column02 > li, .column02.slim > li, .column01.slim > li { width: auto; } }

.tableA { width: 100%; }
.head + .tableA, .subHead + .tableA, .ttl + .tableA, p + .tableA { margin-bottom: 40px; }
@media screen and (max-width: 640px) { .head + .tableA, .subHead + .tableA, .ttl + .tableA, p + .tableA { margin-bottom: 30px; } }
div + .tableA { margin-top: 40px; }
@media screen and (max-width: 640px) { div + .tableA { margin-top: 30px; } }
.tableA thead th { text-align: center; background: rgba(89, 89, 89, 0.9); color: #FFFFFF; font-size: 16px; padding: 10px 15px; white-space: nowrap; }
@media screen and (max-width: 640px) { .tableA thead th { font-size: 13px; padding: 7px 10px; } }
.tableA thead th.inherit { white-space: inherit; }
.tableA tbody th { white-space: nowrap; }
.tableA tbody th.inherit { white-space: inherit; }
.tableA tbody th span { display: inline-block; font-weight: normal; font-size: 90%; line-height: 140%; }
.tableA th, .tableA td { text-align: left; border: 1px solid #cccccc; background: #FFFFFF; padding: 15px; vertical-align: middle; }
@media screen and (max-width: 640px) { .tableA th, .tableA td { padding: 7px; } }
.tableA th { vertical-align: middle; background: #f2f2f2; }
.sp_br {display: none;}/*768px未満で改行タグを有効*/
.pc_br {display: inline;}/*1024px未満で改行タグを有効*/

.worksList {
    height: auto;
    overflow: hidden;
    text-align: left;
}
.worksList .group {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
}
.worksList .group, .inner .group {
	vertical-align: middle;
}
.worksList .group img, .worksList .group span {
    margin: 0 10px 0 0;
}    
.worksList .group img, .inner .group img, .worksList .group span {
	vertical-align: middle;
}
.worksList span.award {
    font-weight: normal;
    margin: 0px 10px;
}
.worksList span.prize {
    font-size: 1.35em;
}
.worksList ul img {
    margin-right: 10px;
    vertical-align: middle;
}
.worksList ul li span {
    vertical-align: middle;
}
#topic .worksList,#info .worksList {
    padding: 15px 0px 0px 0px;
    margin: 0px auto;
    background-color: #fff9ac;
}
#Notes p.upfont {
    font-size: 1.35em;
    font-weight: 600;
}
@media screen and (max-width: 1024px) {
	.worksList li .btn a {
		width: auto;
	}
    .pc_br {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .sp_br {
        display: block;/*768px未満で改行タグを有効*/
    }
}
@media screen and (max-width: 640px) {
    .worksList {
        padding: 10px 0px;
        /* margin: 0px 0px; */
        line-height: normal;
    }
	#topic .worksList, #info .worksList {
		text-align: center;
		padding: 5px 0px 5px 0px;
        margin: 0px 0px;
	}
	.worksList figure img {
		width: 75%;
	}
    .worksList p {
        font-size: 0.85em;
        margin: 0px;
        padding: 0px;
    }
    .worksList .group {
        font-size: 1.35em;
    }
    .worksList .group img {
        max-width: 50px;
    }
    .worksList span.award, .worksList span.prize {
        font-size: 1.15em;
        margin: 0px;
    }
    #Notes p.upfont {
        font-size: 1.15em;
    }
    .worksList ul img {
        max-width: 20px;
        margin-right: 0px;
    }
}
section#Notes .notes {
    text-align: center;
	padding: 0px;
    width: 80%;
}
@media screen and (max-width: 640px) {
	section#Notes .notes {
        font-weight: normal;
        width: 100%;
        font-size: 0.85em;
    }
}
@media screen and (max-width: 768px){
	section#topic .service {
		width: 100%;
	}
}
/*icon ===============================*/
.dli-mail {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  position: relative;
  width: 1.06667em;
  height: 0.8em;
  border: 0.1em solid currentColor;
  border-radius: 0.1em;
  box-sizing: content-box;
  overflow: hidden;
}
.dli-mail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.75425em;
  height: 0.75425em;
  border: 0.1em solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 0 0.1em;
  box-sizing: content-box;
  transform: translate(-50%, -50%) rotate(-45deg) skew(10deg, 10deg);
}
/*color ===============================*/
.red{color:#ff0f20;}
.yellow{color:#f7de33;}