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

#info {
 width: 90%;
 margin-top: 60px;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 100px;
 display: flex;
 flex-wrap: wrap;
 background-color: #1b1464;
}
#info h3 {
 width: 300px;
 border: 1px solid #1b1464;
 font-display: 22px;
 line-height: 40px;
 color: #FFFFFF;
 text-align: center;
 padding: 10px 0;
}
#info a{
 color: #1b1464;
 text-decoration: none;
 display: block;
}
#info .come{
 width: calc(100% - 304px);
 border: 1px solid #1b1464;
 background-color: #fff;
 line-height: 40px;
}
#info .come .date{
 display: inline-block;
 vertical-align: middle;
 padding: 10px 15px;
}
#info .come .txt{
 display: inline-block;
 vertical-align: middle;
 padding: 10px 15px;
}#about {
 margin: 0 auto 100px;
 width: 90%;
 max-width: 1200px;
 position: relative;
}
#about .photo {
 width: 55%;
 position: relative;
 margin: 0 0 0 auto;
 right: -5%;
}
#about .photo img {
 width: 100%;
 height: auto;
}
#about .box {
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 53%;
}
#about .box h3 {
 padding-bottom: 0px;
 font-size: 20px;
 line-height: 1.6em;
}
#about .box .josefin {
	font-size: 55px;
	line-height: 1.2em;
	padding-bottom: 30px;
	font-weight: 300;
	font-style: italic;
}
#about .box h4 {
 font-size: 30px;
 line-height: 1.6em;
}
#about .box .link {
 text-align: left;
 padding-top: 30px;
}
#movie {
	margin: 0 auto 100px;
	width: 90%;
	max-width: 1200px;
	position: relative;
	text-align: center;
}
#movie .box {
 width: 48%;
 float: none;
 aspect-ratio: 16 / 9;
 margin-right: auto;
	margin-left: auto;
}
#movie .box:nth-of-type(2n) {
 margin-right: 0px;
}

#movie .box iframe {
  width: 100%;
  height: 100%;
}
#service {
 background-color: #FFFFFF;
 padding-top: 120px;
}
#service .inner1200 .title   {
 width: 33%;
 float: left;
 font-size: 20px;
 line-height: 1.6em;
}
#service .inner1200 .title h3 {
 padding-bottom: 0px;
}
#service .inner1200 .link {
 text-align: right;
 padding-top: 30px;
 padding-bottom: 30px;
}
#service .inner .title {
 border-top: 1px solid #d8d8d8;
 border-bottom: 1px solid #d8d8d8;
 text-align: center;
 font-size: 27px;
 line-height: 1.2em;
 padding-top: 15px;
 padding-bottom: 15px;
}
#service .inner1200 .title .josefin {
	font-size: 55px;
	line-height: 1.6em;
	font-weight: 300;
	font-style: italic;
}

.photo3line {
 display: flex;
 flex-wrap: wrap;
}

.photo3line .box{ 
 width: calc((100% - 2px - 9%) / 3);
 border-right: 1px solid #d8d8d8;
 padding: 20px 1.5%;
 position: relative;
}
.photo3line .box:nth-of-type(3n){
 border-right: none;
}
.photo3line .box a{
 display: block;
 position: relative;
}
.photo3line .photo{
 width: 100%;
 aspect-ratio: 6 / 4;
 overflow: hidden;
 border-radius: 10px;
 padding-bottom: 0;
}
.photo3line .photo img{
 width: 100%;
 height: 100%;
  object-fit: fill; 
 object-position: 50% 50%;
 transition: 0.2s;
}
.photo3line a:hover .photo img{
 width: 104%;
 height: 104%;
  -ms-filter: blur(6px);
  filter: blur(6px);
}
.photo3line .come{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 text-align: center;
 background-color: rgba(0,0,0,0.30);
 border-radius: 10px;
}
.photo3line .come h5{
position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 font-size: 30px;
 line-height: 1em;
}
.photo3line .come h5 .josefin{
	display: block;
	font-size: 51px;
	line-height: 1em;
	font-weight: 300;
	font-style: italic;
}
.photo3line .img{
 position: absolute;
 right:15px;
 bottom: 15px;
 padding-bottom: 0;
}
.photo3line a{
 color: #fff;
 text-decoration: none;
}

