/*
Theme Name: Rio JOB Theme
Template: swell
*/


/* reset.css */

*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;line-height: 1.5;}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;}h1,h2,h3,h4,button,input,label{line-height:1.5}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

html{scroll-behavior: smooth;}
body{  font-family: "Noto Sans JP",sans-serif;font-size: 16px;letter-spacing: 0.05em;}
main{max-width: 1150px;margin: 0 auto;}


header .logo{
  max-width:1150px;
  margin: 0 auto;
  padding:10px 15px;
  font-size:28px;
  line-height: 1;
  letter-spacing: 0.15em;
  font-weight: bold;
}

header .logo a:hover{
  text-decoration: none;
}

header .logo img{
  display: inline-flex;
  width:80px;
  margin:2px 10px 2px 0;
  vertical-align: bottom;
}

header .logo span{
  font-size:12px;
  letter-spacing: 0.05em;
}

header nav{
  background: #e6ebee;
  width:100%;
}
header nav ul{
  max-width: 1150px;
  margin: 0 auto;
  display: flex;
  list-style: none;
  padding: 5px 0;
}

header nav ul li{
  width:20%;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.1em;
  position: relative;
}
header nav ul li::after{
  content:"";
  background:#fff;
  width:1px;
  height: 20px;
  display: block;
  position: absolute;
  right: 0;
  top:12px;
}
header nav ul li a{
  display: block;
  text-decoration: none;
  width: 90%;
  margin: 0 auto;
  transition: 0.3s;
  padding: 10px 0;
}
header nav ul li a:hover{
  background: #ffffffcc;
  text-decoration:none;
}

header nav ul li:last-child::after{
  display: none;
}

.home h2{padding-top:0;}

.home #header_img{
  width:100%;
  max-width: 1150px;
  margin: 0 auto;
  position: relative;
}

.home #header_img img{
  width: 100%;
}

.home #header_img .text{
  position: absolute;
  top:10%;
  left: 5%;
  font-weight: bold;
}

.home #header_img .text p:nth-child(1){
  font-size: min(3.130vw,36px);
  line-height: 1.6;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.home #header_img .text p:nth-child(2){
  font-size: min(1.565vw,18px);
  margin-top:1em;
  line-height: 2;
}

.home #header_img + p{
  margin:40px 0 70px;
}

.home .home_box1{
  padding:24px 56px 30px;
  margin-bottom: 50px;
}

.home .home_box1 .flex{
  display: flex;
  align-items: center;
  margin-top: 20px;
  gap:36px;
}

.home .home_box1 .flex div p:first-child{
  border-bottom:1px solid #a6a1a0;
  margin-bottom: 24px;
  padding-bottom:6px;
}
.home .home_box1 .flex div p:first-child img{
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 10px;
}

.home .merit_h2{
  margin-top:120px;
  position: relative;
  margin-bottom: 100px;
  border-bottom: 0;
}
.home .merit_h2::after{
  content:"≫";
  font-size: 48px;
  position: absolute;
  bottom: -60px;
  left: calc(50% - 24px);
  transform: rotate(90deg) scaleX(60%);
  line-height: 1;
}

.home .merit{
  position: relative;
  background: #e8e8e8;
  padding: 60px 20px 10px;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}
