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

header{
background-image: url("/img/s-main.jpg");
}
.row img{
width: 100%;
}

#main{
position: relative;
padding: 5rem 0;
z-index: -1;
}
#main > img{
position: absolute;
top: 30px;
right: 30px;
z-index: -1;
}
#main h3,#main h2{
background: #fff;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.1);
display: inline-block;
line-height: 2em;
}
#main h3{
padding: 5px 5px 5px 10px;
font-size: 2.5rem;
font-weight: 600;
}
#main h2{
padding: 5px 5px 5px 10px;
margin-top: 1rem;
font-size: 4rem;
font-weight: 800;
color: #FF8000;
letter-spacing: 0.5rem;
}
#main .text-box{
background-image: url("/img/s-main-sback.jpg");
background-size: cover;
padding: 2rem;
margin-top: 5rem;
text-align: center;
}
#main .text-box p{
padding: 1.5rem;
line-height: 2em;
text-align: left;
}
@media (max-width: 992px) {
#main{padding: 3rem 0;}
#main > img{top: 10px;right: 10px;width: 30%;}
#main h3,#main h2{background: none;box-shadow: none;}
#main h3{font-size: 1.6rem;line-height: 1.6em;padding-bottom: 0}
#main h2{font-size: 2rem;letter-spacing: 0.2rem;padding: 0; margin-top: 0rem;}
#main h2 span{display: inline-block;margin-top: 1rem; padding: 0px 5px 0px 10px; background: #fff;box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.1);}
#main .text-box{margin-top: 2.5rem;padding: 1.5rem 1.5rem 1rem;}
#main .text-box img{max-width: 200px;}
}

#s-nagare{
background: #D7E2E5;
padding: 5rem 0;
}
#s-nagare h2{
padding: 1.5rem;
font-size: 2.5rem;
font-weight: 600;
letter-spacing: 0.3rem;
text-align: center;
background: #5D91B6;
color: #fff;
}
#s-nagare p{
margin: 2rem auto 2rem;
width: 80%;
}
#s-nagare .row > div{
margin-top: 1.5rem;
}
#s-nagare .text-box{
background: #fff;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.1);
padding: 2rem 3rem;
position: relative;
text-align: center;
}
#s-nagare .text-box img{
max-width: 300px;
}
#s-nagare .text-box h3{
text-align: center;
font-size: 2.5rem;
letter-spacing: 0.3rem;
font-weight: 700;
padding-bottom: 1rem;
}
#s-nagare .text-box p{
width: 100%;
margin: 2rem auto 3rem;
text-align: left;
}
#s-nagare .text-box span{
display: block;
position: absolute;
bottom: 0px;
right: 10px;
font-size: 8rem;
color:rgba(93,145,182,0.2);
font-family:'Zen Old Mincho', serif;
font-weight: 700;
}
@media (max-width: 992px) {
#s-nagare{padding: 3rem 0;}
#s-nagare .text-box p{margin: 2rem auto 0;}
}

#s-guide{
padding-top: 5rem;
}
#s-guide h2{
padding: 1.5rem;
font-size: 2.5rem;
font-weight: 600;
letter-spacing: 0.3rem;
text-align: center;
background: #FF8000;
color: #fff;
border-radius: 30px;
}
#s-guide .contents-box > p{
font-size: 1.8rem;
font-weight: 500;
text-align: center;
margin-top: 3rem;
}
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:5rem 0 0;
}
.tab-label {
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 15px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 30px 30px 0 0;
  flex: 1;
  margin:0;
}
.tab-label.kojin {
  background: #FFB580;
}
.tab-label.houjin {
  background: #D7E2E5;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.tab-content .row{
  background: #fff;
  margin: 30px 15px 0;
}
.tab-content .row:first-of-type{
margin-top: 0;
}
.tab-content .row > div{
  padding: 0;
}
.tab-content .row:last-of-type > div h3{
  text-align: center;
}
.tab-content .text-box{
  padding: 20px;
}
.tab-content .text-box h3{
font-size: 2.3rem;
font-weight: 700;
letter-spacing: 0.2rem;
padding-bottom: 2rem;
color: #FF8000;
border-bottom: 1px solid #ff8000;
}
.tab-content.houjin .text-box h3{
color: #5D91B6;
border-bottom: 1px solid #5D91B6;
}
.tab-content .text-box p{
margin-top: 2rem;
}
.tab-content .text-box button{
margin-top: 3rem;
font-size: 1.6rem;
letter-spacing: 0;
font-weight: 500;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 30px;
  opacity: 1;
  transition: .5s opacity;
padding-bottom: 3rem;
background: url("/img/i-service-back.jpg") center center / cover;
}
.tab-switch:checked+.tab-label+.tab-content.houjin {
background: url("/img/s-guide-h-back.jpg") center center / cover;
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}
@media (max-width: 992px) {
#s-guide{padding-top: 3rem;}
}
@media (max-width: 768px) {
.tab-content .row{margin: 15px 0;}
.tab-content .text-box h3{
font-size: 1.8rem;
letter-spacing: 0;
padding-bottom: 2rem;
}
.tab-content .text-box button{padding: 5px 25px 7px;}
.tab-switch:checked+.tab-label+.tab-content {padding: 15px;}
}