@charset "UTF-8";


html {
    font-size: 62.5%;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.recruit {
	
	-webkit-text-size-adjust: 100%;
	color: #000;
	animation: fadeIn 1.5s ease 0s 1 forwards;
	background:#0061CC;
	box-sizing:border-box;
	line-height:1.8em;
	font-size:1.8rem;
	font-family: "Noto Sans JP", Arial, sans-serif;
	letter-spacing:.03em;
	background-image: url(../images/splash1.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	position:relative;
	z-index:1;
}


main{background:#fff;margin:auto;overflow: hidden;}


/*recruit用打消し ここから*/
.recruit h1, .recruit h2, .recruit h3, .recruit h4, .recruit h5{padding:0;margin:0;background:none;border:0;min-height:auto;}
.recruit a{transition:all .3s ease-out;cursor: pointer;}
.recruit a:hover{text-decoration: none;}
/*recruit用打消し ここまで*/


.recruit img{width:100%;}
.container{max-width:640px;margin:auto;padding:70px 0;}
.btn_entry:link{color:#fff;background: linear-gradient(162deg,rgba(141, 215, 244, 1) 0%, rgba(0, 155, 223, 1) 100%);border-radius:30px;font-weight:700;display: block;text-align: center;}
.btn_entry:hover{background: linear-gradient(319deg,rgba(166, 230, 255, 1) 0%, rgba(48, 193, 255, 1) 100%);border-radius:10px;color:#fff;}
.btn_entry:visited{color:#fff;}


header{background:#fff;padding:25px 20px;z-index:97;position: fixed;width:100%;}
header .wrap{display:flex;justify-content: space-between;align-items: center;position: relative;padding-right:100px;}
header .logo{display:block;}
header .logo:hover{opacity:.6;}
header .logo img{max-width:185px;}
header .btn_entry{padding:10px 25px;font-size:2rem;}
header nav{
	width: 420px;
	height: 100vh;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	color: #fff;
	background:#009BDF;
	transition: .3s;
	position: fixed;
	right: -100%;
	top:0;
	padding:90px 50px;
	font-weight:700;
	z-index:98;
  }
header nav p{font-size:2.8rem;margin-bottom:35px;}
header nav p a:link, header nav ul li a:visited, header nav ul li a:link, header nav ul li a:visited, header nav p a:visited {color:#fff;}
#Organization .links ul li a:visited, #Top .people ul li a:visited, #Top h2 a:visited, #Top .organization ul li a:visited{color:#0061CC;}
header nav p a:hover{color:#c6efff;}
header nav ul li{font-size:2.1rem;font-weight:700;margin-bottom:20px;}
header nav ul li:last-child{margin-bottom:40px;}
header nav ul li a{display: inline-block;vertical-align: middle;position: relative;padding-left:32px;line-height:1.2em;}
header nav ul li a::before{position:absolute;content:"";width:22px;height:2px;background:#fff;left:0;top:50%;transform: translateY(-50%);transition:all .3s ease-out;}
header nav ul li a span{position: relative;padding-right:30px;}
header nav ul li a span::before{position: absolute;content:"";width:22px;height:22px;border-radius:50%;border:2px solid #fff;top:50%;right:-0;transform: translateY(-48%);transition:all .3s ease-out;}
header nav ul li a span::after{position: absolute;content:"";background: url(../images/arrow.png) no-repeat center center / cover;width:12px;height:9px;top:50%;right:5px;transform: translateY(-48%);}
header nav ul li a:hover{padding-left:42px;color:#fff;}
header nav ul li a:hover::before{width:32px;}
header nav ul li a:hover span::before{background:#fff;}
header nav ul li a:hover span::after{filter: brightness(0) saturate(100%) invert(54%) sepia(65%) saturate(4073%) hue-rotate(168deg) brightness(93%) contrast(101%);}
header nav .btn:link{font-size:2.2rem;text-align: center;color:#009BDF;background:#fff;border:2px solid #fff;padding:15px;border-radius:30px;display: block;}
header nav .btn:visited{color:#009BDF;}
header nav .btn:hover{background: #009BDF;color:#fff;border-radius:10px;}
header button{position:absolute;top:50%;right:10px;width: 60px;height: 48px;z-index: 10;transform: translateY(-50%);z-index: 99;}
header .btn-line {display: block;position: relative;width: 100%;height: 5px;background: #00418D;transition: .2s;}
header .btn-line::before, header .btn-line::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #00418D;
  transition: .5s;
}
header .btn-line::before {transform: translateY(-18px);}
header .btn-line::after {transform: translateY(18px);}
/*メニューオープン時*/
header nav.open {right: 0;}
header .btn-line.open {background-color: transparent;}
header .btn-line.open::before, header .btn-line.open::after {content: "";background: #fff; transition: .2s;}
header .btn-line.open::before {transform: rotate(45deg);}
header .btn-line.open::after {transform: rotate(-45deg);}

.obi-catch{margin-top:40px;}
.obi-catch .bg{position: relative;display: inline-block;margin-top: 10px;}
.obi-catch.anime.show .bg::before {animation: bg 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;background: #0061CC;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform-origin: left center;}
.obi-catch .bg .inn {color: #fff;display: inline-block;font-size: 3.6rem;;font-weight: 700;padding: 10px 15px 15px;position: relative;z-index: 1;}
@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}
#Top h2, #Organization h1, #Discussion h1, #People h1{color:#0061CC;font-size:4.6rem;font-weight:700;line-height:1.4em;margin-bottom:40px;}
.mark span{position: relative;padding-left:50px;}
.mark span::before{position: absolute;content:"";background: url(../images/mark1.png) no-repeat center center / cover;width:43px;height:36px;top:50%;left:0;transform: translateY(-45%);}


/*Top*/
#Top .mainvisual{position: relative;}
#Top .mainvisual h1{position: absolute;left:0;bottom:235px; transition: color 0ms 450ms;}
#Top #rinen{background: linear-gradient(170deg,rgba(0, 96, 203, 1) 0%, rgba(127, 211, 238, 1) 45%, rgba(255, 255, 255, 1) 75%);}
#Top #rinen h3{color:#fff;font-size:2.8rem;position: relative;font-weight:700;margin-bottom:75px;}
#Top #rinen h3::before{position: absolute;content:"";height:2px;width:calc(100% - 4.8em);right:0;top:50%;transform: translateY(-50%);background:#fff;}
#Top #rinen h2 img{max-width:382px;}
#Top #rinen .splash{margin:-120px -50px 60px}
#Top h2 a:link{display: inline-block;position:relative;padding-right:52px;color:#0061CC;}
#Top h2 a::before{position: absolute;content:"";width:48px;height:48px;border-radius:50%;border:2px solid #0061CC;top:50%;right:-12px;transform: translateY(-48%);transition:all .3s ease-out;}
#Top h2 a::after{position: absolute;content:"";background: url(../images/arrow.png) no-repeat center center / cover;width:24px;height:20px;top:50%;right:0;transform: translateY(-48%);filter: brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(5192%) hue-rotate(203deg) brightness(97%) contrast(101%);}
#Top h2 a:hover{padding-right:48px;color:#0061CC}
#Top h2 a:hover::before{background: #0061CC;}
#Top h2 a:hover::after{filter: none;}
#Top #topmessage{position: relative;padding-bottom:30px;}
#Top #topmessage::before{position: absolute;content:"";background: url(../images/splash3.png) no-repeat center center / cover;width:367px;height:400px;top:0;right:0;}
#Top #topmessage::after{position: absolute;content:"";background: url(../images/splash4.png) no-repeat center center / cover;width:629px;height:468px;bottom:0;left:0;}
#Top #topmessage .president{position: relative;margin-bottom:110px;}
#Top #topmessage .president figure{margin-right:-60px;text-align: right;}
#Top #topmessage .president figure img{max-width:600px;}
#Top #topmessage .president .name{background: url(../images/president_name.png) no-repeat center center / cover;width:530px;height:120px;position: absolute;z-index:2;left:-60px;bottom:-60px;padding:0 60px;color:#fff;
display: flex;flex-direction: column;justify-content: center;}
#Top #topmessage .president .name p{font-size:2.1rem;font-weight:500;}
#Top #topmessage .president .name h3{font-size:3.6rem;font-weight:700;line-height:1.5em;color:#fff;}
#Top #topmessage .message{position: relative;z-index:1;}
#Top #recruiter{background: linear-gradient(180deg,rgba(242, 252, 255, 1) 0%, rgba(207, 237, 255, 1) 100%);padding-bottom:30px;}
#Top .organization h3{font-size:2.8rem;font-weight:700;color:#0061CC;border-bottom:5px solid #B4B4B4;position: relative;padding-bottom:15px;margin-top:60px;}
#Top .organization h3::before{position:absolute;content:"";background: #0061CC;height:5px;width:32%;left:0;bottom:-5px;}
#Top .organization ul li{border-bottom:1px solid #0061CC;font-size:2.4rem;font-weight:700;}
#Top .organization ul li a{padding:15px 0;display: block;position: relative;color:#0061CC;}
#Top .organization ul li a::before{position: absolute;content:"";width:30px;height:30px;border-radius:50%;top:50%;right:0;transform: translateY(-50%);transition:all .3s ease-out;background: #0061CC;}
#Top .organization ul li a::after{position: absolute;content:"";background: url(../images/arrow.png) no-repeat center center / cover;width:16px;height:13px;top:50%;right:6px;transform: translateY(-49%);}
#Top .organization ul li a:hover{color:#B4B4B4;}
#Top .organization ul li a:hover::before{background: #B4B4B4;}
#Top .organization ul.jigyou li p{text-align: right;}
#Top .organization ul.jigyou li p a:link{border-top:1px dashed #0061CC;width:66%;display: inline-block;text-align: left;}
#Top .people{background: #0061CC;}
#Top .people h2 a:link, #Top .people h2 a:link:hover, #Top .people h2 a:visited{color:#fff;}
#Top .people h2 a::before{border-color:#fff;}
#Top .people h2 a::after{filter: none;}
#Top .people h2 a:hover::before{background: #fff;}
#Top .people h2 a:hover::after{filter: brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(5192%) hue-rotate(203deg) brightness(97%) contrast(101%);}
#Top .people ul li{background:#fff;border-radius:20px;position: relative;margin-bottom:25px;display: flex;justify-content: space-between;align-items:flex-start;padding:40px;flex-wrap: wrap;}
#Top .people ul li::before{position: absolute;content:"";background: url(../images/people_shape.png) no-repeat center center / cover;width:300px;height:80px;top:35px;left:0;}
#Top .people ul li div{position: relative;z-index: 1;}
#Top .people ul li .text{width:51%;}
#Top .people ul li .num{font-family: "din-2014", sans-serif;font-style: normal;font-size:8rem;color:#0061CC;line-height: .8em;}
#Top .people ul li .num span{font-size:6rem;vertical-align: top;line-height: 1em;}
#Top .people ul li .busho{font-size:2rem;color:#0061CC;margin:50px 0 10px;line-height:1.4em;}
#Top .people ul li .name{font-weight:700;color:#0061CC;font-size:3.6rem;}
#Top .people ul li .name span{font-size:2.2rem;}
#Top .people ul li img{width:48%;}
#Top .people ul li .copy{font-size:2.2rem;margin-top:25px;font-weight:700;width:57%;}
#Top .people ul li a:link{color:#0061CC;display: block;padding:10px;border-radius:30px;border:2px solid #0061CC;text-align: center;font-size:2.2rem;font-weight:700;width:220px;margin-top: auto;}
#Top .people ul li a:hover{background:#c6efff;}
#Top .discussion{background: linear-gradient(132deg,rgba(238, 250, 254, 1) 0%, rgba(191, 237, 255, 1) 100%);}
#Top .discussion h2 span, #Discussion h1 span{position: relative;padding-left:68px;}
#Top .discussion h2 span::before, #Discussion h1 span::before{position: absolute;content:"";background: url(../images/mark2.png) no-repeat center center / cover;width:49px;height:80px;top:50%;left:0;transform: translateY(-50%);}
#Top #recruitment h2{text-align: center;margin-bottom:30px;}
#Top #recruitment h2+p{text-align: center;font-size:2rem;}
#Top #recruitment table{width:100%;margin:50px 0;border-top:1px solid #B4B4B4;}
#Top #recruitment table th{width:23%;padding:20px;border-bottom:1px solid #B4B4B4;background: #E4F1FF;color:#0061CC;vertical-align: top;text-align: left;font-weight:700;}
#Top #recruitment table td{width:77%;padding:20px 25px;border-bottom:1px solid #B4B4B4;vertical-align: middle;text-align: left;}
#Top #recruitment table td a:link, #People .timeline li p a:link, #Top #recruitment table td a:visited, #People .timeline li p a:visited{color:#0061CC;text-decoration: underline;}
#Top #recruitment table td a:hover, #People .timeline li p a:hover{text-decoration: none;}
#Top #recruitment table ul li{text-indent:-1em;padding-left:1em;}
#Top #recruitment .btn_entry{font-size:2.4rem;padding:15px;max-width:300px;margin:auto;}

/*Topアニメーション*/
.mask-bg {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%, 0);
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
 
@keyframes mask-bg {
  0% {
    transform: translate(101%, 0)
  }
  40%, 60% {
    transform: translate(0%, 0)
  }
  100% {
    transform: translate(-100%, 0)
  }
}
.anime.fadeup{opacity:0;}
.anime.fadeup.show {
  animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) forwards; animation-delay: 0.5s;
}
 
@keyframes fadeup {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.anime.slideR{opacity:0;}
.anime.slideR.show {
  animation: slideR 800ms ease-in-out forwards;
}

@keyframes slideR {
  from { 
    transform: translateX(10%);
    opacity: 0;
  }
  to { 
    transform: translateX(0);
    opacity: 1; 
  }
}
.anime.slideL{opacity:0;}
.anime.slideL.show {
  animation: slideL 800ms ease-in-out forwards;
}

@keyframes slideL {
  from { 
    transform: translateX(-10%);
    opacity: 0;
  }
  to { 
    transform: translateX(0);
    opacity: 1; 
  }
}
.anime.fadein{opacity:0;}
.anime.fadein.show {
  animation: fadeIn 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*部署紹介*/
#Organization section:nth-of-type(even){background: linear-gradient(132deg,rgba(242, 252, 255, 1) 0%, rgba(207, 237, 255, 1) 100%);}
#Organization .links ul{display: flex;justify-content: space-between;flex-wrap:wrap;}
#Organization .links ul li{border-bottom:1px solid #0061CC;font-size:2.4rem;font-weight:700;}
#Organization .links ul li:first-child {border-top:1px solid #0061CC;}
#Organization .links ul li a:link{display: block;position: relative;padding:15px 0;color:#0061CC;}
#Organization .links ul li a::before{position: absolute;content:"";width:30px;height:30px;border-radius:50%;top:50%;right:0;transform:translateY(-50%);transition:all .3s ease-out;background: #0061CC;}
#Organization .links ul li a::after{position: absolute;content:"";background: url(../images/arrow.png) no-repeat center center / cover;width:16px;height:13px;top:26px;right:7px;transform:rotate(90deg);}
#Organization .links ul li a:hover{color: #B4B4B4;}
#Organization .links ul li a:hover::before{background: #B4B4B4;}
#Organization h2{font-size:3.4rem;color:#0061CC;font-weight:700;margin-bottom:20px;line-height:1.3em;}
#Organization h2 span{position: relative;padding-left:48px;line-height:48px;display: inline-block;}
#Organization h2 span::before{position: absolute;content:"";background: url(../images/mark3.png) no-repeat center center / cover;width:37px;height:25px;top:13px;left:0;;}
#Organization h3{font-size:2.8rem;color:#0061CC;font-weight:700;margin:50px 0 20px;line-height:1em;}
#Organization ul.disc{list-style:none;margin:0;padding:0;}
#Organization ul.disc li{position: relative;padding-left:20px;}
#Organization ul.disc li::before{position:absolute;content:"";width:10px;height:10px;background: #0061CC;border-radius:50%;left:0;top:13px;}
#Organization .people_bnr:link{display: flex;align-items:center;background: #0061CC;border-radius:20px;margin-top:60px;padding:15px 35px;position: relative;}
#Organization .people_bnr::before{position: absolute;content:"";width:48px;height:48px;border-radius:50%;border:2px solid #fff;top:50%;right:40px;transform: translateY(-48%);transition:all .3s ease-out;}
#Organization .people_bnr::after{position: absolute;content:"";background: url(../images/arrow.png) no-repeat center center / cover;width:24px;height:20px;top:50%;right:52px;transform: translateY(-48%);filter:none;}
#Organization .people_bnr:hover{filter: drop-shadow(0px 0px 9px rgba(37,61,155,0.6));}
#Organization .people_bnr:hover::before{background: #fff;}
#Organization .people_bnr:hover::after{filter: brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(5192%) hue-rotate(203deg) brightness(97%) contrast(101%);;}
#Organization .people_bnr img{width:22.8%;}
#Organization .people_bnr p{margin-left:5%;color:#fff;font-weight:700;font-size:2.4rem;}
#Organization .people_bnr p span{font-size:3.6rem;}
#Organization h4{text-align: center;margin:60px 0 25px;color: #0061CC;font-weight:700;font-size:3rem;}
#Organization h4 span{position: relative;padding:0 30px;}
#Organization h4 span::before, #Organization h4 span::after{position: absolute;content:"";width:18px;height:33px;background:  url(../images/kazarisen.png) no-repeat center center / cover;top:50%;}
#Organization h4 span::before{left:0;transform: translateY(-45%);}
#Organization h4 span::after{right:0;transform: translateY(-45%) rotate(45deg);}


/*球団職員の一日*/
#People h1{margin-bottom:60px;}
#People .p-box img{max-width:340px;margin:-60px auto 0;display: block;}
#People .p-box h2{font-family: "din-2014", sans-serif;font-style: normal;color:#0061CC;line-height: .8em;font-size:10rem;z-index:1;position: relative;}
#People .p-box h2::before{position: absolute;content:"";background: url(../images/people_shape2.png) no-repeat center center / cover;width:300px;height:120px;top:0;left:-60px;z-index:-1;}
#People .p-box h2 span{vertical-align: top;font-size:7.2rem;line-height: 1em;}
#People .p-box .plate{background:#0061CC;border-radius:0 20px 0 0;padding:15px 35px;color:#fff;font-weight:700;margin-bottom:40px;}
#People .p-box .plate p, #People .p-box .plate h3 .small{font-size:2.2rem;}
#People .p-box .plate h3{font-size:3rem;color:#fff;line-height:1.3em;}
#People .p-box .plate h3 .name{font-size:3.6rem;}
#People .timeline li {display: flex;justify-content: space-between;align-items: flex-start;padding-bottom:30px;}
#People .timeline li time {width:13%;margin-top:30px;position: relative;}
#People .timeline li time::before{content: "";width: 20px;height: 20px;background: #009BDF;position: absolute;right: -11px;top: 8px;border-radius: 50%;z-index: 2;}
#People .timeline li div {width:80%;margin-left:7%;position: relative;background:#F0F7FF;border-radius:16px;padding:30px;}
#People .timeline li div::before {position: absolute;content:"";width:5px;height:calc(100% + 30px);background:#E4E4E4;left:-9%;top:0;}
#People .timeline li:last-child div::before{height:100%;}
#People .timeline li h5{color:#0061CC;font-weight:700;font-size:2.2rem;}
#People .timeline li h5+p{margin-top:20px;}
#People .timeline li img{margin-top:30px;}
#People h4{background:#0061CC;padding:20px 30px;position: relative;line-height:1.3em;color:#fff;font-weight:700;font-size:2.4rem;margin:60px 0 20px;}
#People h4::before{position: absolute;content:"";width:10px;height:100%;background: #009BDF;left:0;top:0;}


/*新入社員座談会*/
#Discussion h1{text-align: center;}
#Discussion h2{background: #0061CC;border-radius:30px 30px 0 0;padding:25px;color:#fff;font-weight:700;font-size:2.6rem;text-align: center;}
#Discussion .container{padding-bottom:0;}
#Discussion .profile li{border-bottom:2px dashed #0061CC;padding:30px 0;}
#Discussion .profile li .flex{display: flex;align-items: center;margin-bottom:25px;}
#Discussion .profile li .flex img{width:100px;}
#Discussion .profile li .flex p{color:#0061CC;font-size:2rem;font-weight:700;margin-left:20px;}
#Discussion .profile li .flex p span{font-size:2.8rem;}
#Discussion .photo{margin:80px 0;position: relative;}
#Discussion .photo ul{position: relative;z-index:1;}
#Discussion .photo ul li:first-child{margin-bottom:20px;text-align: right;}
#Discussion .reed .photo{margin-bottom:0;}
#Discussion .reed .photo::before{position: absolute;content:"";background: url(../images/splash5.png) no-repeat center center / cover;width:480px;height:363px;top:0;left:0;}
#Discussion .zadan h2{margin-bottom:40px;}
#Discussion .talk li{display: flex;align-items: flex-start;justify-content: space-between;margin-bottom:30px;}
#Discussion .talk li:nth-child(even){flex-direction: row-reverse;}
#Discussion .talk li:last-child{margin-bottom:70px;}
#Discussion .talk li .member{width:15.7%;}
#Discussion .talk li .member p{color:#0061CC;font-size:2rem;font-weight:700;text-align: center;}
#Discussion .talk li .text{width:77%;background: #F0F7FF;border-radius:30px;padding:30px;position: relative;}
#Discussion .talk li .text::before{position: absolute;content:"";display: inline-block;width: 75px;height: 40px;background: #f0f7ff;clip-path: polygon(0 0, 100% 0%, 50% 100%);top:0;}
#Discussion .talk li:nth-child(odd) .text::before{left:-28px;}
#Discussion .talk li:nth-child(even) .text::before{right:-28px;}
#Discussion .zadan .photo::before{position: absolute;content:"";background: url(../images/splash6.png) no-repeat center center / cover;width:480px;height:363px;top:-20px;left:50%;transform: translateX(-50%);}




@media screen and (min-width:761px) {
	.sp-only{display: none;}
	.pc-only{display: block;}

	main{max-width:760px;}
	#Organization .links ul li{width:44%}
	#Organization .links ul li:nth-child(2) {border-top:1px solid #0061CC;}
	#Organization ul.yoko{display:flex;justify-content: space-between;flex-wrap: wrap;}
	#Organization ul.yoko li:nth-child(3), 	#Organization ul.yoko li:nth-child(4), #Organization ul.tate li, #Organization #fc ul.yoko li{margin-top:30px;}
	#Organization ul.yoko li, #Organization ul.tate li:first-child{margin-top:60px;}
	#Organization ul.yoko.half li{width:48%;}
	#Organization #fc ul.yoko li:first-child{width:63%;}
	#Organization #fc ul.yoko li:last-child{width: 31.5%;}
	#Discussion .reed .photo ul li:first-child img{max-width:410px;}
	#Discussion .reed .photo ul li:last-child img{max-width:310px;}
	#Discussion .zadan .photo ul{display: flex;justify-content: space-between;align-items: flex-start;}
	#Discussion .zadan .photo ul li{width:48.5%;}
	#Discussion .zadan .photo ul li:last-child{margin-top:100px;}
}

@media screen and (max-width: 1040px) {
	footer .dspSP .sns a{font-size:3.2rem!important;}
	.recruit a[class^="btn"]{margin:0;}
}

@media screen and (max-width:760px) {
	.sp-only{display: block;}
	.pc-only{display: none;}

	.recruit{font-size:1.6rem;overflow-x: hidden;line-height:1.7em;}
	.container{width:90%;padding:12vw 0;}
	header{padding:15px;}
	header .logo img{max-width:24vw;}
	header .wrap{padding-right:16vw;}
	header .btn_entry{font-size:1.5rem;padding:2vw 4vw;}
	header nav{width:100%;}
	header button{width: 36px;height: 36px;right:5px;}
	header .btn-line::before {transform: translateY(-12px);}
	header .btn-line::after {transform: translateY(12px);}
	header nav ul li{font-size:1.8rem;}
	#Top .mainvisual h1{bottom:34%;}
	#Top .mainvisual h1 img{width:90%;}
	#Top h2, #Organization h1, #Discussion h1, #People h1{font-size:3.8rem;margin-bottom:8vw;}
	.mark span{padding-left:42px;}
	.mark span::before{width: 33px;height:26px;transform: translateY(-43%);}
	#Top h2 a{padding-right:46px;}
	#Top h2 a::before{width:42px;height:42px;right: -10px;}
	#Top h2 a::after{width: 22px;height: 18px;}
	.obi-catch .bg .inn{font-size:2.8rem;}
	#Top #rinen h3{font-size:2.3rem;margin-bottom:12vw;}
	#Top #rinen h2 img{width:85%;}
	#Top #rinen .splash{margin: -10vw -5% 8vw;}
	#Top #topmessage::before{width: 48.289vw;height: 52.632vw;}
	#Top #topmessage .president{margin-bottom:20vw;}
	#Top #topmessage .president figure img{width:90%;}
	#Top #topmessage .president .name{width: 90vw;height: 20vw;left: -6%;bottom: -18%;padding:0 5vw;}
	#Top #topmessage .president .name p{font-size:1.8rem;line-height:1.4em;}
	#Top #topmessage .president .name h3{font-size:3rem;}
	#Top .organization h3{font-size:2.6rem;}
	#Top .organization ul li{font-size:2rem;}
	#Top .organization ul.jigyou li p a{width:68%;}
	#Top .people ul li{padding:6vw 5vw;}
	#Top .people ul li:last-child{margin-bottom:2vw;}
	#Top .people ul li::before{width: 39.474vw;height: 10.526vw;}
	#Top .people ul li .num{font-size:6.8rem;}
	#Top .people ul li .num span{font-size:3.6rem;}
	#Top .people ul li .busho{font-size:1.8rem;margin: 6vw 0 3vw;}
	#Top .people ul li .name{font-size:3rem;}
	#Top .people ul li .name span, #Top .people ul li .copy, #Top .people ul li a, #Top #recruitment h2+p{font-size:1.8rem;}
	#Top .discussion h2 span, #Discussion h1 span{padding-left:42px;}
	#Top .discussion h2 span::before, #Discussion h1 span::before{width: 29px;height: 48px;}
	#Top #recruitment h2{margin-bottom:6vw;}
	#Top #recruitment .table_wrap{margin:0 -5.5%;}
	#Top #recruitment table{margin:7vw 0;font-size:1.5rem;}
	#Top #recruitment table th, #Top #recruitment table td{padding:4vw;}
	#Organization .links ul{flex-direction: column;}
	#Organization .links ul li{width:100%;font-size:1.8rem;}
	#Organization .links ul li a{padding:3vw 0;}
	#Organization .links ul li a::after{top:22px;}
	#Organization h2, #Organization .people_bnr p span{font-size:2.8rem;}
	#Organization h3{font-size:2.5rem;}
	#Organization ul.disc li::before{top:9px;}
	#Organization .people_bnr{padding:3vw 4vw;}
	#Organization .people_bnr p{font-size:2rem;}
	#Organization h4{font-size:2.6rem;margin:14vw 0 3vw;}
	#Organization ul.photos li{margin-top:6vw;}
	#People h1{margin-bottom:12vw;}
	#People .p-box h2{font-size:8rem;}
	#People .p-box h2 span{font-size:5.2rem;}
	#People .p-box h2::before{top:-4vw;width:190px;height:70px;}
	#People .p-box img{width:75%;margin-top:-8vw;}
	#People .p-box .plate{padding:3vw 6vw;}
	#People .p-box .plate p{line-height:1.3em;margin-bottom:.25em;}
	#People .p-box .plate p, #People .p-box .plate h3 .small{font-size:1.8rem;}
	#People .p-box .plate h3{font-size:2.6rem;line-height:.1.5em;}
	#People .p-box .plate h3 .name{font-size:2.8rem;}
	#People .timeline li h5{font-size:1.8rem;}
	#People .timeline li h5+p{margin-top:3.5vw;font-size:1.5rem;}
	#People .timeline li time::before{right: -1.8vw;top:0.35vw;}
	#People .timeline li img{margin-top:4vw;}
	#People h4{font-size:2rem;padding:3vw 6vw;margin:12vw 0 4vw;}
	#Discussion h2{font-size:2.4rem;padding:4.5vw 4vw;border-radius:20px 20px 0 0;}
	#Discussion .profile li{padding:6vw 0;}
	#Discussion .profile li .flex{margin-bottom:4.5vw;}
	#Discussion .profile li .flex p{font-size:1.8rem;}
	#Discussion .profile li .flex p span{font-size:2.4rem;}
	#Discussion .photo{margin:12vw 0;}
	#Discussion .photo ul li:first-child{margin-bottom:6vw;}
	#Discussion .reed .photo::before{left:-3vw;}
	#Discussion .reed .photo ul li:first-child img{width:85%;}
	#Discussion .reed .photo ul li:last-child img{width:65%;}
	#Discussion .zadan h2{margin-bottom:7.5vw;}
	#Discussion .talk li{margin-bottom:6vw;}
	#Discussion .talk li:last-child{margin-bottom:14vw;}
	#Discussion .talk li .text{padding:5vw;border-radius:20px;}
	#Discussion .talk li .text::before{width: 20vw;height: 10vw;}
	#Discussion .talk li .text p{font-size:1.5rem;}
	#Discussion .zadan .photo ul li img{width:80%;}
}

@media screen and (max-width:480px) {

	#Top h2, #Organization h1, #Discussion h1{font-size:3.2rem;}
	.obi-catch .bg .inn{font-size:2.4rem;}
	#Top #topmessage .president .name p{font-size:1.5rem;}
	#Top #topmessage .president .name h3{font-size:2.4rem;}
	#Top .people ul li{padding:6vw 4vw;}
	#Top .people ul li::before{top:7vw;}
	#Top .people ul li img{width:49%;}
	#Top .people ul li .num{font-size:5.2rem;}
	#Top .people ul li .num span{font-size:3rem;}
	#Top .people ul li .busho{font-size:1.6rem;margin: 4vw 0 3vw;}
	#Top .people ul li .name{font-size:2.4rem;}
	#Top .people ul li .name span, #Top #recruitment h2+p{font-size:1.6rem;}
	#Top .people ul li .copy{width:100%;font-size:1.6rem;margin:2vw 0 4vw;}
	#Top .people ul li a{margin:auto;font-size:1.7rem;}
	#Top #recruitment table{font-size:1.4rem;}
	#Top #recruitment table th, #Top #recruitment table td{padding:3vw;}
	#Top #recruitment .btn_entry{font-size:2.1rem;}
	#Organization h2, #Organization .people_bnr p span{font-size:2.6rem;}
	#Organization h2 span{padding-left:38px;line-height:38px;}
	#Organization h2 span::before{width: 30px;height: 18px;top: 11px;}
	#Organization h3{font-size:2.2rem;}
	#Organization .people_bnr p{font-size:1.8rem;}
	#Organization h4{font-size:2.4rem;}
	#Organization .people_bnr::before{width:32px;height:32px;right:4vw;}
	#Organization .people_bnr::after{width:16px;height:12px;right:6vw;}
	#People .p-box h2{font-size:6.5rem;}
	#People .p-box h2 span{font-size:4.2rem;}
	#People .p-box .plate p, #People .p-box .plate h3 .small{font-size:1.6rem;}
	#People .p-box .plate h3{font-size:2.2rem;}
	#People .p-box .plate h3 .name{font-size:2.6rem;}
	#People .p-box .plate h3 .small{display: block;margin-top:.08em;}
	#People .timeline li h5{font-size:1.7rem;}
	#People .timeline li{padding-bottom:6vw;}
	#People .timeline li div{padding:4.5vw;width:77%;}
	#People .timeline li div::before{width:3px;height:calc(100% + 6vw);}
	#People .timeline li time{margin-top:5vw;}
	#People .timeline li time::before {width: 15px;height: 15px;right: -5.1vw;top: 1.6vw;}
	#People h4{font-size:1.8rem;}
	#Discussion h2{font-size:2.2rem;}
	#Discussion .profile li .flex img{width:22vw;}
	#Discussion .talk li .text::before {width: 15vw;height: 7vw;}
	#Discussion .talk li:nth-child(odd) .text::before {left: -6vw;}
	#Discussion .talk li:nth-child(even) .text::before {right: -6vw;}


}