@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&display=swap');
/* =Reset default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  font-weight: normal;
  text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: """";
}
b{ font-weight: 500;}

a img {
  border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
html {
  font-size: 62.5%;/*初期値16pxの62.5%でルートが10px*/
   scroll-behavior: smooth;
} 
body {
  line-height: 1.5;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  font-weight: 400;
}
/*全てをクリア*/
.clear {
  clear: both;
}
/* new clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix {
  zoom: 1;
} /* IE6 */
*:first-child + html .clearfix {
  zoom: 1;
} /* IE7 */
/* リンク設定
------------------------------------------------------------*/
a, a:visited {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  color: #0268b6;
  transition: all 0.5s ease 0s;
  cursor: pointer;
}
a:hover, a:active {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  outline: none;
  color: #d70c18;
}

/**** Clearfix ****/
/* レイアウト
------------------------------------------------------------*/
.inner {
  margin: 0 auto;
  max-width: 1200px;
  width: 98%;position: relative;
}
.inner2 {
  margin: 0 auto;
  padding:  0; position: relative;
  max-width: 1000px;
  width: 95%;
}
.inner5 { 
  margin: 0px auto ;
  padding: 0 0 70px; position: relative;
  max-width: 860px;
  width: 95%;
}
.inner3 {
  margin: 0 auto;
  padding: 30px 0; position: relative;
  max-width: 800px;
  width: 90%;
}
.inner4 {
  margin: 0 auto;
   padding: 30px 0; position: relative;
  max-width: 640px;
  width: 90%;
}

#wrapper {
  margin: 0 auto 0px;
  font-size: 16px;
  font-size: 1.6rem;
  padding: 0 0 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
 text-align: justify;
}
.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-style: normal;
}


/* 共通変更 フォントサイズ　*/
.font12 {
  font-size: 12px;
  font-size: 1.2rem;
}
.font14 {
  font-size: 14px;
  font-size: 1.4rem;
}
.font16 {
  font-size: 16px;
  font-size: 1.6rem;
}
.font18 {
  font-size: 18px;
  font-size: 1.8rem;
}
.font20 {
  font-size: 20px;
  font-size: 2.0rem;
}
.font22 {
  font-size: 22px;
  font-size: 2.2rem;
}
.font24 {
  font-size: 24px;
  font-size: 2.4rem;
}
.font26 {
    font-size: 26px;
    font-size: 2.6rem;
  }
.font28 {
  font-size: 28px;
  font-size: 2.8rem;
}
.font30 {
  font-size: 30px;
  font-size: 3.0rem;
}
.font32 {
  font-size: 32px;
  font-size: 3.2rem;
}
.font34 {
  font-size: 34px;
  font-size: 3.4rem;
}
.font36 {
  font-size: 36px;
  font-size: 3.6rem;
}
.font40 {
  font-size: 40px;
  font-size: 4.0rem;
}


/* ヘッダー
----------------------------------*/
#glovalheader { padding: 30px 0 10px ; z-index: 1000;position: fixed; /*← fixedで固定 */ width:100%; }
#glovalheader h1 { width:30%;  margin: 0 ; max-width: 336px;}
#glovalheader h1 img {  width:100%; height: auto; display: block; border-bottom: 1px solid #0268b6; padding-bottom: 3px;}
#glovalheader .inner1{ display: flex;  margin: 0 auto; width:98%; max-width: 1200px;}
 #glovalheader.smaller{ background: #fff; padding: 10px 0 10px ; border-bottom: 1px solid #ddd; }

/* ナビ
----------------------------------*/
#menu { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  margin: 0 0;  width:75%; 
}
#menu-inner {width: 100% !important;}
#menu-btn {
  display: none;
}

#menu-content {
  margin: 0; 
  list-style-type: none;
}

#menu-content > li {
  position: relative; padding:0 10px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#menu-content > li > a {
  display: block;
  padding: 0 5px 0;
  line-height: 40px;
  color: #000;
  text-decoration: none; 
position: relative;
  cursor: pointer;
    
}


#menu-content >  li > a:hover  {
 color: #0268b6;
background-position: bottom left; /* 下線のホバー時位置 */
  background-size: 100% 1px; /* 下線の横幅を100%にする */
}

#menu-content > li > a > .blogicon-chevron-down {
  margin-right: 5px;
}

#menu-content > li > ul.second-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding-left: 0;
  list-style-type: none;
  -webkit-box-shadow: 1px 1px 7px #bbb;
  box-shadow: 1px 1px 7px #bbb;
}

#menu-content > li:hover > ul.second-content {
  visibility: visible;
  opacity: 1; background: #fff;
  -webkit-transition: opacity 0.2s, visibility 0.2s;
  transition: opacity 0.2s, visibility 0.2s;
}

#menu-content > li > ul.second-content > li {
  text-align: left;
  width: 13em; padding:0 0; 
}

#menu-content > li > ul.second-content > li > a {
  display: block;
  line-height: 40px;
  color: #000;font-size: 14px; 
  text-decoration: none; padding: 0 0 0 2em; 
  position: relative;
}
#menu-content > li > ul.second-content > li > a::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f105"; font-size: 10px;
  position: absolute; 
  left:1em; top:50%; transform:  translateY(-50%);
} 

@media screen and (min-width: 1100px) {
   
    #menu-content {
  margin: 0; 
  list-style-type: none; display: flex;
justify-content:flex-end;
}

#menu-content > li > a::before {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  bottom: 6px;
  width: 100%;
  height: 1px;
  background-color: #0268b6;

  transition: transform .3s;
}
 

