@charset "utf-8";
/* CSS Document */
.bg-img-oneday{
    background: url("../recruit/i/pagetitle-oneweek@2x.jpg") no-repeat center top;
    background-size: cover;
}
/*カードデザイン*/
/*.one-card{
    display: flex;
    flex-direction: column;
    margin: 1rem auto;
    margin-bottom: 1.6%;
    
}*/
.wrapper{
 /*   background-image: linear-gradient(rgba(255,255,255,0.5)  0%, rgba(173, 200, 247,0.2) 20%, rgba(15, 190, 255,0.3) 40%,  rgba(0, 84, 255,0.3) 80%, rgba(205, 51, 51,0.3) 90%, rgba(255,255,255,0.5)  100%);*/
    height: 100%;
}
.bg-line{
    background-repeat: repeat-x;
    background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em;
    background-position: right bottom;

    background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(162,162,162,0)), color-stop(0.1, rgba(162,162,162,0.02)), color-stop(0.5, rgba(162,162,162,1)), color-stop(0.98, rgba(162,162,162,0)), to(rgba(162,162,162,0)) );
    background-image:
            -webkit-radial-gradient(center center,0.2em 0.1em,rgba(162,162,162,1) 0,rgba(162,162,162,0) 0.1em,rgba(162,162,162,0) 0.2em),
            -webkit-radial-gradient(center center,0.4em 0.1em,rgba(162,162,162,1) 0,rgba(162,162,162,0) 0.3em,rgba(162,162,162,0) 0.4em),
            -webkit-radial-gradient(center center,0.7em 0.1em,rgba(162,162,162,1) 0,rgba(162,162,162,0) 0.6em,rgba(162,162,162,0) 0.7em),
            -webkit-radial-gradient(center center,7.1em 0.1em,rgba(162,162,162,1) 0,rgba(162,162,162,0) 7em,rgba(162,162,162,0) 7.1em);
    background-image:
            radial-gradient(0.2em 0.1em at center center,rgba(162,162,162,1),rgba(162,162,162,0)),
            radial-gradient(0.4em 0.1em at center center,rgba(162,162,162,1),rgba(162,162,162,0)),
            radial-gradient(0.7em 0.1em at center center,rgba(162,162,162,1),rgba(162,162,162,0)),
            radial-gradient(7.1em 0.1em at center center,rgba(162,162,162,1),rgba(162,162,162,0));
}

.oneday-card {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.6%;
  background: #fff;
  line-height: 1.4;
  font-family: sans-serif;
  border-radius: 5px;
  overflow: hidden;
  z-index: 0;
}
.oneday-card a {
  color: inherit;
}

/* ホバー可能な環境だけに適用 */
@media (hover: hover) and (pointer: fine) {
	.oneday-card a:hover {
	  color: #EE7E00;
	}
	.oneday-card:hover .photo {
	  transform: scale(1.3) rotate(3deg);
	}
}

