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

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
	box-sizing:border-box;
}
html,body{
  overflow-x: hidden;
  scroll-behavior: auto !important;
}
html{
	font-size:62.5%;
}
body {
	font-size:1.4rem;
    line-height:1.6;
      font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	color:#000;
	overflow-wrap: break-word;
}
.mincho{
  font-family: 'Yu Mincho', 'YuMincho', '游明朝', serif;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	color:#000;
	text-decoration:none;
	box-sizing:border-box;
  transition-duration: 0.3s; 
}

img.hoverImg{
	transition:0.3s;
}
a:hover img.hoverImg {
	opacity:0.7;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
img{
  backface-visibility: hidden;
  max-width:100%;
  vertical-align: bottom;
}

.sp_display{
	display:none;
}

.flex{
	display:flex;
	align-items:flex-start;
	flex-wrap:wrap;
	justify-content:space-between;
}
sup{
	font-size:0.7em;
	position:relative;
	top:-0.4em;
}
.bold{
	font-weight:bold;
}

main{
  background-color:#f3efe8;
}
main .inner{
  max-width:1100px;
  margin:0 auto;
}

header{
  background-color:#FFF;
  padding:2rem 3rem;
  box-shadow: 0px 8px 8px -4px rgba(0,0,0,0.3);
  position:relative;
  z-index:1000;
}

#main_v{
  background-color:#f3efe8;
  position:relative;
}
#main_v .slider{
  font-size:0px;
}
#main_v .slick-slide {
  margin: 0 0.5vw;
}
#main_v .title{
  position:absolute;
  top:0px;
  left:0%;
  height: 100%;
  width:100%;
}
#main_v .title h1{
  height: 100%;
      max-width: 1100px;
    margin: 0 auto;
  position:relative;
}
#main_v .title h1 img{
  height: 100%;
}
.btn_contact{
  position:absolute;
  bottom:5%;
  left:5vw;
  text-align: center;
}
.btn_contact a{
  display:inline-block;
  background-color:#FFF;
  color:#d01027;
  padding:1em 4em;
  font-size:1.1vw;
  border-radius: 3em;
  border:solid 0.1em;
  font-weight: bold;
}
.btn_contact a span{
  position:relative;
  margin-left:-1em;
}
.btn_contact a span:after{
  content:"";
  position:absolute;
  width:1em;
  height: 0.8em;
  right:-1.5em;
  top:0.1em;
  background:url("../img/arrow.png") 0 0/contain no-repeat;
  transition-duration: 0.3s;
}
.btn_contact a:hover span:after{
  right:-2em;
}

#campaign{
  padding:15rem 0;
  background-color:#FFF;
  margin-bottom:14rem;
}
#campaign h2{
  text-align: center;
  margin-bottom:3rem;
}
#campaign .flex h3{
  width: 22.728%;
}
#campaign .flex > div{
  width:73%;
  margin-top:3rem;
}
#campaign .flex > div .text{
  font-size:2.2rem;
  margin:1em 0;
  line-height: 1.8;
}
.btn_detail a{
  font-size:2.2rem;
  display:inline-block;
  padding-right:0.8em;
  border-bottom:1px solid;
  background:url("../img/icon_blank.png") right center/0.542em no-repeat;
}
.btn_detail a:hover{
  border-bottom:none;
}
#campaign ul{
  display:flex;
  justify-content: space-between;
  margin-top:8rem;
}
#campaign ul li{
  width: 32.092%;
  transition-duration: 0.3s;
  position:relative;
  bottom:0em;
}
#campaign ul li:hover{
  bottom:-1em;
}
#campaign ul + p{
  font-size:1.6rem;
  text-align: right;
  margin:2em 0 4em;
}
#campaign .kikan{
  text-align: center;
  font-weight: bold;
}
#campaign .kikan p{
  font-size:2.2rem;
  display:inline-block;
  border-bottom:1px solid;
}
#campaign .kikan div{
  font-size:7.36rem;
}
#campaign .kikan span{
  font-size:0.5em;
}
#campaign .kikan + p{
  font-size:2.2rem;
  text-align: center;
}
.business{
  margin-bottom:16rem;
}
.business .inner{
  position:relative;
  padding:10rem 0;
}
.business .inner:before{
  content:"";
  position:absolute;
  height: 100%;
  right:-13.5rem;
  width:200%;
  top:0px;
  background-color:#FFF;
  z-index:2;
}
.business .inner:after{
  content:"";
  position:absolute;
  height: 100%;
  right:-14.5rem;
  width:200%;
  top:1rem;
  background-color:#edf5e3;
  z-index:1;
}
.business .inner > div{
  position:relative;
  z-index:3;
}
.business .title{
  display:flex;
  justify-content: space-between;
  margin-bottom:7rem;
}
.business .title h3{
  width:37.34%;
}
.business .title > div{
  width:57%;
}
.business .title > div h4{
  color:#6fba2c;
  font-size:4.416rem;
  font-weight:bold;
  line-height: 1.4;
  margin-bottom:0.3em;
}
.business .title > div h4 span{
  font-size:3.496rem;
}
.business .title > div h4 + p{
  font-size:2.2rem;
}
.business .title > div h4 + p + span{
  font-size:2.2rem;
  display:inline-block;
  color:#6fba2c;
  border-bottom:1px solid;
  font-weight: bold;
  margin:0.2em 0 1em;
}
.business table{
  width:100%;
}
.business table th{
  background-color:#0d8d30;
  color:#FFF;
  font-size:2.2rem;
  padding:0.5em;
  width:33.33%;
  border:solid 4px #FFF;
  vertical-align: middle;
}
.business table td{
  background-color:#edf5e3;
  font-size:2.2rem;
  padding:0.8em;
  width:33.33%;
  border:solid 4px #FFF;
  vertical-align: middle;
}
.business table td:last-child{
  font-size:2.576rem;
  text-align: center;
}
.business .table2 th{
  width:auto;
}
.business .table2 th:first-child{
  width:39%;
}
.business .table2 td{
  width:auto;
}
.business .table2 td:last-child {
    font-size: 2.2rem;
  text-align: left;
}

