@charset "UTF-8";

/* kyoutu body
----------------------------------------- */
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0 auto;
padding: 0;

width: 100%;
height: 100%;

font-size: clamp(18px, 3vw, 20px);
-webkit-text-size-adjust: 100%;
font-family: a-otf-ud-reimin-pr6n, sans-serif;
font-style: normal;
color: #333333;
line-height: 1.6;
letter-spacing: 0.8pt;

background-color: #ffffff;
word-wrap: break-word;
overflow-wrap: break-word;
}

a {
text-decoration: none;
outline: none;
color: #1d33b7;
-moz-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;	
}
a:hover {
color: #1d33b7;
text-decoration: none;
}

h1 {
font-size: clamp(28px, 3vw, 36px);
line-height: 1.3;
}

h2 {
font-size: clamp(22px, 3vw, 28px);
line-height: 1.3;
}
h3 {
font-size: clamp(18px, 3vw, 24px);
}
ul, li {
list-style-type: none;
}
hr {
margin-bottom: 30px;
border: 1px solid #bfbfbf;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

div, span, object, iframe, h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
img {
border: none;
max-width: 100%;
height: auto;
}
section {
clear:both;
}
::selection {
background: #f5c53a;
color: #4d452e;
}
::-moz-selection {
background: #f5c53a;
color: #4d452e;
}

.red {
color: #e20113;
}
.blue {
color: #1d3390;
}
.green {
color: #009844;
}
.bkYr {
display: inline-block;
background-color: #ffff00;
}

/* animation
----------------------------------------- */
.animated {
opacity: 0;
transition: all .2s;
}
.animated.active {
opacity: 1;
}



/* banner
----------------------------------------- */
.banner ul {
margin-right: auto;
margin-left: auto;
display: block;
}

/* header
----------------------------------------- */
#header .headerWrap {
margin-top: 10px;
margin-right: auto;
margin-left: auto;
width: 90%;
display: block;
}
#header .logo {
display: inline-block;
}
#header .logo a {
width: 100px;
display: block;
}

/* firstView
----------------------------------------- */
#firstView {
width: 100%;
position: relative;
animation-delay: 0.2s;
}
#firstView img {
object-fit: cover;
}


#firstView .contentsWrap {
margin-right: auto;
margin-left: 0;
line-height: 1;
display: block;
}
#firstView .contentsWrap .head {
width: auto;
animation-delay: 0.4s;
}
#firstView .contentsWrap ul {
width: auto;
}
#firstView .contentsWrap ul li {
transition: all .1s;
}
#firstView .contentsWrap ul li:nth-child(2) {
animation-delay: 0.3s;
}
#firstView .contentsWrap ul li:last-of-type {
animation-delay: 0.6s;
}
#firstView .lead {
margin-top: 1em;
word-break: keep-all;
}


/* section
----------------------------------------- */
article > section .head {
margin-right: auto;
margin-left: auto;
width: 90%;
display: block;
text-align: center;
}
article > section .head .lead {
margin-top: 20px;
}


/* Guide
----------------------------------------- */
#Guide {
width: 100%;
overflow-y: hidden;
}
#Guide .ulBlock {
margin-right: auto;
margin-left: auto;
width: 90%;
text-align: center;
}
#Guide .ulBlock .listBlock {
text-align: left;
}
#Guide .ulBlock .listBlock a {
color: #333333;
}
#Guide .ulBlock .listBlock a:hover {
text-decoration: none;
}
#Guide .ulBlock .listBlock a:hover img {
transition: all .2s;
}
#Guide .ulBlock .listBlock a:hover img {
opacity: 0.8;
}
#Guide .ulBlock .En  {
display: block;
font-size: clamp(10px, 3vw, 14px);
letter-spacing: 0.2pt;
}
#Guide .ulBlock .listBlock h2 {
margin-bottom: 0.5em;
}

