/*
Theme Name: Rockstream-cms
Description: Rockstream-cmsのテーマ
Version: 1.0
Author:	Rockstream
License: GPL
License URI: https://www.gnu.org/copyleft/gpl.html
*/

@charset "utf-8";

/*
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2"), url("../fonts/NotoSansJP-Medium.woff") format("woff"), url("../fonts/NotoSansJP-Medium.otf") format("opentype");
}
    
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2"), url("../fonts/NotoSansJP-Bold.woff") format("woff"), url("../fonts/NotoSansJP-Bold.otf") format("opentype");
}
  
@font-face {
  font-family: 'Noto Serif JP';
  font-style: bold;
  font-weight: 500;
  font-display: fallback;
  src: url("../fonts/NotoSerifJP-Bold.woff2") format("woff2"), url("../fonts/NotoSerifJP-Bold.woff") format("woff"), url("../fonts/NotoSerifJP-Bold.otf") format("opentype");
}
  
@font-face {
  font-family: 'Noto Serif JP';
  font-style: bold; 
  font-weight: 700;
  font-display: fallback;
  src: url("../fonts/NotoSerifJP-Bold.woff2") format("woff2"), url("../fonts/NotoSerifJP-Bold.woff") format("woff"), url("../fonts/NotoSerifJP-Bold.otf") format("opentype");
}
  
@font-face {
  font-family: 'Roboto';
  font-style: bold;
  font-weight: 700;
  font-display: fallback;
  src: url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/NotoSansJP-Bold.otf") format("opentype");
}
*/
/*color*/
$BASE_COLOR :#0a5075;
$DEEP_COLOR :#103154;
$MAIN_COLOR :#080957;
$RED_COLOR :#da1313;
$YELLOW_COLOR :#fcea1f;
$TIT_GREEN :#045057;
$BG_GRAY_COLOR: #e5e6e7;
$GRAY_COLOR: #ebeff3;
$LINK_COLOR: #eb2935;
$WATER_COLOR: #009ee9;
$ORANGE_COLOR: #fd731e;

$bar-style: solid; 
$bar-size: 2px;
$bar-color: #fff;

// mixin
@mixin more_btn($max-width:368px,$width:40%){
  max-width:$max-width;
  width:$width;
}
@mixin transition($property: all, $time: 0.2s, $timing: ease-out) {
  -webkit-transition: $property $time $timing;
  -moz-transition: $property $time $timing;
  -ms-transition: $property $time $timing;
  -o-transition: $property $time $timing;
  transition: $property $time $timing;
}
      
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}
      
@mixin text-shadow($value...) {
  -webkit-text-shadow: $value;
  -moz-text-shadow: $value;
  -ms-text-shadow: $value;
  text-shadow: $value;
}
      
@mixin box-shadow($value...) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  -ms-box-shadow: $value;
  box-shadow: $value;
}
      
@mixin border-radius($value: 4px) {
  -webkit-border-radius: $value;
  -moz-border-radius: $value;
  -ms-border-radius: $value;
  border-radius: $value;
}
      