#menu-content > li > a::after {
 content: ' ';
	width:0;
	height: 0;
	position:absolute;
	border:5px solid transparent;
	border-top-color: #0268b6;
	bottom:-4px;
	left:45%; transform:  translateX(-50%) scale(0, 1);
   
}
#menu-content > li > a:hover::before,#menu-content > li > a:hover::after,#fq #menu-content > li > a.btnfq::after,#home #menu-content > li > a.btnhome::after,.home #menu-content > li > a.btnhome::before,#servicepage #menu-content > li > a.btnservice::after ,#flowpage #menu-content > li > a.btnflow::after  {
  transform: scale(1);}
   #menu-content > li > ul.second-content > li > a:hover {
  background: #0268b6;
  color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#menu-content > li.mob  {display: none;}

}
@media screen and (max-width: 1100px) {
#glovalheader {padding: 20px 0 10px ;z-index: 1000;}
#glovalheader h1 { width:50%;  margin: 0 ; min-width: 270px;}
 nav {
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    width: 60%;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 3;
    opacity: 0;
  }

  .open nav {
    left: 0;
    opacity: 1;
  }
 #navArea  nav .inner {
    padding: 1.5em 0; margin: 0  ;
width: 95% !important;}
 #navArea  nav .inner ul {
    list-style: none; 
    margin: 0;
    padding: 0;
  }
 #navArea  nav .inner ul li {
    position: relative;
    margin: 0;
  }
 #navArea  nav .inner ul li a {
    display: block;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }
  .toggle_btn {
    display: block;
    position: fixed; background: #a2bee5;
    top: 10px;
    right: 20px;
    width: 40px;
    height:40px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    z-index: 3;
  }
  .toggle_btn span {
    position: absolute;
    left: 4px;
    width:32px;
    height: 3px;
    background-color: #0268b6;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .toggle_btn span:nth-child(1) {
    top:10px;
  }
  .toggle_btn span:nth-child(2) {
    top: 18px;
  }
  .toggle_btn span:nth-child(3) {
    bottom: 10px;
  }
  .open .toggle_btn span {
    background-color: #fff;
  }
  .open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-45deg);
  }
  .open .toggle_btn span:nth-child(2) {
    opacity: 0;
  }
  .open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(315deg);
    transform: translateY(-8px) rotate(45deg);
  }
  #mask {
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 2;
    cursor: pointer;
  }

  #menu-content > li {
    width: 100%;
    margin: 0 0 1px;
  }
  #menu-content > li:hover {
    background: none;
  }
  #menu-content > li > a {
    height: 100%;
    padding: 0px 0 0 1em;
    font-size: 100%;
    background: #f0f0f0;
    border-bottom: 1px dotted #000;
  }
    
#menu-content > li > a::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f0da"; font-size: 12px;
  position: absolute; 
  left:5px; top:50%; transform:  translateY(-50%);
} 
    
  #menu-content > li > ul.second-content {
    visibility: visible;
    opacity: 1;
    width: 100%;
    position: relative;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  #menu-content > li > ul.second-content > li {
    width: 100%;
    text-align-last: left;
  }
  #menu-content > li > ul.second-content > li > a {
    padding-left: 1.5em;
  }
  #menu-content > li > ul.second-content > li > a:hover {
  background: #0268b6;
  color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#menu-content > li.mob.mob2{  margin: 1em 0 1px;}
 #menu-content > li.mob > a {
    height: 100%;
    padding: 0px 0 0 1em;
    font-size:95% !important;
    background: none; border: none;
  }
    
nav.footernav,nav.breadcrumb,nav.subarea {
    position:static; display: block;
    left: 0px;
    bottom: 0;
    width: 100%;

    overflow-x: auto;
    overflow-y:  auto;
    z-index:1;
    opacity:inherit;
  }
    nav.breadcrumb{ background: none;}
nav.footernav {
    background: #1994d1; 
  }
nav.subarea {background:#0268b6; }
    
}
/*# sourceMappingURL=style.css.map */



/* フッター
----------------------------------*/

#footer { margin: 0em auto 0; padding: 0em 0 0; width:100%;
  overflow: hidden;
  text-align: center;
  position: relative;  border-top: 1px solid #0268b6;
}
.footercontact{ position: relative;  min-height: 220px;}
.footercontact .footerillust{  width:50%; max-width: 360px; height: auto; position: absolute; left:0; bottom: 0;}
.footercontact .contact{ margin:1.5em 0 0 380px;  width:calc( 100% - 380px - 30px ); text-align: left; padding: 1.5em 1em 0em;  margin-bottom: 0em;}
.footercontact .contact img.logo{ margin: 2.5em 0 1em 10px;;  width:270px; height: auto; display: block; }
.footercontact .contact  a.tocompany{ margin: 0 0 0 1.5em; border: 1px solid ; padding:0em 1em; position: relative;}
.footercontact .contact  a.tocompany::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f105"; font-size: 10px;
  position: absolute; 
    left:5px; top:50%; transform:  translateY(-40%);
} 
.footercontact .contact  a.font24{ margin: 0 0 0 0.5em;  padding:0em 2.5em 0 1em; position: relative;  border: 1px solid;}
.footercontact .contact  a.font24::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f0e0";
  position: absolute; 
 right:1em; top:50%; transform:  translateY(-50%);
} 
.footercontact .contact p{ margin: 0.5em 0 0 10px;}
.footercontact .contact p.font12{  position: relative; padding-left: 2.2em;}
.footercontact .contact p.font12::before {
  content: "※";
  position: absolute; 
 left:1em; top:0;
} 


nav.footernav {background: #1994d1; color: #fff; padding: 30px 0; }
nav.footernav h3{ text-align: left; }
nav.footernav h3 img{ max-width:246px; height: auto; width:50%;}
nav.footernav ul { text-align: left; display: flex; margin: 1em auto 0;justify-content: space-between;
    flex-wrap: wrap; }

nav.footernav ul li{ text-align: left; margin: 0 0 0.5em; padding: 0;}
nav.footernav a{ display: inline-block;  margin: 0; padding:0em 1.5em ; position: relative; color: #fff;}
nav.footernav a::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f105"; font-size: 10px;
  position: absolute; 
    left:5px; top:50%; transform:  translateY(-40%);
} 
nav.footernav a::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f105"; font-size: 10px;
  position: absolute; 
    left:5px; top:50%; transform:  translateY(-40%);
} 
nav.footernav ul ul { text-align: left; display: block; margin: 0.5em 0 0 1.5em;}
nav.footernav ul ul li { margin: 0 0 0.5em; padding: 0;}
nav.footernav ul ul li a{padding:0em 0 0 1em ; }
nav.footernav ul ul li a::before {
  content: ""; 
  background: #fff; height: 1px; width:1em; left: 0; top:50%; transform: translateY(-50%);
} 
nav.footernav ul ul.privacyhoka { text-align: left; display: block; margin: 0.5em 0 0 0;}
nav.footernav ul ul.privacyhoka li a::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f105"; font-size: 10px;
  left:5px; top:10%; transform:  translateY(-10%);
  background: none;
} 
nav.footernav ul ul.privacyhoka li a{padding:0em 0 0 1.5em ;}
nav.footernav ul ul.privacyhoka li:last-child{margin: 2em 0 0em;}
.address{ text-align: right; margin: 0 auto 1em;}

