@charset "utf-8";
/* CSS Document */


.mainMenu { z-index: 10000;}

/*PC*/
@media print, screen and (min-width: 769px) {


#hedImg {
background: url(../images/company/hed_img.jpg) center center no-repeat;
background-size: cover;
}

/*---index---------*/
.com_list { width: 100%; margin: 0 auto; }
.com_list li { width: 31%; float: left; margin-right: 3.5%; }
.com_list li:nth-child(n+4) { margin-top: 30px; }
.com_list li:nth-child(3n+3) { margin-right: 0px; }
.l-card { transition: 0.5s; overflow: hidden; width: 100%; padding: 0; margin: 0 auto; background: #fff; box-shadow: 1px 1px rgba(0, 0, 0, 0.1); }
.l-card:hover { transform: translate(1px, 1px); box-shadow: 0px 0px rgba(0, 0, 0, 0.1); }
.l-card:hover .thumbnail-wrapper::after { opacity: 1; width: 500px; height: 500px; border-width: 40px; }
.l-card:hover .thumbnail-wrapper img { transform: scale(1.1); }
.l-card:hover .more-text { opacity: 1; letter-spacing: 8px; }
.l-thumbnail { position: relative; overflow: hidden; width: 100%; height: auto; }
.l-thumbnail .more-text { transition: 0.5s; z-index: 2; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; display: block; width: 100%; color: #fff; font-size: 16px; font-weight: lighter; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.thumbnail-wrapper { display: block; margin: 0; padding: 0; }
.thumbnail-wrapper::after { transition: opacity 0.3s, width 0.8s 0.1s, height 0.8s 0.1s, border-width 0.4s 0.1s; content: ""; box-sizing: content-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0px; height: 0px; border-radius: 50%; border: 0px solid #993333; background: rgba(204, 76, 47, 0.7); opacity: 0; }
.thumbnail-wrapper img { transition: 0.5s; display: block; max-width: 100%; }
.text-content { padding: 16px; }
.text-content .title { margin: 0 0 30px 0; font-size: 15px; font-weight: bold; }
.text-content .caption { margin: 0 0 12px 0; font-size: 12px; color: #555; font-weight: lighter; }
.content-meta { overflow: hidden; width: 100%; font-size: 12px; text-align: right; }
.content-meta .date { text-align: right; color: #aaa; }
a:hover .content-meta .date { color: #993333; }



/*---overview---------*/
.overview {}
.overview table { width: 80%; margin: auto; border-bottom: solid 1px #EEE; font-weight:400;}
.overview table tr:nth-child(2n+1) th,
.overview table tr:nth-child(2n+1) td { background: rgba(0,0,0,0.01);}
.overview table th { display: table-cell; width: 30%; padding: 40px 40px; border-top: solid 1px #EEE; text-align: left;}
.overview table td { display: table-cell; padding: 40px 20px; border-top: solid 1px #EEE;}
.overview table td .list01 { display: block; width: auto;}
.overview table td .list01 dt { width: auto; float: left;}
.overview table td .list01 dd { argin-left: 200px;}
.overview table td .list02 { display: block; width: auto;}
.overview table td .list02 dt { width: auto; float: left;}
.overview table td .list02 dd { margin-left: 150px; margin-bottom: 0;}



/*---greeting---------*/
.greeting {}
.greeting .w80p { width: 80%; margin: auto;}
.greeting h3 { font-family: 'Noto Serif JP', serif; text-align: center; font-size: 40px; margin: auto auto 60px;}
.greeting h4 { font-family: 'Noto Serif JP', serif; font-size: 24px; margin: 40px auto; color: #C00;}
.greeting .txt { font-weight:300;}
.greeting .txt p { margin: 25px auto; text-indent: 1em; line-height: 180%;}
.greeting .txt .imgL { float: left; padding: 5px; border: 1px solid #CCC; margin: auto 30px 30px auto;}
.greeting .txt .imgR { float: right; padding: 5px; border: 1px solid #CCC; margin: auto auto 30px 30px;}
.greeting .name { font-family: 'Noto Serif JP', serif; text-align: right; font-size: 18px; margin: 15px auto;}
.greeting .name span { font-size: 24px; font-weight:400;}



/*---history---------*/
.history {}
.history table { width: 80%; margin: auto; border-bottom: solid 1px #EEE; font-weight:400;}
.history table tr:nth-child(2n+1) th,
.history table tr:nth-child(2n+1) td { background: rgba(0,0,0,0.01);}
.history table th { display: table-cell; width: 30%; padding: 40px 40px; border-top: solid 1px #EEE; text-align: left;}
.history table td { display: table-cell; padding: 40px 20px; border-top: solid 1px #EEE;}



/*---philosophy---------*/
.philosophy {}
.philosophy .w80p { width: 80%; margin: auto;}
.philosophy h3 { font-family: 'Noto Serif JP', serif; text-align: center; font-size: 40px; margin: auto auto 60px; letter-spacing: 0.2em;}
.philosophy h3 span { position: relative; display: inline-block; margin-bottom: 1em; }
.philosophy h3 span::before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #333; border-radius: 2px; }
.philosophy h4 { font-family: 'Noto Serif JP', serif; text-align: center; font-size: 24px; margin: 30px auto;}
.philosophy p { margin: 25px auto; line-height: 180%; font-weight:300; text-align: center;}
.philosophy p span { margin: 25px auto; line-height: 180%; font-weight:300; display: inline-block; text-align: left;}
.philosophy p:nth-of-type(1) { margin-bottom: 80px;}


}




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




/*sp*/
@media only screen and (max-width: 768px) {


#hedImg {
background: url(../images/company/hed_img.jpg) center center no-repeat;
background-size: cover;
}

/*---index---------*/
.com_list { width: 100%; margin: 0 auto; }
.com_list li { width: 100%; margin-bottom: 30px; }
.com_list li:nth-child(2n+2) { margin-right: 0px; }
.l-card { transition: 0.5s; overflow: hidden; width: 96%; padding: 0; margin: 24px auto; background: #fff; background: #fff; box-shadow: 6px 6px rgba(0, 0, 0, 0.2); }
.l-card:hover { transform: translate(5px, 5px); box-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
.l-card:hover .thumbnail-wrapper::after { opacity: 1; width: 800px; height: 800px; border-width: 40px; }
.l-card .thumbnail-wrapper img { width: 100%; height: auto; }
.l-card:hover .thumbnail-wrapper img { transform: scale(1.1); }
.l-card:hover .more-text { opacity: 1; letter-spacing: 8px; }
.l-thumbnail { position: relative; overflow: hidden; width: 100%; height: auto; }
.l-thumbnail .more-text { transition: 0.5s; z-index: 2; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; display: block; width: 100%; color: #fff; font-size: 16px; font-weight: lighter; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.thumbnail-wrapper { display: block; margin: 0; padding: 0; }
.thumbnail-wrapper::after { transition: opacity 0.3s, width 0.8s 0.1s, height 0.8s 0.1s, border-width 0.4s 0.1s; content: ""; box-sizing: content-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0px; height: 0px; border-radius: 50%; border: 0px solid #993333; background: rgba(204, 76, 47, 0.7); opacity: 0; }
.thumbnail-wrapper img { transition: 0.5s; display: block; max-width: 100%; }
.text-content { padding: 16px; }
.text-content .title { margin: 0 0 12px 0; font-size: 16px; font-weight: bold; }
.text-content .caption { margin: 0 0 12px 0; font-size: 14px; color: #555; font-weight: lighter; }
.content-meta { overflow: hidden; width: 100%; font-size: 12px; text-align: right; }
.content-meta .date { text-align: right; color: #aaa; }
a:hover .content-meta .date { color: #993333; }



/*---overview---------*/
.overview {}
.overview table { width: 90%; margin: auto; border-bottom: solid 1px #999;}
.overview table tr:nth-child(2n+1) th,
.overview table tr:nth-child(2n+1) td { background: none;}
.overview table th { display: block; width: auto ; padding: 20px 0; border-top: solid 1px #999; text-align: center;}
.overview table td { display: block; padding: 20px 20px; border-top: solid 1px #EEE; text-align: center;}
.overview table td .list01 { display:inline-block; width: auto;}
.overview table td .list01 dt { width: auto; float: left;}
.overview table td .list01 dd { margin-left: 200px;}
.overview table td .list02 { width: auto;}
.overview table td .list02 dt { width: auto; float: none;}
.overview table td .list02 dd { margin-left: 0; margin-bottom: 5px;}



/*---greeting---------*/
.greeting {}
.greeting .w80p { width: 90%; margin: auto;}
.greeting h3 { font-family: 'Noto Serif JP', serif; text-align: center; font-size: 30px; margin: auto auto 60px;}
.greeting h4 { font-family: 'Noto Serif JP', serif; font-size: 18px; margin: 40px auto; color: #C00;}
.greeting .txt { font-weight:300;}
.greeting .txt p { margin: 25px auto; text-indent: 1em; line-height: 180%;}
.greeting .txt .imgL { float: none; padding: 5px; border: 1px solid #CCC; margin: auto 10% 5%; width: auto;}
.greeting .txt .imgR { float: none; padding: 5px; border: 1px solid #CCC; margin: auto 10% 5%; width: auto;}
.greeting .name { font-family: 'Noto Serif JP', serif; text-align: right; font-size: 14px; margin: 15px auto;}
.greeting .name span { font-size: 18px; font-weight:400;}



/*---history---------*/
.history {}
.history table { width: 90%; margin: auto; border-bottom: solid 1px #999;}
.history table tr:nth-child(2n+1) th,
.history table tr:nth-child(2n+1) td { background: none;}
.history table th { display: block; width: auto ; padding: 20px 0; border-top: solid 1px #999; text-align: center;}
.history table td { display: block; padding: 20px 20px; border-top: solid 1px #EEE; text-align: center;}



/*---philosophy---------*/
.philosophy {}
.philosophy .w80p { width: 90%; margin: auto;}
.philosophy h3 { font-family: 'Noto Serif JP', serif; text-align: center; font-size: 30px; margin: auto auto 60px; letter-spacing: 0.2em;}
.philosophy h3 span { position: relative; display: inline-block; margin-bottom: 1em; }
.philosophy h3 span::before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #333; border-radius: 2px; }
.philosophy h4 { font-family: 'Noto Serif JP', serif; text-align: center; font-size: 18px; margin: 30px auto;}
.philosophy p { margin: 25px auto; line-height: 180%; font-weight:300; text-align: center;}
.philosophy p span { margin: 25px auto; line-height: 180%; font-weight:300; display: inline-block; text-align: left;}
.philosophy p:nth-of-type(1) { margin-bottom: 80px;}




}