.home .merit::after{
  content: "";
  border-top:60px solid #e8e8e8;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  position: absolute;
  bottom: -60px;
  left: calc(50% - 80px);
}
.home .merit .shadow{
  max-width: 1150px;
  background: #fff;
  margin: 0 auto 76px;
  padding: 20px min(26%, 320px) 20px 34px;
  position: relative;
}
.home .merit .shadow .flex{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap:30px;
}
.home .merit .shadow .flex .osusume{
  color: #ccdeee;
  font-size: 120px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Public Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
}
.home .merit .shadow .flex .osusume span{
  background: #005bac;
  color: #ffff00;
  font-weight: bold;
  padding: 0 40px;
  margin: 10px 0;
  border-radius: 20px;
  font-size: 18px;
  line-height: 1.5;
}
.home .merit .shadow .flex .text{
  flex-grow: 1;
  margin-top: 4px;
}
.home .merit .shadow .flex .text p:nth-child(1){
  border-bottom: 1px solid #005bac;
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.home .merit .shadow > img{
  width:23%;
  max-width: 268px;
  height: auto;
  position: absolute;
  right: 2%;
  top:50%;
  transform: translateY(-50%);
}

.home .reason_h2{
  margin: 200px 6px 0;
  background: #fff;
  border: 1px solid #005bac;
  font-size: 44px;
  padding: 14px 20px 18px;
  border-radius: 10px;
  line-height: 1;
  letter-spacing: 2px;
}
.home .reason_h2 br{
  display: none;
}
.home .reason_h2 span{
  font-size: 130px;
  color: #fff100;
  position: relative;
  top:25px;
  z-index: 1;
  line-height: 0;
  font-family: "Public Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  -webkit-text-stroke: 5px #005bac;
}
.home .reason{
  position: relative;
}
.home .reason::after{
  content:"";
  position: absolute;
  border-top:50px solid #005bac;
  border-left: 66px solid transparent;
  border-right: 66px solid transparent;
  bottom:-100px;
  left:calc(50% - 66px);
}

.home .reason .flex{
  display: flex;
  justify-content: space-between;
  margin: 46px 20px 0;
}

.home .reason .box{
  width:32%;
  display: flex;
  flex-direction: column;
}

.home .reason .box > p{
  background: #54c3f1;
  padding:6px;
  border-radius: 6px 6px 0 0;
  margin-bottom: 8px;
}
.home .reason .box > div{
  background: #ddf1fc;
  padding: 28px 16px;
  flex: 1;
  border-radius: 0 0 6px 6px;

}
.home .reason .box > div img{
  padding:0 16px;
  width: 100%;
}
.home .reason .box > div p{
  padding-top:50px;
  letter-spacing: 0;
}
.home .reason_after{
  margin:120px 20px 200px;
}
.home .reason_after .flex{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:50px;
}

.home .reason_after .flex div{
  border:2px solid #005bac;
  border-radius: 16px;
  padding: 40px 20px;
  position: relative;
}

.home .reason_after .flex div::before{
  content:"";
  position: absolute;
  border-left: 40px solid #005bac;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  right:-40px;
  top:40px;
}
.home .reason_after .flex div::after{
  content:"";
  position: absolute;
  border-left: 40px solid #fff;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  right:-36px;
  top:40px;
}

.home .about_1 .flex{
  display: flex;
  align-items: flex-start;
  gap:50px;
  margin:80px 20px 240px;
}

.home .about_1 .flex img{
  width:44%;
}
.home .about_2{
  margin:0 0 100px;
}
.home .about_2 .flex{
  display: flex;
  align-items: flex-start;
  margin: 100px 20px 60px;
}

.home .about_2 .flex img{
  width:50%;
}
.home .about_2 .flex div{
  flex:1;
}
.home .about_2 .flex div p{
  padding: 30px 40px 15px;
  text-align: justify;
}
.home .about_2 .flex div p:first-child{
  border-bottom: 1px solid #2b3f3d;
  color: #2b3f3d;
}
.home .about_2 .flex div p span{
  display: inline-block;
}

.home .job{
    position: relative;
    background: #e8e8e8;
    padding: 60px 20px 30px;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}

.home .job .flex{
  max-width:1150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:50px auto;
}

.home .job .flex .shadow{
  width:calc(49% - 12px);
  background: #fff;
  padding:20px;
  text-align: center;
  margin-bottom: 40px;
}
.home .job .flex .shadow img{
  margin-top:20px;
}

.home .melmaga{
  max-width: 922px;
  margin: 120px auto;
  width:94%;
  border:1px solid #005bac;
  padding:40px;
}

.home .melmaga .flex{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap:24px;
  margin-top: 30px;
}

.home .melmaga .flex a.btn{
  padding:20px;
  margin:0;
  border-radius:100px;
  width:50%;
}

.home .melmaga .flex p{
  background:#fff100;
  border-radius: 50%;
  color: #000;
  line-height: 1.2;
  aspect-ratio:1 / 1;
  width:13%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -10px;
  position: relative;
}
.home .melmaga .flex p::after{
  content:"";
  position: absolute;
  border-right: 20px solid #fff100;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  left:-18px;
  top:calc(50% - 12px);
}

.home .rio_about{
  padding:0 20px;
}
.home .rio_about h3 .border{
  border-bottom: 1px solid #000;
  display: inline-block;
  padding:0 10% 30px;
  position: relative;
}

.home .rio_about h3 .border::after{
  content:"";
  position: absolute;
  display: block;
  background-image: url(/wp-content/themes/swell_child/images/img9.png);
  background-size: contain;
  background-repeat: no-repeat;
  width:min(16% , 154px);
  aspect-ratio:1 / 1;
  right: -3%;
  bottom: 5%;
}

.home .rio_about p{
  margin-bottom:24px;
}

/***********************
********* Footer ******
************************/
#bottom {
	font-size: 12px;
	background-color: #333333;
	padding-bottom: 20px;
	margin-top: 30px;
	padding-top: 40px;
	line-height:24px;
}