@mixin flex() {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
      
@mixin flex-wrap($value: wrap) {
  -webkit-flex-wrap: $value;
  -ms-flex-wrap: $value;
  flex-wrap: $value;
}
      
@mixin align-items($value: center) {
  -webkit-align-items: $value;
  -moz-align-items: $value;
  -ms-align-items: $value;
  align-items: $value;
}
      
@mixin justify-content($value: center) {
  -webkit-justify-content: $value;
  -moz-justify-content: $value;
  -ms-justify-content: $value;
  justify-content: $value;
}
  
@mixin order() {
  -webkit-order: -1;
  order: -1;
}
      
@mixin clearfix {
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

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, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font-weight: normal;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
  -webkit-text-size-adjust: 100%;
}

article,aside,details,figcaption,figure,
footer,header,menu,nav,section {
  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;
}

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

/* Reset+ */
ol li,
ul li {
  list-style: none;
  list-style-position: inside;
}
img {
  border:none;
  vertical-align: bottom;
  &.bd1{
	border:1px solid #000;
  }
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.w100per{width:100%;}
.w95per { width: 95%;}
.w90per { width: 90%;}
.w85per { width: 85%;}
.w80per { width: 80%;}
.w75per { width: 75%;}
.w70per { width: 70%;}
.w65per { width: 65%;}
.w60per { width: 60%;}
.w55per { width: 55%;}
.w50per { width: 50%;}

/* Common */
body {
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-size:18px;
  line-height: 1.8;
  color: #000;
  background: #fff;
  @media only screen and (max-width: 768px){
    font-size:16px;
    line-height: 1.6;
  }
  @media only screen and (max-width: 420px){
    font-size:14px;
  }
}

$FONT_FAMILY_SANS: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

$FONT_FAMILY_SERIF: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

$FONT_FAMILY_EN: 'Roboto', sans-serif;

.oswald{font-family: 'Oswald', sans-serif;}

a {
  color: #000;
  text-decoration:none;
  &.underline{
    text-decoration: underline;
  }
}

.fs12 {font-size:12px;}
.fs13 {font-size:13px;}
.fs14 {font-size:14px;}
.fs15 {font-size:15px;}
.fs16 {font-size:16px;}
.fs18 {font-size:18px;}
.fs20 {font-size:20px;}
.fs22 {font-size:22px;}
.fs24 {font-size:24px;}
.fs28 {font-size:28px;}
.fs30 {font-size:30px;}
.fs32 {font-size:32px;}
.fs36 {font-size:36px;}
.fs38 {font-size:38px;}
.fs40 {font-size:40px;}
@media only screen and (max-width: 768px){
  .fs12,.fs13 {font-size:10px;}
  .fs14 {font-size:12px;}
  .fs15,.fs16 {font-size:14px;}
  .fs18,.fs20 {font-size:15px;}
  .fs22,.fs24 {font-size:20px;}
  .fs28 {font-size:24px;}
  .fs30,.fs32 {font-size:26px;}
  .fs36, .fs38 {font-size:32px;}
  .fs40 {font-size:36px;}
}
@media only screen and (max-width: 420px){
  .fs15,.fs16 {font-size:14px;}
  .fs18,.fs20 {font-size:14px;}
  .fs22,.fs24 {font-size:14px;}
  .fs28 {font-size:18px;}
  .fs30,.fs32 {font-size:20px;}
  .fs36, .fs38 {font-size:22px;}
  .fs40 {font-size:24px;}
}

.smp{display:none;}

strong{
  font-weight: bold;
}

/*クリアフィックス*/
.cf:after{
  content:".";
  display:block;
  clear:both;
  height:0;
  visibility:hidden;
}

.common-wrapper{
  max-width: 1160px;
  width:94%;
  margin: 0 auto;
  position: relative;
}
.inner {
  margin: 0 auto;
  position: relative;
}
iframe{ width:100%; }
.center{
  @include flex;
  @include justify-content;
}
.dispnone{
  display:none;
}

#loading {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #fff;
  opacity: 1.0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  img {
    position:absolute;
    top:50%;
    left:0;
    right:0;
    margin-top:-80px;
    margin-left:-80px;
    width:80px;
    margin:auto;
  }
}
.dot-loader {
  position:absolute;
  top:50%;
  left:0;
  right:0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80px;
  margin:auto;
}
  
.dot-loader div {
  width: 16px;
  height: 16px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}
  
.dot-loader div:nth-child(1) { animation-delay: -0.32s; }
.dot-loader div:nth-child(2) { animation-delay: -0.16s; }
  
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.fadeInUp {
  opacity : 0;
  transform: translateY(60px);
  transition: 2s;
}

/*---------------------
header
---------------------*/
#header {
  position: relative;
  width: 100%;
  transition: 0.5s;
  .hdtop{
    position: fixed;
    width:100%;
    height:auto;
    padding:5px 0;
    z-index:2;
    background-color:rgba(255,255,255,0.9);
     &.scroll-nav {
      padding: 5px 0;
      background-color:#fff;
      .logo{
        width:338px;
      }
    }
    .inner{
      width:96%;
      margin:auto;
      @include flex;
      @include justify-content(space-between);
      @include align-items;
    }
    .logo{
      width:338px;
      transition: 0.5s;
      a:hover img{
        opacity: 1;
      }
    }
    .g_naviWrap {
      display: block;
      max-width: 780px;
      width:60%;
      .g_navi{
        ul{
          margin: 0 auto;
          width: 100%;
          @include flex();
          @include justify-content(end);
        }
        li {
          position: relative;
          margin:0 2%;
          text-align: center;
          font-size: 16px;
          line-height: 35px;
          a{
            display: block;
          }
          a::before {
            left: 50%;
          }
          a:before, a:after {
            border-bottom: solid 2px #000;
            bottom: 0;
            content: "";
            display: block;
            position: absolute;
            right: 0;
            transition: all .3s ease;
            -webkit-transition: all .3s ease;
            width: 0;
          }
          a::before {
            left: 50%;
          }
          a::after {
            right: 50%;
          }
          a:hover::before,
          a:hover::after {
            width: 50%;
          }
          a.active,a.current{
            border-bottom:2px solid #000;
          }
        }
      }
    }
  }
  @media only screen and (max-width: 999px){
    .hdtop{
      .g_naviWrap{
        display: none;
      }
    }
  }
  @media only screen and (max-width: 768px){
    .hdtop{
      .logo{
        width:70%;
      }
      &.scroll-nav {
        padding: 5px 0;
        background-color:#fff;
        .logo{
          width:70%;
        }
      }
    }
  }
  @media only screen and (max-width: 420px){
  }
}
.drawer-hamburger {
    display: none;
}
@media only screen and (max-width: 999px){
  .drawer-hamburger {
    display: block;
    top:0;
    padding-top:16px;
    padding-bottom:26px;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  .drawer-hamburger-icon, .drawer-hamburger-icon::before, .drawer-hamburger-icon::after {
    background-color: #000;
  }
  .drawer-nav {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    padding: 20px 0;
    z-index: 10000;
    ul{
      li {
        width: 100%;
        text-align: left;
        font-size: 14px;
        border-bottom: 1px solid #586e85;
        a {
          color: #fff;
          display: block;
          padding: 10px;
        }
      }
      .telarea {
        width:100%;
        padding: 10px;
        @include flex();
        @include justify-content();
        @include align-items();
        .icon {
          margin-right: 5px;
        }
        .tel {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }  
  }
}

/*------------------------
メインビジュアル
-------------------------*/
section#mv{
  padding:0;
}
#mv{
  position: relative;
  width:100%;
  margin:0 auto;
  z-index:1;
  .bx-wrapper{
    margin:0;
  }
  .bx-wrapper .bx-controls-direction{
    display: none;
  }
  ul{
    li{
      img{
        position:relative;
      }
      span{
        position:absolute;
        top:30%;
        left:0;
        right:0;
        max-width: 1000px;
        width:96%;
        margin:auto;
        text-align: center;
        font-size:min(48px,5vw);
        font-weight: bold;
        color:#fff;
      }
    }
  }
  @media only screen and (max-width: 768px){
    ul{
      li{
        span{
          top:45%;
        }
      }
    }
  }
  @media only screen and (max-width: 420px){
  }
}
.p-mainv__scroll {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 10;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1;
  color: #fff;
  letter-spacing: .06em;
  font-style: normal;
  font-weight: 500;
  @include flex();
  @include justify-content();
  @include align-items();
  flex-direction: column;
  .dot-container {
    text-align: center;
    margin-top:5px;
    @include flex();
    flex-direction: column;
    gap: 10px;
  }
  .dot {
    width: 3px;
    height: 3px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: fadeIn 1s infinite;
  }
  .dot:nth-child(1) {
    animation-delay: 0.2s;
  }
  .dot:nth-child(2) {
    animation-delay: 0.4s;
  }
  .dot:nth-child(3) {
    animation-delay: 0.6s;
  }
  .dot:nth-child(4) {
    animation-delay: 0.8s;
  }
  @keyframes fadeIn {
    0%, 100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
  @media only screen and (max-width: 768px){
    display: none;
  }
}
#mv-page{
  .tit{
    padding:120px 0 100px;
    text-align: center;
    h1{
      font-size:min(48px,8vw);
      text-shadow: 0 0 20px #fff;
    }
  }
  &.company{
    background:url(../images/company-mv_bg.jpg) no-repeat center;
    background-size:cover;
  }
  &.contact{
    background:url(../images/contact-mv_bg.jpg) no-repeat center;
    background-size:cover;
  }
  &.blog{
    background:url(../images/blog-mv_bg.jpg) no-repeat center;
    background-size:cover;
  }
  @media only screen and (max-width: 768px){
    &.company{
    background:url(../images/company-mv_bg_768.jpg) no-repeat center;
    background-size:cover;
    }
    &.contact{
      background:url(../images/contact-mv_bg_768.jpg) no-repeat center;
      background-size:cover;
    }
    &.blog{
      background:url(../images/blog-mv_bg_768.jpg) no-repeat center;
      background-size:cover;
    }
  }
  @media only screen and (max-width: 420px){
    &.company{
      background:url(../images/company-mv_bg_420.jpg) no-repeat center;
      background-size:cover;
    }
    &.contact{
      background:url(../images/contact-mv_bg_420.jpg) no-repeat center;
      background-size:cover;
    }
    &.blog{
      background:url(../images/blog-mv_bg_420.jpg) no-repeat center;
      background-size:cover;
    }
  }
}

.breadcrumb{
  font-size:90%;
}

/*------------------------
section
-------------------------*/
.h2_01 {
  margin-bottom:30px;
  text-align:center;
  font-size: 34px;
  color: #2c3e50;
  font-weight: bold;
  line-height: 1.4;
  @media only screen and (max-width: 768px){
    margin-bottom:20px;
    font-size: 26px;
  }
  @media only screen and (max-width: 768px){
    font-size: 24px;
  }
}

.hero {
  padding:50px ;
  background-color: #0052cc;
  color: white;
  .common-wrapper{
    @include flex();
    @include align-items();
    @include justify-content(space-between);
    .hero-content {
      width: 55%;
      .buttons{
        @include flex();
        @include justify-content();
        a{
          width:48%;
          margin:0 1%;
          span{
            font-size:min(18px,2vw);
          }
        }
      }
      .btn {
        padding: 10px 2%;
      }
    }
    picture{
      width: 40%;
      .hero-image {
        border-radius: 10px;
      }
    }
  }
  h1{
    margin-bottom:20px;
    font-size:min(24px,3vw);
    line-height: 1.5;
  }
  p{
    margin-bottom:40px;
    color:#fff;
  }
  @media (max-width: 768px) {
    padding:40px 0%;
    h1{
      text-align: center;
      font-size:min(24px,5vw);
    }
    .common-wrapper{
      display: block;
      .hero-content {
        width: 90%;
        margin:0 auto 30px;
        .buttons{
          a{
            span{
              font-size:14px;
            }
          }
        }
      }
      picture {
        display: block;
        width: 60%;
        margin:auto;
      }
    }
    p{
      margin-bottom:30px;
    }
  }
  @media (max-width: 420px) {
    padding:30px 0%;
    p{
      margin-bottom:30px;
    }
  }
  @media (max-width: 330px) {
    .common-wrapper{
      .hero-content {
        .buttons{
          a{
            span{
              font-size:12px;
            }
          }
        }
      }
    }
  }
}

.benefits {
  text-align: center;
}

.benefit-list {
  margin-bottom: 30px;
  @include flex();
  @include justify-content();
  .benefit-item {
    width:30%;
    max-width: 250px;
    margin: 10px 1.5%;
    font-size: 1em;
    span{
      display: block;
      &:nth-of-type(1){
        max-width: 150px;
        margin:0 auto 10px;
      }
      &:nth-of-type(2){
        font-size:150%;
        line-height: 1.5;
      }
    }
  }

}
.benefit-list_01{
  .benefit-item {
    width:30%;
    max-width: 250px;
    span{
      display: block;
      &:nth-of-type(1){
        max-width: 400px;
        margin:0 auto 10px;
      }
    }
    p{
      span{
        &:nth-of-type(1){
          margin:0 0 15px 0;
          font-size:150%;
          line-height: 1;
        }
        &:nth-of-type(2){
          font-size:100%;
          text-align: left;
        }
      }
    }
  }
  @media (max-width: 768px) {
    display: block;
    .benefit-item {
      width:90%;
      max-width: inherit;
      margin:0 auto 20px;
      @include flex();
      @include align-items();
	  @include flex-wrap;
      span{
        &:nth-of-type(1){
          max-width: 400px;
          width:25%;
          margin:0 2% 0 0;
          text-align: left;
        }
      }
      p{
        width: 65%;
        span{
          &:nth-of-type(1){
            width:100%;
          }
        }
      }
    }
  }
  @media (max-width: 420px) {
    .benefit-item {
      width:96%;
      p{
        width: 73%;
        span{
          &:nth-of-type(1){
            width:100%;
			margin-bottom:7px;
          }
        }
      }
    }
  }
}
.benefit-list_02{
  .benefit-item {
    width:30%;
    max-width: 230px;
    margin: 10px 1.5%;
    font-size: 1em;
    span{
      display: block;
      max-width: 200px;
      margin:auto;
    }
  }
}

.services{
  background-color:#2150fe;
  .h2_01,p{
    color:#fff;
  }
  .service-image {
    width: 80%;
    max-width: 800px;
    display: block;
    margin: 20px auto;
  }
  @media (max-width: 420px) {
    .service-image {
      width: 98%;
    }
  }
}

.consulting {
  @include flex();
  @include justify-content(space-between);
  @include align-items();
  .h2 {
    font-size: 30px;
    color: #2c3e50;
    text-align: left;
  }
  h2 span {
    font-weight: bold;
  }
  .steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
  }
  .step {
    display: flex;
    align-items: center;
    gap: 15px;
    .num {
      width: 50px;
      height: 50px;
      text-align: center;
      background: #f0f0f0;
      border-radius: 50%;
      padding: 10px;
      span{
        font-size:20px;
        font-weight: bold;
        line-height: 1.6;
      }
    }
  }
  .text h3 {
    font-size: 22px;
    color: #2c3e50;
    margin: 0;
  }
  .text p {
    color: #666;
    margin: 5px 0 0;
  }
  .description {
    color: #333;
    margin-top: 20px;
    line-height: 1.6;
  }
  .text-content {
    width: 50%;
    text-align: left;
  }
  picture{
    width: 48%;
    .consulting-image {
      border-radius: 10px;
    }
  }
  @media (max-width: 768px) {
    flex-direction: column;
    text-align: center;
	  .text-content {
      width: 96%;
      margin:auto;
      .steps{
        width:96%;
        margin:auto;
      }
    }
	  .h2 {
      text-align: center;
    }
	  picture{
	    width:60%;
      margin-top:20px;
	  }
  }
}

