@charset "UTF-8";
/* style.scss */
/* reset Document */
/* --------------------------------------------------
    Reset.css
-------------------------------------------------- */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700&display=swap" rel="stylesheet');
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;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

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

nav 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;
  text-decoration: none; }

/* 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; }

/* variable.scss 変数 */
/* --------------------------------------------------
    breakpoint / レスポンシブ
-------------------------------------------------- */
/* --------------------------------------------------
    layout 01〜10 (01が最上/10が最下)
-------------------------------------------------- */
/* mixin.scss */
/* --------------------------------------------------
    breakpoint / レスポンシブ
-------------------------------------------------- */
/* --------------------------------------------------
   [共通] color (色)
-------------------------------------------------- */
/* --------------------------------------------------
  box (paddingのお供に)
-------------------------------------------------- */
/* --------------------------------------------------
  flexbox (均等) 子要素の%でカラム幅調整
-------------------------------------------------- */
/* --------------------------------------------------
  reverce 入れ替える
-------------------------------------------------- */
/* --------------------------------------------------
  画面幅いっぱい
-------------------------------------------------- */
/* --------------------------------------------------
   br
-------------------------------------------------- */
/* --------------------------------------------------
  img
-------------------------------------------------- */
/* --------------------------------------------------
   display
-------------------------------------------------- */
/* --------------------------------------------------
   btn (ボタン)
-------------------------------------------------- */
/* --------------------------------------------------
   hover
-------------------------------------------------- */
/* --------------------------------------------------
    relative / absolute / fixed / static
-------------------------------------------------- */
/* --------------------------------------------------
    transform-center
-------------------------------------------------- */
/* --------------------------------------------------
    max-width ( 1000 / 1200 / 1500 )
-------------------------------------------------- */
/* --------------------------------------------------
   [共通] animation (パララックス)
-------------------------------------------------- */
.fuwatAnime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fuwatAnime;
  -ms-animation-name: fuwatAnime;
  animation-name: fuwatAnime;
  visibility: visible !important; }

@-webkit-keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }
/* --------------------------------------------------
   [共通] btn (ボタン)
-------------------------------------------------- */
/* --------------------------------------------------
    section 共通
-------------------------------------------------- */
section {
  padding-bottom: 60px; }
  @media screen and (min-width: 768px) {
    section {
      padding-bottom: 80px; } }

/* images.scss */
/* --------------------------------------------------
    icon
-------------------------------------------------- */
.icon1 {
  background-image: url("../images/icon/icon-truck.png"); }

.icon2 {
  background-image: url("../images/icon/icon-recycle.png"); }

.icon3 {
  background-image: url("../images/icon/icon-auction.png"); }

/* --------------------------------------------------
    top-img
-------------------------------------------------- */
.bg-top {
  background-image: url("../images/common/img-top-pc.jpg"); }

#service {
  background-image: url("../images/common/img-top03.jpg"); }

/* --------------------------------------------------
    flow
-------------------------------------------------- */
.draw-flow01 {
  background-image: url("../images/common/draw-flow01.svg"); }

.draw-flow02 {
  background-image: url("../images/common/draw-flow02.svg"); }

.draw-flow03 {
  background-image: url("../images/common/draw-flow03.svg"); }

.draw-flow04 {
  background-image: url("../images/common/draw-flow04.svg"); }

/* common.scss */
/* --------------------------------------------------
    body / main
-------------------------------------------------- */
body {
  position: relative;
  background: #ffffff;
  color: #000000;
  overflow-y: scroll;
  margin: 0px;
  text-align: center;
  border: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%; }

main {
  position: relative;
  overflow: hidden; }

/* font.scss */
body {
  font-family: 'Noto Serif JP', serif; }

html {
  font-size: 62.5%;
  /* 16p*0.625 = 10px(=1rem) */ }

body {
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  /* 字間 */ }

/* h1 section メインタイトル */
.top-title {
  font-weight: 900;
  font-size: 2.6rem;
  width: 100%;
  text-align: left; }
  @media screen and (min-width: 768px) {
    .top-title {
      font-size: 4rem; } }
  @media screen and (min-width: 1500px) {
    .top-title {
      font-size: 4.5rem; } }

h1 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 20px; }
  @media screen and (min-width: 768px) {
    h1 {
      font-size: 3.5rem;
      margin-bottom: 30px; } }