.business h5{
  font-size:3.312rem;
  text-align: center;
  color:#6fba2c;
  font-family: 'Yu Mincho', 'YuMincho', '游明朝', serif;
  margin-top:2.5em;
}
.business h5 sub{
  font-size:0.5em;
}
.business h5 + p{
  font-size:2.2rem;
  text-align: center;
  margin:1em 0 1.5em;
}
.business .caption{
  margin-top:1em;
}
.business .caption li{
  font-size:1.6rem;
  padding-left:1.5em;
  text-indent:-1.5em;
}
.business .menu{
  display:flex;
  justify-content: center;
  margin-top:4rem;
  margin-bottom:19rem;
  gap:1.7195%;
}

.business .menu li{
  width:32.092%;
}
.business .reform{
  background-color:#edf5e3;
  padding:4.05%;
}
.business .reform h5{
  margin-top:1.5em;
  margin-bottom:0.7em;
  line-height: 1.3;
}
.business .reform .comment{
  margin-top:-12rem;
}
.business .reform .btn_view{
  font-size:3.312rem;
  font-family: 'Yu Mincho', 'YuMincho', '游明朝', serif;
  text-align: center;
  margin-top:0.5em;
}
.business .reform .btn_view span{
  display:inline-block;
  position:relative;
}
.business .reform .btn_view span:before{
  content:"";
  position:absolute;
  bottom:0px;
  left:0px;
  width:0%;
  transition-duration: 0.3s;
  height: 1px;
  background-color:#6eb92b;
}
.business .reform a:hover .btn_view span:before{
 width:100%; 
}


.business .reform .btn_view span:after{
  content:"";
  width:0.555em;
  height: 0.7777em;
  background:url("../img/arrow_green.png") 0 0/contain no-repeat;
  position:absolute;
  right:-1em;
  top:0.5em;
}
.business .reform ul{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.business .reform ul li{
  width:49.1%;
}

.business#blue .inner:before{
  right:auto;
  left:-13.5rem;
}
.business#blue .inner:after{
  right:auto;
  left:-14.5rem;
  background-color:#e7f0fa;
}
.business#blue .title {
  margin-bottom: 3rem;
   justify-content: center; 
}

.business#blue .title h3 {
    width: 28.34%;
  margin-right:4%;
}
.business#blue .title > div{
  width:auto;
}
.business#blue .title > div h4 {
    color: #009dda;
}
.business#blue .title + p{
  text-align: center;
}
.business#blue .title + p span{
  font-size:4.416rem;
  color:#109cda;
  border-bottom:double 1rem;
}
.business#blue h5 {
    color:#109cda;
}
.business#blue table th{
  background-color:#0082c3;
}
.business#blue table td{
  background-color:#e7f0fa;
  text-align: center;
}
.business#blue .reform {
    background-color: #e7f0fa;
}
.business#blue .reform .comment {
    margin-top: -11rem;
}
.business#blue .reform .btn_view span:before {
    background-color: #0082c3;
}
.business#blue .reform .btn_view span:after {
    background: url(../img/arrow_blue.png) 0 0 / contain no-repeat;
}
.business#orange .inner:after{
  background-color:#feefe2;
}
.business#orange .title {
  margin-bottom: 3rem;
   justify-content: center; 
}