.ai-support {
  padding: 60px 0;
  background-color:#99bbff;
  .h2_01{
    br{
      display:none;
    }
  }
  .block{
    max-width: 1160px;
    width:96%;
    margin:auto;
    @include flex();
    @include justify-content();
    @include align-items();
    gap: 40px;
  }
  .number{
    padding:0 5px;
  }
  p{
    color:#2c3e50;
  }
  .image-container{
    width:40%;
	  @include order();
    img{
      max-width:896px;
    }
  }
  .description{
    max-width:1200px;
    width:96%;
    margin:30px auto 0;
  }
  @media (max-width: 999px) {
    .h2_01{
      br{
        display:block;
      }
    }
  }
  @media (max-width: 768px) {
    padding:40px 8%;
    .block{
      display:block;
    }
	  .image-container{
	    width:70%;
      margin:auto;
	  }
    .text-container {
      margin-bottom:20px;
    }
  }
  @media (max-width: 420px) {
    padding:40px 4%;
    .h2_01{
      font-size:22px;
    }
  }
}

.image-container {
  flex: 1;
  img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
  }
}
.text-container {
  flex: 1.2;
  h2{
    text-align: left;
  }
}

.support-list {
  margin-top: 20px;
}

.support-item {
   display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.number {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #e0e4e9;
  color: #2c3e50;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  margin-right: 15px;
}

h3 {
  margin: 0;
  font-size: 18px;
  color: #2c3e50;
}

p {
  margin: 5px 0 0;
  color: #6c757d;
}

.description {
  margin-top: 20px;
  color: #2c3e50;
}

.pricing{
  table {
    margin: auto;
    border-collapse: collapse;
    width: 100%;
    th,td{
      border: 1px solid #ddd;
      padding: 10px 2%;
      vertical-align: middle;
      line-height: 1.4;
    }
    td{
      font-size:min(16px,2vw);
    }
  }
  @media (max-width: 768px) {
    table{
      tr{
        &:nth-of-type(2n){
          th,td{
            border-bottom-width: 2px;
          }
        }
      }
      th{
        width:25%;
        font-size:min(16px,2vw);
      }
    }
  }
  @media (max-width: 420px) {
    table{
      th{
        width:105px;
      }
      th,td{
        font-size:14px;
      }
    }
  }
}

.contact{
  p{
    &:nth-of-type(1){
      text-align: center;
      br{
        display: none;
      }
    }
    &:nth-of-type(2){
      margin-bottom:10px;
    }
  }
  .contact-images {
    @include flex();
    @include justify-content();
    gap: 20px;
    margin:20px 0 40px;
    img {
      max-width: 373px;
      border-radius: 10px;
    }
  }
  @media (max-width: 768px) {
    margin-bottom:20px;
    .img_03{
      display: none;
    }
    p{
      &:nth-of-type(1){
        br{
          display: block;
        }
      }
    }
  }
  @media (max-width: 420px) {
  }
}

.consult-banner {
  display: block;
  width: 400px;
  max-width: 60%;
  margin: 30px auto 0;
  text-align: center;
  background: linear-gradient(to right, #2563eb, #4f46e5); /* 青→藍グラデーション */
  color: white;
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }
  @media (max-width: 768px) {
    font-size: 110%;
  }
  @media (max-width: 420px) {
    font-size: 90%;
  }
}

.btn-more{
  max-width: 244px;
  width:50%;
  margin:auto;
  cursor: pointer;
  a{
      display: block;
  }
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  background: white;
  color: #0052cc;
  text-decoration: none;
  border-radius: 5px;
}

/**************************
セクション共通 
**************************/
section{
  padding:60px 0;
  section{
    padding:0;
  }
  @media only screen and (max-width: 768px){
    padding:40px 0;
  }
  @media only screen and (max-width: 420px){
    padding:30px 0;
  }
}
h2,h3,h4,h5,h6{
  font-weight: bold;
}
.telArea{
  span{
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    &.icon{
      width:18px;
      margin-right: 8px;
    }
  }
  .tel{
    font-size: 26px;
    font-weight: bold;
    color:$MAIN_COLOR;
    line-height: 1;
    letter-spacing: 0.08em;
    a{
      color:$MAIN_COLOR;
    }
  }
}
img{
  width:100%;
  height: auto;
}

.btn{
  position: relative;
  display: inline-block;
  width: auto;
  margin:auto;
  padding:10px 40px;
  text-align: center;
  font-weight: bold;
  color:$MAIN_COLOR;
  border:1px solid $MAIN_COLOR;
  background-color:#fff;
  border-radius:3px;
  line-height: 1;
  cursor: pointer;
  &:hover{
    color:#fff;
    background-color:$MAIN_COLOR;
    transition:.3s;
  }
  a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
  @media only screen and (max-width: 768px){
  }
  @media only screen and (max-width: 420px){
  }
}

/*---------------------
フォーム・テーブル設定
---------------------*/
table{
  width:100%;
  border-spacing: 1px;
  text-align: left;
  margin: 0 auto;
  border-top:1px solid #ccc;
  border-left:1px solid #ccc;
  th,td{
    padding: 15px 30px;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
  }
  th{
    padding-left: 30px;
    background-color: #f4f4ec;
  }
  thead{
    td{
      background-color: #663333;
      color:#fff;
      font-size: 18px;
      padding: 10px 50px;
    }
  }
  &.tbBorder,&.beercan{
    width:100%;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    th,td{
      border-bottom:1px solid #ccc;
      border-right:1px solid #ccc;
    }
  }
  &.beercan{
    th,td{
      padding:10px;
      font-size: 100%;
      }
    th{
      width:22%;
    }
    td{
      width:78%;
    }
  }
}

/*---------------------
service
---------------------*/
.plan {
  margin-bottom: 50px;
  padding: 30px 4%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
  h3 {
    font-size: 1.8em;
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 10px;
  }
  .plan-description {
    color: #666;
    margin-bottom: 15px;
    font-size: 1.4em;
    br{
      display: none;
    }
  }
  .plan-content{
    h4 {
      font-size: 1.2em;
      margin-top: 15px;
      margin-bottom: 5px;
      color: #333;
    }
    ul {
      padding-left: 20px;
      margin-bottom: 15px;
      li {
        margin-bottom: 5px;
        margin-left:1.3em;
        list-style-type: disc;
        list-style-position: outside;
        line-height: 1.5;
      }
	    &.decimal{
        li{
          margin-bottom:10px;
          margin-left:1em;
	        list-style-type: decimal;
          list-style-position: outside;
          line-height: 1.5;
          span{
            &:nth-of-type(1){
              display: inline-block;
			        padding:0 8px;
			        color:#fff;
              background-color:#0056b3;
			        border-radius:5px;
		        }
          }
	      }
      }
    }
  }
  .button {
    display: block;
    max-width:160px;
    width:60%;
    margin:30px auto 0;
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    &:hover {
      background-color: #218838;
    }
  }
  @media (max-width: 768px) {
    margin-bottom:40px;
    padding: 20px 4% 30px;
    h3 {
      font-size: 1.3em;
    }
    .plan-description {
      br{
        display: block;
      }
    }
    .plan-content{
      ul{
        padding-left:2%;
        &.decimal{
          li{
            span{
              &:nth-of-type(1){
                margin-bottom:3px;
              }
			        &:nth-of-type(2){
                display: block;
              }
		        }
	        }
        }
      }
    }
    @media (max-width: 420px) {
      margin-bottom:30px;
      .plan-description {
        font-size:min(22px,5.2vw);
      }
    }
  }
}

/* ---------------------------------
  company
---------------------------------- */
#company{
  section{
    &:nth-of-type(1){
      padding-bottom:60px;
      .img{
        max-width: 1080px;
        width:96%;
        margin:0 auto 30px;
      }
      .txt{
        max-width: 1080px;
        width:96%;
        margin:auto;
      }
    }
    &#greeting-container {
      margin:0 auto 40px;
      padding: 40px;
      border-radius: 8px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      text-align: center;
      max-width: 800px;
      width: 94%;
      h1 {
        color: #333;
        margin-bottom: 20px;
        font-size:34px;
      }
      h2{
        font-size:26px;
      }
      .image-container {
        width: 250px;
        height: 250px;
        border-radius: 50%; 
        overflow: hidden; 
        margin: 0 auto 20px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      p {
        color: #555;
        margin-bottom: 15px;
        text-align: left;
        &:nth-of-type(2){
          font-weight: bold;
          font-size:110%;
        }
      }
    }
    &#team {
      margin: 0 auto;
      .member {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        figure {
          @include flex();
          @include align-items(flex-start);
          gap: 20px;
          margin: 0;
        }
        img {
          width: 150px;
          height: 150px;
          object-fit: cover;
          border-radius: 50%;
          border: 2px solid #ddd;
          }
        h3 {
          margin-top: 0;
          margin-bottom: 0.5em;
          font-size: 1.2em;
          color: #111;
        }
      }
    }
  }
  @media only screen and (max-width: 768px){
    section{
      &:nth-of-type(1){
        padding:0 0 30px;
      }
      &#greeting-container {
        padding:30px 4%;
        h1{
          font-size:28px;
        }
        .image-container {
          width:230px;
          height:230px;
        }
      }
      &#team{
        .member{
          figure {
            display: block;
            img {
              display: block;
              width:200px;
              height:200px;
              margin:0 auto 20px;
            }
            figcaption{
              width:100%;
              h3{
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
  @media only screen and (max-width: 420px){
    section{
      &:nth-of-type(1){
        table{
          width:94%;
          margin:30px auto 0;
          th,td{
            display: block;
            width:100%;
            padding:15px;
            font-size:14px;
          }
          td{
            border-left:0;
          }
        }
      }
      &#greeting-container {
        padding:20px 4%;
        h1{
          font-size:26px;
        }
        h2{
          font-size:20px;
        }
        .image-container {
          width:200px;
          height:200px;
        }
      }
    }
  }
}

/* ---------------------------------
	contact
---------------------------------- */
#contact{
  padding-bottom:100px;
  section{
    &.section_01{
      margin-bottom:50px;
      h2{
        margin-bottom:30px;
      }
      p{
        text-align: center;
        line-height: 1.3;
      }
    }
  }
  @media only screen and (max-width: 768px){
    padding-bottom:60px;
    section{
      &.section_01{
        margin-bottom:40px;
        p{
          padding:40px 0;
        }
      }
    }
  }
  @media only screen and (max-width: 420px){
    padding-bottom:40px;
    section{
      &.section_01{
        margin-bottom:30px;
        p{
          padding:30px 0;
        }
      }
    }
  }
}
#inquiry-form{
  max-width: 1100px;
  width:98%;
  margin:auto;
  padding:60px 0 80px;
  background-color:#fff;
  box-shadow: 0 0 15px #999;
  border-radius:10px;
  table{
    width:94%;
    max-width: 1050px;
    margin:0 auto 40px;
    border:1px solid #e6e6e6;
  }
  th{
    width:25%;
    padding:15px;
    text-align: left;
    vertical-align: top;
    border-bottom:1px solid #e6e6e6;
    span{
      float:right;
      display: block;
      margin-top:4%;
      padding:4px 8px;
      font-size:70%;
      color:#fff;
      background-color:$RED_COLOR;
      border-radius:3px;
      line-height: 1;
    }
  }
  td{
    width:auto;
    padding:15px 30px;
    border-bottom:1px solid #e6e6e6;
    dl{
      margin-bottom:5px;
      @include flex();
      dt{
        width:25%;
      }
      dd{
        width:75%;
      }
    }
    &.request{
      @include flex();
      @include align-items();
      label{
        @include flex();
        @include align-items();
        margin-right:10px;
      }
    }
  }
  .w80{
    width:100%;
    padding:10px;
  }
  .mw_wp_form .horizontal-item + .horizontal-item{
    margin-left:0 !important;
  }
  input[type="text"],textarea,select{
    padding:10px;
    font-size:100%;
    background-color:#f4f4f4;
    border:none;
    box-shadow: 2px 2px 2px #ccc inset;
  }
  .mw_wp_form input[type=file]{
    font-size:90%;
  }
  input::placeholder{
    color:#ccc;
  }
  button.zip-button{
    width:30%;
    max-width: 140px;
    padding:5px;
    color:#fff;
    background-color:$BASE_COLOR;
    border:none;
    cursor: pointer;
  }
  .mwform-tel-field input[type="text"], .mwform-zip-field input[type="text"]{
    background: #f4f4f4;
  }
  input.zip{
    width:20%;
    margin-right:10px;
    padding:10px;
    background-color:#f4f4f4;
  }
  span.mwform-tel-field input[name="tel[data][0]"],
  span.mwform-tel-field input[name="fax[data][0]"]{
    width:15%;
    padding:10px;
    background: #f4f4f4;
  }
  span.mwform-tel-field input[name="tel[data][1]"],
  span.mwform-tel-field input[name="fax[data][1]"]{
    width:20%;
    padding:10px;
    background: #f4f4f4;
  }
  span.mwform-tel-field input[name="tel[data][2]"],
  span.mwform-tel-field input[name="fax[data][2]"]{
    width:20%;
    padding:10px;
    background: #f4f4f4;
  }
  .check_policy{
    position:relative;
    margin-bottom:40px;
    text-align: center;
    a{
      text-decoration: underline;
    }
    input{
      margin-right: 5px;
    }
    label{
      span{
        display: none;
      }
    }
  }
  .btn_form{
    @include flex();
    @include justify-content();
    @include align-items();
  }
  input.btn_confirm{
    width:248px;
    margin:0 1%;
    padding:15px 0;
    color:#fff;
    background:#ef002d;
    background-size:100%;
    text-align:center;
    font-size:110%;
    font-weight:bold;
    cursor:pointer;
    box-shadow:none;
    border:none;
    border-radius:50px;
    line-height: 1;
  }
  input.return{
    width:100px;
    margin:0 1%;
    padding:15px 0;
    color:#fff;
    background:#ef002d;
    text-align:center;
    font-size:110%;
    font-weight:bold;
    cursor:pointer;
    box-shadow:none;
    border:none;
    border-radius:50px;
    line-height: 1;
  }
  .complete{
    padding:15px 2%;
    text-align: center;
  }
  .mw_wp_form_confirm{
    .check_policy{
      display: none;
    }
  }
  @media only screen and (max-width: 999px){
    th{
      width:30%;
    }
  }
  @media only screen and (max-width: 768px){
    padding:40px 0 50px;
    font-size:16px;
    th,td{
      display:block;
      width:100%;
      padding:10px 3%;
    }
    th{
      padding-bottom:0;
      border-bottom:0;
      @include flex();
      @include align-items();
      span{
        float:none;
        display: inline-block;
        margin-top:0%;
        margin-left:10px;
      }
    }
    tr:last-child{
      th{
        br{
          display: none;
        }
      }
    }
    .check_policy{
      dl{
        dd{
          width:100%;
          margin-left:0;
        }
      }
    }
    input.btn_confirm{
      width:230px;
      height:50px;
      padding:15px 0;
      font-size: 15px;
    }
  }
  @media only screen and (max-width: 420px){
    padding:30px 0 40px;
    font-size: 14px;
  }
}

.confirm{
  #inquiryForm{
    padding-top:0;
    h2{
      width:100%;
      padding:5px;
      text-align: center;
      font-size:min(28px,3.4vw);
      color:#fff;
      background-color:$BASE_COLOR;
    }
    table{
      width:100%;
      background-color:#f5f5f5;
      th{
        width:180px;
        padding:10px 0 10px 50px;
        text-align: left;
        span{
          display: none;
        }
      }
      td{
        width:auto;
        padding:10px 0;
        &:before{
          content:":";
          display: inline-block;
          margin-right:5px;
        }
      }
      tr{
        &:nth-of-type(1){
          th,td{
            padding-top:30px;
          }
        }
        &:nth-of-type(3){
          th,td{
            padding-bottom:30px;
          }
        }
        &:nth-of-type(4){
          display: none;
        }
      }
    }
    .btn_form{
      text-align: center;
    }
    input.btn_confirm{
      width:298px;
      height:64px;
      margin:30px auto 0;
      padding:15px 0;
      text-align:center;
      font-size: 20px;
      font-weight:bold;
      color:#fff;
      background:#ef002d;
      border-radius:30px;
      cursor:pointer;
      box-shadow:none;
      border:none;
      line-height: 1;
    }
    .txt{
      display: none;
    }
  }
  section{
    &:nth-of-type(3){
      padding-top:0;
      padding-bottom:100px;
    }
  }
  @media only screen and (max-width: 768px){
    section{
      &:nth-of-type(3){
        padding-bottom:80px;
      }
    }
  }
  @media only screen and (max-width: 420px){
    section{
      &:nth-of-type(3){
        padding-bottom:60px;
      }
    }
  }
}