.photo4line {
 display: flex;
 flex-wrap: wrap;
 border-bottom: 1px solid #d8d8d8;
}

.photo4line .box{ 
 width: calc((100% - 2px - 9%) / 3);
 border-right: 1px solid #d8d8d8;
 padding: 20px 1.5%;
 position: relative;
}
.photo4line .box:nth-of-type(3n){
 border-right: none;
}
.photo4line .box a{
 display: block;
 position: relative;
 color: #1b1464;
 text-decoration: none;
}
.photo4line .box01{
 position: relative;
}
.photo4line .photo{
 width: 100%;
 aspect-ratio: 6 / 4;
 overflow: hidden;
 border-radius: 10px;
 padding-bottom: 0;
}
.photo4line .photo img{
 width: 100%;
 height: 100%;
  object-fit: fill; 
 object-position: 50% 50%;
 transition: 0.2s;
}
.photo4line a:hover .photo img{
 width: 104%;
 height: 104%;
  -ms-filter: blur(6px);
  filter: blur(6px);
}
.photo4line .come{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 text-align: center;
 background-color: rgba(0,0,0,0.30);
 border-radius: 10px;
}
.photo4line .come h5{
position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 font-size: 30px;
 line-height: 1em;
}
.photo4line .come h5 .josefin{
	display: block;
	font-size: 51px;
	line-height: 1em;
	font-weight: 300;
	font-style: italic;
}
.photo4line .img{
 position: absolute;
 right:0px;
 bottom: 0px;
 padding-bottom: 0;
}
.photo4line a .come{
 color: #fff;
 text-decoration: none;
}
.photo4line .txt{
 font-size: 13px;
 line-height: 1.6em;
 padding-top: 10px;
 padding-bottom: 50px;
 position: relative；
}
#product {
 width: 90%;
 margin-top: 60px;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 100px;
}
#product .inner1200 .itemlink {
 width: 63%;
 float: right;
}

#product .inner1200 .box01   {
 width: 32%;
 float: left;
}
#product .inner1200 .title h3 {
 padding-bottom: 0px;
 line-height: 1.6em;
 font-size: 20px;
}
#product .inner1200 .link {
 text-align: right;
 padding-top: 30px;
 padding-bottom: 30px;
}
#product .inner1200 .title .josefin {
	font-size: 55px;
	line-height: 1.6em;
	font-weight: 300;
	font-style: italic;
}
.itemlink {
 display: flex;
 flex-wrap: wrap;
}
.itemlink .box{
 background-color: #FFFFFF; 
 position: relative;
 border: 1px solid #1b1464;
 width: calc((100% - 6px - 4%) / 2);
 margin-right: 4%;
 letter-spacing: -1em;
 margin-bottom: 35px;
}
.itemlink .box:nth-of-type(2n){
 margin-right: 0;
}
.itemlink .box:before{
 content: " ";
 visibility: visible;
 width: 5px;
 height: 100%;
 position: absolute;
 background-color: #1b1464;
}
.itemlink .box:after{
 content: " ";
 visibility: visible;
 position: absolute;
 width: 8px;
 height: 12px;
 background-image: url(../img/arrow03.png); 
 right: 15px;
 top: 50%;
 transform: translateY(-50%);
}
.itemlink .box .photo{
 display: inline-block;
 vertical-align: middle;
 padding-left: 20px;
 padding-top: 7px;
 padding-bottom: 7px;
 width: 35%;
}
.itemlink .box .photo img{
 width: 100%;
 height: auto;
}
.itemlink .box .come{
 display: inline-block;
 vertical-align: middle;
 padding-left: 10px;
 letter-spacing: 0;
 padding-bottom: 0;
}
.itemlink .box a{
 display: block;
 color: #1b1464;
 text-decoration: none;
}
.itemlink .box a:hover{
 opacity: 0.8;
}
#recruit {
 margin-bottom: 140px;
 position: relative;

}
#recruit .photo {
 width: 56%;
}
#recruit .photo img {
 width: 100%;
 height: auto;
 padding-bottom: 20px;
}