.business#orange .title h3 {
    width: 21.34%;
  margin-right:4%;
}
.business#orange .title > div{
  width:auto;
}
.business#orange .title > div h4 {
    color: #f18e38;
}
.business#orange .title + p{
  text-align: center;
}
.business#orange .title + p span{
  font-size:4.416rem;
  color:#f18e38;
  border-bottom:double 1rem;
}
.business#orange h5 {
    color:#f18e38;
}
.business#orange table th{
  background-color:#de6500;
}
.business#orange table td{
  background-color:#feefe2;
  text-align: center;
}
.business#orange table td p{
  text-align: left;
  display:inline-block;
}
.business#orange table td:last-child {
    font-size: 2.2rem;
}
.business#orange .table2 th:first-child {
    width: 27%;
}
.business#orange .reform {
    background-color: #feefe2;
}
.business#orange .reform .comment {
    margin-top: -9rem;
}
.business#orange .reform .btn_view span:before {
    background-color: #f18f38;
}
.business#orange .reform .btn_view span:after {
    background: url(../img/arrow_orange.png) 0 0 / contain no-repeat;
}

.bg_gray{
  background-color:#e8e8e8;
  padding:15rem 0 10rem;
}
.counsel{
  background-color:#FFF;
  text-align: center;
  padding:7rem 0;
}
.counsel h3 + p{
  text-align: center;
  font-size:2.2rem;
  margin-top:1em;
}
.counsel .btn_contact{
  position:relative;
  bottom:auto;
  left:auto;
  width:100%;
  margin:2.5em 0;
}
.counsel .btn_contact a{
  font-size:2.2rem;
}
.btn_contact a span:after{
  top:0.2em;
}
.counsel .tel{
  font-size:3rem;
}
.sample{
  text-align: center;
  margin-top:10rem;
}
.sample h3{
  margin-bottom:6rem;
}

.sample .btn{
  margin-bottom:6rem;
}
.sample .btn a{
  display:inline-block;
  position:relative;
  font-size:2.2rem;
}
.sample .btn a:after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.9rem;
  right: 2.5em;
  top: 50%;
  margin-top:-1rem;
  background: url(../img/arrow.png) 0 0 / contain no-repeat;
  transition-duration: 0.3s;
}
.sample .btn a:hover:after{
  right:2em;
}
.sample li{
  margin-bottom:3rem;
}
.sample .copy{
  text-align: center;
  font-size:1.4rem;
  margin-top:5em;
}

.rollover {
  position: relative;
  display: inline-block;
}
.rollover img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
}
.rollover img.off {
  position: static;
}
.rollover img.on {
  display: none;
  z-index: 2;
}