/* h2 section サブタイトル */
h2 {
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.6; }
  @media screen and (min-width: 768px) {
    h2 {
      font-size: 2.8rem; } }

/* h3 サブタイトル */
h3 {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.6; }
  @media screen and (min-width: 768px) {
    h3 {
      font-size: 2.2rem; } }

h4 {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.6; }
  @media screen and (min-width: 768px) {
    h4 {
      font-size: 2rem; } }

p {
  font-size: 1.7rem;
  font-weight: 300;
  text-align: left;
  line-height: 200%; }

/* header.scss */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 60px; }
  header .el_humburger {
    position: absolute;
    top: 15px;
    right: 13px;
    z-index: 10000;
    width: 35px;
    height: auto;
    padding-top: 1px;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    pointer-events: auto; }
    @media screen and (min-width: 768px) {
      header .el_humburger {
        position: absolute;
        top: 20px;
        right: 20px; } }
    header .el_humburger span {
      background: #000000;
      display: block;
      width: 100%;
      margin: 0 auto 9px;
      height: 1px;
      transition: all 0.2s ease-in-out; }
      header .el_humburger span:last-child {
        margin-bottom: 0; }

.js_humburgerOpen .el_humburger span {
  background: #ffffff; }
.js_humburgerOpen .el_humburger .top {
  transform: translateY(10px) rotate(-45deg); }
.js_humburgerOpen .el_humburger .middle {
  opacity: 0; }
.js_humburgerOpen .el_humburger .bottom {
  transform: translateY(-10px) rotate(45deg); }

/*.el_humburgerButton.el_humburgerButton__close {
	top: 2%;
	right: 2%;
	span {
		@include bg-wht;
		display: block;
		width: 35px;
		margin: 0 auto;
		height: 4px;
	}
	.el_humburgerLineTop {
		transform: translateY(5px) rotate(-45deg);
	}
	.el_humburgerLineBottom {
		transform: translateY(-6px) rotate(45deg);
	}
}*/
.uq_spNavi {
  display: none; }

.uq_spNavi.js_appear {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  z-index: 9999; }

.uq_spNavi_screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 0;
  margin-top: 0px;
  padding-top: 0px;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

.navigation {
  padding: 20vh 0 0 0;
  text-align: center; }
  .navigation .navigation_item {
    margin-bottom: 7vh; }
    .navigation .navigation_item a {
      color: #ffffff;
      text-decoration: none;
      font-size: 1.9rem; }
      @media screen and (min-width: 768px) {
        .navigation .navigation_item a {
          font-size: 2.4rem; } }
      .navigation .navigation_item a:hover {
        color: #fcc800; }

.js_fixed {
  position: fixed;
  width: 100%;
  height: 100%; }

/* footer.scss */
footer {
  background: #203744;
  width: 100%; }
  footer .footer-navi {
    background: #203744;
    padding-top: 50px;
    display: block; }
    footer .footer-navi .footer-company {
      display: block;
      margin: 0 auto;
      text-align: center; }
      @media screen and (min-width: 768px) {
        footer .footer-navi .footer-company {
          margin: 0 auto 30px; } }
      footer .footer-navi .footer-company p {
        color: #fcc800;
        text-align: center; }
      footer .footer-navi .footer-company h3 {
        color: #ffffff;
        font-size: 2.2rem;
        font-weight: 600;
        padding-top: 10px;
        padding-bottom: 20px; }
  footer .copyright {
    background: #203744;
    padding-bottom: 20px; }
    footer .copyright p {
      color: #f5f5f5;
      text-align: center;
      font-size: 1.5rem; }

/* --------------------------------------------------
    top-btn
-------------------------------------------------- */
/* {position: relative;} top-btnの親要素に指定 */
/* footer上で止まる */
#top-btn {
  display: none; }

.top-btn {
  display: none; }
  @media screen and (min-width: 768px) {
    .top-btn {
      color: #ffffff;
      background: #203744;
      position: fixed;
      right: 0;
      bottom: 0;
      /* 固定 */
      display: block;
      /* aタグをblock要素に変更 */
      text-decoration: none;
      padding: 15px 25px 20px;
      box-sizing: border-box; }
      .top-btn:hover {
        opacity: 0.7; }
      .top-btn:before {
        color: #ffffff;
        font-family: "Font Awesome 5 Free";
        content: "\f062";
        font-weight: 900;
        font-size: 2rem; } }

/* top.scss */
/* --------------------------------------------------
    top
-------------------------------------------------- */
section {
  padding: 60px 0; }
  @media screen and (min-width: 768px) {
    section {
      padding: 90px 0; } }

/* --------------------------------------------------
    top
-------------------------------------------------- */
#top {
  position: relative;
  padding: 50px 0;
  background: linear-gradient(to bottom right, #3f312b, #715c1f); }
  @media screen and (min-width: 768px) {
    #top {
      padding: 90px 0; } }
  #top .bg-top {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    vertical-align: top;
    height: 420px; }
    #top .bg-top::before {
      content: ' ';
      background-color: rgba(0, 0, 0, 0.6);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0; }
    @media screen and (min-width: 768px) {
      #top .bg-top {
        height: 600px; } }
    @media screen and (min-width: 1500px) {
      #top .bg-top {
        height: 750px; } }
    #top .bg-top .in-1500 {
      max-width: 1550px;
      margin: 0 auto;
      padding: 0 15px; }
      @media screen and (min-width: 768px) {
        #top .bg-top .in-1500 {
          padding: 0 25px; } }
      #top .bg-top .in-1500 .in-title {
        position: absolute;
        top: 18%;
        left: 70%;
        width: 100%; }
        @media screen and (min-width: 768px) {
          #top .bg-top .in-1500 .in-title {
            position: absolute;
            top: 20%;
            left: 85%; } }
        #top .bg-top .in-1500 .in-title .sub-title {
          color: #ffffff;
          text-shadow: 2px 5px 8px #212121;
          text-align: initial;
          writing-mode: vertical-rl;
          letter-spacing: 0.14em;
          line-height: 1.5;
          font-weight: 500;
          font-size: 1.5rem;
          vertical-align: top; }
          @media screen and (min-width: 768px) {
            #top .bg-top .in-1500 .in-title .sub-title {
              font-size: 1.9rem; } }
          #top .bg-top .in-1500 .in-title .sub-title .top-title {
            color: #ffffff;
            text-shadow: 2px 5px 8px #212121;
            writing-mode: vertical-rl;
            letter-spacing: 0.16em;
            vertical-align: top;
            font-size: 3rem; }
            @media screen and (min-width: 768px) {
              #top .bg-top .in-1500 .in-title .sub-title .top-title {
                font-size: 3.9rem; } }