#recruit .box {
 width: 58%;
 height: 100%;
 top: 20px;
 right: 0;
 background-color: #1b1464;
 color: #FFF;
 position: absolute;
 clip-path: polygon(24% 0, 100% 0, 100% 100%,0 100%);
}
#recruit .box .inner {
 width: 30vw;
 left: 26%;
 top: 50%;
 transform: translateY(-50%);
 position: absolute;
}

#recruit .box h3 {
 padding-bottom: 0px;
 line-height: 1.6em;
 font-size: 20px;
}
#recruit .box .josefin {
	font-size: 55px;
	line-height: 1.6em;
	font-weight: 300;
	font-style: italic;
}

.link_blank {
 padding-bottom: 0px;
 margin-top: 20px;
 margin-bottom: 10px;
 text-align: left;
}
.link_blank a {
 padding: 10px 50px 10px 50px;
 display: inline-block;
 color: #1B1464;
 text-decoration: none;
 background-color: #FFF;
 text-align: center;
 position: relative;
 border-radius: 50px;
 min-width: 150px;
 transition: 0.2s;
}

.link_blank a:after {
 content: " ";
 visibility: visible;
 background-image: url(../img/outer.png);
 width: 16px;
 height: 16px;
 position: absolute;
 right: 20px;
 top: 50%;
 transform: translateY(-50%);
 transition: 0.2s;
}
.link_blank a:hover {
 opacity: 0.8;
}

.link_blank a:hover:after {
 right: 18px;
}

#contact {
 margin-bottom: 140px;
 position: relative;
width: 100%;
}
#contact .title {
 width: 48%;
 height: calc(100% - 20px);
 position: absolute;
 clip-path: polygon(0 0, 100% 0, 69% 100%,0 100%);
 background-color: #ff0000;
 color: #FFFFFF;
 top: -20px;
 left: 0;
 background-image: url(../../img/photo10.png);
 background-size: cover;
 background-position: center center;
}
#contact .photo img {
 width: 100%;
 height: auto;
 padding-bottom: 20px;
 top: 0;
 left: 0;
}

#contact .box {
 width: 67%;
 margin: 20px 0 0 auto;
 padding: 50px 0 40px;
 background-color: #FFF;
 color: #1b1464;
 position: relative;
 clip-path: polygon(23% 0, 100% 0, 100% 100%,0 100%);
 text-align: center;
}
#contact .box .inner {
 width: 40vw;
 padding-left: 26%;
}
#contact .box h4 {
 text-align: center;
 padding-bottom: 0px;
 font-size: 30px;
 line-height: 1.2em;
}
#contact .box table {
 width: 100%;
 margin-top: 10px;
 margin-bottom: 50px;
 border-top: 1px solid #b7b7b7;
}
#contact .box th {
 padding: 10px 6px;
 border-bottom: 1px solid #b7b7b7;
 text-align: left;
}

#contact .box td {
 padding: 10px 6px;
 border-bottom: 1px solid #b7b7b7;
 color: #ff0000;
 font-size: 30px;
 width: 200px;
}
#contact .title h3 {
 padding-bottom: 0px;
 line-height: 1.6em;
 font-size: 20px;
 position: absolute;
 top: 40%;
 left: 40%;
 transform: translateX(-50%) translateY(-50%);
}
#contact .title .josefin {
 font-size: 55px;
 line-height: 1.6em;
 display: block;
}
.link_mail {
 display: inline-block;
}
.link_mail a{
    background-color: #ff0000;
    color: #fff;
    padding: 8px 15px;
    border-radius: 50px;
    transition: 0.2s;
    margin-left: 10px;
    text-decoration: none;
}