/* ---------------------------------
	投稿
---------------------------------- */
.common-list {
  max-width: 1100px;
  width: 98%;
  margin: auto;
  @include flex();
  @include flex-wrap();
  li {
    max-width: 340px;
    width: 31%;
    margin: 0 1.1% 30px;
    background-color: #fff;
    opacity: 0; /* 最初は非表示 */
    transform: translateY(20px); /* 少し下にずらしておく */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; 
    &.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    .img {
      img {
        display: block;
        aspect-ratio: 340 / 246;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  @media only screen and (max-width: 768px) {
    @include justify-content();
    li {
      width: 48%;
      margin: 0 1% 30px;
    }
  }
  @media only screen and (max-width: 420px) {
    li {
      width: 90%;
      margin: 0 auto 20px;
    }
  }
}

.blog {
  .btn-more {
    margin-top: 40px;
  }
  .common-list {
    li {
      position: relative;
      padding: 10px 5px;
      border: 1px solid #b9b9b9;
      background-image: linear-gradient(-45deg, $WATER_COLOR 20px, transparent 0);
      a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
      }
      .img {
        position: relative;
        padding: 0 5px;
        z-index: 1;

        .cate {
          position: absolute;
          top: 0%;
          left: 5px;
        }
      }
      .cate {
        width: 40%;
        max-width: 100px;
        padding: 5px 10px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        background-color: $WATER_COLOR;
        line-height: 1;
        &.news {
          background-color: $ORANGE_COLOR;
        }
      }
      .box {
        padding-top: 8px;
        .cate {
          width: auto;
          max-width: inherit;
          margin-bottom: 10px;
          display: inline-block;
          border-radius: 10px;

          span {
            text-align: center;

          }
        }
        .title {
          margin-bottom: 10px;
          padding: 0 5px;
          font-size: 20px;
          font-weight: bold;
          line-height: 1.3;
        }
        .content {
          padding: 0 5px 30px;
          line-height: 1.3;
        }
      }
    }
  }
  @media only screen and (max-width: 768px) {
    .btn-more {
      margin-top: 30px;
    }
    .common-list {
      li {
        .cate {
          width: 40%;
          font-size: min(18px, 3vw);
        }

        .box {
          .title {
            font-size: 18px;
          }
        }
      }
    }
  }
  @media only screen and (max-width: 420px) {
    .btn-more {
      margin-top: 10px;
    }
    .common-list {
      li {
        .box {
          .title {
            font-size: 15px;
          }
        }
      }
    }
  }
}

#blog {
  &.detail {
    padding: 60px 0 100px;
    h2 {
      margin-bottom: 15px;
      text-align: center;
      font-size: min(36px, 5vw);
    }
    section {
      .block {
        max-width: 905px;
        width: 96%;
        margin: auto;

        .cate-block {
          margin-bottom: 20px;

          .cate {
            ul {
              @include flex();
              @include justify-content();

              li {
                position: relative;
                display: block;
                margin: 0 5px 10px;
                padding: 0 10px;
                color: #fff;
                border-radius: 10px;
              }
            }
            &.blog {
              ul {
                li {
                  background-color: $WATER_COLOR;
                }
              }
            }
            &.news{
              ul {
                li {
                  background-color: $ORANGE_COLOR;
                }
              }
            }
          }
        }
        .img {
          margin-bottom: 30px;
        }
      }
    }

    @media only screen and (max-width: 768px) {
      section {
        .block {
          .cate-block {
            padding-bottom: 30px;
          }
        }
      }
    }

    @media only screen and (max-width: 420px) {
      section {
        .block {
          .cate-block {
            padding-bottom: 20px;
          }
        }
      }
    }
  }
}

/*---------------------
Pager
---------------------*/
.pager {
  position: relative;
  max-width: 1080px;
  width: 96%;
  margin: auto;
  padding: 20px 0;
  @include flex();
  @include justify-content(space-between);
  @include align-items();

  .total-page {
    text-align: left;
    font-size: 18px;
  }

  &.upper {
    padding-top: 0;
  }

  .right {
    width: 40%;
    @include flex();
    @include justify-content(end);
    @include align-items();
    font-size: 18px;
  }

  .pager_num {
    @include flex();
    @include justify-content();
    @include align-items();

    span,
    a {
      position: relative;
      display: block;
      text-align: center;
      margin: 0 5px;
      font-size: 18px;
    }
  }

  .sort {
    padding-left: 2%;

    ul {
      @include flex();
      @include align-items();

      li {
        margin: 0 !important;
      }
    }
  }

  @media only screen and (max-width: 768px) {
    padding: 30px 0;

    .total-page {
      font-size: 14px;
    }

    .pager_num {

      span,
      a {
        font-size: 14px;
      }
    }

    .right {
      width: 65%;
      font-size: 14px;
    }
  }

  @media only screen and (max-width: 420px) {
    padding: 20px 0;

    .total-page {
      font-size: 12px;
    }

    .pager_num {

      span,
      a {
        font-size: 12px;
      }
    }

    .right {
      font-size: 12px;
    }
  }
}

/* ---------------------------------
	ビジュアルエディタ装飾
---------------------------------- */
.freeeditor {
  .sub_comment {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 50px;
    padding: 30px;
    color: $BASE_COLOR;
    background-color: #d8fbff;
    border-radius: 10px;
  }
  ol{
	li{
	  ul{
		margin-bottom:30px;
	  }
    }
  }
  #ez-toc-container {
    width: 100%;
    margin: 0 auto 40px;
    padding: 20px 2%;
    background-color: #f7f7f7;
    border-top: 10px solid $DEEP_COLOR;
    border-right: 1px solid $DEEP_COLOR;
    border-bottom: 1px solid $DEEP_COLOR;
    border-left: 1px solid $DEEP_COLOR;
    border-radius: 0;

    .ez-toc-title-toggle {
      display: none;
    }

    a.ez-toc-toggle {
      color: #fff;
    }

    .ez-toc-title-container {
      padding-left: 2%;
      padding-bottom: 10px;
      text-align: center;
    }

    p.ez-toc-title {
      position: relative;
      font-size: min(30px, 3vw);
      font-weight: bold;
    }

    .ez-toc-js-icon-con {
      padding: 3% 0;
      color: #fff;
      background-color: $DEEP_COLOR;
      border-radius: 50%;
      border: none;
    }

    .ez-toc-icon-toggle-span {
      svg {
        color: #fff !important;
      }
    }
    ul {
      li {
        font-size: min(24px, 2.4vw);

        a {
          display: block;
          margin-bottom: 10px;
          text-decoration: none;

          &:visited {
            color: #000;
          }
        }
      }
    }
  }

  section {
    padding: 60px 0;
  }

  h1 {
    margin: 0 0 20px;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 5px;
    font-size: 140%;
    font-weight: bold;
    border-bottom: 3px solid $MAIN_COLOR;
  }

  h2 {
    margin: 0 0 20px;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 5px;
    border: none;
    font-size: 130%;
    font-weight: bold;
    border-bottom: 3px solid $MAIN_COLOR;
  }

  h3 {
	margin-top:20px;
    margin-bottom: 10px;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 5px;
    font-size: 120%;
    font-weight: bold;
    border-bottom: 3px solid $MAIN_COLOR;
  }

  h4 {
    text-align: left;
    font-size: 110%;
    font-weight: bold;
    color: $BASE_COLOR;
    margin-bottom: 10px;
  }

  h5 {
    text-align: left;
    font-weight: bold;
    margin-bottom: 10px;
  }

  strong {
    font-weight: bold;
  }

  p {
    margin-bottom: 30px;
    font-size: min(20px, 3vw);
  }

  img.alignright {
    display: block;
    margin: 0 0 0 auto;
  }

  img.alignleft {
    display: block;
    margin: 0 auto 0 0;
  }

  img.aligncenter {
    display: block;
    margin: 0 auto;
  }

  img {
    display: block;
    max-width: 905px;
    width: 100%;
    height: auto;
    margin: auto;
    border-radius: 8px;
  }

  @media only screen and (max-width: 768px) {
    p {
      font-size: 16px;
    }
  }

  @media only screen and (max-width: 420px) {
    p {
      font-size: 14px;
    }
  }
}