#bottom h3 {
    margin-top: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 17px;
    color: #CCC;
    font-weight: 600;
    line-height: 24px;
}
#bottom ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#bottom ul li {
    display: block;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    line-height: 24px;
}

#bottom ul li a {
	color: #CCCCCC;
}

#bottom ul li a:hover {
	color: #FFFFFF;
}

#bottom .widget {
	margin-bottom: 0;
	padding-bottom: 20px;
}

#footer {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #fff;
	background: #1f1f22;
}

#footer2 {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #fff;
	background: #161616;
}

#footer a {
  color: #fff;
}

#footer a:hover {
  color: #c52d2f;
}

#footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer ul > li {
  display: inline-block;
  margin-left: 15px;
}

hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}

.col-al-center {
	text-align: center;
}
.col-al-left {
	text-align: left;
}
.bottom-logo {
	margin-bottom: 30px;
}
.bottom-logo img{
  display: inline;
}
#footer.midnight-blue *,
#footer2.midnight-blue *{
  font-size: 14px;
}
#footer.midnight-blue ul{
  height: 33px;
}
.container{
  width: auto;
}

@media screen and (max-width:767px){
#footer.midnight-blue ul{
  height: auto;
}}
#footer.midnight-blue a{
  color: #fff;
}

#footer_container > * {
  letter-spacing: 0;
  line-height: 26px;
}

#footer_container a {
	color: #5f5f5f;
	-webkit-transition: color 300ms, background-color 300ms;
	-moz-transition: color 300ms, background-color 300ms;
	-o-transition: color 300ms, background-color 300ms;
	transition: color 300ms, background-color 300ms;
}

#footer_container a:hover, #footer_container a:focus {
  color: #d43133;
  text-decoration: none;
}


.home main h2,
.page main h1{
  color: #005bac;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
  font-size: 36px;
  letter-spacing: 3px;
  padding: 50px 0 20px;
}

.page main h1{
text-align: center;
border-bottom: none!important;
}

.home main h2 span.border,
.page main h1 span{
  padding:0 80px 20px;
  display: inline-block;
  border-bottom: 1px solid #005bac;
}

.page main h1 span{
  float: none!important;
}

.home main h3{
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 40px;
  letter-spacing: 3px;
}

.home main a.btn{
  background:#005bac;
  border-radius: 10px;
  padding: 38px 20px 36px;
  max-width:486px;
  width:90%;
  display:block;
  margin:50px auto;
  color:#fff;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  font-size: 21px;
  letter-spacing: 1px;
}

.home main a.btn:hover{
  color: #fff;
}

.home main a.btn span{
  display: inline-block;
  transform: scaleX(60%);
}