/* --------------------------------------------------
    flow 1 遺品整理とは
-------------------------------------------------- */
#flow1 {
  padding: 0; }
  #flow1 .question,
  #flow1 .answer {
    padding: 40px 0; }
    @media screen and (min-width: 768px) {
      #flow1 .question,
      #flow1 .answer {
        padding: 70px 0; } }
    #flow1 .question .in-section,
    #flow1 .answer .in-section {
      max-width: 1050px;
      margin: 0 auto;
      padding-right: 15px;
      padding-left: 15px; }
      @media screen and (min-width: 768px) {
        #flow1 .question .in-section,
        #flow1 .answer .in-section {
          padding-right: 25px;
          padding-left: 25px; } }
      #flow1 .question .in-section h1 br,
      #flow1 .answer .in-section h1 br {
        display: block; }
        @media screen and (min-width: 768px) {
          #flow1 .question .in-section h1 br,
          #flow1 .answer .in-section h1 br {
            display: none; } }
      #flow1 .question .in-section .in-text,
      #flow1 .answer .in-section .in-text {
        margin: 0 auto 20px;
        display: block; }
        @media screen and (min-width: 768px) {
          #flow1 .question .in-section .in-text,
          #flow1 .answer .in-section .in-text {
            margin: 0 auto 30px; } }
        #flow1 .question .in-section .in-text p,
        #flow1 .answer .in-section .in-text p {
          font-size: 1.7rem;
          font-weight: 600;
          text-align: center; }
          @media screen and (min-width: 768px) {
            #flow1 .question .in-section .in-text p,
            #flow1 .answer .in-section .in-text p {
              font-size: 1.8rem; } }
      #flow1 .question .in-section .in-img .draw-flow01,
      #flow1 .question .in-section .in-img .draw-flow02,
      #flow1 .answer .in-section .in-img .draw-flow01,
      #flow1 .answer .in-section .in-img .draw-flow02 {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        width: 100%;
        vertical-align: top;
        height: 130px; }
        @media screen and (min-width: 768px) {
          #flow1 .question .in-section .in-img .draw-flow01,
          #flow1 .question .in-section .in-img .draw-flow02,
          #flow1 .answer .in-section .in-img .draw-flow01,
          #flow1 .answer .in-section .in-img .draw-flow02 {
            height: 210px; } }
  #flow1 .question {
    background: #f5f5f5; }
    #flow1 .question h2 {
      color: #203744; }
    #flow1 .question .in-text p {
      color: #203744; }
  #flow1 .answer {
    background: #ffffff; }
    #flow1 .answer .in-text p {
      color: #203744; }