#page-top1 {
  display: block;
  position: fixed;
  z-index: 9999;
  right: 40px;
  width: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  transition: .5s;
  font-size: 16px;
  font-size: 1.6rem;
  vertical-align: middle;
  background: #0268b6;
  border-radius: 50%;
}
a#page-top1 {
  color: #fff !important;
}
#page-top1 span {
  display: block;
  margin: 10px auto 0;
  font-size: 20px;
  font-size: 2.0rem;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.center {
  text-align: center;
}

/* 共通文字
----------------------------------*/

ol {
  list-style: none;
  counter-reset: number; 
}
li {
  position: relative;
  padding-left: 1.5em;
}


.breadcrumb {
     margin: 47px auto 0px; border-top:1px solid #0268b6; 
  padding: 0.3em 0 0.4em;
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  display: inline-block;
  margin: 0  0 0; padding: 0 0 0 .5em;
  content: "|";
}
.breadcrumb li{
  margin: 0  0 0; padding: 0 0 0 .5em;
}

.subheader{ background:url("../img/common/titleback.jpg") 50% repeat-y; background-size: 100% auto;}
.subheader .inner { background:url("../img/common/title.png") 100% 0% no-repeat; background-size: auto 100%; }
.subheader h1 { padding: 60px 0 0 ;}
.flex{display: flex;}
.blue{ color: #0268b6;}
.subarea {background:#0268b6; }
.subarea ul{ justify-content: center;}
.subarea a {color: #fff; position: relative; padding: 1.8em 1em 0.4em; display: block; }
.subarea ul > li > a::after { transition: all 0.5s ease 0s;
 content: ' ';
	width:0;
	height: 0;
	position:absolute;
	border:5px solid transparent;
	border-top-color:  #fff;
	top:16px;
	left:50%; transform:  translateX(-50%);
 }
.subarea  ul > li > a:hover:after { transition: all 0.5s ease 0s;	top:2px; }

.home #contents{ margin: -0px 0 0; z-index:0; padding: 0;}
.sub #contents{ margin:80px 0 0; z-index: 100; padding: 0px 0 0 0;}


/* slide */

.slide {
  position: relative;
  margin: 0;
  padding: 0;  height: 640px;
    z-index: -1
}
.slide .item {
  position: relative;
  height: 100%;width: 100%;
}



.slide .item img.back {
  width: 100%; height: auto;
 position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.slide .item h2{ position: absolute; top:40%; left: 8%;  transform: translateY(-40%); line-height: 1.8;}
.slide .item h2 img{  width: 500px; height: auto; border-bottom: 1px solid #0268b6; padding-bottom: 5px; margin: 20px 0 0;}
.slide .item.no02 h2{ top:65%;transform: translateY(-65%); left: 10%;}

.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

article.white{ background: #fff; margin: -50px 0 0;border-radius: 70px 70px 0 0; padding: 45px 0;}
article.bage{ background: #fcf8e0; padding: 45px 0 90px;}
article.blueback{ background: #1994d1; padding: 45px 0 90px; color: #fff;}
.sub article{ padding: 25px 0 ;}
.sub article.top{ padding: 0px 0 25px;}

.home article h2{text-align: center;font-weight: 500;}
.home article h2 img{width:95%; max-width: 350px; height: auto;}
.home article .earth{ position: absolute;  width:210px; height: auto; top:-100px; left:50px;}
article.white ul{ justify-content:space-between; margin: 1em auto;}
article.white li{ width:calc(100% / 3 - 1.2em ); text-align: center; border: 2px solid #0268b6; padding: 1em 0; }
article.white li img{ width:110px; height: auto; display: block; margin: 1.3em auto ; }
article.white li p{  margin:0 auto; text-align: left;width:80%;text-align: justify;}
.home article a.more{ background: #0268b6; color: #fff; display: block; position: relative; padding: 0.8em 1em; margin: 2em auto 0;transition: all 0.5s ease 0s; }
.home article a.more:after{ color: #fff; display: block;  
font-family: 'Font Awesome 6 Free';
font-weight: 900; position: absolute;
  content: "\f138"; font-size: 22px;
 right:10px; top:50%; transform:  translateY(-50%);
} 
.home article a.more:hover{ background: #e8f4fc; color: #0268b6; transition: all 0.5s ease 0s; }
.home article a.more:hover:after{ color: #0268b6;  } 
article.white a.more{width:17em; text-align: center;}
article.bage.no02 img{width:45%; height: auto;}
.home article.bage a.more{width:19em; padding: 0.8em 2.5em 0.8em 1em;}

article.no02 { display: block; vertical-align: middle;}
article.no02 .inner2{ text-align: center;}
article.no02 .inner2 h3{ margin: 1em 0 0.5em; font-weight: 500;}
article.no02 .inner2 .box{ display:  inline-block; vertical-align:top; width:45%; margin: 2em auto 0;}
article.no02 .inner2 .box img{width:100%; height: auto;}

article.no03 img{ width:100%; max-width: 1000px;  height: auto; display:block; margin: 2em auto 2em;}
article.bage.no04 img{width: calc(100% - 2em);}
article.bage.no04 ul{ justify-content: space-between; margin: 2em auto;}
article.bage.no04 ul li{ width:45%; min-width: 200px; border: 1px solid #000; background: #fff; border-radius: 15px; padding: 1em; position: relative;transition: all 0.5s ease 0s;}
article.bage.no04 ul li:hover{ border: 1px solid #0268b6; background: #e8f4fc; transition: all 0.5s ease 0s;}
article.bage.no04 ul li p{ color: #000; margin: 0.5em 1.7em 0 0.5em;}
article.bage.no04 ul li:after{  display: block;   background: #e8f4fc;
font-family: 'Font Awesome 6 Free';color: #0268b6; border-radius: 50%;
font-weight: 900; position: absolute;
  content: "\f105"; font-size: 20px; width:1.5em; height: 1.5em; line-height: 1.5em;  text-align: center;
 right:10px; top:50%; transform:  translateY(-50%);
} 


/* サブページ
----------------------------------*/

/*プライバシ*/
.privacy dt {
  margin: 2em auto 0;
  border-left: 5px solid #1994d1;
  padding: 0 0 0 8px;
}
.privacy dd ul {
  margin: 0.5em;
}
.privacy dd ul li {
  margin: 0.5em 0 0.5em 1.4em;
}
.privacy dd ul li::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
  font-size: 16px;
  content: "\f14a";
  margin: 0 0.5em 0 -1.3em;
}
.privacy dd {
  margin: 0.5em 0 2em 15px;
}
.privacy .shomei {
  margin: 1em;
}

div.chuijiko {
  margin: 2em auto
}
div.chuijiko b {
  display: block;
  margin: 0 0 0 1.2em;
  padding: 0;
  font-weight: normal;
}
div.chuijiko b:before {
  content: "※";
  margin: 0 0.2em 0 -1em
}


.sub article h2{ text-align: center; margin: 1em auto;}
.sub article span.line{border-bottom: 1px solid #0268b6; padding: 0 0.5em;  position: relative;}
.sub article h3{ text-align: center; margin: 1em auto;}
.sub article h2 img{ position: absolute; left:5px; top:50%; transform: translateY(-50%); width:29px; height: auto;}
.sub article span.line.plane{ padding: 0 0.5em 0 calc( 0.5em + 30px );  }

/*service
------------------------------------------------------------*/
.service{ position: relative;}
.service .earth{ position: absolute; left: -40px; top:45px; display: block;  width:210px !important; height: auto;}
.service .service2{  position: relative; margin: 50px auto 0;}
.service .service2 p{  margin: 0 auto; padding-left:30px; max-width: 620px;
  width: 90%;}

.service .tokucho li{ width:calc( 100% / 3 - 3em ); background: #f0f0f0; padding: 1em 1em;  margin: 0.5em; }
.service .tokucho li h4{  text-align: center; padding: 1em 0 0;  height: 2.5em;}
.service .tokucho li:first-child h4{height: 3em;padding:0.5em 0 0;}
.service .tokucho li img{ display: block; margin: 1em auto; width:90%; max-width: 185px; height: auto;}
.service .tokucho li:last-child {  background: none;  }
.service .tokucho li:last-child div{ margin: 20px 0 0 -20px ;  background: #d6f2fc; border-radius: 50%;  height: 240px; width:240px; padding: 20px; }
.service .tokucho li:last-child div span{letter-spacing: -0.8px; }


.service .tokucho li:nth-child(4) h4,.service .tokucho li:nth-child(5) h4{ height: auto;}
.service .tokucho li p{ margin: 1em auto; width:95%;}
.service .tokucho li:last-child img{ margin: 1em auto 0em; }
.wrap{ flex-wrap: wrap;}
.reverse{flex-direction: row-reverse;}
.howto li{ width:calc( 50% - 3em ); background: #d6f2fc; padding:0.5em 1em;  margin: 0.5em; border-radius:5px  }
.howto li:last-child{ width:calc( 100% - 3em ); }
.howto p{ margin: 1em 0 0 1em}
.howto li a{ display: inline-block; border-bottom: 1px solid; padding: 0;}
.howto .chui{  display: block;}
.system  a{ display: block; margin: 0 auto; text-align: right; width: 100%; max-width: 680px;}
.chui{position: relative; padding-left: 1.5em;}
.chui:before{content: "※"; position: absolute; left:0;}
.people { text-align: center;}
.people.people2 { border-top:1px solid #000; padding: 20px 0 0; margin: 20px auto 0}
.people .box {display: inline-block; vertical-align: top; width:45%; max-width: 420px; text-align: left; padding:0 1.5em 1.5em; position: relative; }
.people .box h3 { position: relative; width:100%; text-align: left; }
.people .box.box3 {padding:1.5em 1.5em; }
.people .box.box3 img{left:0; top:5em;}

.people .box img {width:140px; height: auto;background: #fff;border-radius: 50%;}
.people .box ul,.people .box img {display:inline-block; vertical-align: middle;}
.people .box ul{ margin:1em 0 0 0px; width: calc(100% - 160px );}
.people .box ul li{ position: relative; padding-left: 15px; margin: 0em 0 0.5em 1em;}
.people .box li:before{ content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #069ee2;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
     position:absolute; left:0; top:7px;
}
.people .box.box2 { margin: 1em auto 2em;  display: block; vertical-align: top; width:100%; max-width:860px; text-align: left; padding:0 1.5em;}
.people .box.box2:last-child { margin: 0 auto 0 ;}
.people .box.box2 h3{height:auto;  width:100%;  padding-left:0;  border-bottom: 1px solid #000;}
.people .box.box2 ul{ margin-left: 0px}
#area h4{ width:330px;}
#area .flex.inner5{ padding: 0 0 1em; }
#area .flex p{ width: 50%; margin:1em  40px 0 0;}
a.area{ display: block; margin: 0.1em auto 0.5em; width:330px; background: #0268b6; color: #fff; position: relative;}
a.area span{ display: block;  position: absolute; top:50%; transform: translateY(-50%); left:25%; font-weight: 500;}
a.area:after{  display: block;
font-family: 'Font Awesome 6 Free';
font-weight: 900; position: absolute;
  content: "\f0da";
 right:10px; top:50%; transform:  translateY(-50%);
} 
a.area2{  display: block; margin: 0 auto; }
.kinshi{ margin: 3em auto 0; position: relative; }
#area .kinshi h4{ color: #d70c18; margin: 2em 0 2em 2em; width:auto; max-width: 80% ; max-width:370px; font-weight: 500; position: relative; padding-left:30px;}
#area .kinshi p{ margin: 1em 0 0 2em}
#area .kinshi h4 b{ border-bottom: 1px solid;}
#area .kinshi h4 img{ position: absolute; top:0; left:0;width:22px; height: auto;}
img.photobpx{ position: absolute; right: -10%;top:2%; width:60%; max-width: 260px; height: auto;}

.kinshi .flex{  justify-content: space-between;} 

.kinshi a.font18{  background:#d70c18; color: #fff; position: relative; width:calc(100% / 3 - 10px ); padding: 0.5em 0 0.5em 55px;justify-content: space-around;margin:5px 2px; line-height: 1.3;
        align-items: center;}
.kinshi a.font18 img{ display: block;  position: absolute;  width:40px; height: auto; left:5px; top:50%; transform: translateY(-50%); }
.kinshi a.font18 span{ display: block; padding: 0.6em 0 0; }
#other_services {border-top:1px solid #000; padding: 20px 0 0; margin: 20px auto 0}
#other_services h4 {border-bottom: 1px solid #0268b6; position: relative; text-align: left; padding-left: 50px; font-weight: 500; margin: 2em auto 0; }
#other_services h4 img {width:40px; height: auto; position: absolute; left:0; top:50%; transform: translateY(-50%);}
#other_services  p { margin: 1em 0 1em 3em; }
#other_services .flex{ margin: 0 0 3em; align-items: flex-start; /* 追加 */}
#other_services .flex p {width:calc(70% - 4em); }
#other_services .flex img {width:30%; height: auto; margin: 1em 0 3em 1em;}


/* 流れ
------------------------------------------------------------*/

ol.deco {
  counter-reset: ol-step-counter;
  list-style: none;
  padding-left: 32px;
  margin: 0 auto;
  position: relative; padding: 0;
    box-sizing: border-box;
}

ol.deco li {
  padding: 30px 0 0em 3.6em; position: relative;
  border: 1px solid #0268b6; border-radius: 10px; 
  margin: 0 auto 50px; width: auto;
 
}
ol.deco li:before {
  content: "step"; position: absolute; left:20px; top:30px;
    color: #d70c18; font-family: "Lato", sans-serif;
  font-weight: 500;
  font-style: normal; font-size: 18px;
    
}

ol.deco>li h3 {
  margin: 0 0 0; text-align: left; position: relative;
  counter-increment: ol-step-counter; padding-left:40px;
  font-weight: 500; 
}
ol.deco>li h3::before {
  position: absolute;
  left:0em;
  top:0px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  content: counter(ol-step-counter);
  font-size: 22px;
  height:30px;
  justify-content: center;
  margin: 0;
  width: 30px;
  font-family: "Lato", sans-serif;
 font-weight: 600;
  background:#d70c18; 
  border-radius: 50%;
  color: #fff;
}
ol.deco li p{ margin: 1em 230px 1em 0.6em;position: relative; padding-left: 1em;}
ol.deco li p:before{ display: block;
font-family: 'Font Awesome 6 Free';
font-weight: 900; position: absolute;
  content: "\f0c8"; font-size: 80%;
 left:0px; top:3px;
}
ol.deco li p.chui:before{ 
  content: "※"; font-size: 80%;
 left:0px; top:3px;
}

ol.deco li img{width:175px; height: auto; position: absolute; right: 15px; top:30px;}
ol.deco li::after {
position: absolute;
display: block;
content: '';
bottom: -30px;
left: 50%;
    transform: translateX(-50%);
width: 50px;
height: 14px;
background-color: #0268b6;
 clip-path: polygon(0 0,100% 0, 50% 100%);
}
ol.deco li:last-child::after{ display: none;}
ol.deco li .omatome{ background: #FFF5EE;  padding:0.5em 1em 0.8em; margin: 0.5em 200px 1em 0; border: 1px solid #d70c18;  border-radius: 10px;}
ol.deco li .omatome h5{ margin: 0 0 0 ;position: relative; padding-left: 0.8em; color:#d70c18; }
ol.deco li .omatome h5:before{ display: block;
font-family: 'Font Awesome 6 Free';
font-weight: 900; position: absolute; color:#d70c18;
  content: "\f111"; font-size: 50%;
 left:0px; top:55%; transform: translateY(-50%);
}
ol.deco li .omatome  p{ margin: 0 0 0 1em; padding-left: 0;}
ol.deco li .omatome  p:before{display: none;}
.price  p{ margin: 1em auto 2em; text-align: center;}
.price ol{  margin-bottom: 3em;}
.price ol li {border:1px solid #F8894E; padding: 0; margin-bottom: 1em;  }
.price ol li h3 { background: #F8894E;  color: #fff; margin: 0; text-align: left; padding: 0.2em 0 0.2em 1em; }
.price ol li h3 span{  display: inline-block; vertical-align: middle; margin-right: 0.5em;}
.price ol li p{  text-align: left; margin: 0;}
.price ol div{ margin: 1em auto; width:90%;}
.price  ul {  text-align: left; margin: 0;}
.price  ul h4 {   margin-right: 1em;}
.price  ul li{  margin-right: 1em; border: none; position: relative; padding-left: 15px; margin: 0.2em  1em;}
.price  ul li:before{ content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #069ee2;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
     position:absolute; left:0; top:7px;
}
.price  ul.chuijiko{ margin: 0 auto;}
.price  ul.chuijiko li {margin: 0.2em 0 0.2em 1em;}
.price  ul.chuijiko li:before{ content:  "※";     /* 空の要素作成 */
    width:  auto;               /* 幅指定 */
    height:  auto;             /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color:#fff; /* 背景色指定 */
    border-radius:  none;        /* 要素を丸くする */
     position:absolute; left:0; top:0;
}
.price ol li.list{border:1px solid #0268b6;}
.price ol li.list h3 { background: #0268b6;padding: 0.3em 0 0.3em 1em;  }

.price ol li.list li {margin: 0.2em 0 0.2em 0;  border-bottom: 1px solid #ddd;}
.price .list li:before{ position: absolute;
content: '';
    width:  8px;               /* 幅指定 */
    height:  8px;         /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #069ee2; /* 背景色指定 */
    border-radius: 1px;        /* 要素を丸くする */
    left:0; top:7px;
}
.price .list .chuijiko { margin: 1em 0 0 }
.price .list .chuijiko li{border: none;}


#note li {position: relative; margin: 0.5em 0 1em; padding: 0.5em 0 0 35px; line-height: 1.6;}
#note li::before { position: absolute;  top:5px; left:5px;
  font-family: "Font Awesome 5 Free";
 font-size: 20px;  color: #1994d1;
 font-weight: 900;  content: "\f06a";  
}
#note li b { font-weight:400; border-bottom: solid #0268b6 1px;}
#note li ul{ margin: 1em 0 1em 1em;}
#note li li {position: relative; margin: -0.5em 0  0!important; padding: 2px 0 0 30px; line-height:1.2; display: flex; overflow-wrap: break-word;}
#note li li::before { display: none;}
#note li img{ width:20px; height: auto; position: absolute;  top:0px; left:5px;}
#note li li span{ width:16em; }
#note li a{border-bottom: 1px solid;}
#regulation{ text-align: center;}
#regulation a{display: block;position: relative; margin: 0.5em auto 2em; width:20em; padding: 0.5em 0 0 0px; font-weight: 500; 
border-bottom: 1px solid;}
#regulation a::before { position: absolute;  top:5px; left:-45px;
  font-family: "Font Awesome 5 Free";
 font-size: 40px;   top:50%; transform: translateY(-50%);
 font-weight: 900;  content: "\f1c1";  
}

/* 企業情報
------------------------------------------------------------*/
#message h3{ text-align: left;}
#message p{ margin: 1em 0 0 0}
#message .flex img{width: 250px; height: auto; }
#message .flex {margin:3em auto 0; justify-content: flex-end; }
#message .flex span { display: inline-block; margin-left:1em;}

#about .blueback ol { counter-reset: count 0; text-align: center;
}
#about .blueback ol li { display: inline-block; vertical-align: middle; width:200px; height: 200px; border-radius: 50%; background: #fff; margin: 15px;
position: relative; color: #000; padding: 0;}
#about  .blueback li:before {
  position: absolute;
 content:counter(count) ;
  counter-increment: count 1; 
top:10px; left:50%; transform:  translateX(-50%);
   font-family: "Lato", sans-serif; font-size: 36px; font-weight: 600;
    color: #0268b6;
}
#about .blueback ol li span { display:block;  position: absolute; top:60%; left:50%; transform: translate(-50%,-60%); width:160px;}
#company dl.inner4{ border-bottom: 1px solid #0085e0; margin:0em auto 2em;
   padding: 0px 0; }
#company dl dt,#company dl dd{ border-top: 1px solid #0085e0; padding: 1em;}
#company dl dt{  width:6em;}
#company dl dd{ width: calc(100% - 10em);}


/* fq
------------------------------------------------------------*/
details { margin: 0; border-top: 1px solid;}
details:last-child { border-bottom: 1px solid;}
details .honbun {
  margin: -1em 5px 1em;
  padding:2em 2em 2em 80px;position: relative;
  background: #f0f0f0;
}
details .honbun img.a{ position: absolute; left:1em;top:1em;  width:45px; height: auto;}
details summary {position: relative; padding: 2em 3em 2em 60px;  display: block; list-style: none;}

details summary img{ position: absolute; left:5px;top:40px;  width:30px; height: auto;}
/* 一部ブラウザで消えなかった場合は以下も追記 */
summary::-webkit-details-marker {
  display:none;
}
details summary::before { position: absolute;  top:30px; right:5px;
  font-family: "Font Awesome 5 Free";
 font-size: 30px; 
 font-weight: 900;  transition: all 0.1s ease-out;content: "\f067";  
}
/**
 * アコーディオンがオープン時は回転
**/
details[open] summary::before {
    position: absolute;  top:30px; right:5px; margin: 0;
transform:rotate(45deg);transition: all 0.2s ease-out;}


.slider table {
  margin: 1.5em auto 1.5em ;
  padding: 0; width:95%;
  border-collapse: collapse; background: #fff;
}
.slider tr th{ background: #d6f2fc;}
.slider tr th, .slider tr td {
 border: 1px solid #069ee2; font-weight: 300;
}
.slider th, .slider td {
  padding: 0.5em;
  white-space: nowrap;
}
.slider table td span{display: block; font-weight: 600; color: #069ee2; }
details .honbun b{ color: #0268b6;}

.system .slider table { width:95%;   max-width: 95%;}
.system .slider table th {font-weight: 600;}

.system .slider tr th, .system .slider tr td { border: none;
 border-top: 1px solid #069ee2;  border-bottom: 1px solid #069ee2;
 padding: 1em;
}
.system .slider tr td.line {
 border-left: 1px solid #069ee2;  border-right: 1px solid #069ee2;
}
.system a{ display: block;}
details a { display: block; text-align: right; margin: 0.5em 0; padding-right: 1em; position: relative;}
details a::after { font-family: 'Font Awesome 6 Free';
font-weight: 900;
  content: "\f0da"; 
  position: absolute; 
  right:0; top:50%; transform:  translateY(-50%);}

/* プライバシー
------------------------------------------------------------*/

/* お問合せ
------------------------------------------------------------*/
article.contact h2{ margin: 1em 0 ;}
article.contact h3.title{ margin: 3em 0 0;}
article.contact h3.font16{ margin: 0.5em 0 0;}
article.contact p.doctor{ position: relative; margin: 1em 0 ;background: #e5ef81; padding: 0.5em 0 0.5em 2em;}
article.contact p.doctor .fa-shield-dog{ position: absolute; left:0.5em; top:50%;  transform: translateY(-50%);}
article.contact a.policy{ display: block; margin: 1em auto; width:15em;  text-align: center;}
article.contact a.policy .fa-circle-check { display: inline-block; margin-right: 0.5em;}



hr.style6 {
  background-color: #fff1d5;
  border-top: 2px dotted #009755;
}



article.contact dl { border-top: 1px solid #ddd; 
  margin: 10px auto 20px;flex-flow: wrap;
        align-items: center;} 

article.contact dt {
  width:12em ;
  text-align: left;position: relative;
 padding: 1em 0 1em 0.5em; 
    background: none !important;
     border-bottom: 1px solid #ddd; 
}

article.contact dd {
  width: calc(100% - 13em);padding: 0.8em 0 1em;
 text-align: left;border-bottom: 1px solid #ddd;background: none !important;
 
}
article.contact dd p{ margin: 0.3em 0;}
article.contact input[type="text"], article.contact input[type="email"], article.contact input[type="tel"], article.contact textarea {
  padding: 0.8em;
  outline: none;
  display: block;
  border: none;
 border-bottom: 1px solid #DDD;
  margin: 0 0 0.5em;
  max-width: 500px;
  width:calc(90% - 1.6em); background: #fff !important;
}

article.contact input[type="text"]:focus, article.contact texture:focus, article.contact input[type="tel"]:focus , article.contact input[type="email"]:focus{
  border: 1px solid #d42a28;background: #ffd7d7!important;
}
article.contact input.p-postal-code[type="text"] {
  max-width: 10em;
}

article.contact button {display: inline-block; vertical-align: middle;
  font-size: 20px !important;
  font-size: 2.0rem !important;
  margin: 30px 0.5em 25px;
  vertical-align: middle;
  color: #fff;
  background-color: #297ACC;
  padding: 0;
  height: 50px;
  line-height: 50px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #297ACC;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
  width: 60%;
  max-width: 250px;
}
article.contact button[type="reset"]{
width: 30%;
  max-width: 200px;
 background-color: #999; border: 1px solid #999;
}
article.contact button[type="reset"]:hover {
  background: #AA0C0C;
  border: 1px solid #AA0C0C;
  color: #fff;
}
article.contact button[type="submit"]:hover {
  background: #AA0C0C;
  border: 1px solid #AA0C0C;
  color: #fff;
}

input[type="checkbox"] {
  position: relative;
  width: 16px;
  height: 16px; background: #fff;
  border: 1px solid #000;
  vertical-align: -5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  content: '';
}

/* 基本のセレクトボックスのカスタマイズ */
.select {
  background: #fff;
  height: 40px;
  width: 300px;
  border-radius: 5px;
  position: relative;
  z-index: 1;
    margin-bottom: 0.5em;
}

.select::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: 2px solid #3368B1;
  border-right: 2px solid #3368B1;
  z-index: -1;
}

select {
  /* 初期化 */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0 10px;
}



/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:1153px) {
.no01 h2{ margin:0 0 0.5em 100px;}
.no01 img.dog2{ width:100px; height: auto; left:-0px; top:-10px;}
.flow img.dog2{ width:160px; height: auto; right:-10px;}
.flow div.white p{ margin: 0.5em calc(1.5em + 150px) 0.5em 1.5em;}
#footer article img.dog3{ right:-70px; }
}
@media only screen and (max-width:1080px) {
.service .earth{ position: absolute; left: 0px; top:45px; display: block;  width:150px !important; height: auto;}
.service .service2 p{  margin: 0 0 0 120px; padding-left:30px; max-width: 620px;
  width:calc(90% - 120px );}
}
@media only screen and (max-width:900px) {
  #wrapper {
    font-size: 14px;
    font-size: 1.4rem;
  }
  /* 共通変更 フォントサイズ　*/
  .font12 {
    font-size: 10px;
    font-size: 1.0rem;
  }
  .font14 {
    font-size: 12px;
    font-size: 1.2rem;
  }
  .font16 {
    font-size: 14px;
    font-size: 1.4rem;
  }
  .font18 {
    font-size: 16px;
    font-size: 1.6rem;
  }
  .font20 {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .font22 {
    font-size: 20px;
    font-size: 2.0rem;
  }
  .font24 {
    font-size: 22px;
    font-size: 2.2rem;
  }
  .font26 {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .font28 {
    font-size: 26px;
    font-size: 2.6rem;
  }
     .font30 {
    font-size: 28px;
    font-size: 2.8rem;
  }
  .font32 {
    font-size: 30px;
    font-size: 3.0rem;
  }
  .font34 {
    font-size: 32px;
    font-size: 3.2rem;
  }
  .font36 {
    font-size: 34px;
    font-size: 3.4rem;
  }
  .font40 {
    font-size: 38px;
    font-size: 3.8rem;
  }
.font86 {
  font-size: 70px;
  font-size: 7.0rem;
  font-weight: 600;
}
.home article .earth{ max-width:200px; width:30%; height: auto; top:-100px; left:10px;}
article.white{ background: #fff; margin: -50px 0 0;border-radius: 30px 30px 0 0; padding: 45px 0;}
ol.deco li {
  padding: 30px 1.5em 0em 4em; }
    img.photobpx{max-width: 200px; height: auto;right: 0%;}
}
@media only screen and (max-width:810px) {
  .slide .item h2{ position: absolute; top:150px; left: 5%;  transform: translateY(0%); line-height: 1.8;-webkit-text-stroke: 2px white;
  text-stroke: 2px white;
  paint-order: stroke;}
  .slide .item.no02 h2{ top:50%;transform: translateY(-50%); left: 5%;}

   .slide .item h2.font30 {
    font-size: 24px;
    font-size: 2.4rem;
  }
.slide .item h2 img{  max-width: 500px; width: 70%; height: auto;
 filter: drop-shadow(1px 1px 1px #fff);}
article.no02 .inner2 .box{ display: block; vertical-align:top; width:100%; margin: 4em auto 0;}
article.no02 .inner2 img,article.no02 .inner2 .box img{width:80%; max-width: 400px; height: auto;display: block;margin: 0 auto 1.5em;}  
article.bage.no04 ul li{ width:95%; min-width: 200px;max-width: 400px; margin: 0.5em auto;}
article.bage.no04 ul li p{ color: #000; margin: 0.5em 3em 0 0.5em;}  
details .honbun { padding:1em 0 1em 50px;}
details .honbun img.a{ width:25px; height: auto;}
details summary {padding:1.5em 3em 1.5em 40px; }
details summary img{ position: absolute; left:5px;top:30px;  width:25px; height: auto;}
details summary::before {  top:20px; right:5px;}
ol.deco li p{ margin: 1em 150px 1em -2em;} 
ol.deco li img{width:150px; height: auto; right:10px; top:40%; transform: translateY(-40%);}
.people .box {display: block;  width:90%; max-width: 500px; margin: 0 auto; }
.people .box.box2 { margin: 1em auto 2em;  width:90%; max-width: 500px; text-align: left; padding:0 1em;}
    

#area .flex p,#area .flex div{ width: 90%; margin:1em auto 0.5em; max-width: 400px;}
a.area{  margin: 0.1em auto 0.5em; max-width:330px;width: 90%;}
a.area2{  text-align: right; }
.kinshi .flex{ flex-wrap: wrap;   margin: 1em auto 0; width:90%; max-width:550px;} 
.kinshi a.font18{   width:calc(50% - 65px ); padding: 0.5em 0 0.5em 55px;} 
 

}
@media only screen and (max-width:750px) {  
.subheader .inner { background:url("../img/common/titlemob.png") 100% 50% no-repeat;  background-size:auto 50% ; }
.home article .earth{ max-width:200px; width:25%; height: auto; top:-80px; left:0px;}
article.white ul{ justify-content:space-between; margin: 1em auto;}
article.white li{ width:calc(50% - 1em );  padding: 1em 0; margin: 0.5em 0; }
#note li li span{ width:90%; display: block !important; }
#note li li {margin: 0.5em 0; display: block;}
.service .tokucho li{ width:calc( 50% - 3em ); background: #f0f0f0; padding: 1em 1em;  margin: 0.5em; }
.service .tokucho li:last-child div{ margin: 20px 0 0 0px ;  background: #d6f2fc; border-radius: 50%;  height: 240px; width:240px; padding: 20px  }
#area .kinshi h4{ margin: 2em 0 !important  ; width: calc( 90% - 200px) ; max-width:370px; font-weight: 500; position: relative; padding-left:30px;}
  
}

@media only screen and (max-width:700px) {
  .font26 {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .font28 {
    font-size: 24px;
    font-size: 2.4rem;
  }
     .font30 {
    font-size: 26px;
    font-size: 2.6rem;
  }
  .font32 {
    font-size: 28px;
    font-size: 2.8rem;
  }
  .font34 {
   font-size: 28px;
    font-size: 2.8rem;
  }
  .font36 {
    font-size: 32px;
    font-size: 3.2rem;
  }
.slide { height: 500px;
}
    
    
.slider table {
  margin: 1.5em 1em 1.5em 0;
  padding: 0; width:95%;
}
article.no03 img{ width:95%; max-width: 400px;  height: auto; display:block; margin: 3em auto 2em;}

.subheader h1 { padding:30px 0 0 ;}
.breadcrumb {
     margin: 25px auto 0px; border-top:1px solid #0268b6; 
  padding: 0.3em 0 0.4em;
}
img.photobpx{ display: block;  position: static;  width:60%; max-width: 200px; height: auto; margin: 1em 0 0 auto;}
#area .kinshi h4{margin: 2em 0 0 2em;  width:auto;  max-width:90%; }
nav.footernav ul,nav.footernav h3{ display: none;}
nav.footernav {padding: 10px 0; }
    
#about .blueback ol li {  width:120px; height: 120px;margin: 5px 0;
position: relative; color: #000; padding: 0;}
#about  .blueback li:before {
top:5px;  font-size: 24px;
}
#about .blueback ol li span { display:block;  position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:95%;}
    #about .blueback ol.font20{ font-size: 16px; line-height: 1.2;}
}
@media only screen and (max-width: 620px) {
.service .tokucho li:last-child div{ margin: 20px 0 0 -0px ;   height: 200px; width:200px; padding: 20px  }
.service .tokucho li p{ margin: 0em auto; width:90%;}
.howto li, .howto li:last-child{ width:90%; margin: 0.5em auto; }

.kinshi .flex{display: block;justify-content: center;  margin: 1em auto 0 !important; width:90%; padding: 0;  } 
.kinshi a.font18{ display: block; width:calc(90% - 55px ); padding: 1em 0 1em 55px; max-width: 350px; margin:5px auto;line-height: 1.5;}   
.kinshi a.font18 br{ display: none;}   
.kinshi a.font18 span{  padding:  0; }  
    
#other_services  p,#other_services .flex p  { margin: 1em auto; width:90% }
#other_services .flex{display: block; margin: 0 auto 3em; }
#other_services .flex img {display: block;  width:95%; max-width: 350px; height: auto; margin: 1em auto 3em;}
.kinshi{ margin: 0 auto 0; }
    
.service .earth{ position: static;  width:130px !important; height: auto; margin: 0.5em auto;}
.service .service2 p{  margin: 0 auto; padding:0;   width:90%}
    
}

@media only screen and (max-width: 560px) {
article.white{ border-radius: 20px 20px 0 0; padding: 25px 0;}
   .slide .item h2.font30 {
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 1.5;
  }
  .slide .item h2{  top:120px; left: 5%; }
    nav {
    width: calc(100% - 50px );
      }
    .system  p.center{  text-align: left;}
  }

@media only screen and (max-width: 520px) {
    article.white li{ width:90%;  padding: 1em 0 0; margin: 0.5em auto; }
    ol.deco li p{ margin: 1em 0px 1em -2em;} 
    ol.deco li img{ max-width:200px; height: auto; width:90%; position: static; display: block; margin: 5em auto 0;}
    ol.deco li .omatome{ padding:0.5em 1em 0.8em;margin: 0.5em 0 1em -1em; }
.service .tokucho li{ width:90%;  margin: 0.5em auto; }
.service .tokucho li:last-child div{ margin: 20px auto 0 ;   height: 220px; width:220px; padding: 20px  }
    
.subarea  ul.flex.wrap li{ width:auto;  padding: 0;}
.subarea  ul.flex.wrap li a {color: #fff; position: relative; padding: 1.8em 0.7em 0.4em; display: block; }

}
@media only screen and (max-width: 440px) {
 #regulation{ text-align: left; padding: 0 1em;}
#regulation a{display: block;margin: 0.5em 0 0 60px; width:auto !important; padding: 0.5em 0 0 0px;}
#regulation a::before {  top:50%; left:-45px; transform:  translateY(-50%);
}
#company dl dt,#company dl dd{border:none;  padding: 0.5em;}
#company dl dt{ width: calc(100% - 1em); border-bottom: 1px #ddd dotted; }
#company dl dd{ width: calc(100% - 2em);border-bottom: 1px solid #0085e0;  padding: 0.5em 1em;}
#company dl.inner4{ border:none; border-top: 1px solid #0085e0;}

}
@media only screen and (max-width:410px) {
     .font26 {
    font-size: 22px;
    font-size: 2.2rem;
  }
  .font28 {
    font-size: 23px;
    font-size: 2.34rem;
  }
     .font30 {
    font-size: 24px;
    font-size: 2.4rem; line-height: 1.3;
  }
  .font32 {
    font-size: 26px;
    font-size: 2.6rem;
  }
  .font34 {
   font-size: 26px;
    font-size: 2.6rem;
  }
  .font36 {
    font-size: 30px;
    font-size: 3.0rem;
  }
 .close {
      left: 0; /* 右から25pxの位置 */
  }


 .toggle_btn {
    right: 5px;
  }

}

@media print {
    #glovalheader .slider{ display: none !important }
      #wrapper {
    font-size: 14px;
    font-size: 1.4rem;
  }
  /* 共通変更 フォントサイズ　*/
  .font12 {
    font-size: 10px;
    font-size: 1.0rem;
  }
  .font14 {
    font-size: 12px;
    font-size: 1.2rem;
  }
  .font16 {
    font-size: 14px;
    font-size: 1.4rem;
  }
  .font18 {
    font-size: 16px;
    font-size: 1.6rem;
  }
  .font20 {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .font22 {
    font-size: 20px;
    font-size: 2.0rem;
  }
  .font24 {
    font-size: 22px;
    font-size: 2.2rem;
  }
  .font26 {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .font28 {
    font-size: 26px;
    font-size: 2.6rem;
  }
     .font30 {
    font-size: 28px;
    font-size: 2.8rem;
  }
  .font32 {
    font-size: 30px;
    font-size: 3.0rem;
  }
  .font34 {
    font-size: 32px;
    font-size: 3.2rem;
  }
  .font36 {
    font-size: 34px;
    font-size: 3.4rem;
  }
  .font40 {
    font-size: 38px;
    font-size: 3.8rem;
  }
.font86 {
  font-size: 70px;
  font-size: 7.0rem;
  font-weight: 600;
}

}
/*@print
A4用紙に特化したメディアクエリ*/
@page {
    size: A4;
    margin: 0;
}