@charset "UTF-8";
html {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

body {
  line-height: 1;
}

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

img {
  vertical-align: bottom;
  max-width: 100%;
}

.cf:after {
  content: "";
  display: block;
  clear: both;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /*vertical-align:baseline;*/
}

input::-ms-clear {
  visibility: hidden;
}
input::-ms-reveal {
  visibility: hidden;
}

html {
  font-size: 62.5%;
  overflow: auto;
}

body {
  font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
  color: #000000;
  font-weight: 400;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.5px;
  letter-spacing: 0.05rem;
  overflow-x: hidden;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
common
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* a style -----------------------------------*/

a:link {
  color: #000;
  text-decoration: none;
}

a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #000;
  text-decoration: none;
}

a:active {
  color: #000;
  text-decoration: none;
}

/* pc sp -----------------------------------*/

.sp1 { display: none !important; }
.sp2 { display: none !important; }

/* bottom -----------------------------------*/

.mb0 { margin-bottom: 0 !IMPORTANT; }
.pb0 { padding-bottom: 0 !IMPORTANT; }

/* acdn -----------------------------------*/

.acdn .btn { display: block; cursor: pointer; }
.acdn .box { display: none; }

/* loading -----------------------------------*/

#loadBox {
  width: 100vw;
  height: 100vh;
  transition: all 0.5s;
  background-color: #c8dcf7;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

@keyframes loading {
  0% { opacity: 1; }	
  100% { opacity: 0; }
	}

.loaded {
  opacity: 0;
  visibility: hidden;
	}

/* icon -----------------------------------*/

.ic {
  position: relative;
  padding: 0 0 0 20px;
}

.ic:before,
.ic:after {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
}

/* arw1 */

.arw1_r:before {
  top: 4px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #000000;
  border-right: 2px solid #000000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arw1_l:before {
  top: 4px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arw1_b:before {
  top: 3px;
  width: 4px;
  height: 4px;
  border-bottom: 2px solid #000000;
  border-right: 2px solid #000000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arw1_t:before {
  top: 6px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #000000;
  border-right: 2px solid #000000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* arw2 */

.arw2_r:before {
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000000;
}
.arw2_r:after {
  top: 6px;
  left: 3px;
  width: 3px;
  height: 3px;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arw2_l:before {
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000000;
}
.arw2_l:after {
  top: 6px;
  left: 5px;
  width: 3px;
  height: 3px;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arw2_b:before {
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000000;
}
.arw2_b:after {
  top: 5px;
  left: 4px;
  width: 3px;
  height: 3px;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arw2_t:before {
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000000;
}
.arw2_t:after {
  top: 7px;
  left: 4px;
  width: 3px;
  height: 3px;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* arw3 */

.arw3_r:before {
  top: 4px;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  border: 4px solid transparent;
  border-left: 4px solid #000000;
}

.arw3_l:before {
  top: 4px;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  border: 4px solid transparent;
  border-right: 4px solid #000000;
}

.arw3_b:before {
  top: 6px;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  border: 4px solid transparent;
  border-right: 4px solid #000000;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.arw3_t:before {
  top: 2px;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  border: 4px solid transparent;
  border-right: 4px solid #000000;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* arw4 */

.arw4_r:before {
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000000;
}
.arw4_r:after {
  top: 5px;
  left: 5px;
  box-sizing: border-box;
  width: 3px;
  height: 3px;
  border: 3px solid transparent;
  border-left: 3px solid #FFFFFF;
}

.arw4_l:before {
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000000;
}

.arw4_l:after {
  top: 5px;
  left: 1px;
  box-sizing: border-box;
  width: 3px;
  height: 3px;
  border: 3px solid transparent;
  border-right: 3px solid #FFFFFF;
}

.arw4_b:before {
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000000;
}

.arw4_b:after {
  top: 7px;
  left: 3px;
  box-sizing: border-box;
  width: 3px;
  height: 3px;
  border: 3px solid transparent;
  border-right: 3px solid #FFFFFF;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.arw4_t:before {
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000000;
}

.arw4_t:after {
  top: 3px;
  left: 3px;
  box-sizing: border-box;
  width: 3px;
  height: 3px;
  border: 3px solid transparent;
  border-right: 3px solid #FFFFFF;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
column
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.rev {
  flex-direction: row-reverse; /* 左右逆にする */
}

/* imgClm -----------------------------------*/

.imgClm40 {
  display: flex;
  width: 100%;
  column-gap: 60px;
}

.imgClm40 .txt {
  width: 60%;
}

.imgClm40 .img {
  width: 40%;
}

/* grdClm -----------------------------------*/

.grdClm1 .clm .img,
.grdClm2 .clm .img,
.grdClm3 .clm .img,
.grdClm4 .clm .img,
.grdClm5 .clm .img {
  margin-bottom: 5px;
}

.grdClm2,
.grdClm3,
.grdClm4,
.grdClm5 {
  letter-spacing: -0.5em;
  margin-left: -20px;
}

.grdClm2 .clm,
.grdClm3 .clm,
.grdClm4 .clm,
.grdClm5 .clm {
  display: inline-block;
  letter-spacing: 0.5px;
  letter-spacing: 0.05rem;
  vertical-align: top;
  padding: 0 0 20px 20px;
  box-sizing: border-box;
}

.grdClm2.mgHf,
.grdClm3.mgHf,
.grdClm4.mgHf,
.grdClm5.mgHf {
  margin-left: -10px;
}

.grdClm2.mgHf .clm,
.grdClm3.mgHf .clm,
.grdClm4.mgHf .clm,
.grdClm5.mgHf .clm {
  padding: 0 0 10px 10px;
}

/* grdClm1 */
.grdClm1 .clm { width: 100%; padding: 0 0 20px; }

/* grdClm2 */
.grdClm2 .clm { width: 50%; }

/* grdClm3 */ 
.grdClm3 .clm { width: 33.33333333%; }

/* grdClm4 */
.grdClm4 .clm { width: 25%; }

/* grdClm5 */
.grdClm5 .clm { width: 20%; }

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
base
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* header -----------------------------------*/

header {
  background-color: #FFFFFF;
}

/* hdLine */

header .hdLine {
  display: table;
  width: 100%;
  color: #FFF;
  background-color: #F39800;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 5px 30px;
  box-sizing: border-box;
}

header .hdLine p,
header .hdLine nav {
  display: table-cell;
  vertical-align: middle;
}

header .hdLine p {
  padding-right: 15px;
}

header .hdLine p br {
  display: none;
}

header .hdLine nav ul {
  display: table;
  margin: 0 0 0 auto;
  border-left: 1px solid #FFFFFF;
}

header .hdLine nav ul li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border-right: 1px solid #FFFFFF;
}

header .hdLine nav ul li a {
  display: block;
  line-height: 30px;
  line-height: 3rem;
  padding: 0 12px;
}

header .hdLine nav ul li a:link,
header .hdLine nav ul li a:visited,
header .hdLine nav ul li a:hover,
header .hdLine nav ul li a:active {
  color: #FFFFFF;
}

/* hdBox */

header .hdBox {
  padding-top: 40px;
  padding-bottom: 40px;
}

header .hdBox:after {
  content: "";
  display: block;
  clear: both;
}

header .hdBox .logo {
  width: 50%;
  float: left;
}

header .hdBox .logo img {
  width: 250px;
  }

/* footer -----------------------------------*/

footer {
  background-color: #EEEEEE;
}

/* contactBox */

footer .contactBox {
  display: table;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px 0;
}

footer .contactBox dt,
footer .contactBox dd {
  display: table-cell;
  vertical-align: middle;
}

footer .contactBox dt {
width: 200px;
padding-right: 20px;
}

footer .contactBox dd {
  padding: 0 20px;
}

footer .contactBox dd p {
  letter-spacing: 0.1em;
  font-size: 13px;
  font-size: 1.3rem;
}

footer .contactBox dd p a,
footer .contactBox dd p span {
  color: #000;
  font-weight: 600;
  font-size: 1.8rem;
}

footer .contactBox  a:link,
footer .contactBox  a:visited,
footer .contactBox  a:hover,
footer .contactBox  a:active {
  color: #000;
}

/* copyright */

footer .copyright {
  color: #FFF;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 600;
  background-color: #F39800;
  padding: 7px 15px;
}

/* pageTop */

footer #pageTop {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

footer #pageTop a {
  position: relative;
  background-color: #000000;
  width: 46px;
  height: 46px;
  display: block;
  border-radius: 50%;
}

footer #pageTop a:before {
  display: block;
  position: absolute;
  content: "";
  top: 19px;
  left: 17px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* wrapper -----------------------------------*/

.wrap {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}

.wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 120px;
  box-sizing: border-box;
}

#page .wrapper {
  max-width: 1000px;
  padding: 0 30px 120px;
}

#page section {
  margin-bottom: 100px;
}

.inner {
  margin-bottom: 100px;
}

/* h style -----------------------------------*/

.pageTtl {
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.2em;
  padding-top: 40px;
  margin-bottom: 80px;
}

.pageTtl span {
  display: block;
  color: #F39800;
  font-size: 14px;
  letter-spacing: 0.15em;
  font-family: "Figtree", sans-serif;
  padding-top: 6px;
}

/* ttl1 */

.ttl1 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  border-bottom: solid 3px #F39800;
  margin-bottom: 50px;
  padding: 0 0 10px;
}

/* ttl2 */

.ttl2 {
  font-size: 19px;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: #FFF;
  background-color: #F39800;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 8px 15px;
}

/* ttl3 */

.ttl3 {
  position: relative;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding: 0 0 0 18px;
  margin-bottom: 30px;
}

.ttl3:before {
  position: absolute;
  content: '';
  display: inline-block;
  top: 2px;
  bottom: 2px;
  left: 0;
  height: calc(100% - 4px);
  width: 6px;
  background: #F39800;
}


/* button -----------------------------------*/

/* btn1 */

.btn1 a {
  font-weight: 600;
  letter-spacing: 0.3rem;
  background-color: #F39800;
  border-radius: 5px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 300px;
  padding: 17px 25px;
  color: #FFF;
  box-sizing: border-box;
  border: 2px solid #F39800;
}

.btn1 a:hover {
  background: #FFF;
  color: #F39800;
}

.btn1 a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
}

.btn1 a:hover:after {
  border-color: #F39800;
}

/* btn2 */

.btn2 {
  margin-bottom: 20px;
}

.btn2 a {
  display: block;
  color: #FFFFFF;
  text-align: center;
  background: #B79C06;
  padding: 10px;
  border-radius: 6px;
}

/* btn3 */

.btn3 {
  margin-bottom: 20px;
}

.btn3 a {
  display: block;
  color: #B79C06;
  text-align: center;
  border: 2px solid #000000;
  padding: 8px;
  border-radius: 6px;
}

/* inview -----------------------------------*/

.inview.fadeleft {
	opacity: 0;
	transition-duration: .6s;
	transform: translateX(-20px);
}
.inview.fadeleft.active {
	opacity: 1;
	transform: translateX(0px);
}

.inview.faderight {
	opacity: 0;
	transition-duration: .6s;
	transform: translateX(20px);
}
.inview.faderight.active {
	opacity: 1;
	transform: translateX(0px);
}

/* hyo -----------------------------------*/

.hyo1 {
  margin-bottom: 20px;
}

.hyo1 dl {
  display: table;
  width: 100%;
  margin: 0 auto;
}

.hyo1 dl:first-child {
  border-top: 2px solid #EEE;
}

.hyo1 dl dt,
.hyo1 dl dd {
  display: table-cell;
  padding: 20px 5px;
  border-bottom: 2px solid #EEE;
  box-sizing: border-box;
}

.hyo1 dl dt {
  width: 30%;
  font-weight: 600;
}

.hyo1 dl dd {
  width: 70%;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
page
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* toppage -----------------------------------*/

/* slideBox */

#toppage .slideBox {
  position: relative;
}

#toppage .slideBox .txt {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  color: #FFF;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.3em;
  padding: 12% 0 0;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.1);
}