.pagenavi {
  margin-top: 100px;

  .inner {
    max-width: 830px;
    width: 96%;
    margin: auto;
    @include flex();
    @include justify-content();
    @include align-items();

    img {
      width: auto;
    }

    p {
      position: relative;
      width: 30%;
      @include flex();
      @include align-items();
      line-height: 1;

      a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      span {
        display: block;
      }

      &:nth-of-type(1) {
        .arrow {
          margin-right: 8px;
        }
      }

      &:nth-of-type(2) {
        @include justify-content();
      }

      &:nth-of-type(3) {
        @include justify-content(end);

        .arrow {
          margin-left: 8px;
        }
      }
    }
  }

  @media only screen and (max-width: 768px) {
    margin-top: 40px;

    .inner {
      p {
        &:nth-of-type(2) {
          width: 40%;
        }
      }
    }
  }

  @media only screen and (max-width: 420px) {
    margin-top: 30px;

    .inner {
      p {

        &:nth-of-type(1),
        &:nth-of-type(3) {
          .txt {
            font-size: min(12px, 3vw);
          }
        }
      }
    }
  }
}

/* ---------------------------------
	privacy policy
---------------------------------- */
#privacy-policy{
  padding-top:80px;
  .common-wrapper{
    max-width: 1100px;
    width:80%;
    border:1px solid #000;
  }
  h2{
    padding:10px;
    text-align: center;
    color:#fff;
    background-color:#000;
    line-height: 1.5;
  }
  h3{
      margin-bottom:10px;
  }
  p,div{
      margin-bottom:20px;
  }
  @media only screen and (max-width: 768px){
      padding-top:60px;
  }
  @media only screen and (max-width: 420px){
      padding-top:40px;
  }
}
.privacy-policy {
  h3 {
      @extend .fs20;
  }
  @media only screen and (max-width: 420px){
  }
}