main > p{padding-left:20px;padding-right:20px;}
main .shadow{box-shadow: 0 5px 10px #666;border-radius:14px;margin:0 6px; }

main a{transition: 0.3s;}
main a:hover{  opacity: 0.7;}

main .f18{font-size: 18px;}
main .f21{font-size: 21px;}
main .f24{font-size: 24px;}
main .f28{font-size: 28px;}
main .f30{font-size: 30px;}
main .f32{font-size: 32px;}
main .lh18{line-height: 1.8;}
main .bold{font-weight: bold;}
main .medium{font-weight: 500;}
main .black{font-weight: 900;}
main .center{text-align: center;}
main .justify{text-align: justify;}
main .blue{color:#005bac;}

.pc{display: inline;}
.sp{display: none;}

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

  .home .rio_about h3 .border{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    padding:0 5% 10px;
  }

  .home .rio_about h3 .border::after{
    width:154px;
    position: relative;
    right: 0;
    bottom: 0;
  }
  main .f21{font-size: 18px;}
  main .f24{font-size: 20px;}
}

@media screen and (max-width:767px){
  .sp{display: inline;}
  .pc{display: none;}

  body{font-size: 14px;}
  
  header nav ul{
    display: none;
  }
  header nav ul.is_show{
    display: block;
    position: absolute;
    top:57.7px;
    width:100%;
    z-index: 2;
    background: #ffffffee;
  }
  header nav ul li{
    font-size: 18px;
    text-align: center;
    width: 100%;
    padding: 0 10px;
  }
  header nav ul li::after{
    display: none;
  }
  header nav ul li a{
    display: block;
    width: 100%;
    padding: 20px 0;
    transition: 0.3s;
    text-decoration: none;
  }
  header nav ul li a:hover{
    background: #fff;
    color: #b81c22;
  }
  header nav .toggle{
    display: block;
    position: absolute;
    top:16px;
    right: 20px;
    background: #333;
    padding:9px 10px;
    border-radius: 4px;
    cursor: pointer;
  }
  header nav .toggle span{
    display: block;
    background: #fff;
    width:22px;
    height:2px;
    border-radius: 1px;
    margin-top: 4px;
  }
  header nav .toggle span:first-child{
    margin-top: 0;
  }
  .home #header_img{
    background:url(/wp-content/themes/swell_child/images/header_bg.jpg);
    background-size: contain;
  }
  .home #header_img .text{
    position: relative;
    top:0;
    left:0;
    width:100%;
  }
  .home #header_img .text p:nth-child(1){
    font-size:36px;
    text-align: center;
    padding-top: 30px;
  }
  .home #header_img .text p:nth-child(2){
    font-size: 18px;
    text-align: center;
  }
  .home .home_box1{
    padding: 24px 24px 30px;
  }
  .home .home_box1 .flex{
    gap:24px;
  }
  .home .home_box1 .flex > img{
    width:30%;
  }
  .home .merit_h2::after{
    bottom:-40px;
  }
  .home .merit .shadow{
    padding-left: 24px;
  }
  .home .merit .shadow .flex{
    gap:24px;
  }
  .home .merit .shadow .flex .osusume{
    font-size: 100px;
  }
  .home .merit .shadow .flex .osusume span{
    padding:0 20px;
    font-size: 14px;
  }
  .home .merit::after{
    border-top-width: 30px;
    border-left-width: 40px;
    border-right-width: 40px;
    bottom:-30px;
    left:calc(50% - 40px);
  }
  .home .reason_h2{
    margin-top:100px;
    font-size: 32px;
    padding: 10px 20px 14px;
  }
  .home .reason_h2 span{
    font-size: 110px;
    -webkit-text-stroke: 3px #005bac;
  }
  
  .home .reason .flex{
    flex-direction: column;
  }
  .home .reason .box{
    width:90%;
    margin: 0 auto 20px;
  }
  .home .reason .box > div{
    display: flex;
    align-items: center;
  }
  .home .reason .box > div img{
    width:50%;
  }
  .home .reason .box > div p{
    padding-top: 0;
  }
  .home .reason::after{
    bottom:-30px;
    border-top-width: 25px;
    border-left-width: 33px;
    border-right-width: 33px;
    left:calc(50% - 33px);
  }
  .home .reason_after{
    margin-top:60px;
    margin-bottom: 100px;
  }
  .home .reason_after .flex{
    padding:0 20px;
    gap:25px;
  }
  .home .reason_after .flex div{
    padding:20px;
  }
  .home .reason_after .flex img{
    width:30%;
  }
  .home .reason_after .flex div::before{
    border-left-width: 20px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    right:-20px;
  }
  .home .reason_after .flex div::after{
    border-left-width: 20px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    right:-16px;
  }
  .home .reason_after .flex div .center{
    text-align: left;
  }
  .home .about_1 .flex{
    margin:40px 0 100px;
    padding:0 20px;
    gap:25px;
    flex-direction: column;
  }
  .home .about_1 .flex img{
    width:100%;
  }
  .home .about_2{
    margin-bottom: 60px;
  }
  .home .about_2 .flex{
    margin-top:40px;
    padding:0 20px;
  }
  .home .about_2 .flex img{
    width:40%;
  }
  .home .about_2 .flex div p{
    padding:15px 20px 8px;
  }
  .home .job .flex{
    margin:25px auto;
  }
  .home .melmaga{
    margin:60px auto;
  }
  .home .melmaga .flex{
    align-items: center;
    margin-top:10px;
    gap:18px;
  }
  .home .melmaga .flex img{
    width:12%;
  }
  .home .melmaga .flex a.btn{
    padding:14px;
  }
  .home .melmaga .flex p{
    width: 3.8em;
  }
  .home .melmaga .flex p::after{
    border-right-width: 10px;
    border-top-width: 6px;
    border-bottom-width: 6px;
    left:-9px;
    top:calc(50% - 6px);
  }
  .home main h2 span.border,.page main h1 span{padding:0 40px 10px;}
  .home main a.btn{padding: 24px 20px;font-size:18px;margin:20px auto;}
  .home main h2,.page main h1{font-size:30px;}
  main .f18{font-size: 16px;}
  main .f28{font-size: 22px;}
  main .f30{font-size: 24px;}
  main .f32{font-size: 26px;}
}