#toppage .slideBox .en {
  font-family: "Figtree", sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding-bottom: 15px;
}

#toppage .slideBox .jp01 {
  font-size: 38px;
  font-size: 3.8rem;
  font-weight: 700;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  padding-bottom: 15px;
}

#toppage .slideBox .jp02 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* box01 */

#toppage .box01 {
  display: table;
  width: 80%;
  padding: 120px 0 80px;
  margin: 0 auto;
  box-sizing: border-box;
}

#toppage .box01 .img {
  display: table-cell;
  width: 300px;
  background: url( "../img/img01.svg" ) calc(50% - 70px) top / 130px 130px no-repeat ;
  font-family: "Figtree", sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  vertical-align: top;
}

#toppage .box01 .img span {
  display: inline-block;
  padding: 35px 0 0 50px;
}

#toppage .box01 .txt {
  display: table-cell;
  width: calc(100% - 300px);
  font-weight: 600;
  line-height: 2.4;
  letter-spacing: 0.15em;
  padding: 0 0 0 50px;
  box-sizing: border-box;
}

/* h2 */

#toppage h2 {
  display: block;
  text-align: center;
  color: #000;
  font-family: "Figtree", sans-serif;
  font-size: 42px;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 100px;
}

#toppage h2 span {
  display: block;
  text-align: center;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* box02 */