/*---------------------
スクロールバー
---------------------*/
#scrollbar1 {
  width:98%;
  height: 470px;
  padding:15px 10px 20px 20px;
  clear: both;
  background: #fff;
}
#scrollbar1 .scrollbar{
  position: relative;
  float: right;
  width: 10px;
}
#scrollbar1 .viewport {
  width: 93%;
  height: 420px;
  overflow: hidden;
  position: relative;
}
#scrollbar1 .overview {
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
}
#scrollbar1 .thumb .end,
#scrollbar1 .thumb{
  background-color: $MAIN_COLOR;
}
#scrollbar1 .track{
  background-color: #cccccc;
  width: 10px;
  position: relative;
  padding: 0;
}
#scrollbar1 .thumb {
  width: 10px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: 0;
}
#scrollbar1 .thumb .end{
  overflow: hidden;
  height: 5px;
  width: 5px;
}
#scrollbar1 .disable {
  display: none;
}

/* ---------------------------------
	faq
---------------------------------- */
.faq{
  dl{
    width:100%;
    max-width: 1160px;
    margin:0 auto 50px;
    dt{
      width:100%;
      margin-bottom:20px;
      padding:0 1% 10px;
      @include flex;
      @include align-items();
      border-bottom:1px solid #ccc;
      span{
        display: block;
        &:nth-of-type(1){
          width:10%;
          text-align: center;
          img{
            max-width: 59px;
          }
        }
        &:nth-of-type(2){
          width:90%;
          padding:0 3%;
          font-size:30px;
          line-height: 1.5;
        }
      }
    }
    dd{
      width:98%;
      margin:auto;
      min-height:160px;
      padding:20px 0;
      @include flex;
      background-color:#e5f0f5;
      span{
        display: block;
        &:nth-of-type(1){
          width:10%;
          text-align: center;
          img{
            max-width: 32px;
          }
        }
        &:nth-of-type(2){
          width:90%;
          padding:5px 3%;
          font-size:20px;
          border-left:2px solid #777;
        }
      }
    }
  }
  @media only screen and (max-width: 768px){
    dl{
      margin:0 auto 30px;
      dt{
        margin-bottom:20px;
        padding:0 1% 10px;
        span{
          display: block;
          &:nth-of-type(1){
            width:10%;
            img{
              max-width: 50px;
            }
          }
          &:nth-of-type(2){
            width:90%;
            font-size:22px;
          }
        }
      }
      dd{
        min-height:inherit;
        padding:20px 0;
        span{
          &:nth-of-type(1){
            img{
              max-width: 26px;
            }
          }
          &:nth-of-type(2){
            padding:0 3%;
            font-size:16px;
          }
        }
      }
    }
  }
  @media only screen and (max-width: 420px){
      &.toppage{
          padding:30px 0 40px;
      }
      dl{
          margin:0 auto 30px;
          dt{
              margin-bottom:10px;
              padding-bottom:5px;
              span{
                  display: block;
                  &:nth-of-type(1){
                      img{
                          max-width: 46px;
                      }
                  }
                  &:nth-of-type(2){
                      font-size:18px;
                  }
              }
          }
          dd{
              min-height:inherit;
              padding:20px 0;
              span{
                  &:nth-of-type(1){
                      img{
                          max-width: 20px;
                      }
                  }
                  &:nth-of-type(2){
                      font-size:13px;
                  }
              }
          }
      }
  }
}
#faq{
  .bg{
      padding:50px 0 0;
      h2{
          max-width: 555px;
          width:90%;
          margin:0 auto 40px;
      }
  }
}