/* --------------------------------------------------
    flow 2 遺品整理の流れ
-------------------------------------------------- */
#flow2 {
  background: #f5f5f5; }
  #flow2 .in-1000 {
    max-width: 1050px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px; }
    @media screen and (min-width: 768px) {
      #flow2 .in-1000 {
        padding-right: 25px;
        padding-left: 25px; } }
    #flow2 .in-1000 h1 {
      margin-bottom: 30px; }
      @media screen and (min-width: 768px) {
        #flow2 .in-1000 h1 {
          margin-bottom: 60px; } }
    #flow2 .in-1000 .step {
      display: flex;
      display: -webkit-flex;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      justify-content: space-between; }
      #flow2 .in-1000 .step .step-box {
        width: 100%;
        margin: 0 auto 25px; }
        @media screen and (min-width: 768px) {
          #flow2 .in-1000 .step .step-box {
            width: 23%;
            margin: 0 auto 40px; } }
        #flow2 .in-1000 .step .step-box:first-child {
          display: none; }
          @media screen and (min-width: 768px) {
            #flow2 .in-1000 .step .step-box:first-child {
              display: block; } }
        #flow2 .in-1000 .step .step-box .draw-flow03,
        #flow2 .in-1000 .step .step-box .draw-flow04 {
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          width: 100%;
          vertical-align: top;
          height: 200px; }
        #flow2 .in-1000 .step .step-box .box-inner {
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -o-box-sizing: border-box;
          -ms-box-sizing: border-box;
          background: #203744;
          padding: 10% 7%; }
          #flow2 .in-1000 .step .step-box .box-inner .ttl {
            color: #fcc800;
            font-size: 1.3rem;
            margin-bottom: 10px; }
            @media screen and (min-width: 768px) {
              #flow2 .in-1000 .step .step-box .box-inner .ttl {
                font-size: 1.4rem; } }
          #flow2 .in-1000 .step .step-box .box-inner h3 {
            color: #ffffff;
            text-align: left;
            font-size: 1.8rem;
            line-height: 1;
            font-weight: 700;
            margin-bottom: 20px; }
            @media screen and (min-width: 768px) {
              #flow2 .in-1000 .step .step-box .box-inner h3 {
                font-size: 2rem;
                margin-bottom: 25px; } }
          #flow2 .in-1000 .step .step-box .box-inner p {
            color: #ffffff;
            font-size: 1.5rem;
            line-height: 1.6; }
            @media screen and (min-width: 768px) {
              #flow2 .in-1000 .step .step-box .box-inner p {
                font-size: 1.6rem; } }