.link_mail a:hover{
    background-color: #1B1464;
    color: #fff;
    padding: 8px 15px;
    border-radius: 80px;
}
.link_mail a:before {
    content: " ";
    visibility: visible;
    background-image: url(../img/mail.png);
    width: 20px;
    height: 14px;
    background-size: 20px auto;
    display: inline-block;
    margin-right: 10px;
}
.link_mail a:after {
    content: " ";
    visibility: visible;
    background-image: url(../img/arrow.png);
    width: 6px;
    height: 12px;
    background-size: 6px auto;
    display: inline-block;
    margin-left: 15px;
}
#news {
 width: 90%;
 margin: 0 auto;
 max-width: 1200px;
 position: relative;
 padding-bottom: 120px;
}
#news .title h3 {
 padding-bottom: 40px;
 line-height: 1.6em;
 font-size: 20px;
}
#news .title .josefin {
	font-size: 50px;
	line-height: 1.6em;
	display: block;
	font-weight: 300;
	font-style: italic;
}
#news .box a{
 color: #333;
 text-decoration: none;
}
#news .date{
 padding-bottom: 0;
}
#news .box{
 border-bottom: 1px solid #b7b7b7;
 padding-bottom: 4px;
 margin-bottom: 10px;
}
#news .link{
 padding-top: 40px;
 padding-bottom: 40px;
 text-align: right;
}
.news_pro {
 width: 45%;
 float: left;
}
.news_pro .title , .news_pro .date{
 color: #1b1464;
}
.news_pro .link a{	
 background-color: #1b1464;
}
.news_pro .link a:hover{	
 background-color: #FF0000;
}
.news_pro .link a:after{
	background-image: url(../img/link03.png);
}
.news_pro .link a:hover:after{
	background-image: url(../img/link02.png);
}
.news_news {
 width: 45%;
 float: right;
}
.news_news .title , .news_news .date{
 color: #FF0000;
}

#area {
 width: 90%;
 margin: 0 auto;
 max-width: 1200px;
 position: relative;
margin-bottom: 120px;
}
#area .title h3 {
 padding-bottom:10px;
 line-height: 1.6em;
 font-size: 20px;
}
#area .title .josefin {
	font-size: 50px;
	line-height: 1.6em;
	display: block;
	font-weight: 300;
	font-style: italic;
}
#area h4{
	font-size: 22px;
	line-height: 1.6em;
}
.areabox .box{
	width: 36%;
	float: left;
}
.areabox .link{
text-align: left;
	padding-top: 20px;
}
.areabox .gmap{
	width: 58%;
	float: right;
}
.areabox .gmap iframe{
	width: 100%;
 aspect-ratio: 7 / 4;
}
.swiper-pagination{
 bottom: -30px!important;
 position: absolute!important;
 z-index: 1000!important;
}
.swiper-pagination-bullet{
 width: 60px!important;
 height: 3px!important;
 border-radius: 0!important;
}
.swiper-pagination-bullet-active{
 background-color: #1b1464!important;
}
.swiper-navi{
 position: absolute;
 top: 50%!important;
 left: 50%!important;
 transform: translateX(-50%) translateY(-50%)!important;
 width: 100%!important;
 height: 100px!important;
}
.swiper-button-prev{
 background-image: url(../img/back.png)!important;
 width: 50px!important;
 height: 100px!important;
 left: -70px!important;
}
.swiper-button-next{
 background-image: url(../img/next.png)!important;
 width: 50px!important;
 height: 100px!important;
 right: -70px!important;
}