#toppage .box02 {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 150px;
}

#toppage .box02 .img {
  width: 60%;
}

#toppage .box02 .txt {
  width: 40%;
  padding: 0 80px;
  box-sizing: border-box;
  line-height: 2;
  font-weight: 600;
  letter-spacing: 0.1em;
}

#toppage .box02 .txt .num span {
  color: #F39800;
  font-size: 3em;
  line-height: 1.5;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  font-style: italic;
  position: relative;
  display: inline-block;
  margin-bottom: 35px;
}

#toppage .box02 .txt .num span::after {
  content: '';
  width: 100%;
  height: 4px;
  display: inline-block;
  background-color: #F39800;
  position: absolute;
  bottom: 0;
  left: 0;
}

#toppage .box02 .txt h3 {
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 25px;
  line-height: 1.5;
}

#toppage .box02 .txt h3 span {
  display: block;
  font-size: 1.7rem;
  margin-bottom: 8px;
}

#toppage .box02:nth-child(even) {
  flex-direction: row-reverse;
}

#toppage .box02:nth-child(odd) .img {
  margin-left: 0;
}

/* company -----------------------------------*/

/* box01 */

.company .box01 {
  font-size: 17px;
  line-height: 2;
}

.company .box01 p {
  margin-bottom: 50px;
}