/* --------------------------------------------------
    flow 3 不用品処理方法
-------------------------------------------------- */
#flow3 {
  background: #203744; }
  #flow3 .in-section {
    max-width: 1050px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px; }
    @media screen and (min-width: 768px) {
      #flow3 .in-section {
        padding-right: 25px;
        padding-left: 25px; } }
    #flow3 .in-section h1 {
      color: #ffffff;
      margin-bottom: 45px; }
    #flow3 .in-section .col {
      display: block;
      margin: 0 auto;
      text-align: center;
      width: 100%; }
      @media screen and (min-width: 768px) {
        #flow3 .in-section .col {
          display: flex; } }
      #flow3 .in-section .col .col-2-in {
        display: block;
        width: 100%; }
        #flow3 .in-section .col .col-2-in .anime-box {
          display: flex;
          width: 100%;
          margin-bottom: 5%; }
          @media screen and (min-width: 768px) {
            #flow3 .in-section .col .col-2-in .anime-box {
              display: inline-block;
              height: 65px;
              margin-left: 0;
              text-align: right; } }
          #flow3 .in-section .col .col-2-in .anime-box .icon1,
          #flow3 .in-section .col .col-2-in .anime-box .icon2,
          #flow3 .in-section .col .col-2-in .anime-box .icon3 {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            width: 100%;
            vertical-align: top;
            height: 100%;
            display: block;
            height: 40px;
            width: 30%;
            margin-left: 10%; }
            @media screen and (min-width: 768px) {
              #flow3 .in-section .col .col-2-in .anime-box .icon1,
              #flow3 .in-section .col .col-2-in .anime-box .icon2,
              #flow3 .in-section .col .col-2-in .anime-box .icon3 {
                display: inline-block;
                height: 65px;
                margin-left: 0; } }
          #flow3 .in-section .col .col-2-in .anime-box h2 {
            color: #fcc800;
            line-height: 2; }
            @media screen and (min-width: 768px) {
              #flow3 .in-section .col .col-2-in .anime-box h2 {
                display: inline-block;
                padding-right: 15%;
                vertical-align: top;
                line-height: 2.2; } }
        #flow3 .in-section .col .col-2-in p {
          color: #ffffff;
          text-align: left;
          padding: 0 5%; }
          @media screen and (min-width: 768px) {
            #flow3 .in-section .col .col-2-in p {
              padding: 0 30% 0 0; } }

/* --------------------------------------------------
    message 代表メッセージ
-------------------------------------------------- */
#message .col-2 {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 100%; }
  @media screen and (min-width: 768px) {
    #message .col-2 {
      display: flex; } }
#message .col-2-in {
  width: 100%; }
  @media screen and (min-width: 768px) {
    #message .col-2-in {
      display: block; } }
  #message .col-2-in:nth-of-type(2n+2) {
    margin: 0 auto;
    width: 90%; }
  @media screen and (min-width: 768px) {
    #message .col-2-in:nth-of-type(2n+2) {
      margin-left: 4%;
      margin-right: 10%;
      width: 40%; } }
#message .btn-line {
  display: inline-block;
  font-size: 1.4rem;
  margin: 0 auto;
  padding: 0.7em 2em;
  text-decoration: none;
  border-radius: 2px;
  transition: .2s;
  color: #000000;
  border: solid 1px #000000; }
  #message .btn-line:hover {
    background: #000000;
    color: #ffffff; }
#message h1 {
  text-align: left; }
#message p {
  text-align: left; }
#message .img-concept {
  margin-bottom: 15px;
  background-image: url("../images/common/img-common01.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 200px; }
  @media screen and (min-width: 768px) {
    #message .img-concept {
      margin-bottom: 0;
      height: 550px; } }

/* --------------------------------------------------
    service 営業品目
-------------------------------------------------- */
#service {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  vertical-align: top;
  position: relative;
  padding: 0;
  height: 600px; }
  #service::before {
    content: ' ';
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
  @media screen and (min-width: 768px) {
    #service {
      height: 750px; } }
  #service .in-service {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
    width: 100%; }
    #service .in-service .in-section {
      max-width: 500px;
      margin: 0 auto;
      padding: 0 15px;
      margin: 0 auto;
      text-align: center; }
      @media screen and (min-width: 768px) {
        #service .in-service .in-section {
          max-width: 1000px;
          padding: 0 25px; } }
      #service .in-service .in-section h1 {
        color: #ffffff; }
      #service .in-service .in-section p {
        color: #ffffff;
        text-align: left; }
        @media screen and (min-width: 768px) {
          #service .in-service .in-section p {
            text-align: center; } }
        #service .in-service .in-section p br {
          display: none; }
          @media screen and (min-width: 768px) {
            #service .in-service .in-section p br {
              display: block; } }
      #service .in-service .in-section .col-2 {
        display: block;
        margin: 0 auto;
        text-align: center;
        padding: 25px 0; }
        @media screen and (min-width: 768px) {
          #service .in-service .in-section .col-2 {
            padding: 35px 0; } }
        #service .in-service .in-section .col-2 h2 {
          color: #ffffff;
          writing-mode: vertical-rl;
          font-size: 1.7rem;
          font-weight: 400;
          letter-spacing: 0.2em;
          display: inline-flex;
          padding: 3% 0.5%;
          border: solid 1px #ffffff;
          height: 160px;
          margin-right: 0; }
          @media screen and (min-width: 768px) {
            #service .in-service .in-section .col-2 h2 {
              font-size: 2.5rem;
              padding: 3% 2%;
              height: 230px;
              margin-right: 2%; } }
          #service .in-service .in-section .col-2 h2:last-child {
            margin-right: 0; }