/*********************
 フッター 
**********************/
#footer{
  margin-top:40px;
  padding-bottom:100px;
  background-color: #f3f3f3;
  .upper{
    max-width: 1100px;
    width: 96%;
    margin:auto;
    .common-wrapper{
      @include flex();
      @include justify-content();
      @include align-items();
    }
    .left{
      margin:0 2%;
      .logo-area{
        max-width: 300px;
        text-align: center;
      }
      .logo{
        max-width: 300px;
        margin-bottom:5px;
      }
    }
    .right{
      margin:0 2%;
      .sitemap{
        margin-bottom:20px;
        ul{
          @include flex();
          li{
            margin-right:8px;
            font-size:90%;
            &:before{
              content:'・';
              display: inline-block;
              margin-right:2px;
            }
          }
        }
      }
      .sns{
        display: none;
        ul{
          @include flex();
          li{
            width: 32%;
            max-width:30px;
            margin:0 0.5%;
            text-align: center;
            img{
              display: block;
              width:100%;
              margin:auto;
            }
            span{
              display: block;
              margin-top:2px;
              font-size:12px;
              line-height: 1;
            }
          }
        }
      }
    }
  }
  .lower{
    padding:0;
    .copyright {
      text-align: center;
      font-size: 14px;
    }
  }
  @media only screen and (max-width: 999px){
    .upper{
      .common-wrapper{
        display: block;
      }
      .left{
        width:100%;
        margin-bottom:20px;
        text-align: center;
        .logo-area{
          margin:auto;
        }
      }
      .right{
        width:100%;
        .sitemap{
          ul{
            @include justify-content();
            @include flex-wrap();
          }
        }
      }
      .lower{
        .copyright {
          text-align: center;
          font-size: 10px;
        }
      }
    }
  }
  @media only screen and (max-width: 768px){
    margin-top:0;
  }
  @media only screen and (max-width: 420px){
    .upper{
      .left{
        .logo{
          width:260px;
          margin:auto;
        }
      }
      .right{
        ul{
          li{
            font-size:14px;
          }
        }
      }
    }
  }
}
/* フッター追尾 */
#footer-btn {
  position:fixed;
  display: block;
  width: 100%;
  left: 0px;
  bottom: 0;
  z-index: 9;
  padding:8px 0 5px;
  border-top:5px solid $MAIN_COLOR;
  background-color:#fff;
  .container{
    position: relative;
  }
  .footer-btn-wrapper{
    position: relative;
    max-width: 990px;
    margin:auto;
    p{
      margin:0 1%;
    }
    .footer-contact-txt{
      max-width: 140px;
      text-align: center;
      font-weight:bold;
      line-height: 1.5;
    }
    .footer-tel {
      width:40%;
      @include flex();
      @include align-items();
      .icon{
        width:8%;
        margin-right:2%;
      }
      span{
        display: block;
        &.sp{
          display:none;
        }
        span{
          font-weight: bold;
        }
      }
      .tel{
        font-size: min(34px,6vw);
        font-weight: bold;
        line-height: 1;
        letter-spacing: 0.05em;
      }
      .open{
        margin-top:5px;
        font-size:min(14px,2vw);
        line-height:1.2;
      }    
    }
    .line{
      width: 50px;
      text-align: center;
    }
    .contact-btn{
      max-width:60px;
      width:20%;
      padding-top:1%;
      a{
        display: block;
      }
      .responsive-svg{
        width:100%;
      }
    }
  }
  .footer-btn-pc{
    max-width: 800px;
    margin:auto;
    @include flex();
    @include justify-content();
    @include align-items();
  }
  @media only screen and (max-width: 768px){
    .footer-btn-pc{
      @include justify-content();
    }
    .footer-btn-wrapper{
      p{
        margin:0 1%;
      }
      .footer-tel {
        width:50%;
        text-align: center;
        @include justify-content();
        span{
          &:pc{
            display:none;
          }
          &:sp{
            display:block !important;
          }
        }
      }
      .line{
        max-width: 50px;
        width: 15%;
      }
      .contact-btn{
        width: 12%;
      }
    }
  }
  @media only screen and (max-width: 420px){
    padding:0;
    .footer-btn-wrapper{
      padding:10px 0;
      .footer-tel {
        width:65%;
        .tel{
          font-size: 7vw;
        }
        .open{
          margin-top:3px;
          font-size:10px;
        }
      }
      .line{
        width: 10%;
      }
      .contact-btn{
        width: 11%;
      }
    }
  }
}
  
/* error */
.error {
  margin: 30px auto;
}
.error h2 {
  font-size: 18px;
  margin-bottom: 15px;
}
  
/* gotop */
#top {
  position: relative;
  overflow: hidden;
}
.gotop {
  position: fixed;
  right: 50px;
  bottom: 100px;
  width:51px;
  height:51px;
  cursor: pointer;
  z-index: 11;
  @media only screen and (max-width: 768px){
    right:3%;
    width:40px;
    height:40px;
  }
  @media only screen and (max-width: 420px){
    bottom:80px;
    width:30px;
    height:30px;
  }
}

.tayori-app .tf-p-button-with-square--right{
  bottom:20% !important;
}

/************************************************
      PC
************************************************ */
@media only screen and (min-width: 769px){
  .sp,.mini {
  	display: none;
  }
}
@media only screen and (max-width: 768px){
  .pc,.mini {
    display: none;
  }
  img{
    width:100%;
  }
}