/* box02 */

.company .box02 {
  font-size: 17px;
  line-height: 2;
}

/* service -----------------------------------*/

 /* link01 */

.service .link01 {
  display: flex;
  justify-content: center;
}

.service .link01 li {
  position: relative;
  line-height: 1.3;
}

.service .link01 li::after {
  position: absolute;
  display: inline-block;
  content: "";
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #F39800;
  border-radius: 2px;
  width: 2px; 
  height: 100%;
  transform: rotate(30deg);
}

.service .link01 li:last-child::after {
  display: none;
}

.service .link01 li a {
  display: block;
  font-weight: 600;
  padding: 4px 20px;
}

.service .link01 li a:link { color: #000;  text-decoration: none; }
.service .link01 li a:visited { color: #000;  text-decoration: none; }
.service .link01 li a:hover {  color: #000;  text-decoration: none; }
.service .link01 li a:active {  color: #000w;  text-decoration: none; }

/* box01 */
  
.service .box01 {
  display: flex;
  column-gap: 40px;
  margin-bottom: 60px;
}

.service .box01 .img {
  width: 50%;
}

.service .box01 .txt {
width: 50%;
}

.service .box01 .point {
color: #F39800;
font-size: 20px;
font-size: 2rem;
line-height: 1.5;
font-weight: 600;
letter-spacing: 0.1em;
margin-bottom: 5px;
}

/* box02 */
  
.service .box02 {
  margin-bottom: 40px;
}

.service .box02 p {
  margin-bottom: 30px;
}

/* box03 */
  
.service .box03 {
  letter-spacing: -0.5em;
  margin: 0 0 40px -20px;
}

.service .box03:last-child {
  margin-bottom: 80px;
}

.service .box03 li {
  display: inline-block;
  letter-spacing: 0.5px;
  letter-spacing: 0.05rem;
  vertical-align: top;
  padding: 0 0 20px 20px;
  box-sizing: border-box;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.6;
 }
 
 .service .box03:after {
  content: "";
  display: block;
  clear: both;
}

/* figure */

.service figure {
  display: table;
}

.service figcaption {
  display: table-caption;
  caption-side: bottom;
  line-height: 1.3;
}

.service figure img {
  height: 200px;
  margin-bottom: 10px;
  object-fit: contain;
}

.service figure .name {
  display: inline-block;
  margin-top: 3px;
}

/* ===================================================================

　▼ 960px〜

=================================================================== */
@media only screen and (max-width: 960px){

    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    base
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

    /* h style -----------------------------------*/
    
    /* ttl1 */
    
    #toppage h2 {
      margin-bottom: 80px;
    }
    
    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    page
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    
    /* toppage -----------------------------------*/
    
    /* box02 */
    #toppage .box02 {
      margin-bottom: 100px;
    }
    
    #toppage .box02 .img {
      width: 50%;
    }
    
    #toppage .box02 .txt {
      width: 50%;
      padding: 0 70px;
    }

}