@media screen and (max-width:480px){
  .home #header_img .text p:nth-child(1){
    font-size: 28px;
  }
  .home #header_img .text p:nth-child(2){
    font-size:16px;
  }
  .home .home_box1 .flex{
    flex-direction: column-reverse;
  }
  .home .about_2 .flex{
    flex-direction: column;
  }
  .home .about_2 .flex:nth-child(2){
    flex-direction: column-reverse;
  }
  .home .home_box1 .flex > img{
    width:40%;
  }
  .home .home_box1 + p{
    text-align: left;
  }
  .home .merit .shadow {
    padding:20px 34px;
  }
  .home .merit .shadow .flex{
    flex-direction: column;
  }
  .home .merit .shadow > img{
    width:38%;
    transform: none;
    right:5%;
    top:5%;
  }
  .home .reason_h2{
    line-height: 2;
  }
  .home .reason_h2 br{
    display: block;
  }
  .home .reason_h2 span{
    font-size: 90px;
    top:20px;
  }
  .home .reason .box > div img{
    padding-left:0;
  }
  .home .reason_after .flex{
    flex-direction: column;
  }
  .home .reason_after .flex div::after{
    transform: rotate(90deg);
    right:calc(50% - 10px);
    bottom:-16px;
    top:auto;
  }
  .home .reason_after .flex div::before{
    transform: rotate(90deg);
    right:calc(50% - 10px);
    bottom:-20px;
    top: auto;
  }
  .home .reason_after .flex img{
    width:40%;
  }
  .home .about_2 .flex img{
    width:100%;
  }
  .home .job .flex{
    margin:20px auto;
  }
  .home .job .flex .shadow{
    width:100%;
    padding: 10px;
    margin-bottom: 20px;
  }
  .home .melmaga{
    padding: 20px;
    position: relative;
  }
  .home .melmaga h2{
    text-align: left;
    font-size: 20px;
  }
  .home .melmaga p.center{
    text-align: left;
    font-size: 16px;
  }
  .home .melmaga .flex a.btn{
    width: 90%;
  }
  .home .melmaga .flex p{
    position: absolute;
    top:-25px;
    right: -7px;
  }
  .home .rio_about h3 .border{
    flex-direction: column;
    font-size: 22px;
  }
  .home main a.btn{padding: 20px;}
  .home main h2,.page main h1{font-size: 24px;letter-spacing: 1px;}
  main .shadow{margin:0 10px;}
  main .f32{ font-size: 22px; }
  main .f24{ font-size: 18px; }

}