/*GREEN　#26B7BC*/
/*ORANGE　#FCC800*/


.logo{width:50%;}

@media screen and (min-width:750px){
.logo{width:40%;}
}

a {
color:#FCC800;/*GOLD*/
display:block;
color:#FCC800;
text-decoration-line:none;}

a:hover{color:rgba(235,196,117,.9)}


.logo{margin-right:auto;}


.menu-item{
list-style:none;
display:inline-block;
padding:10px;}

header{
display:flex;
width:100%;
height:15%;
align-items:center;
}


body {
color:#808080;
}

.img{text-align: center;}

img{max-width:100%;
height:auto;
}




.space{margin-bottom:8em;}
.space2{margin-bottom:10em;}
.space3{margin-bottom:5em;}






h2{font-size:250%;
color:#26B7BC;
  border-bottom: 3px solid #FCC800;
margin-top:2em;
}

h2:first-letter
{
  font-size: 150%;
  color: #FCC800;
}


h3 {
font-size:140%;
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border-top: 3px solid #26B7BC;
}

h3:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 220px;
  height: 250%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #26B7BC;
}

h3 span {
  font-size: 30px;
  font-size: 3rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: #fff;
}

h4{
font-size:180%;
font-weight:bold;
color: #FCC800;
text-align:center;
}


h5 {
font-size:180%;
  padding: 1rem 3rem;
  color: #fff;
  border-radius: 100vh;
background-color:#26B7BC;
text-align:center;
}
@media screen and (max-width: 750px){
h5{
font-size:120%;}
}




h6 {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border: 2px solid #000;
}

h6:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #000;
}

h7{
font-size:200%;
font-weight:bold;
color:#FCC800;
}





.strong{
font-weight:bold;
color:#26B7BC;}


/*ハンバーガーメニュー*/
nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background: #fff;
    color: #eee;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
}
nav.globalMenuSp ul {
    background: #757575;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px dotted #333;
}
/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
nav.globalMenuSp ul li a {
    display: block;
    color: #26B7BC;
    padding: 1em 0;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}
.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 13px;
    top: 12px;
    width: 42px;
    height: 51px;
    cursor: pointer;
    z-index: 3;
    background: #26B7BC;
    text-align: center;
}
.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #eee;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}
.navToggle span:nth-child(1) {
    top: 9px;
}
.navToggle span:nth-child(2) {
    top: 18px;
}
.navToggle span:nth-child(3) {
    top: 27px;
}
.navToggle span:nth-child(4) {
    border: none;
    color: #eee;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
}
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


@media screen and (max-width: 750px){
.img{
display:none;}
}

@media screen and (min-width: 750px){
.imgresponsive{
display:none;}
}



div.center{text-align:center;}

@media screen and (min-width: 750px){
.img03{
width:85%;}
}
@media screen and (max-width: 750px){
.img03{
width:100%;}
}



.flexbox{
display:flex;
flex-wrap:wrap;
padding:0.4em;
margin:0 0 5em;
text-align:center;
align-items:center;
justify-content:center;
}

.flexbox>div{
padding:1em;
flex:1 0 300px;
margin:0 auto;
}


.flexbox2{
display:flex;
flex-wrap:wrap;

padding:0em;
margin:0 0 1em;
text-align:center;
align-items:center;
justify-content:center;
}

.flexbox2>div{
padding:1em;
flex:1 0 200px;
margin:0 auto;
}


.flexbox3{
display:flex;
flex-wrap:wrap;

padding:0em;
margin:0 0 1em;
text-align:left;
justify-content:center;
}

.flexbox3>div{
padding:1em;
flex:1 0 400px;
margin:0 auto;
}

.textleft{
text-align:left;}


.box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #26B7BC;
    border-radius: 8px;
}
.box .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #26B7BC;
    font-weight: bold;
}
.box p {
    margin: 5px; 
    padding:5px;
}


.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #26B7BC;
}
.box1 p {
    margin: 0; 
    padding: 0;
}






section{
    margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */
     width:80%;         /* 幅を決定する */
margin-top:2em;
margin-bottom:2em;}

@media screen and (max-width:750px){
section{width:95%;}
}





*/サービスの流れ*/
div.img05{width:60%;}


@media screen and (max-width:750px){
div.img05{display:none;}
}


@media screen and (min-width:750px){
div.img05_2{display:none;}
}





/*選ばれる理由*/

.left{text-align:left;}


th.marubatu,td.marubatu{

    padding: 10px 20px;          /* 余白指定 */
}

th.marubatu{color:white;
    background-color:  #26B7BC;    /* 背景色指定 */
}

td.marubatu{
    background-color:  #F2F2F2;    /* 背景色指定 */
}



table.marubatu {font-size:125%;
    border-collapse: separate;  /* 表の線と線の間を空ける */
    border-spacing:  3px;       /* 表の線と線の間の幅 */
width:100%;
}


.maru{font-weight:bold;
font-size:125%;
color:#FCC800;}

.batu{font-weight:bold;
font-size:125%;
color:#3e3a39;}




/*お客様の声*/
.voice{width:70%;}

@media screen and (min-width:750px){
.voice{width:70%;}
}
@media screen and (max-width:750px){
.voice{width:100%;}
}



/*質問*/


dl{  margin:30px;
     line-height:1.8em;
     font-size: 1.4em;
     overflow: hidden;
     _zoom: 1;
background-color:white;
}


dl dt{
     margin:20px 20px 10 10;
}

dl dd:first-letter,
dl dt:first-letter{
     font-size: 2.5em;
     font-weight: bold;
     margin-right:10px;
     padding:5px;
}

dl dd{
     margin: 20px 20 10px 10;
     padding-bottom:15px;
}

dl dt:first-letter{
     color: #26B7BC;
}
dl dd:first-letter{
     color: #FCC800;
}



.qanda{
background-color:#26B7BC;
}


.grad-btn {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
color:#fff;
}
.grad-btn::before {
  content: "　続きを読む"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 20px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "　閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}





.copyright {
margin-top:1em;
    text-align: center;
    padding: 1rem 0;
    background-color: #424242;
}
.copyright a {
    color: #fff;
    text-decoration: none;
	display: inline;
}


.pagetop{
    display: none;
    position: fixed;
    right: 15px;
    bottom: 60px;
}
.pagetop a{
    display: block;
    font-size: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    background: #26B7BC;
    border-radius: 50%;
    line-height: 50px;
}
.pagetop a i{
    font-size: 20px;
    color:#FCC800;
    line-height: 50px;
}