/* ===================================================================

　▼ 768px〜 

=================================================================== */
@media only screen and (max-width: 768px){

    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    common 
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    
    /* pc sp -----------------------------------*/
    
    .pc2 { display: none !important; }
    .sp2 { display: block !important; }
    
    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    column 
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    
    /* imgClm -----------------------------------*/
    
    .imgClm40 {
      display: flex;
      width: 100%;
      row-gap: 5px;
      flex-direction: column;
    }
    
    .imgClm40 .txt {
      width: 100%;
    }
    
    .imgClm40 .img {
      width: 100%;
    }
    
    /* grdClm -----------------------------------*/
    
    .grdClm3 .clm {
      width: 50%;
    }
    
    .grdClm4 .clm {
      width: 50%;
    }
    
    .grdClm5 .clm {
      width: 25%;
    }
    
    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    base
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    
    /* header -----------------------------------*/
    
    /* hdLine */
    
    header .hdLine {
      display: block;
      background-color: transparent;
      padding: 0;
    }
    
    header .hdLine p {
      display: block;
      font-size: 12px;
      line-height: 1.4;
      height: 46px;
      color: #FFF;
      padding: 7px 60px 7px 12px;
      box-sizing: border-box;
      background-color: #F39800;
    }
    
    header .hdLine p span {
      display: none;
    }
    
    header .hdLine p br {
      display: block;
    }
    
    header .hdLine nav {
      display: none;
    }
    
    /* hdBox */
    
    header .hdBox {
      padding: 25px 15px 20px;
    }
    
    header .hdBox .logo {
      width: 100%;
      float: none;
    }
    
    header .hdBox .logo img {
      width: 200px;
    }
    
    /* footer -----------------------------------*/
    
    /* contactBox */
    
    footer .contactBox {
      display: block;
      padding: 40px 30px;
    }
    
    footer .contactBox dt,
    footer .contactBox dd {
      display: block;
    }
    
    footer .contactBox dd {
      padding: 20px 0 0 ;
    }
    
    /* copyright */
    
    footer .copyright {
      padding: 7px 30px;
    }
    
    /* wrapper -----------------------------------*/
    
    .wrapper {
      padding: 0 15px 80px;
    }
    
    
    /* h style -----------------------------------*/
    
    .pageTtl {
      margin-bottom: 50px;
    }
    
    /* ttl1 */
    
    #toppage h2 {
      font-size: 30px;
      font-size: 3rem;
      margin-bottom: 50px;
    }
    
    /* ttl2 */
    
    .ttl2 {
      margin-bottom: 30px;
    }
    
    /* hyo -----------------------------------*/
    
    .hyo1 dl {
      width: 100%;
    }
    
    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    page
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    
    /* toppage -----------------------------------*/
    
    /* slideBox */
    
    #toppage .slideBox {
      margin-bottom: 35px;
    }
      
    #toppage .slideBox .en {
      font-size: 14px;
      font-size: 1.4rem;
    }
    
    #toppage .slideBox .jp01 {
      font-size: 35px;
      font-size: 3.5rem;
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
      padding-bottom: 15px;
    }
    
    #toppage .slideBox .jp02 {
      font-size: 15px;
      font-size: 1.5rem;
      letter-spacing: 0.2em;
    }
    
    /* box01 */
    
    #toppage .box01 {
      display: block;
      width: 100%;
      padding: 0;
    }
    
    #toppage .box01 .img {
      display: block;
      width: 100%;
      font-size: 32px;
      font-size: 3.2rem;
      padding: 30px 0 50px;
      background: url( "../img/top/img01.svg" ) calc(50% - 65px)  calc(50% - 15px) / 90px 90px no-repeat ;
    }
    
    #toppage .box01 .img span {
      padding: 0;
    }
    
    #toppage .box01 .txt {
      padding: 0 20px 40px;
    }
    
    /* box02 */
    
    #toppage .box02 {
      flex-direction: column;
      margin-bottom: 60px;
    }
    #toppage .box02:nth-child(even) {
      flex-direction: column;
    }
    
    #toppage .box02 .img {
      width:100%;
      margin-left: 0;
      text-align: center;
    }
    
    #toppage .box02:nth-child(even) .img {
      margin-left: 0;
      margin-right: 0%;
    }
    
    #toppage .box02 .img {
      width: 90%;
    }
    
    #toppage .box02 .txt {
      padding: 20px 0;
      width: 90%;
    }
    
    #toppage .box02 .txt .num {
      position: relative;
      height: 30px;
    }
    
    #toppage .box02 .txt .num span {
      position: absolute;
      right: -10px;
      top: -50px;
      font-size: 3.4em;
      line-height: 1.4;
    }
    
    #toppage .box02 .txt .num span::after {
      height: 6px;
    }
    
    /* service -----------------------------------*/
    
    /* link01 */
    
    .service .link01 {
      display: block;
      background-color: #F1F1F1;
      border-radius: 10px;
    }
    
    .service .link01 li {
      position: relative;
      display: inline-block;
      border-bottom: 2px solid #FFF;
      width: 100%;
      padding-right: 20px;
      box-sizing: border-box;
    }
    
   .service .link01 li::after {
      position: absolute;
      background-color: transparent;
      content: '';
      width: 5px;
      height: 5px;
      border: 0;
      border-bottom: solid 2px #F39800;
      border-right: solid 2px #F39800;
      transform: rotate(45deg);
      top: 0;
      right: 20px;
      bottom: 0;
      margin: auto;
      border-radius: 0;
    }
    
    .service .link01 li:last-child::after {
      display: inline-block;
    }
    
   .service .link01 li  a {
      padding: 12px 20px;
    }
  
}