.oneday-card .meta {
  position: relative;
  z-index: 0;
  height: 200px;
}
.oneday-card .photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s;
}
.oneday-card .details,
.oneday-card .details ul {
  margin: auto;
  padding: 0;
  list-style: none;
}
.oneday-card .details {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  transition: left 0.2s;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 10px;
  width: 100%;
  font-size: 0.9rem;
}
.oneday-card .details li span {
  text-decoration: dotted underline;
}
.oneday-card .details .wfo:before {
  font-family: "Font Awesome 5 Free";
  font-weight: Regular;
  margin-right: 10px;
  content: "\f1ad";
}
.oneday-card .details .date:before {
  font-family: "Font Awesome 5 Free";
  font-weight: Regular;
  margin-right: 10px;
  content: "\f017";
}
.oneday-card .details .wfh:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 10px;
  content: "\f015";
}
.oneday-card .details .tags li {
  margin-right: 2px;
}
.oneday-card .details .tags li:first-child {
  margin-left: -4px;
}
.oneday-card .description {
  padding: 1rem;
  background: #fff;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}
.oneday-card .description h3,
.oneday-card .description h4 {
  font-family: Poppins, sans-serif;
}
.oneday-card .description h3 {
  line-height: 1;
  margin: 0;
  font-size: 1.7rem;
}
.oneday-card .description h4 {
  font-size: 1rem;
  font-weight: 300;
  text-transform: uppercase;
  color: #EE7E00;
  margin-top: 5px;
}
.oneday-card .description .read-more {
  text-align: right;
}
.oneday-card .description .read-more a {
/*  color: #EE7E00;
  display: inline-block;
  position: relative;*/
}
.oneday-card .description .read-more a:after {
  /*font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  opacity: 1;
  transition: 0.3s, opacity 0.3s;
  height: 0;
  top: 0;
  left: -2rem;*/
}
.oneday-card .description .read-more a:hover:after {
  /*left:-1rem;
  opacity: 1;*/
}
.oneday-card p {
  position: relative;
  margin: 1rem 0 0;
  display: block;
}
.oneday-card p:first-of-type {
  margin-top: 1.25rem;
}
.oneday-card p:first-of-type:before {
  content: "";
  position: absolute;
  height: 5px;
  background: #85aebd;
  width: 35px;
  top: -0.75rem;
  border-radius: 3px;
}
.oneday-card:hover .details {
  left: 0%;
}
/*曜日*/
.youbi-wrap{
	position: relative;
    display: flex;
    flex-direction: column;
	margin-left: auto;
	margin-right: auto;
}
p.youbi{
    font-family: 'craftmincho',sans-serif;
	color: #a2a2a2;
	font-size: 3rem;
	position: absolute;
	right:0;
	bottom:-450px;
}
/*土日*/
.we{
    font-family: 'craftmincho',sans-serif;
	font-size: 28px;
	color: #ccc;
	display: block;
	height: 100px;
	text-align: center;
	max-width: 700px;
	padding-top: 2.5rem;
	white-space: nowrap;
	transform: rotate(-6deg);
}
.max-width-line .youbi:nth-last-of-type(2){
	color: #ccc;
	bottom:0px;
}
.we:before {
  font-family: "Font Awesome 5 Free";
  font-weight: Regular;
  margin-right: 10px;
  content: "\f585";
  color: #ccc;
}


.do{
	color: rgba(133,174,189,0.8) !important;

}

.nichi{
	color: rgba(238,126,0,0.4) !important;
}

/*アルファベット曜日*/
#card1 .description::after{
	font-family: 'Kranky',sans-serif;
	content: 'Mon';
	position: absolute;
	bottom: 3px;
	right: 3px ;
	font-size: 5rem;
	color: rgba(133,174,189,0.3);
	z-index: -1;
	white-space: nowrap;
	transform: rotate(-30deg);
}

#card2 .description::after{
	font-family: 'Kranky',sans-serif;
	content: 'Tue';
	position: absolute;
	bottom: 3px;
	right: 3px ;
	font-size: 5rem;
	color: rgba(133,174,189,0.3); 
	z-index: -1;
	white-space: nowrap;
	transform: rotate(-30deg);
}

#card3 .description::after{
	font-family: 'Kranky',sans-serif;
	content: 'Wed';
	position: absolute;
	bottom: 3px;
	right: 3px ;
	font-size: 5rem;
	color: rgba(133,174,189,0.3); 
	z-index: -1;
	white-space: nowrap;
	transform: rotate(-30deg);
}

#card4 .description::after{
	font-family: 'Kranky',sans-serif;
	content: 'Thu';
	position: absolute;
	bottom: 3px;
	right: 3px ;
	font-size: 5rem;
	color: rgba(133,174,189,0.3); 
	z-index: -1;
	white-space: nowrap;
	transform: rotate(-30deg);
}

#card5 .description::after{
	font-family: 'Kranky',sans-serif;
	content: 'Fri';
	position: absolute;
	bottom: 3px;
	right: 3px ;
	font-size: 5rem;
	color: rgba(133,174,189,0.3);
	z-index: -1;
	white-space: nowrap;
	transform: rotate(-30deg);
}

/*くるくる*/
.wrap{
    position: relative;

}
#card1,#card2,#card3,#card4,#card5/*,#card6,#card7,#card8,#card9,#card10,#card11,#card12,#card13*/{
  margin:3rem auto auto auto;
  transform-style: preserve-3d;
  transition: transform .8s;
}