/*---------------------------------------------------------------
横幅768px～1100pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1100px) {
  main .inner{
    padding:0 2%;
  }
  #main_v .title h1{
    padding:0 2%;
}
  .btn_contact{
  left:6vw;
}
  .business .inner {
    padding: 10rem 2%;
  }

}

/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  
.pc_display{
	display:none;
}
.sp_display{
	display:block;
}
  main img{
    max-width:100%;
  }
html{
	font-size:2.6vw;
}
  header{
    padding: 1.3rem 1.5rem;
  }
  header .logo{
    width:39vw;
    font-size:0px;
  }
  
  #main_v .title {
    position: relative;
    top: -18vw;
    left: auto;
    height: auto;
    margin-bottom:-18vw;
}
  #main_v .title h1 {
    height: auto;
}
  #main_v .title h1 img {
    height: auto;
}
.btn_contact {
    bottom: 7%;
    width: 100%;
  left:0px;
}
  .btn_contact a {
    padding: 1em 4em;
    font-size: 4vw;
}
  main .inner {
    max-width: 90%;
}
  #campaign {
    padding: 5rem 0;
    margin-bottom: 4rem;
    position:relative;
    z-index:1;
}
  #campaign .flex{
    display:block;
  }
  #campaign .flex h3 {
    width: 60%;
    margin:0 auto;
}
  #campaign .flex > div {
    width: 100%;
    margin-top: 5rem;
}
  #campaign .flex > div img{
    width:70%;
    margin:0 auto;
    display:block;
  }
  #campaign .flex > div .text {
    font-size: 1.4rem;
    margin-bottom:1.5em;
}
  .btn_detail{
    text-align: center;
  }
  .btn_detail a {
    font-size: 1.8rem;
}
  #campaign ul {
    display: block;
    width:90%;
    margin:0 auto;
    margin-top: 6rem;
}
  #campaign ul li {
    width: 100%;
    margin-bottom:10vw;
}
  #campaign ul + p {
    font-size: 1.3rem;
    text-align: left;
    margin: 2em 1em 4em;
    padding-left:1em;
    text-indent:-1em;
}
  #campaign .kikan p {
    font-size: 1.8rem;
    margin-bottom:1em;
}
  #campaign .kikan div {
    font-size: 4.5rem;
    white-space: nowrap;
}
  #campaign .kikan + p {
    font-size: 1.5rem;
}
  .business {
    margin-bottom: 7rem;
}
  .business .inner {
    padding: 4rem 0;
}
  .business .inner:before {
    right: 0rem;
}
  .business .inner:after {
    right: -0.5rem;
    top:0.5rem;
}
  
  .business .title {
    display: block;
    margin-bottom: 7rem;
}
  .business .inner > div {
    padding:0 5%;
}
  .business .title{
    text-align: center;
    margin-bottom:5rem;
  }
  .business .title h3 {
    width: 63.34%;
    margin: 0 auto 1em;
}
  .business .title > div {
    width: 100%;
}
  .business .title > div h4 {
    font-size: 2.6rem;
    text-align: center;
    margin-bottom:1em;
}
  .business .title > div h4 span {
    font-size:2rem;
}
  .business .title > div h4 + p {
    font-size: 1.6rem;
    text-align: left;
}
  .business .title > div h4 + p + span {
    font-size:1.8rem;
    margin: 0.5em auto 1.5em;
    text-align: center;
}
  .business table th {
    font-size: 1.4rem;
}
  .business table th:first-child{
    width:25%;
  }
  .business table td {
    font-size: 1.4rem;
}
  .business table td:last-child {
    font-size: 1.4rem;
    padding:1em;
}
  .business h5 {
    font-size:2rem;
}
.business h5 + p {
    font-size: 1.4rem;
    text-align: left;
}
.business .table2 td:last-child {
    font-size: 1.4rem;
}
  .business .caption li {
    font-size: 1.2rem;
}
  .business .menu {
    display: block;
    width:87%;
    margin:0 auto;
    margin-top: 2rem;
    margin-bottom: 19rem;
}
  
.business .menu li {
    width: 100%;
  margin-bottom:3vw;
}
  .business .reform{
    padding-bottom:10%;
  }
  .business .reform .btn_view {
    font-size:2rem;
}
  .business .reform ul {
    display: block;
}
  .business .reform ul li {
    width: 100%;
}
  .business#blue .inner:before {
    left: 0rem;
}
  .business#blue .inner:after {
    left: -0.5rem;
}
  .business#blue .title h3 {
    width: 59.34%;
    margin:0 auto 1em;
}
  .business#blue .title + p span {
    font-size: 2.6rem;
    border-bottom: solid 1px;
    position:relative;
}
  .business#blue .title + p span:after{
    content:"";
    position:absolute;
    bottom:-1vw;
    left:0px;
    width:100%;
    border-bottom:1px solid #109cda;
  }
  
      .business#blue h5 + p {
        font-size: 1.4rem;
        margin-left:3em;
    }
  .business#blue .menu {
        margin-bottom: 14rem;
    }
  .business .reform ul li {
        margin-bottom:2em;
    }
  .business .reform ul li:last-child {
        margin-bottom:0em;
    }
  .business#orange .title h3 {
    width: 51.34%;
    margin:0 auto 1em;
}
  .business#orange .title + p span {
    font-size: 2.6rem;
    border-bottom: solid 1px;
    position:relative;
}
  .business#orange .title + p span:after{
    content:"";
    position:absolute;
    bottom:-1vw;
    left:0px;
    width:100%;
    border-bottom:1px solid #f18e38;
  }
  .business#orange table td:last-child {
    font-size: 1.4rem;
}
      .business#orange .menu {
        margin-bottom: 13rem;
    }
  .business#orange .reform ul li {
        margin-bottom:1em;
    }
  .bg_gray {
    padding: 7rem 0 5rem;
}
  .counsel {
    padding: 5%;
}
  .counsel h3 + p {
    text-align: left;
    font-size: 1.4rem;
}
  .counsel .btn_contact {
    margin: 1.5em 0;
}
  .counsel .btn_contact a {
    font-size: 1.4rem;
}
  .counsel .tel {
    font-size: 1.5rem;
    white-space: nowrap;
}
  .sample {
    margin-top: 4rem;
}
  .sample h3 {
    margin-bottom: 5rem;
}
  .sample h3 img{
    width:50%;
}
  .sample .btn a:after {
    right: 1em;
}
  .sample .btn a:hover:after {
    right: 0.5em;
}
  .sample li {
    margin-bottom: 1rem;
}
  .sample .copy {
    font-size: 1rem;
    margin-top: 3em;
}
  
  
  
}