#Guide .ulBlock .listBlock a:first-of-type {
animation-delay: 0.2s;
}
#Guide .ulBlock .listBlock:nth-child(2) {
animation-delay: 0.4s;
}
#Guide .ulBlock .listBlock:last-of-type {
animation-delay: 0.6s;
}



/* Guide Block // Works Block
--------------------- */
.guideBlock,
.worksBlock {
font-size: clamp(13px, 3vw, 15px);
}
.guideBlock .head,
.worksBlock .head {
margin-bottom: 50px;
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: flex-end;
}
.guideBlock .head  h2, 
.worksBlock .head  h2 {
margin-bottom: 20px;
}
.guideBlock .head  h2 .En,
.worksBlock .head  h2 .En {
display: block;
font-size: clamp(10px, 3vw, 14px);
letter-spacing: 0.2pt;
}



/* Guide company
--------------------- */
#companyBlock .rinen dl {
margin-bottom: 30px;
}
#companyBlock .rinen dt {
margin-bottom: 10px;
font-size: clamp(18px, 3vw, 24px);
font-weight: normal;
}
#companyBlock .rinen .redPh dd h3 {
color: #e20113;
}
#companyBlock .rinen .bluePh dd h3 {
color: #1d3390;
}

#companyBlock .rinen .greenPh dd h3 {
color: #009844;
}
#companyBlock .foot {
background-image: url("img/company_bk_sec.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
#companyBlock .foot .wrap {
padding: 5%;
}
#companyBlock .foot h2 {
margin-bottom: 20px;
}
#companyBlock .foot h2 small {
font-size: clamp(10px, 3vw, 14px);
}
#companyBlock .foot p {
margin-bottom: 1.5em;
}

/* Guide business
--------------------- */
#businessBlock .foot {
background-image: url("img/business_bk_sec.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
#businessBlock .foot .wrap {
padding: 5%;
}
#businessBlock .twoColumn .logoTxt {
width: 90%;
}
#businessBlock .twoColumn p {
margin-bottom: 30px;
}
#businessBlock .twoColumn tbody tr {
background-color: #eaf5fc;
}
#businessBlock .twoColumn:first-of-type tbody tr:nth-child(odd) {
background-color: #d2ecfa;
}
#businessBlock .twoColumn table th, 
#businessBlock .twoColumn table td {
padding: 0.4em;
}
#businessBlock .twoColumn:first-of-type table th, 
#businessBlock .twoColumn:first-of-type table td {
text-align: center;
}
#businessBlock .twoColumn table th {
width: 10em;
}

/* Guide greetings
--------------------- */
#greetingsBlock h3 {
margin-bottom: 20px;
}
#greetingsBlock .contentsWrap {
margin-right: auto;
margin-left: auto;
width: 90%;
}
#greetingsBlock .txtBlock {
text-align: justify;
}


/* Recruit
----------------------------------------- */
#Recruit .contentsWrap {
background-image: url("img/recruit_bk.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
#Recruit h2 small {
display: block;
font-size: 70%;
}
#Recruit h3 {
font-size: clamp(22px, 3vw, 28px);
font-weight: normal;
}
#Recruit .staff {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#Recruit .staff li {
padding: 0.2em 1em;
display: inline-block;
background-color: #ffffff;
}
#Recruit .staff li:nth-last-child(n+2) {
margin-right: 10px;
}
#Recruit .contentsWrap figure {
margin-top: 50px;
margin-right: 0;
margin-left: auto;
width: 60%;
min-width: 280px;
display: block;
}
#Recruit .banner {
opacity: 1!important;
}

/* workStyle
----------------------------------------- */
#workStyle ul {
margin-right: auto;
margin-left: auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
}
#workStyle ul li {
text-align: center;
transition: all .2s;
}
#workStyle ul li:hover {
transform:scale(1.2,1.2);
}
#workStyle ul li.fullTime figcaption {
color: #ffffff;
display: block;
background-color: #083897;
}
#workStyle ul li.partTime figcaption {
display: block;
background-color: #6fdae6;
}