/* --------------------------------------------------
    company 会社概要
-------------------------------------------------- */
#company .in-section {
  max-width: 1050px;
  margin: 0 auto;
  padding-right: 15px;
  padding-left: 15px; }
  @media screen and (min-width: 768px) {
    #company .in-section {
      padding-right: 25px;
      padding-left: 25px; } }
#company table {
  width: 100%;
  display: block;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    #company table {
      display: inline-block;
      vertical-align: top; } }
  #company table tbody {
    display: table-row-group;
    vertical-align: middle; }
    @media screen and (min-width: 768px) {
      #company table tbody {
        display: inline-table;
        width: 100%; } }
    #company table tbody tr {
      border-top: 1px solid #b8b8b8;
      display: table-row; }
      #company table tbody tr:last-child {
        border-bottom: 1px solid #b8b8b8; }
      #company table tbody tr .company-title {
        font-size: 1.2rem;
        text-align: left;
        width: 25vw; }
        @media screen and (min-width: 768px) {
          #company table tbody tr .company-title {
            font-size: 1.5rem;
            width: 20vw; } }
      #company table tbody tr .company-answer {
        text-align: left;
        display: block;
        margin: 0 auto;
        width: 100%;
        padding: 2.5vh 0;
        line-height: 1.8; }

/* --------------------------------------------------
    contact お問い合わせ
-------------------------------------------------- */
#contact {
  background: #f5f5f5; }
  #contact .in-1000 {
    max-width: 1050px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px; }
    @media screen and (min-width: 768px) {
      #contact .in-1000 {
        padding-right: 25px;
        padding-left: 25px; } }
    #contact .in-1000 h1 {
      color: #203744; }
      #contact .in-1000 h1 br {
        display: block; }
        @media screen and (min-width: 768px) {
          #contact .in-1000 h1 br {
            display: none; } }
    #contact .in-1000 h3 {
      margin-bottom: 10px; }
    #contact .in-1000 p {
      color: #203744;
      text-align: left;
      display: block;
      margin-bottom: 15px; }
      @media screen and (min-width: 768px) {
        #contact .in-1000 p {
          padding: 0;
          text-align: center;
          margin-bottom: 20px; } }
      #contact .in-1000 p br {
        display: none; }
        @media screen and (min-width: 768px) {
          #contact .in-1000 p br {
            display: block; } }
    #contact .in-1000 .col-2 {
      margin: 25px auto 0;
      text-align: center;
      width: 100%;
      display: block; }
      @media screen and (min-width: 768px) {
        #contact .in-1000 .col-2 {
          margin: 35px auto 0; } }
      #contact .in-1000 .col-2 .col-2-in {
        display: block;
        margin: 0 auto; }
        #contact .in-1000 .col-2 .col-2-in:first-child {
          margin: 0 auto 30px; }
        #contact .in-1000 .col-2 .col-2-in h4 {
          color: #203744;
          margin-bottom: 5px; }
        #contact .in-1000 .col-2 .col-2-in a.btn-contact {
          color: #fcc800;
          background: #203744;
          font-size: 1.8rem;
          font-weight: 600;
          display: inline-block;
          position: relative;
          padding: 20px 0;
          width: 100%;
          max-width: 450px;
          border-radius: 10px;
          margin-right: 1rem; }
          #contact .in-1000 .col-2 .col-2-in a.btn-contact:hover {
            color: #203744;
            background: #fcc800; }
          @media screen and (min-width: 768px) {
            #contact .in-1000 .col-2 .col-2-in a.btn-contact {
              font-size: 2.1rem; } }
        #contact .in-1000 .col-2 .col-2-in i {
          margin-right: 1rem; }