/* ===================================================================

　▼ 480px〜 

=================================================================== */
@media only screen and (max-width: 480px){

    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    common 
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    
    /* pc sp -----------------------------------*/
    
    .pc1 { display: none !important; }
    .sp1 { display: block !important; }
    
    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    column 
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    
    .grdClm2 .clm{
      width: 100%;
    }
    .grdClm5 .clm{
      width: 100%;
    }
    .grdClm5 .clm:after{
      content: "";
      display: block;
      clear: both;
    }
    .grdClm5 .clm .img{
      float: left;
      width: 25%;
      margin-bottom: 0;
      margin-right: 10px;
    }
    
    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    base
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    
    /* header -----------------------------------*/
    
    /* hdLine */
    
    header .hdLine p span {
      display: inline-block;
    }
    
    header .hdLine p br {
      display: none;
    }
    
    /* hdBox */
  
    header .hdBox .logo img {
      width: 180px;
    }
    
    /* wrapper -----------------------------------*/
    
    #page .wrapper {
      padding: 0 20px 40px;
    }
    
    #page section {
      margin-bottom: 70px;
   }
   
   .inner {
      margin-bottom: 70px;
   }
   
    /* h style -----------------------------------*/
    
    .pageTtl {
      font-size: 30px;
      font-size: 3rem;
    }
    
    .pageTtl span {
      padding-top: 0;
    }
    
    .ttl1 {
      margin-bottom: 30px;
    }
    
    .ttl2 {
      margin-bottom: 30px;
    }
    
    .ttl3 {
      margin-bottom: 30px;
    }
    
    /* hyo -----------------------------------*/
    
    .hyo1 dl {
      display: block;
    }
    
    .hyo1 dl dt,
    .hyo1 dl dd {
      display: block;
    }
    
    .hyo1 dl dt {
      color: #F39800;
      width: 100%;
      border-bottom: none;
      padding: 20px 5px 0;
    }
    
    .hyo1 dl dd {
      width: 100%;
      padding: 10px 5px 20px;
    }
    
    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    page
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
    
    /* toppage -----------------------------------*/
    
    /* slideBox */
    
    #toppage .slideBox .txt {
      padding: 17% 0 0;
    }
    
    /* box01 */
    
    #toppage .box01 .img {
      font-size: 28px;
      font-size: 2.8rem;
      padding: 5px 0 25px;
      background: transparent;
    }
    
   #toppage .box01 .img span {
     line-height: 1.4;
    }
    
    #toppage .box01 .txt {
      font-weight: 500;
      line-height: 2.2;
    }
    
    /* service -----------------------------------*/
    
    /* box01 */
    
    .service .box01 {
      display: block;
      margin-bottom: 50px;
    }
    
    .service .box01 .img {
      width: 100%;
      margin-bottom: 20px;
    }
    
    .service .box01 .txt {
      width: 100%;
    }
     
      /* box03 */
    
    .service .box03:last-child {
      margin-bottom: 50px;
    }
    
    .service .box03 figure img {
      height: 150px;
    }
}

@media (min-width: 1px){
}