.card-front, .card-back{
  margin: auto;
    top: 0;
    left: 0;
    right: 0;
  backface-visibility: hidden;
}

.card-front{
  transform: rotateY(180deg);
}

.card-back{
position: absolute;
    /* top: 0;
    left: 0;
    right: 0;*/
}

.turnover{
  transform: rotateY(180deg)
}
/*くるくるここまで*/

/*ボタン*/
button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  margin-top: 1rem;
}
button.learn-more {
  width: 12rem;
  height: auto;
}
button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 2rem;
  height: 2rem;
  background: #EE7E00;
  border-radius: 1.625rem;
}
button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.25rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
button.learn-more .button-text {
　font-size: 0.9rem;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.3rem 0;
  margin: 0 0 0 1rem;
  color: #EE7E00;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
	button:hover .circle {
	  width: 100%;
	}
	button:hover .circle .icon.arrow {
	  background: #fff;
	  transform: translate(1rem, 0);
	}
	button:hover .button-text {
	  color: #fff;
	}
}
/*ボタンここまで*/
/*arrow*/
div#card1::after,div#card2::after,div#card3::after,div#card4::after,div#card5::after/*,div#card6::after,
div#card7::after,div#card8::after,div#card9::after,div#card10::after,div#card11::after,div#card12::after*/{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f107";
	color: #fff;
	font-size: 3rem;
	display: block;
	text-align:center;
    margin-top: 3rem;
	opacity: 0;
}

div#card9::after{
    margin-top: 4rem;
}


/*div#card1::after,div#card2::after,div#card3::after,div#card4::after,div#card5::after,div#card6::after,
div#card7::after{
    color: #7ddbde;
}*/
div#card1::after,div#card2::after,div#card3::after,div#card4::after{
    /*color: #85aebd;*/
    /*color: #EE7E00;*/
}
div#card5::after,div#card6::after,div#card7::after{
    /*color: #85aebd;*/
    /*color: #81b6c9;*/
}

div#card8::after,div#card9::after,div#card10::after,div#card11::after{
    color: #5373b5;
}
div#card12::after{
    color:#b37979;
}

/* ホバーできない環境ではアニメーション無効化 */
@media (hover: none), (pointer: coarse) {
  a:hover, button:hover{
    transition: none;
    transform: none;
  }
  .oneday-card .details {
    transition: none;
    left: 100;
	display: none;
    pointer-events: none;
  }

}
/*tablet*/
@media (max-width: 1068px) {

}

@media (max-width: 869px) {


}
/*mobile*/
@media(max-width: 768px) {
	.max-width-line{
		width: 96%;
	}
		.h1, h1 {
			font-size: calc(0.9rem + 1.5vw);
		}
}

@media (min-width: 640px) {
/*カードの設定*/
  .oneday-card {
    flex-direction: row;
    max-width: 700px;
    height: 300px;
  }
  .oneday-card .meta {
    flex-basis: 85%;
    height: auto;
  }
  .oneday-card .description {
    flex-basis: 60%;
  }
  .oneday-card .description:before {
    transform: skewX(-3deg);
    content: "";
    background: #fff;
    width: 30px;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: -1px;
    z-index: -1;
  }
  .oneday-card.alt {
    flex-direction: row-reverse;
  }
  .oneday-card.alt .description:before {
    left: inherit;
    right: -10px;
    transform: skew(3deg);
  }
  .oneday-card.alt .details {
    padding-left: 25px;
  }
/*曜日位置設定*/
	.youbi-wrap{
    max-width: 700px;	
	}
}

@media (max-width: 639px) {
/*曜日位置設定*/
	.youbi-wrap{
		position: relative;
	}
	p.youbi{
		position: absolute;
		bottom: -560px;
	}
/*土日*/
	.we{
		height: 200px;
	}

}
@media (max-width: 361px) {
/*水・金位置調整*/
	.youbi-wrap{
		position: relative;
	}
	p.sui, p.moku,  p.kin{
		position: absolute;
		bottom: -600px;
	}

}