/* workStyle worksBlock
--------------------- */
.worksBlock .contentsWrap {
margin-right: auto;
margin-left: auto;
width: 90%;
}
.worksBlock .contentsWrap h3 {
font-size: clamp(20px, 3vw, 32px);
text-align: center;
}
.worksBlock .contentsWrap .lead {
text-align: center;
}
.worksBlock .contentsWrap table {
width: 100%;
}
.worksBlock .contentsWrap table th {
width: 8em;
background-color: rgba(102,102,102,0.2);
}
.worksBlock .contentsWrap table td {
background-color: rgba(204,204,204,0.2);
}
.worksBlock .contentsWrap table th, 
.worksBlock .contentsWrap table td {
padding: 0.5em;
}




/* workStyle fullTime
--------------------- */






/* workStyle partTime
--------------------- */






/* Support
----------------------------------------- */
#Support ul {
margin-right: auto;
margin-left: auto;
width: 90%;
}
#Support ul li {
margin-bottom: 30px;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
}
#Support ul li figure {
width: 26vw;
}
#Support ul li .txtBlock {
padding-left: 1em;
width: 70vw;
}
#Support ul li .txtBlock h3 {
margin-bottom: 20px;
color: #083897;
}
#Support ul li .txtBlock p {
text-align: justify;
}


/* Area
----------------------------------------- */
#Area ul {
margin-right: auto;
margin-left: auto;
width: 90%;
}


/* Request
----------------------------------------- */
#Request .note {
margin-bottom: 30px;
text-align: center;
}
#formTable {
margin-right: auto;
margin-left: auto;
width: 90%;
}
.formTable input {
padding: 0.4em;
background-color: #efefef;
border: 0;
}
.formTable input[type="text"] {
width: 100%;
}
.formTable input[type="radio"] {
margin-left: 0.4em;
}
.formTable textarea {
width: 100%;
padding: 0.4em;
background-color: #efefef;
border: 0;
}
#formTable h3 {
padding-top: 40px;
padding-bottom: 50px;
text-align: center;
}
#formTable .alert {
margin-bottom: 40px!important;
padding: 0.8em;
border: 1px solid #ff0000;
}
#formTable p.button a,
#formTable input[type="button"],
#formTable input[type="submit"] {
padding: 0.5em 2em;
background-color: #ffffff;
border: 1px solid #000000;
color: #000000;
}
#formTable p.button {
margin-top: 50px;
text-align: center;
}
#formTable .complet,
#formTable .error {
text-align: center;
}
#formTable .error p {
margin-bottom: 10px;
}
#formTable hr {
margin-top: 20px;
}
#formTable dd {
margin-bottom: 20px;
}






/* footer
----------------------------------------- */
#footer {
margin-top: 100px;
}
#footer .footerWrap {
margin-top: 10px;
margin-right: auto;
margin-left: auto;
width: 90%;
display: block;
}

#footer .copyright {
width: 100%;
font-size: clamp(10px, 3vw, 14px);
text-align: center;
}


/* pageTop
----------------------------------------- */
#pageTop {
position: fixed;
bottom: 20px;
right: 20px;
text-align: center;	
}
#pageTop a {
display: block;
z-index: 999;
width: 54px;
height: 54px;
line-height: 54px;
background: rgba(255,255,255,0.6);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
#pageTop a:hover {
-webkit-opacity: 0.7;
-moz-opacity: 0.7;
opacity: 0.7;
}
#pageTop span {
display: inline-block;
margin: 0 auto 0 auto;
font-size: 1.3rem;
color: #333333;
}
#pageTop .fas {
-moz-text-shadow: 2px 2px 0 #cccccc;	
-webkit-text-shadow: 2px 2px 0 #cccccc;	
text-shadow: 2px 2px 0 #cccccc;	
}