/*
Theme Name: Mizuiro 03
Author: Your Name
Description: A custom theme created from 株式会社佳林 みずいろ薬局.html.
Version: 1.0
*/

/* CSS from karin-pharmacy.css can be added here or enqueued separately. */
/* Service page styles moved to assets/css/service.css (loaded conditionally) */
/* --- End of Service Page Styles --- */

/*--------------*/
/*共有*/
/*--------------*/
html {
  -webkit-text-size-adjust: none;
  word-break: break-all;
  overflow-x: hidden;
}

body {
  width: 100%;
  height: 100%;
  border: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0 0 0 0;
  text-align: left;
  font-size: 16px;
  font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-weight: bold;
  line-height: 1.8;
  width: 100%;
  color: #413b32;
  color: #333333;
  overflow-x: hidden;
}

.Mintyoufont {
  font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN",
    HGS明朝E, メイリオ, Meiryo, serif;
}

.Goshicfont {
  font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-weight: 500;
}

/**独自のフォント***/
@font-face {
  font-family: "myfont";
  /*src: url('https://cdn.leafscape.be/logotype/logotype_web.woff2')*/
  /*src: url('../fonts/geneilatemin_v2.ttc') format("truetype");*/
  src: url("../fonts/geneilatemin_v2_1.woff2") format("woff2");
}

/******/

pre {
  /* Mozilla */
  white-space: -moz-pre-wrap;

  /* Opera 4-6 */
  white-space: -pre-wrap;

  /* Opera 7 */
  white-space: -o-pre-wrap;

  /* CSS3 */
  white-space: pre-wrap;

  /* IE 5.5+ */
  word-wrap: break-word;
}

*html body {
  font-size: 90%;
  line-height: 1.5;
}

a:link {
  color: #000000;
}

a:visited {
  color: #000000;
}

a:hover {
  color: #000000;
}

.bold {
  font-weight: bold;
}

/*フォントサイズ対策とか*/
table,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

img,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form {
  border: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  vertical-align: bottom;
}

img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
  transition: 0.5s;
}

article,
aside,
canvas,
details,
figcaption,
figure,
header,
footer,
main,
menu,
nav,
section,
summary {
  display: block;
}

/*オーバーフロー対策*/
.clearfix {
  display: inline-block;
}

.clearfix:after {
  content: ".";
  max-width: none; /* デスクトップは親幅いっぱい */
  clear: both;
  height: 0;
  visibility: hidden;
  font-size: 0.1em;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/*オーバーフロー対策*/

/****画像ロールオーバ*****/
a:hover img.over {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha( opacity=50 )";
  transition: 0.5s;
}

/*************************/

/************スマホ用ボタン表示非表示*************/
header {
  visibility: hidden;
}

/*ついてくるボタン*/
#totop {
  display: block;
}

#FixBT {
  width: 50px;
  z-index: 1500;
  position: fixed;
  top: 180px;
  right: 0px;
  display: block;
  display: none;
}

#FixBTBox {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  float: left;
}

#FixBTSP {
  z-index: 1500;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  display: none;
  text-align: center;
  background-color: #64b9e9;
  background-color: #64b9e9;
  padding: 10px;
  box-sizing: border-box;
}

/****トリミング（外装）*****/
.cover {
  display: inline-block;
  background-color: #ccc;
  background-position: center center;
  background-repeat: no-repeat;
  width: 180px;
  height: 140px;
  background-size: cover;
  vertical-align: bottom;
}

.newscover {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 80%;
  background-color: #ffffff;
  background-size: cover;
  overflow: hidden;
  vertical-align: bottom;
}

.itemnewscover {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 120%;
  background-color: #ffffff;
  background-size: cover;
  overflow: hidden;
  vertical-align: bottom;
}

.newsworkcover {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 80%;
  background-size: cover;
  margin: 0 0 0 0;
  vertical-align: bottom;
}

.evecover {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 100%;
  background-color: #ffffff;
  background-size: cover;
  overflow: hidden;
  vertical-align: bottom;
}

.evcoverbig {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 70%;
  background-size: contain;
  overflow: hidden;
  background-color: #ffffff;
  vertical-align: bottom;
  box-sizing: border-box;
  border: 3px solid #f8f8f2;
  border: 3px solid #eee;
}

.voicecover {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 70%;
  background-color: #ffffff;
  background-size: cover;
  overflow: hidden;
  vertical-align: bottom;
}

.blogcover {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 70%;
  background-color: #ffffff;
  background-size: cover;
  overflow: hidden;
  vertical-align: bottom;
}

.workspagecover {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 70%;
  background-size: cover;
  overflow: hidden;
  vertical-align: bottom;
}

.workscoverbig {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 80%;
  background-size: contain;
  overflow: hidden;
  background-color: #f4f2e9;
  background-color: #f5f7fa;
  vertical-align: bottom;
}

.workscoversum {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 60%;
  background-size: contain;
  overflow: hidden;
  background-color: #f4f2e9;
  background-color: #f5f7fa;
  vertical-align: bottom;
}

.pagenextA {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 80%;
  background-size: cover;
  overflow: hidden;
  background-color: #f7f7f7;
}

.productscoverB {
  display: inline-block;
  background-color: #f6f6f6;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: contain;
}

/*--------------*/
/*画像の回り込み*/
/*--------------*/

.leftimg {
  float: left;
  margin-right: 5px;
}

.rightimg {
  float: right;
  margin-left: 5px;
}

/************************************
** video
************************************/
/*動画の最大幅を指定する*/
.video-container {
  max-width: 640px;
}

/*動画の大きさを調整*/
.video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

/*動画を囲んでいるdiv目一杯に広げる*/
.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/********/
/*ボタン拡大のエフェクト*/
/********/
.imgWrap {
  overflow: hidden;
  /*拡大時にはみ出た部分を隠す*/
}

.imgWrap img {
  display: block;
  transition-duration: 0.3s;
  /*変化に掛かる時間*/
}

.imgWrap img:hover {
  transform: scale(1.1);
  /*画像の拡大率*/
  transition-duration: 0.3s;
  /*変化に掛かる時間*/
}

/*中央ぞろえ*/
.centerbox {
  display: flex;
  /* 子要素をflexboxで揃える */
  flex-direction: column;
  /* 子要素をflexboxにより縦方向に揃える */
  justify-content: center;
  /* 子要素をflexboxにより中央に配置する */
  align-items: center;
  /* 子要素をflexboxにより中央に配置する */
}

/*************************/
/*************************/
/*--------------*/
/*ブロック構成*/
/*--------------*/
/********/
/*全体枠*/
/********/
#wrap {
  width: 100%;
  position: relative;
  height: auto !important;
  /*IE6対策*/
  height: 100%;
  /*IE6対策*/
  min-height: 100%;
}

.spshow {
  display: none;
}

/********/
/*ヘッダ*/
/********/
/***スライド文字****/

.SlideText {
  margin: 0 0 0 0;
  padding: 20px;
  position: absolute;
  bottom: 35%;
  left: 50%;
  transform: translateY(-35%) translateX(-50%);
  -webkit-transform: translateY(-35%) translateX(-50%);
  text-align: center;
  z-index: 900;
  box-sizing: border-box;
}

.ServiceTxt {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px;
  position: absolute;
  top: -160px;
  left: 0;
  box-sizing: border-box;
  color: #000000;
  font-size: 36px;
  text-align: center;
  text-shadow: #ffffff 1px 1px 10px, #ffffff -1px 1px 10px,
    #ffffff 1px -1px 10px, #ffffff -1px -1px 10px;
}

/*ヘッダ全体*/
#headerWrapper {
  width: 100%;
  height: 90px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  float: left;
  position: absolute;
  /*fixedを設定して固定*/
  top: 0px;
  left: 0px;
  z-index: 999;
  transition: 0.8s;
  background: #ffffff; /* 常に白背景でメニュー文字を視認可能に */
}

.headerBottom {
  width: 100%;
  height: 40px;
  margin: -20px 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  background: url(../img/pharmacy_line.png);
  float: left;
}

.headRogo {
  width: 100%;
  float: left;
  max-width: 350px;
  margin: 0 0 0 0;
  padding: 3px;
  box-sizing: border-box;
}

.headMenuA {
  width: 100%;
  max-width: 280px;
  margin: 0 0 0 10px;
  padding: 3px;
  box-sizing: border-box;
  float: left;
  border-right: 1px dotted #ffffff;
}

.headMenuB {
  width: 100%;
  max-width: 500px;
  margin: 0 0 0 10px;
  padding: 3px;
  box-sizing: border-box;
  float: left;
}

.headMenuC {
  width: 100%;
  max-width: 100px;
  margin: 10px 0 0 0;
  padding: 3px;
  box-sizing: border-box;
  float: right;
}

#headerBox {
  width: 100%;
  margin: 0px 0 0px 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
  position: relative;
}

.headerBoxBG {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

#headerBox img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

/* ヘッダーの高さを少しコンパクトに（ロゴとh1余白を調整） */
#headerBoxL h1 {
  margin: 0;
}
#headerBoxL {
  padding: 4px 10px;
}
/* ロゴ画像の最大高さを制限して帯を低くする */
#headerBoxL img {
  max-height: 60px;
  height: auto;
  width: auto;
}

/* ヘッダー内ナビの上下パディングを少しだけ減らす（整列は変更しない） */
#headerWrapper .GlobalNavi li a {
  padding: 8px 10px;
}

#headerBoxL {
  width: 30%;
  margin: 0px 0 0 0;
  max-width: 300px;
  padding: 10px;
  text-align: left;
  float: left;
  box-sizing: border-box;
  background-color: transparent; /* 白い帯の原因を除去 */
}

#headerBoxR {
  width: 70%;
  margin: 0px 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  text-align: left;
  float: right;
}

/* スマホのヘッダー（上部ロゴ）の高さを抑制 */
@media (max-width: 768px) {
  .AnimeSP img {
    margin: 16px 0 0 0 !important;
    max-width: 180px !important;
  }
}

#headerBoxRR {
  width: 15%;
  max-width: 180px;
  margin: 0px 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  text-align: left;
  float: right;
}

.headerBoxSub {
  width: 100%;
  margin: 0px 0 10px 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  text-align: right;
  float: right;
}

.headerBoxSubB {
  display: none;
  width: 100%;
  margin: 20px 0 0px 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  text-align: center;
  float: left;
}

/****/
/********/

/********/
/*下から現れるお問合せ*/
/********/

.fix-footer {
  bottom: -200px;
  /* 下にに隠す高さ */
  left: 0;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
  position: fixed;
  opacity: 0;
  /* 	最初読み込んだときは透過 */
  z-index: 1900;
  /*　他のアイテムに対して最上位のレイヤーになるように */
  /*opacity: 0; */
  box-sizing: border-box;
}

/********/
/*入れ替え用ヘッダ*/
/********/
.fix-header {
  line-height: 20px;
  top: -200px;
  /* 上に隠す鷹さ */
  left: 0;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  color: #ffffff;
  padding: 10px 0;
  box-sizing: border-box;
  position: fixed;
  opacity: 0;
  /* 	最初読み込んだときは透過 */
  z-index: 2000;
  /*　他のアイテムに対して最上位のレイヤーになるように */
  /*opacity: 0; */
  background-color: #ffffff;
  box-shadow: 0px 7px 7px -5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.fix-header-contents {
  width: 100%;
  margin: 0 0 0px 0;
  padding: 0 0 0 0;
  float: left;
}

.fix-header ul {
  list-style-type: none;
}

.fix-header li {
  display: block;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
  font-weight: 600;
}

.fix-header li a,
.fix-header li a:visited {
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  text-decoration: none;
  color: #ffffff;
  transition: 0.5s;
}

.fix-header li a:hover {
  color: #ffdada;
}

.fix-header li:last-child {
  margin-right: 0;
}

#fix-header-logo {
  float: left;
  padding: 3px;
  box-sizing: border-box;
  width: 25%;
  max-width: 200px;
  padding: 0px;
  text-align: center;
}

#fix-header-logo img {
  max-width: 200px;
}

#fix-header-menus {
  width: 75%;
  margin: 10px 10px 0 0;
  float: right;
  text-align: right;
}

#scroll-fix-menu {
  margin: 0px 15px 0 0;
  text-align: left;
  float: right;
}

#scroll-fix-menu li {
  position: relative;
}

/* =============================
   PCヘッダー: お問い合わせだけCTA化
   ============================= */
@media (min-width: 769px) {
  /* 通常ヘッダー */
  #headerWrapper .GlobalNavi li:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    margin-left: 8px;
    margin-right: 12px; /* 右端にゆとり */
    color: #fff !important;
    background: linear-gradient(135deg, #0070be 0%, #00a0d2 100%);
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(0, 112, 190, 0.28);
    text-decoration: none;
    transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
  }
  /* 内包要素（fontタグ等）の色も継承させる */
  #headerWrapper .GlobalNavi li:last-child a * { color: inherit !important; }
  #headerWrapper .GlobalNavi li:last-child a:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 112, 190, 0.32);
  }
  #headerWrapper .GlobalNavi li:last-child a:active {
    transform: translateY(0);
    filter: brightness(0.98);
  }

  /* スクロール固定ヘッダー */
  .fix-header #scroll-fix-menu li:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    margin-left: 8px;
    margin-right: 12px; /* 右端にゆとり */
    color: #fff !important;
    background: linear-gradient(135deg, #0070be 0%, #00a0d2 100%);
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(0, 112, 190, 0.28);
    text-decoration: none;
    transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
  }
  .fix-header #scroll-fix-menu li:last-child a * { color: inherit !important; }
  .fix-header #scroll-fix-menu li:last-child a:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 112, 190, 0.32);
  }
}

#scroll-fix-menu img {
  padding-bottom: 5px;
}

#scroll-fix-menu .current-menu-item img {
}

#scroll-fix-menu a img:hover {
}

/***アニメ***/
.iosSlider {
  display: block;
}

.iosSliderSP {
  width: 100%;
  float: left;
  display: none;
}

.iosSliderSP img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

.AnimeSP {
  display: none;
  width: 100%;
  padding: 0 0 0 0;
  text-align: center;
  box-sizing: border-box;
  float: left;
  background-color: #ffffff;
  background: url(../img/head_line.png);
  background-position: top left;
  background-repeat: repeat-x;
}

/* ==========================
   スマホヘッダー最適化
   768px以下でロゴ配置・余白を調整し、
   PC用の固定ヘッダーは非表示にする
   ========================== */
@media screen and (max-width: 768px) {
  /* PC用の固定ヘッダーは非表示 */
  .fix-header {
    display: none !important;
  }
  #fix-header-logo,
  #fix-header-menus,
  .fix-header-contents {
    display: none !important;
  }

  /* ロゴのサイズと位置を適正化（インラインstyleを上書き） */
  .AnimeSP {
    padding-top: 8px;
  }
  .AnimeSP a img {
    max-width: 200px !important; /* 目視でバランスの良いサイズ */
    width: 100% !important;
    height: auto !important;
    margin: 4px auto 12px !important; /* 上の余白を縮小し中央寄せ */
    display: block;
  }
}

/********/
/***ボタン***/
.LinkBT {
  font-size: 14px;
  width: 100%;
  text-align: center;
  margin: 0px 0 0 0;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  background-color: #fdb300;
  background-color: #0070be;
  transition: 0.5s;
  border-radius: 30px;
}

.LinkBT a {
  display: block;
  width: 100%;
  /* 横幅 */
  padding: 10px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
  position: relative;
}

.LinkBT:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

.LinkBTREC {
  font-size: 16px;
  width: 100%;
  text-align: center;
  margin: 0px 0 0 0;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  transition: 0.5s;
  border: 2px solid #ffffff;
  border: 2px solid #64b9e9;
  border-radius: 30px;
}

.LinkBTREC a {
  display: block;
  width: 100%;
  /* 横幅 */
  padding: 5px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
  position: relative;
}

.LinkBTREC:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

.LinkBTMore {
  display: inline-block;
  float: right;
}

.LinkBTMore a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 10px 25px 10px 30px;
  border: 1px solid #0070be;
  background-color: #0070be;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

.LinkBTMore a::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin-left: 12px;
  transition: all 0.3s ease;
}

.LinkBTMore:hover a {
  background-color: #fff;
  color: #0070be;
}

.LinkBTMore:hover a::after {
  border-color: #0070be;
  transform: rotate(45deg) translateX(2px);
}

.LinkBTMore--white a {
  background-color: #fff;
  color: #0070be;
  border-color: #0070be;
}
.LinkBTMore--white a::after {
  border-color: #0070be;
}
.LinkBTMore--white:hover a {
  background-color: #0070be;
  color: #fff;
}
.LinkBTMore--white:hover a::after {
  border-color: #fff;
}

.arrow_r::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
  transform: rotate(45deg);
}

.arrow_rg::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #64b9e9;
  border-right: solid 2px #64b9e9;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
  transform: rotate(45deg);
}

.arrow_rgr::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #e56811;
  border-right: solid 2px #e56811;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -4px;
  transform: rotate(45deg);
}

.LinkBTA {
  font-size: 14px;
  width: 100%;
  text-align: center;
  margin: 0px 0 0 0;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  background-color: #ffffff;
  transition: 0.5s;
  border-radius: 30px;
  border: 2px solid #e56811;
}

.LinkBTA a {
  display: block;
  width: 100%;
  /* 横幅 */
  padding: 10px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #e56811;
  text-decoration: none;
  transition: 0.5s;
  position: relative;
}

.LinkBTA:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

.LinkBTB {
  font-size: 16px;
  width: 100%;
  text-align: center;
  margin: 0px 0 0 0;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  background-color: #78470e;
  font-weight: bold;
  color: #ffffff;
  transition: 0.5s;
}

.LinkBTB a {
  display: block;
  width: 100%;
  /* 横幅 */
  padding: 10px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
}

.LinkBTB:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

.LinkBTC {
  font-size: 16px;
  width: 100%;
  text-align: center;
  margin: 5px 0 0 0;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  background-color: #ffffff;
  font-weight: bold;
  color: #000000;
  transition: 0.5s;
}

.LinkBTC a {
  display: block;
  width: 100%;
  /* 横幅 */
  padding: 10px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #000000;
  text-decoration: none;
  transition: 0.5s;
}

.LinkBTC:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

.LinkBTFooter {
  font-size: 14px;
  width: 100%;
  text-align: left;
  margin: 0px 0 0 0;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  transition: 0.5s;
  border-bottom: 1px dotted #404040;
}

.LinkBTFooter a {
  display: block;
  width: 100%;
  /* 横幅 */
  padding: 5px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #404040;
  text-decoration: none;
  transition: 0.5s;
  position: relative;
}

.LinkBTFooter:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

.LinkBTNEWC {
  font-size: 14px;
  width: 100%;
  text-align: center;
  margin: 0px 0 0 0;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  background-color: #ffb415;
  transition: 0.5s;
  border-radius: 30px;
}

.LinkBTNEWC a {
  display: block;
  width: 100%;
  /* 横幅 */
  padding: 5px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
  position: relative;
}

.LinkBTNEWC:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

.LinkBTARROW {
  display: block;
  color: #000000;
  font-size: 18px;
  width: 100%;
  /* 横幅 */
  padding: 5px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.LinkBTARROW:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

.LinkBTARROWCE {
  display: block;
  color: #000000;
  font-size: 18px;
  width: 100%;
  /* 横幅 */
  padding: 5px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.LinkBTARROWCE:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

/*区切り線*/
.KusuriLine {
  width: 100%;
  height: 22px;
  margin: 50px 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  background: url(../img/kusuri_line.png);
  background-position: top left;
  background-repeat: repeat-x;
  float: left;
}

/********/
/*見出し横線*/
/********/
.head-border-right {
  display: flex;
  align-items: center;
}

.head-border-right:after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #ffffff;
}

.head-border-right:before {
  margin-right: 1rem;
}

.head-border-right:after {
  margin-left: 1rem;
}

/********/
/*見出し横線2*/
/********/
.head-border-right-se {
  display: flex;
  align-items: center;
}

.head-border-right-se:after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #e26810;
}

.head-border-right-se:before {
  margin-right: 1rem;
}

.head-border-right-se:after {
  margin-left: 1rem;
}

/********/
/*TOP*/
/********/
#ALLBGWrapper {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

#ALLBGWrapper img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

.TopSlide {
  width: 100%;
  text-align: left;
  margin: -50px 0 0 0;
  padding: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.TOPCABOXL {
  width: 50%;
  text-align: left;
  margin: 0 0 0 0;
  float: left;
}

.TOPCABOXR {
  width: 50%;
  text-align: left;
  padding: 25px;
  margin: 100px 0 0 -40px;
  float: left;
  background-color: #ffffff;
  box-sizing: border-box;
}

.TOPbCABOXL {
  width: 50%;
  text-align: left;
  margin: 0 0 0 0;
  float: left;
}

.TOPbCABOXR {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  font-size: 22px;
  color: #595757;
  text-align: left;
  margin: 0px 0 0px 0;
  float: left;
}

.TopPhaBG {
  /* background: url(../img/take_bg_1.webp); */
  background-position: top right;
  background-repeat: no-repeat;
}

.NewsBG {
  /* background: url(../img/take_bg_2.webp); */
  background-position: top right;
  background-repeat: no-repeat;
}

.TopSerBG {
  background: url(../img/take_bg_3.webp);
  background-position: top right;
  background-repeat: no-repeat;
}

.RecruiteBG {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  text-align: center;
  background: url(../img/rec_bg.jpg);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  float: left;
}

.MaruceBG {
  width: 100%;
  min-height: 550px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  text-align: center;
  background: url(../img/ca_img_1.png);
  background-position: top right;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
}

/***TOP店舗情報*****/

.TopPhaBoxALL {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

.TopPhaBoxL {
  width: 33.3%;
  padding: 35px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

.TopPhaBoxR {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

.TopPhaBox {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

.TopPhaBoxA {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

.TopPhaBoxB {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 0 0 0;
  text-align: center;
  float: left;
}

.TopPhaBoxC {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  margin: -15px 0 0 0;
  text-align: center;
  float: left;
}

.TopPhaBoxMidashi {
  width: 100%;
  font-size: 40px;
  line-height: 1;
  padding: 10px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: left;
  float: left;
}

.TopPhaBoxMidashiA {
  width: 100%;
  font-size: 16px;
  font-weight: normal;
  padding: 0px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: left;
  float: left;
}

.TopPhaBoxMidashiB {
  width: 100%;
  padding: 0px;
  font-size: 24px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: left;
  float: left;
}

.TopPhaBoxMidashiC {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

/***店舗情報*****/

.TenpoALLBox {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  margin: 40px 0 0 0;
  text-align: center;
  float: left;
}

.TenpoMainPhoto {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

.TenpoSumPhotoBox {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  margin: 10px 0 0 0;
  text-align: center;
  float: left;
}

.TenpoSumPhotoBox div {
  width: 33.3%;
  padding: 5px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

.TenpoInfoBox {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  margin: 10px 0 0 0;
  text-align: center;
  float: left;
}

.TenpoInfoBoxL {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

.tenpo-css {
  margin: 0px 0 0px 0;
  position: relative;
  width: 100%;
  padding-top: 60%;
  float: left;
}

.tenpo-css iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.TenpoInfoBoxR {
  width: 50%;
  line-height: 1.3;
  padding: 20px;
  box-sizing: border-box;
  margin: 0px 0 0 0;
  text-align: center;
  float: left;
}

/***会社概要*****/

.CompanyList {
  width: 100%;
  padding: 10px;
  border-bottom: 1px dotted #000000;
  box-sizing: border-box;
  margin: 10px 0 0 0;
  text-align: center;
  float: left;
}

.CompanyListL {
  width: 25%;
  font-weight: bold;
  font-size: 16px;
  padding: 5px 10px 5px 10px;
  box-sizing: border-box;
  margin: 0 0 0 0;
  text-align: left;
  float: left;
}

.CompanyListR {
  width: 75%;
  font-size: 16px;
  padding: 5px 10px 5px 10px;
  box-sizing: border-box;
  margin: 0 0 0 0;
  text-align: left;
  float: left;
}

/**共通のブルーボックス***/

.BlueAllBox {
  width: 100%;
  float: left;
  padding: 0px;
  margin: 0 0 0 0;
  text-align: left;
  box-sizing: border-box;
  border: 3px solid #3e8e5d;
  background-color: #ffffff;
}

.BlueMidashiBox {
  width: 100%;
  font-size: 28px;
  color: #ffffff;
  background-color: #3e8e5d;
  float: left;
  padding: 15px;
  margin: 0 0 0 0;
  text-align: left;
  box-sizing: border-box;
}

.BlueMidashiBoxL {
  width: 50%;
  font-size: 28px;
  float: left;
  padding: 0;
  margin: 0 0 0 0;
  text-align: left;
  box-sizing: border-box;
}

.BlueMidashiBoxR {
  width: 49%;
  font-size: 18px;
  float: right;
  padding: 5px;
  margin: 0 0 0 0;
  text-align: right;
  box-sizing: border-box;
}

.BlueMainBox {
  width: 100%;
  float: left;
  padding: 40px;
  margin: 0 0 0 0;
  text-align: left;
  box-sizing: border-box;
}

/********/
/***Q&A**/
/********/
.QAmidashiBox {
  width: 100%;
  line-height: 1;
  float: left;
  color: #ffffff;
  padding: 80px 10px 80px 10px;
  margin: 0 0 0 0;
  text-align: center;
  background-position: top center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  background-size: cover;
}

.QAListBox {
  width: 100%;
  float: left;
  padding: 0;
  margin: 40px 0 0 0;
  text-align: left;
  box-sizing: border-box;
}

.QAListBox:first-child {
  margin: 0px 0 0 0;
}

.QAListBoxA {
  width: 100%;
  color: #3e8e5d;
  font-size: 20px;
  float: left;
  padding: 10px;
  margin: 0 0 0 0;
  text-align: left;
  box-sizing: border-box;
  border-bottom: 1px dotted #3e8e5d;
}

.QAListBoxB {
  width: 100%;
  color: #000000;
  float: left;
  font-size: 16px;
  padding: 10px;
  margin: 0 0 0 0;
  text-align: left;
  box-sizing: border-box;
}

/********/

.FlowerBoxALL {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
  background-color: #efefef;
}

.FlowerBoxA {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.FlowerBoxAL {
  width: 50%;
  margin: 0 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.FlowerBoxAR {
  width: 50%;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 50px;
  box-sizing: border-box;
  float: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.FlowerBoxB {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.FlowerBoxBL {
  width: 50%;
  margin: 0 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: right;
}

.FlowerBoxBR {
  width: 50%;
  margin: 0 0 0 0;
  padding: 10px 50px 10px 100px;
  box-sizing: border-box;
  float: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.FlowerText {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  float: left;
}

.FlowerTextA {
  width: 100%;
  font-size: 18px;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  float: left;
}

.FlowerTextB {
  width: 100%;
  font-size: 30px;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  float: left;
}

.FlowerTextC {
  width: 100%;
  color: #c0a275;
  font-size: 18px;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  float: left;
}

.FlowerTextD {
  width: 100%;
  margin: 20px 0 0 0;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  float: left;
}

.FlowerBGA {
  width: 100%;
  height: 100%;
  float: left;
  background: url(../img/1f_bg.jpg);
  background-position: top center;
  background-repeat: no-repeat;

  border-radius: 20px 0 0 20px;
}

.FlowerBGB {
  width: 100%;
  height: 100%;
  float: left;
  background: url(../img/2f_bg.jpg);
  background-position: top center;
  background-repeat: no-repeat;

  border-radius: 0 20px 20px 0;
}

/***********/
/***********/

/*****店舗リストボタン******/
/***********/

.TenpoListBT {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.TenpoListBT li {
  list-style: none;
  float: left;
  width: 25%;
  margin: 10px 0 0 0;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  position: relative;
  box-sizing: border-box;
}

/***********/
/***********/

.AboutBG {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  background: url(../img/bio_bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  float: left;
}

.AboutBOX {
  width: 100%;
  margin: 0 0 0 0;
  text-align: center;
  float: left;
}

.AboutBOX li {
  display: inline-block;
  float: left;
  width: 33.3%;
  margin: 20px 0 0 0;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  position: relative;
  box-sizing: border-box;
  color: #ffffff;
}

.AboutIMG {
  width: 100%;
  margin: 0 0 0 0;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.AboutText {
  width: 80%;
  margin: -15px 0 0 -15px;
  padding: 0px;
  text-align: left;
  float: left;
  color: #000000;
  box-sizing: border-box;
  background-color: #ffffff;
}

.AboutTextA {
  width: 20%;
  font-size: 30px;
  border-bottom: 3px solid #000000;
  margin: 0 0 0 0;
  padding: 3px;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.AboutTextB {
  width: 80%;
  font-size: 17px;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.ServiceBG {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  background: url(../img/se_bg.webp);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  float: left;
}

.WEcanBG {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  background: url(../img/wecan_bg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  float: left;
  border-radius: 20px 20px 0 0;
  box-sizing: border-box;
}

.WEcanMARUBG {
  width: 100%;
  margin: 0 0 0 0;
  padding: 100px 0 0 0;
  text-align: center;
  background: url(../img/maru_bg.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  float: left;
  box-sizing: border-box;
}

.WEcanALLBOX {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px;
  float: left;
  box-sizing: border-box;
}

.WEcanALLBOX span {
  font-family: "Cardo", serif;
  font-size: 1.5rem;
}

.ServiceTxtBG {
  border-radius: 10px;
}

/******角丸*****/
.Kadomaru {
  border-radius: 20px;
  padding: 10px;
  background-color: #ffffff;
  box-sizing: border-box;
  font-weight: bold;
  display: inline-block;
}

.CaImgBG {
  position: absolute;
  text-align: right;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 800px;
  background-size: cover;
}

/******角丸*****/

#TOPWrapper {
  width: 100%;
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 0 0 0;
  text-align: center;
}

#TOPIMG {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

#TOPIMG img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

#ALLTOPBTBOX {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.ContentsBTLine {
  margin-top: 6% !important;
  background-size: auto auto;
  background-color: rgba(250, 247, 241, 1);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(237, 240, 227, 1) 10px,
    rgba(237, 240, 227, 1) 15px
  );
}

.TOPBTBOX {
  width: 100%;
  margin: 0 0 0 0;
  text-align: center;
  float: left;
}

.TOPBTBOX li {
  display: inline-block;
  float: left;
  width: 33.3%;
  margin: 0px 0 0 0;
  padding: 0px;
  text-align: center;
  text-decoration: none;
  position: relative;
  box-sizing: border-box;
  color: #ffffff;
}

.TOPBTBOX li:nth-child(1) {
  width: 50%;
}

.TOPBTBOX li:nth-child(2) {
  width: 50%;
}

.TOPBTBOX li a {
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
}

.TOPBTBOX li a:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  transition: 0.5s;
}

/* --- 3項目版 TOP ボタン用（会社概要・薬局を除外した時） --- */
.TOPBTBOX--three li {
  width: 33.333%;
}
.TOPBTBOX--three li:nth-child(1),
.TOPBTBOX--three li:nth-child(2) {
  width: 33.333%;
}

@media screen and (max-width: 600px) {
  .TOPBTBOX--three li,
  .TOPBTBOX--three li:nth-child(1),
  .TOPBTBOX--three li:nth-child(2) {
    width: 100%;
  }
}

/* TOPBTBOXを横幅いっぱいに */
.topbtbox-fullwidth {
  max-width: none !important;
}
.topbtbox-fullwidth .TOPBTBOX {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  column-gap: 0 !important;
  overflow: hidden; /* サブピクセルのズレ対策 */
}
.topbtbox-fullwidth .TOPBTBOX li {
  float: none;
  display: block;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
}
.topbtbox-fullwidth .TOPBTBOX li,
.topbtbox-fullwidth .TOPBTBOX li a,
.topbtbox-fullwidth .TOPBTBOX li .w-100 {
  display: block;
  width: 100%;
  text-align: left;
  float: none;
}
.topbtbox-fullwidth .TOPBTBOX li img {
  display: block;
  width: 100% !important;
  height: auto;
}

/* macOS/Retinaでのサブピクセル隙間対策としてPC画像をわずかにオーバーラップ */
.topbtbox-fullwidth .TOPBTBOX li .pcshow img {
  width: calc(100% + 2px) !important;
  margin-left: -1px;
}
.topbtbox-fullwidth .TOPBTBOX li:first-child .pcshow img {
  margin-left: 0;
}

.topbtbox-fullwidth .TOPBTBOX li > a {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (max-width: 600px) {
  .topbtbox-fullwidth .TOPBTBOX {
    grid-template-columns: 1fr;
  }
  .topbtbox-fullwidth .TOPBTBOX li {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .topbtbox-fullwidth .TOPBTBOX li .pcshow img {
    width: 100% !important;
    margin-left: 0;
  }
}

/* Modern Footer Styles */
.site-footer, #footer.site-footer {
  background-color: #f7fbff;
  color: #333;
  padding: 60px 20px 20px;
  font-size: 14px;
  float: none; /* floatを解除 */
  clear: both; /* 直前のfloat要素の影響を受けないように */
  display: block; /* 念のためブロック化 */
}
.FooterImgA {
  width: 30%;
  max-width: 396px;
}

.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.site-footer__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 40px;
  margin-bottom: 30px;
  gap: 40px;
  border-bottom: 1px solid #e0e0e0;
}

.site-footer__info {
  flex: 0 0 280px;
}

.site-footer__logo {
  display: block;
  margin-bottom: 20px;
}

.site-footer__logo img {
  max-width: 200px;
  height: auto;
}

.site-footer__address {
  font-style: normal;
  line-height: 1.7;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 30px;
}

.site-footer__nav a {
  color: #333;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
}

.site-footer__nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #0070be;
  transition: width 0.3s ease;
}

.site-footer__nav a:hover::after {
  width: 100%;
}

.site-footer__copyright {
  text-align: center;
  font-size: 12px;
  color: #888;
}

/* Footer CTA */
.footer-cta {
  padding: 80px 20px;
}
.footer-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.footer-cta__heading {
  flex: 0 0 40%;
}
.footer-cta__body {
  flex: 1;
  color: #fff;
}
.footer-cta__lead {
  font-size: 16px;
  margin-bottom: 30px;
}
.footer-cta__buttons {
  display: flex;
  gap: 20px;
}

/* Contact CTA: 背景と被らないようにボタン群の下に半透明のベースを敷く */
.ContactBG .footer-cta__buttons {
  display: inline-flex;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  .site-footer, #footer.site-footer {
    padding: 40px 15px 15px;
  }
  .site-footer__main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
    padding-bottom: 30px;
    margin-bottom: 20px;
  }
  .site-footer__info {
    margin-bottom: 0;
  }
  .site-footer__nav {
    justify-content: center;
    gap: 12px 20px;
  }
  .footer-cta__inner { flex-direction: column; text-align: center; }
  .footer-cta__buttons { flex-direction: column; align-items: center; }
}

/* Modern Fixed Footer for SP */
.fixed-footer-nav {
  background-color: #0070be; /* ブランドカラー */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  padding: 0;
  border-top: none;
}
.fixed-footer-nav__inner {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: 60px;
}
.fixed-footer-nav__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-decoration: none;
  color: #fff; /* 文字色を白に */
  font-size: 10px;
  font-weight: bold;
  gap: 2px;
  transition: background-color 0.2s;
}
.fixed-footer-nav__button:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.15);
}
.fixed-footer-nav__button:hover {
  background-color: rgba(255,255,255,0.08);
}
.fixed-footer-nav__icon {
  width: 24px;
  height: 24px;
  background-color: #ffffff; /* アイコン色を白に */
}

/* 強制的に白文字（他スタイル上書き対策） */
.fixed-footer-nav .fixed-footer-nav__button,
.fixed-footer-nav .fixed-footer-nav__button:link,
.fixed-footer-nav .fixed-footer-nav__button:visited,
.fixed-footer-nav .fixed-footer-nav__text {
  color: #ffffff !important;
}
.fixed-footer-nav__icon--shop { -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L3 9v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9L12 2zm0 2.24L17.76 9H6.24L12 4.24zM19 20H5v-9h14v9z"/><path d="M12 12a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L3 9v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9L12 2zm0 2.24L17.76 9H6.24L12 4.24zM19 20H5v-9h14v9z"/><path d="M12 12a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>') center/contain no-repeat; }
.fixed-footer-nav__icon--recruit { -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0-8a3 3 0 1 1-3 3 3 3 0 0 1 3-3z"/><path d="M12 14c-3.31 0-10 1.68-10 5v3h20v-3c0-3.32-6.69-5-10-5zm-8 6v-1.07c.83-1.29 4.2-2.93 8-2.93s7.17 1.64 8 2.93V20H4z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0-8a3 3 0 1 1-3 3 3 3 0 0 1 3-3z"/><path d="M12 14c-3.31 0-10 1.68-10 5v3h20v-3c0-3.32-6.69-5-10-5zm-8 6v-1.07c.83-1.29 4.2-2.93 8-2.93s7.17 1.64 8 2.93V20H4z"/></svg>') center/contain no-repeat; }

/* タブレット以下では必ずPC画像を非表示、SP画像を表示 */
@media screen and (max-width: 1024px) {
  .topbtbox-fullwidth .TOPBTBOX li .pcshow {
    display: none !important;
  }
  .topbtbox-fullwidth .TOPBTBOX li .spshow {
    display: block !important;
  }
}

.TOPLINK {
  width: 100%;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  box-sizing: border-box;
  z-index: 999;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

/* =============================
   Fix: 微小な隙間(1px程度)の解消
   対象: トップの ALLBGWrapper（.ContentsBTLine）直後に
        .clearfix を挟んで .ContactBG が来るケース
   目的: サブピクセル描画により生じる線状の隙間を解消
   影響範囲を最小化するため隣接セレクタで限定
   ============================= */
.ContentsBTLine + .clearfix + .ContactBG {
  margin-top: -1px !important;
}

.TOPBTimg {
  width: 100%;
  text-align: center;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.TOPBTtext {
  width: 100%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  color: #000000;
  float: left;
}

.TOPBTtextALL {
  width: 100%;
  text-align: left;
  float: left;
  padding: 0px;
  box-sizing: border-box;
}

.TOPBTtextA {
  font-size: 30px;
  width: 100%;
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
  border-bottom: 4px solid #000000;
  font-style: oblique;
}

.TOPBTtextB {
  font-size: 16px;
  width: 100%;
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
}

.TOPBTBOX li img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

.TOPBTA {
  background: url(../img/top_bt_bg_1.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 350px;
}

.TOPBTB {
  background: url(../img/top_bt_bg_2.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}

.TOPBTC {
  background: url(../img/top_bt_bg_3.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}

.TOPBTD {
  background: url(../img/top_bt_bg_4.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}

.TOPBTE {
  background: url(../img/top_bt_bg_5.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}

.TOPBTF {
  background: url(../img/contact_bg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ContactBG {
  width: 100%;
  float: left;
  margin: 0px 0 0 0;
  padding: 20px 0 60px; /* 下側に余白を付けて背景イラストとボタンの干渉を回避 */
  box-sizing: border-box;
  background: url(../img/footer_mati.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-color: #64b9e9;
  clear: both; /* セクション直前のfloatをクリア */
}

.TOPSERVICEBG {
  width: 100%;
  float: left;
  margin: 0px 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  background: url(../img/servicebg.webp);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

/********/
/*TOPリニューアルコンセプト*/
/********/
.TOPCA {
  width: 100%;
  min-height: 500px;
  float: left;
  margin: 10px 0 0 0;
  padding: 50px;
  box-sizing: border-box;
  background: url(../img/topconcet_a.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.TOPCB {
  width: 100%;
  min-height: 500px;
  float: left;
  margin: 10px 0 0 0;
  padding: 50px;
  box-sizing: border-box;
  background: url(../img/topconcet_b.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.TOPCC {
  width: 100%;
  min-height: 500px;
  float: left;
  margin: 10px 0 0 0;
  padding: 50px;
  box-sizing: border-box;
  background: url(../img/topconcet_c.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.TOPCD {
  width: 100%;
  min-height: 500px;
  float: left;
  margin: 10px 0 0 0;
  padding: 50px;
  box-sizing: border-box;
  background: url(../img/topconcet_d.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.TOPCASP {
  width: 100%;
  float: left;
  margin: 10px 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  display: none;
}

.TOPCAtextA {
  width: 100%;
  max-width: 420px;
  margin: 0 0 0 0;
  padding: 40px;
  text-align: center;
  float: left;
  background-color: #ffffff;
  box-sizing: border-box;
}

.TOPCAtextAA {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: left;
  float: left;
  box-sizing: border-box;
  color: #820000;
  font-size: 24px;
}

.catch {
  display: flex;
  align-items: center;
  /* 垂直中心 */
  justify-content: left;
  /* 水平中心 */
}

.catch:after {
  border-top: 3px solid;
  content: "";
  width: 5em;
  /* 線の長さ */
}

.catch:after {
  margin-left: 1em;
  /* 文字の左隣 */
}

.catchB {
  display: flex;
  align-items: center;
  /* 垂直中心 */
  justify-content: left;
  /* 水平中心 */
}

.catchB:after {
  border-top: 3px solid;
  content: "";
  width: 3em;
  /* 線の長さ */
}

.catchB:after {
  margin-left: 1em;
  /* 文字の左隣 */
}

.TOPCAtextAB {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: left;
  float: left;
  box-sizing: border-box;
  color: #000000;
  font-size: 30px;
}

.TOPCAtextAC {
  width: 100%;
  margin: 10px 0 0 0;
  padding: 0px;
  text-align: left;
  float: left;
  box-sizing: border-box;
  color: #000000;
  font-size: 16px;
  font-weight: normal;
}

.TOPCAtextAD {
  width: 100%;
  margin: 15px 0 0 0;
  padding: 0px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

/********/

.ServiceMidashi {
  background-size: auto auto;
  background-color: rgba(246, 244, 239, 1);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(242, 238, 231, 1) 10px,
    rgba(242, 238, 231, 1) 20px
  );
}

/********/
/*リニューアル用*/
/********/
.TOPPUA {
  width: 100%;
  min-height: 80px;
  float: left;
  margin: 0px 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  background: url(../img/toppu_a.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.TOPPUB {
  width: 100%;
  float: left;
  margin: 0px 0 0 0;
  padding: 0px 0 100px 0;
  box-sizing: border-box;
  background: url(../img/toppu_b.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.PUBBOX {
  width: 100%;
  float: left;
  margin: 0 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  background-size: auto auto;
  background-color: rgba(130, 0, 0, 1);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(154, 48, 48, 1) 10px,
    rgba(154, 48, 48, 1) 11px
  );
}

.PUBBOXA {
  width: 100%;
  float: left;
  margin: 5px 0 0 0;
  padding: 5px;
  box-sizing: border-box;
  font-size: 16px;
  color: #ffffff;
}

.PUBBOXB {
  width: 100%;
  float: left;
  margin: 5px 0 40px 0;
  padding: 5px;
  box-sizing: border-box;
  font-size: 24px;
  color: #ffffff;
}

.Carib {
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  letter-spacing: 0.08em;
}

.TopTenpoImgA {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  text-align: center;
}

.TopTenpoImgB {
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
}

.TopTenpoImgC {
  width: 10%;
  max-width: 167px;
  position: absolute;
  left: 2%;
  bottom: -4%;
  text-align: left;
}

.TopTenpoImgD {
  width: 10%;
  max-width: 130px;
  position: absolute;
  right: 2%;
  bottom: -4%;
  text-align: right;
}

.TopTenpoImgE {
  width: 30%;
  max-width: 284px;
  position: absolute;
  left: 0;
  top: -60px;
  text-align: left;
}

.TopTenpoImgF {
  width: 30%;
  max-width: 284px;
  position: absolute;
  right: 2%;
  top: -60px;
  text-align: left;
}

.TopTenpoImgG {
  width: 20%;
  max-width: 271px;
  position: absolute;
  left: 0%;
  bottom: -10%;
  text-align: left;
}

.TopTenpoImgH {
  width: 20%;
  max-width: 254px;
  position: absolute;
  right: 0;
  bottom: -10%;
  text-align: right;
}

.TopTenpoImgI {
  width: 20%;
  max-width: 447px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  text-align: center;
}

.TopTenpoImgJ {
  width: 20%;
  max-width: 409px;
  position: absolute;
  right: 0;
  top: 0;
  text-align: right;
}

.TopTenpoImgK {
  width: 80%;
  max-width: 278px;
  position: absolute;
  right: 0;
  top: -80px;
  text-align: right;
}

.TopTenpoImgL {
  width: 80%;
  max-width: 278px;
  position: absolute;
  left: -20px;
  top: -85px;
  text-align: left;
}

.TopTenpoImgM {
  width: 30%;
  max-width: 278px;
  position: absolute;
  left: 5%;
  top: 0;
  text-align: left;
}

.TopTenpoImgN {
  width: 30%;
  max-width: 278px;
  position: absolute;
  right: 5%;
  top: 0;
  text-align: right;
}

.TetudouLine {
  background: url(../img/se_middle_img.webp);
  background-position: center;
  background-repeat: no-repeat;
}

.NewsLine {
  width: 100%;
  height: 95px;
  margin: -60px 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  background: url(../img/news_line.webp);
  float: left;
}

.TopMidashiBox {
  width: 100%;
  margin: 0 0 0 0;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
  font-weight: bold;
}

.TopMidashiBoxL {
  width: 16%;
  margin: 0 0 0 0;
  padding: 5px;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
}

.TopMidashiBoxR {
  width: 70%;
  margin: 0 0 0 0;
  padding: 5px;
  text-align: left;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.TopMidashiBoxA {
  width: 100%;
  font-size: 33px;
  color: #333;
  margin: 0px 0 0 0;
  padding: 5px;
  text-align: left;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
  font-family: "Cardo", serif;
}

.TopMidashiIMGA {
  position: absolute;
  top: -60px;
  right: 0;
  width: 60%;
}

/**太字のクラス***/

.KarinMoji {
  font-weight: bold;
  letter-spacing: 0.12em;
}

.CommonMidashi {
  width: 100%;
  margin: 0 0 0 0;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
  font-weight: bold;
}

.CommonMidashiBG {
  width: 100%;
  margin: 0 0 0 0;
  text-align: center;
  padding: 10px;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 45%,
    #efeadd 45%,
    #efeadd 100%
  );
}

.CommonMidashiA {
  width: 100%;
  margin: 0 0 0 0;
  text-align: center;
  float: left;
  font-size: 18px;
  line-height: 1;
  box-sizing: border-box;
  color: #64b9e9;
}

.CommonMidashiB {
  width: 100%;
  font-size: 36px;
  color: #78502e;
  margin: 10px 0 0 0;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.CommonMidashiLine {
  width: 100%;
  height: 2px;
  background-color: #0070be;
  float: left;
}

.CommonMidashiNew {
  display: inline-block;
  border-bottom: 1px solid #0070be;
  font-size: 36px;
  color: #333333;
}

.CommonMidashiSEmax {
  width: 100%;
  max-width: 295px;
  text-align: left;
  margin: 0 auto;
}

.CommonMidashiSE {
  width: 100%;
  margin: -40px 0 100px 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
}

.CommonMidashiSEBOX {
  width: 100%;
  margin: 0 0 0 0;
  padding: 30px 10px 30px 10px;
  text-align: center;
  float: left;
  box-sizing: border-box;
  background-color: #000000;
}

.CommonMidashiSEA {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 30px;
  font-style: oblique;
}

.CommonMidashiSEB {
  width: 100%;
  margin: 5px 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 16px;
}

.CommonMidashiTH {
  width: 100%;
  margin: 0 0 0 0;
  color: #ffffff;
  padding: 15px 15px 20px 15px;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
  background-color: #64b9e9;
  border-radius: 10px;
}

.CommonMidashiC {
  width: 100%;
  margin: 10px 0 0 0;
  text-align: center;
  float: left;
  font-size: 24px;
  line-height: 1;
  box-sizing: border-box;
}

.CommonMidashiD {
  width: 100%;
  margin: 10px 0 0 0;
  text-align: center;
  float: left;
  font-size: 30px;
  box-sizing: border-box;
}

/********/

.TopMesseBox {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
}

.TopMesseBoxL {
  width: 45%;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.TopMesseBoxLL {
  width: 45%;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: center;
  float: right;
  box-sizing: border-box;
}

.TopMesseBoxR {
  width: 55%;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.TopMesseBoxRR {
  width: 55%;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.TopMesseBoxA {
  width: 100%;
  margin: 80px 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  font-size: 18px;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
}

.TopMesseBoxB {
  width: 100%;
  margin: 20px 0 0 0;
  padding: 0 0 0 0;
  font-size: 30px;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
}

.TopMesseBoxC {
  width: 100%;
  margin: 20px 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
}

.TopMesseBoxD {
  width: 100%;
  margin: 60px 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
}

.TopMesseBoxSum {
  width: 33.3%;
  margin: 0 0 0 0;
  padding: 5px;
  text-align: center;
  float: left;
  line-height: 1.3;
  box-sizing: border-box;
}

/********/

.TOPBTBOXtext {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  padding: 15px;
  box-sizing: border-box;
  font-weight: 600;
  text-align: left;
}

.REBTBOXtext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40px 10px 40px 10px;
  box-sizing: border-box;
  font-weight: 600;
  background-color: rgba(0, 134, 57, 0.8);
  max-width: 300px;
}

#SIDEBTBOX {
  width: 100%;
  margin: 10px 0 0 0;
  text-align: left;
}

#SIDEBTBOX li {
  display: block;
  float: left;
  width: 48%;
  margin: 10px 0 0 5px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  position: relative;
}

#SIDEBTBOX li img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

/***コンテンツボタン****/
.ContentsBT {
  width: 50%;
  float: left;
  padding: 10px;
  margin: 15px 0 0 0;
  box-sizing: border-box;
}

/***真ん中寄せボタン****/
.parentBOX {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 300px;
  width: 100%;
  height: 100%;
  background: orange;
}

.exampleBOX {
  display: block;
  width: 100%;
  max-width: 300px;
  background: #fff;
  text-align: left;
}

/********/
/*本文*/
/********/
/*全体*/
#TOPpageWrapper {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  text-align: left;
}

#pageWrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: left;
}

/*第一階層*/
#MainWrapper {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

#PageImg {
  width: 100%;
  margin: 0 0 0 0;
  text-align: center;
  float: left;
  position: relative;
}

.PageImgMidashi {
  width: 100%;
  margin: -40px 0 0 0;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}

.PageImgMidashi span {
  padding: 15px;
  font-size: 30px;
  color: #ffffff;
  background-color: #64b9e9;
}

#MidashiLine {
  width: 100%;
  float: left;
  margin: 0 0 50px 0;
  text-align: left;
  background: url(../img/midashi_line.png);
  background-position: right 0px top 40px;
  background-repeat: no-repeat;
}

.KugiriLine {
  width: 100%;
  float: left;
  height: 31px;
  margin: 0 0 20px 0;
  text-align: left;
  background: url(../img/kugiri.png);
  background-position: top left;
  background-repeat: no-repeat;
}

.MidashiBG {
  width: 100%;
  height: 50px;
  float: left;
  padding: 6px;
  margin: 0 0 0 0;
  text-align: left;
  background: url(../img/midashi_bg.png);
  background-position: top left;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

/**#PageImg img{
	width: 100%;
}*/
.PageTitle {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  margin: auto;
  color: #ffffff;
  font-size: 34px;
}

/********/
/*レフト*/

#LeftBox {
  display: inline;
  width: 100%;
  margin: 20px 0 50px 0;
  padding: 0 0 0 0;
  float: left;
}

#LeftBoxBlog {
  display: inline;
  width: 76%;
  margin: 20px 0 50px 0;
  padding: 0 0 0 0;
  float: left;
}

#BlogAllBox li {
  text-align: left;
  color: #000000;
  width: 100%;
  margin: 0 0 0 0;
  padding: 5px;
  list-style-type: none;
  display: block;
  float: left;
  box-sizing: border-box;
}

/*ブログ用のリスト*/
.BlogNewsBox {
  width: 100%;
  margin: 20px 0 20px 0;
  padding: 0 0 0 0;
  float: left;
  font-size: 14px;
  box-shadow: 0 0 4px gray;
  position: relative;
  background-color: #ffffff;
}

.BlogNewsBoxL {
  width: 30%;
  margin: 0 0 0 0;
  padding: 1px;
  float: left;
  box-sizing: border-box;
  text-align: center;
}

.BlogNewsBoxR {
  width: 68%;
  margin: 0 0 0 0;
  padding: 5px;
  float: right;
  box-sizing: border-box;
  text-align: left;
}

.BlogNewsBoxL img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

.BlogNewsBoxR img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

.BlogBT {
  font-size: 12px;
  width: 150px;
  margin: 0 0 0 0;
  text-align: center;
  position: absolute;
  bottom: 5px;
  right: 0px;
}

.BlogBT a:link,
.BlogBT a:visited,
.BlogBT a:hover {
  padding: 5px;
  box-sizing: border-box;
  color: #4a340e;
  text-decoration: none;
  border-radius: 10px;
  /* CSS3草案 */
  -webkit-border-radius: 10px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;
  /* Firefox用 */
}

.BlogBT a:hover {
  color: #5a5a5a;
  text-decoration: underline;
  background-color: #e9e9e9;
}

.BlogBTB {
  width: 150px;
  margin: 0 0 0 0;
  text-align: center;
}

.BlogBTB a:link,
.BlogBTB a:visited,
.BlogBTB a:hover {
  padding: 5px;
  box-sizing: border-box;
  color: #4a340e;
  text-decoration: none;
  border-radius: 10px;
  /* CSS3草案 */
  -webkit-border-radius: 10px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;
  /* Firefox用 */
}

.BlogBTB a:hover {
  color: #5a5a5a;
  text-decoration: underline;
  background-color: #e9e9e9;
}

/********/
/********/

/********/
/*ライト*/
#RightBox {
  display: inline;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: left;
  float: right;
}

#RightBox a:link,
#RightBox a:visited,
#RightBox a:hover {
  color: #4a340e;
  text-decoration: none;
}

#RightBox a:hover {
  color: #5a5a5a;
  text-decoration: underline;
}

#RightBoxBlog {
  display: inline;
  width: 23%;
  margin: 20px 0 0 0;
  padding: 0 0 0 0;
  text-align: left;
  float: right;
}

#RightBoxBlog li {
  text-align: left;
  color: #000000;
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px;
  list-style-type: none;
  display: block;
  float: left;
  box-sizing: border-box;
}

#SideNavi {
  float: left;
  width: 100%;
}

#SideNaviSP {
  display: none;
  float: left;
  width: 100%;
}

#MenuListBox {
  display: inline;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 40px 0;
  text-align: left;
  float: left;
  background-color: #ffffff;
}

#ListBoxM {
  width: 100%;
  margin: 0 0 0 0;
  padding: 5px;
  box-sizing: border-box;
  text-align: left;
  float: left;
}

#ListBoxM li {
  display: block;
  float: left;
  width: 100%;
  font-size: 12px;
  margin: 5px 0 5px 0;
  padding: 0 0 0 0;
  text-align: left;
  border-bottom: dotted 1px #000000;
  text-decoration: none;
}

#ListBoxM li a {
  display: block;
  text-decoration: none;
  color: #000000;
}

#ListBoxM li a:visited {
  color: #000000;
}

#ListBoxM li a:hover {
  color: #000000;
}

#SideBox {
  width: 100%;
  margin: 50px 0 10px 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
}

#SideBoxList {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px 10px 20px 10px;
  text-align: left;
  float: left;
  background-color: #e87296;
  box-sizing: border-box;
  border-radius: 10px;
  /* CSS3草案 */
  -webkit-border-radius: 10px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;
  /* Firefox用 */
}

#SideBoxList li {
  width: 98%;
  float: left;
  margin: 10px 0 0 0;
  padding: 5px;
  text-align: left;
  text-decoration: none;
  list-style: none;
  border-bottom: 1px dotted #ffffff;
  float: left;
}

#SideBoxList li img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

/********/
/***TOPメインコンテンツ***/

.TOPmidashi {
  display: none;
}

.TOPSP {
  display: none;
}

/***行動指針*****/

.VisionALLBox {
  width: 100%;
  margin: 0px 0 0px 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.VisionBox {
  width: 100%;
  margin: 40px 0 0px 0;
  padding: 0 0 0 0;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.VisionBoxA {
  width: 100%;
  color: #cdecd4;
  font-size: 24px;
  margin: 0px 0 0px 0;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.VisionBoxB {
  width: 100%;
  font-size: 20px;
  color: #ffffff;
  background-color: #1d8e3d;
  margin: 0px 0 0px 0;
  padding: 10px;
  border-radius: 10px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.VisionBoxC {
  width: 100%;
  font-size: 16px;
  margin: 0px 0 0px 0;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

/***先輩の声*****/

.SenpaiALLBox {
  width: 100%;
  margin: 0px 0 0px 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.SenpaiBox {
  width: 100%;
  margin: 40px 0 0px 0;
  padding: 0 0 0 0;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.SenpaiBoxA {
  width: 100%;
  color: #cdecd4;
  font-size: 24px;
  margin: 0px 0 0px 0;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.SenpaiBoxB {
  width: 100%;
  font-size: 20px;
  color: #ffffff;
  background-color: #1d8e3d;
  margin: 0px 0 0px 0;
  padding: 10px;
  border-radius: 10px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.SenpaiBoxC {
  width: 100%;
  font-size: 16px;
  margin: 20px 0 0px 0;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.SenpaiBoxD {
  width: 100%;
  color: #1d8e3d;
  font-size: 20px;
  margin: 10px 0 0px 0;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.SenpaiBoxE {
  width: 100%;
  font-size: 16px;
  margin: 10px 0 0px 0;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.SenpaiBoxL {
  width: 40%;
  margin: 0px 0 0px 0;
  padding: 5px;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.SenpaiBoxR {
  width: 60%;
  margin: 0px 0 0px 0;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

/********/

/********/
/*第2階層パンくず*/
#Pankuzu {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5px;
  text-align: left;
  box-sizing: border-box;
}

#Pankuzu a:link,
#Pankuzu a:visited,
#Pankuzu a:hover {
  color: #000000;
  text-decoration: none;
}

#Pankuzu a:hover {
  color: #5a5a5a;
  text-decoration: underline;
}

/*第2階層ページナビ*/
#PageNavi {
  width: 100%;
  max-width: 860px;
  margin: 20px 0 50px 0;
  color: #333c41;
  font-size: 14px;
  text-align: center;
  float: left;
}

#PageNavi a:link,
#PageNavi a:visited {
  color: #f4a102;
}

#PageNavi a:hover {
  color: #f4a102;
  cursor: pointer;
}

/*第2階層ページTopへ*/
.PageUp {
  width: 100%;
  max-width: 860px;
  margin: 30px 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.PageUp ul {
  width: 100%;
  max-width: 860px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.PageUp li {
  display: block;
  float: right;
  width: 120px;
  border-bottom: 1px solid #93232a;
  margin: 0;
  padding: 0;
}

.PageUp li a {
  display: block;
  padding: 12px 0 10px;
  background-color: #a4333a;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.PageUp li a:hover {
  background: #e6858b;
}

/****本文****/
.MidashiSP {
  width: 100%;
  float: left;
  text-align: left;
  background: url("../img/bg_line.jpg");
  background-position: bottom left;
  background-repeat: repeat-x;
}

#TextBox {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: left;
  float: left;
}

#TextBox img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

#HonbunBox {
  width: 100%;
  max-width: 780px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: left;
  float: left;
}

.HonbunText {
  width: 100%;
  max-width: 780px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
}

.HonbunText li {
  display: block;
  float: left;
  width: 33%;
  margin: 30px 0 0 0;
  padding: 0;
  text-align: center;
  text-decoration: none;
}

.HonbunText img {
  max-width: 100%;
  height: auto;
  width/***/
	: auto;
}

.HonbunIMGSP {
  display: none;
  width: 100%;
  max-width: 860px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
}

/*****/

/********/

.iframe-css {
  margin: 0px 0 0px 0;
  position: relative;
  width: 100%;
  padding-top: 80%;
  float: left;
}

.iframe-css iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/***会社地図****/

.AboutMapBox {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.AboutMapBoxL {
  width: 50%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.AboutMapBoxR {
  width: 50%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.AboutMapList {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 15px 0 0 0;
  float: left;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
}

.AboutMapListL {
  width: 25%;
  text-align: left;
  padding: 5px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.AboutMapListR {
  width: 75%;
  text-align: left;
  padding: 5px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.map-css {
  margin: 0px 0 0px 0;
  position: relative;
  width: 100%;
  padding-top: 80%;
  float: left;
}

.map-css iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/***フッター地図****/
.FooterMapBoxALL {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FooterMapBox {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FooterMapBoxL {
  width: 50%;
  text-align: center;
  padding: 15px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FooterMapBoxR {
  width: 50%;
  text-align: center;
  padding: 15px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FooterMapA {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FooterAcA {
  width: 100%;
  text-align: left;
  padding: 5px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  font-size: 36px;
}

.FooterAcB {
  width: 100%;
  text-align: left;
  padding: 5px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 1.3;
}

.FooterAcC {
  width: 100%;
  text-align: left;
  padding: 5px;
  margin: 10px 0 0 0;
  float: left;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 1.3;
}

.FooterAcC span {
  background: linear-gradient(transparent 40%, #ffffff 60%);
}

.FooterAcD {
  width: 100%;
  text-align: left;
  padding: 5px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  font-size: 16px;
}

.iframe-css-footer {
  margin: 0 0 0px 0;
  position: relative;
  width: 100%;
  padding-top: 30%;
  float: left;
  clear: both; /* 上のfloatをクリアして確実に表示 */
}

.iframe-css-footer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*******/

/***価格表****/

.ToryouALLBox {
  width: 100%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ToryouBox {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 50px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ToryouBoxL {
  width: 35%;
  text-align: center;
  padding: 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ToryouBoxR {
  width: 65%;
  text-align: center;
  padding: 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ToryouBoxA {
  width: 100%;
  text-align: left;
  padding: 10px;
  font-size: 24px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  border-bottom: 1px solid #000000;
}

.ToryouBoxB {
  width: 100%;
  text-align: left;
  padding: 5px;
  font-size: 18px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ToryouBoxC {
  width: 100%;
  text-align: left;
  padding: 5px;
  font-size: 16px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ToryouBoxD {
  width: 100%;
  text-align: left;
  padding: 5px;
  font-size: 16px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.SekouStepALLBox {
  width: 100%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.SekouStepBox {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 50px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.SekouStepMidashi {
  width: 100%;
  text-align: left;
  padding: 0px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  border-bottom: 1px solid #000000;
}

.StepMidashi {
  font-size: 18px;
  color: #ffffff;
  text-align: left;
  padding: 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  background-color: #000000;
}

.SekouStepBoxL {
  width: 35%;
  text-align: center;
  padding: 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.SekouStepBoxR {
  width: 65%;
  font-size: 16px;
  text-align: left;
  padding: 20px 10px 10px 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

/***コンセプト****/

.ConceptInfoBoxALL {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ConceptInfoBoxA {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ConceptInfoBoxB {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: -30px 0 0 0;
  float: left;
  box-sizing: border-box;
  position: relative;
}

.ConceptInfoBoxC {
  width: 100%;
  font-size: 16px;
  text-align: center;
  padding: 0px;
  margin: 50px 0 100px 0;
  float: left;
  box-sizing: border-box;
}

.ConceptInfoBoxMidashi {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  background-color: #ffffff;
}

.ConceptInfoBoxMidashiA {
  width: 100%;
  font-size: 18px;
  text-align: center;
  padding: 0px;
  margin: 10px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ConceptInfoBoxMidashiB {
  width: 100%;
  font-size: 30px;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ConceptInfoBoxPhoto {
  width: 33.3%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FeInfoBoxALL {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FeInfoBoxA {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FeInfoBoxB {
  width: 40%;
  text-align: left;
  padding: 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  position: relative;
}

.FeInfoBoxC {
  width: 60%;
  text-align: left;
  padding: 10px;
  margin: 0px 0 0px 0;
  float: left;
  box-sizing: border-box;
}

.FeInfoBoxMidashi {
  width: 100%;
  text-align: left;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FeInfoBoxMidashiA {
  width: 100%;
  font-size: 18px;
  text-align: left;
  padding: 0px;
  margin: 10px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FeInfoBoxMidashiB {
  width: 100%;
  font-size: 30px;
  text-align: left;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FeInfoBoxMidashiC {
  width: 100%;
  color: #c0a275;
  font-size: 18px;
  text-align: left;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.FeInfoBoxPhoto {
  width: 50%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.CONCEPTaBOXL {
  width: 45%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.CONCEPTaBOXR {
  width: 55%;
  text-align: left;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.CONCEPTbBOXL {
  width: 50%;
  text-align: left;
  padding: 25px;
  margin: 0px 0px 0 0px;
  background-color: #ffffff;
  box-sizing: border-box;
  position: absolute;
  top: 40px;
  left: 40px;
}

.CONCEPTbBOXR {
  width: 50%;
  text-align: left;
  margin: 0 0 0 0;
  float: right;
}

.CONCEPTBG {
  width: 100%;
  text-align: center;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 50%,
    #f9f9f0 50%,
    #f9f9f0 100%
  );
}

.CONCEPTBGA {
  width: 100%;
  text-align: center;
  padding: 40px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  background-color: #f8f8fa;
  position: relative;
}

.CONCEPTBGAL {
  width: 50%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.CONCEPTBGAR {
  width: 50%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.CONCEPTBGB {
  width: 100%;
  text-align: center;
  padding: 80px 30px 80px 30px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  background: url(../img/tuyomi_bg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.CONCEPTBGC {
  width: 100%;
  text-align: center;
  padding: 0px 30px 0px 30px;
  margin: -20px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.CONCEPTLIST {
  width: 100%;
  text-align: center;
  padding: 20px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  background-color: #b6ab88;
}

.CONCEPTLIST li {
  display: block;
  float: left;
  width: 25%;
  margin: 20px 0 20px 0;
  padding: 0;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.CONCEPTLIST li:nth-child(2) {
  border-left: 1px solid #cabe9a;
  border-right: 1px solid #cabe9a;
}

.CONCEPTLIST li:nth-child(3) {
  border-right: 1px solid #cabe9a;
}

.CONCEPTLISTA {
  font-size: 20px;
  color: #ffffff;
  width: 100%;
  text-align: center;
  padding: 5px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.CONCEPTLISTB {
  font-size: 16px;
  color: #e8dfc2;
  width: 100%;
  text-align: center;
  padding: 5px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.CONCEPTLISTC {
  width: 100%;
  text-align: center;
  padding: 5px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ARTBOXA {
  width: 100%;
  text-align: center;
  padding: 10px;
  margin: 140px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ARTBOXB {
  width: 100%;
  text-align: center;
  padding: 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ARTBOXL {
  width: 50%;
  text-align: left;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ARTBOXR {
  width: 50%;
  text-align: left;
  padding: 20px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ARTBOXRA {
  width: 100%;
  text-align: left;
  padding: 0px;
  margin: 10px 0 0 0;
  float: left;
  box-sizing: border-box;
  font-size: 36px;
  color: #820000;
}

.ARTBOXRB {
  width: 100%;
  text-align: left;
  padding: 0px;
  margin: 10px 0 0 0;
  float: left;
  box-sizing: border-box;
  font-size: 16px;
  color: #820000;
}

.ARTBOXRC {
  width: 100%;
  text-align: left;
  padding: 0px;
  margin: 10px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.ARTBOXBA {
  width: 100%;
  text-align: left;
  padding: 10px;
  margin: 10px 0 0 0;
  float: left;
  box-sizing: border-box;
  font-size: 20px;
  color: #820000;
  border-bottom: 1px solid #820000;
}

.ARTBOXBB {
  width: 100%;
  text-align: left;
  padding: 10px;
  margin: 10px 0 0 0;
  float: left;
  box-sizing: border-box;
  font-size: 16px;
}

/*即日買取*/

.PUBBOXSE {
  width: 100%;
  float: left;
  margin: 0 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  background-size: auto auto;
  background-color: rgba(130, 0, 0, 1);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(154, 48, 48, 1) 10px,
    rgba(154, 48, 48, 1) 11px
  );
}

.PUBBOXSEA {
  color: #820000;
  font-size: 30px;
  background: linear-gradient(transparent 60%, #ffcccc 60%);
}

.PUMidashi {
  width: 100%;
  float: left;
  margin: 0 0 10px 0;
  padding: 10px;
  box-sizing: border-box;
  font-size: 18px;
  background-color: #820000;
  color: #ffffff;
}

/*訪問*/

.HomeVisitALLBox {
  width: 100%;
  margin: 0 0 0 0;
  padding: 30px;
  box-sizing: border-box;
  float: left;
}

.HomeVisitMidashiBox {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 0;
  box-sizing: border-box;
  float: left;
  text-align: center;
}

.HomeVisitMidashiBoxLine {
  width: 100%;
  height: 6px;
  margin: 0px 0 0 0;
  padding: 0;
  background-color: #64b9e9;
  box-sizing: border-box;
  float: left;
}

.HomeVisitMidashiBox span {
  font-size: 20px;
  display: inline-block;
  color: #ffffff;
  margin: 0 0 0 0;
  padding: 20px;
  box-sizing: border-box;
  background-color: #64b9e9;
  border-radius: 20px 20px 0 0;
}

.HomeVisitBox {
  width: 50%;
  margin: 40px 0 0 0;
  padding: 20px;
  box-sizing: border-box;
  float: left;
}

.HomeVisitBoxA {
  width: 100%;
  font-size: 18px;
  text-align: center;
  margin: 0px 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.HomeVisitBoxB {
  width: 100%;
  text-align: center;
  margin: 10px 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.title-border-right {
  font-size: 24px;
  color: #64b9e9;
  display: flex;
  align-items: center;
}

.title-border-right:after {
  border-top: 1px solid #64b9e9;
  content: "";
  flex-grow: 1;
}

.title-border-right:after {
  margin-left: 1rem;
}

.title-border-rightse {
  font-size: 24px;
  color: #1f8d3b;
  display: flex;
  align-items: center;
}

.title-border-rightse:after {
  border-top: 1px solid #1f8d3b;
  content: "";
  flex-grow: 1;
}

.title-border-rightse:after {
  margin-left: 1rem;
}

/*LINE受付*/

.FlowALLBox {
  width: 100%;
  margin: 0 0 0 0;
  padding: 30px;
  box-sizing: border-box;
  float: left;
  background-color: #fefcf7;
  border: 1px solid #e2680f;
  border-radius: 20px;
}

.FlowMidashiBox {
  width: 100%;
  margin: -40px 0 0 0;
  padding: 0;
  box-sizing: border-box;
  float: left;
}

.FlowMidashiBox span {
  font-size: 20px;
  color: #ffffff;
  margin: 0 0 0 0;
  padding: 20px;
  box-sizing: border-box;
  background-color: #e2680f;
  border-radius: 20px;
}

.FlowMidashiBoxA {
  width: 20%;
  margin: 0 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  float: left;
  font-size: 30px;
  background-color: #820000;
  text-align: center;
  color: #ffffff;
}

.FlowMidashiBoxB {
  width: 80%;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 30px;
  box-sizing: border-box;
  float: left;
  font-size: 30px;
  color: #820000;
  text-align: left;
}

.FlowBox {
  width: 100%;
  margin: 40px 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  float: left;
}

.FlowBoxL {
  width: 40%;
  margin: 0px 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  float: left;
}

.FlowBoxR {
  width: 60%;
  margin: 0px 0 0 0;
  padding: 20px;
  box-sizing: border-box;
  float: right;
}

.FlowBoxA {
  width: 100%;
  text-align: left;
  font-size: 24px;
  color: #64b9e9;
  margin: 0px 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.FlowBoxA span {
  background: linear-gradient(transparent 70%, #dcf3c8 70%);
}

.FlowBoxB {
  width: 100%;
  text-align: left;
  margin: 10px 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.FlowArrowBox {
  width: 100%;
  margin: 20px 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  float: left;
}

.Flowth {
  width: 20%;
  padding: 10px;
  background-color: #63843e;
  color: #ffffff;
  box-sizing: border-box;
  border-bottom: 1px solid #63843e;
}

.Flowtd {
  width: 80%;
  padding: 10px;
  color: #63843e;
  box-sizing: border-box;
  border-bottom: 1px solid #63843e;
}

/*標準仕様*/

.StandBox {
  display: inline;
  width: 100%;
  margin: 0px 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.StandBox li {
  text-align: center;
  color: #000000;
  width: 33%;
  margin: 0 0 0 0;
  padding: 10px;
  list-style-type: none;
  display: block;
  float: left;
  box-sizing: border-box;
  display: flex;
}

.StandBoxF {
  width: 100%;
  height: 100%;
  margin: 0px 0 0 0;
  padding: 10px;
  float: left;
  box-sizing: border-box;
  border: 3px solid #f6f6f6;
}

/*ブログ*/
#MonthList {
  display: inline;
  width: 100%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  float: left;
  list-style-type: none;
  text-align: left;
}

#MonthList li {
  width: 100%;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  float: left;
}

/****採用情報*****/

.KikiSetubiBoxALL {
  width: 100%;
  text-align: left;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.KikiSetubiBox {
  width: 50%;
  text-align: left;
  padding: 20px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.KikiSetubiBoxBG {
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: #ffffff;
}

.KikiSetubiBoxA {
  width: 100%;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  background-color: #3e8e5d;
  border-radius: 10px 10px 0 0;
}

.KikiSetubiBoxB {
  width: 100%;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
}

.KikiSetubiBoxBL {
  width: 45%;
  text-align: center;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.KikiSetubiBoxBR {
  width: 55%;
  text-align: left;
  padding: 10px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.KikiSetubiBoxC {
  width: 100%;
  text-align: center;
  padding: 5px;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.RecCompanyBox {
  width: 100%;
  text-align: left;
  font-size: 18px;
  padding: 0px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.RecCompanyBoxL {
  width: 20%;
  text-align: left;
  padding: 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.RecCompanyBoxR {
  width: 80%;
  text-align: left;
  padding: 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.MiryokuBox {
  width: 100%;
  text-align: left;
  padding: 0px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.MiryokuBoxL {
  width: 40%;
  text-align: left;
  padding: 0px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.MiryokuBoxR {
  width: 60%;
  text-align: left;
  padding: 0px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.MiryokuBoxLL {
  width: 40%;
  text-align: left;
  padding: 0px;
  margin: 0px 0 0 0;
  float: right;
  box-sizing: border-box;
}

.MiryokuBoxRR {
  width: 60%;
  text-align: left;
  padding: 0px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.MiryokuBoxA {
  width: 100%;
  text-align: left;
  padding: 30px 0 30px 0;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  background-size: auto auto;
  background-color: rgba(220, 243, 200, 1);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(181, 229, 141, 1) 5px,
    rgba(181, 229, 141, 1) 9px
  );
}

.MiryokuBoxB {
  width: 100%;
  text-align: left;
  padding: 20px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  background-color: #ffffff;
}

.MiryokuMidashiA {
  width: 100%;
  text-align: center;
  padding: 0 0 0 0;
  margin: -30px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.MiryokuMidashiA span {
  color: #ffffff;
  text-align: center;
  padding: 10px;
  font-size: 24px;
  margin: 0px 0 0 0;
  box-sizing: border-box;
  background-color: #64b9e9;
}

.MiryokuMidashiB {
  width: 100%;
  font-size: 24px;
  color: #64b9e9;
  text-align: center;
  padding: 0 0 0 0;
  margin: 15px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.MiryokuMidashiC {
  width: 100%;
  font-size: 16px;
  text-align: left;
  padding: 0 0 0 0;
  margin: 10px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.KnsyuuBox {
  width: 100%;
  text-align: left;
  padding: 0px;
  margin: 40px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.KnsyuuBox span {
  padding: 10px;
  color: #ffffff;
  background-color: #64b9e9;
  box-sizing: border-box;
}

.KnsyuuBoxA {
  width: 100%;
  text-align: left;
  padding: 5px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  border-bottom: 1px dotted #64b9e9;
}

.KnsyuuBoxB {
  width: 100%;
  text-align: left;
  padding: 10px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
}

.KnsyuuBoxC {
  width: 100%;
  text-align: left;
  padding: 5px;
  margin: 0px 0 0 0;
  float: left;
  box-sizing: border-box;
  text-indent: -1em;
  padding-left: 1em;
}

.Retable th {
  width: 25%;
  color: #000000;
  background-color: none;
  text-align: left;
  border-bottom: 1px dotted #000000;
}

.Retable td {
  width: 75%;
  color: #000000;
  background-color: none;
  text-align: left;
  border-bottom: 1px dotted #000000;
}

.RetableA {
  width: 100%;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
}

.RetableA th {
  width: 25%;
  color: #000000;
  background-color: none;
  text-align: left;
  border-bottom: 1px dotted #000000;
  background-color: #e0f4da;
  box-sizing: border-box;
}

.RetableA td {
  width: 75%;
  color: #000000;
  background-color: none;
  text-align: left;
  border-bottom: 1px dotted #000000;
  background-color: #ffffff;
  box-sizing: border-box;
}

/****診療時間***/

.TimeTableA {
  width: 100%;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  letter-spacing: 0.08em;
}

.TimeTableA th {
  color: #ffffff;
  padding: 10px;
  background-color: none;
  text-align: center;
  background-color: #68bc24;
  box-sizing: border-box;
  border: 1px #ffffff solid;
}

.TimeTableA td {
  color: #68bc24;
  padding: 10px;
  background-color: none;
  text-align: center;
  background-color: #ffffff;
  box-sizing: border-box;
}

/****診療時間***/

/*動画の投稿*/
.MovieListF {
  display: inline;
  width: 100%;
  margin: 30px 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.MovieListF li {
  text-align: center;
  color: #000000;
  width: 33.3%;
  margin: 0 0 0 0;
  padding: 10px;
  list-style-type: none;
  display: block;
  float: left;
  box-sizing: border-box;
}

.MovieBoxALL {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.MovieBox {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.MovieBox iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.frame-wrapper__video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.frame-wrapper__video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.MovieTitleF {
  width: 100%;
  margin: 5px 0 0 0;
  padding: 3px;
  box-sizing: border-box;
  float: left;
  border: 1px solid #000000;
}

/************/

/*イベントの投稿*/
.EveBox {
  display: inline;
  width: 100%;
  margin: 30px 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.EveBox li {
  text-align: center;
  color: #000000;
  width: 50%;
  margin: 0 0 0 0;
  padding: 20px;
  list-style-type: none;
  display: block;
  float: left;
  box-sizing: border-box;
  display: flex;
}

.EveBoxL {
  width: 50%;
  margin: 30px 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.EveBoxR {
  width: 50%;
  margin: 0px 0 0 0;
  padding: 0;
  float: right;
  box-sizing: border-box;
}

.EvePhoto {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 0 0 0 0;
  float: right;
  background-color: red;
}

.EveBoxA {
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: #ffffff;
  margin: 10px 0 0 0;
  padding: 10px;
  float: left;
  box-sizing: border-box;
  background-color: #78470e;
}

.EveBoxB {
  width: 100%;
  text-align: left;
  font-size: 18px;
  margin: 0px 0 0 0;
  padding: 5px 5px 0px 5px;
  float: left;
  box-sizing: border-box;
}

.EveBoxC {
  width: 100%;
  text-align: left;
  font-size: 14px;
  margin: 0px 0 0 0;
  padding: 5px;
  float: left;
  box-sizing: border-box;
}

.EveBT {
  text-align: right;
  width: 100%;
  margin: 5px 0 5px 0;
  padding: 3px;
  float: left;
  box-sizing: border-box;
  position: relative;
  border-bottom: 2px solid #63843e;
}

.EveBT a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

/******施工事例***/

.ProListALLBox {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 10px;
  float: left;
  box-sizing: border-box;
}

.ProList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

.ProList li {
  display: table-cell;
  box-sizing: border-box;
  padding: 10px;
  box-sizing: border-box;
  transition-duration: 500ms;
  text-align: center;
}

.ProList li a {
  display: block;
  font-size: 20px;
  width: 100%;
  /* 横幅 */
  padding: 10px;
  /* a要素内の余白 */
  box-sizing: border-box;
  background-color: #ffffff;
  color: #64b9e9;
  text-decoration: none;
  border: 1px solid #64b9e9;
  transition-duration: 500ms;
  border-radius: 30px;
}

.ProList li a:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
  color: #ffffff;
  background-color: #64b9e9;
}

.ProList .bton {
  display: block;
  font-size: 20px;
  width: 100%;
  /* 横幅 */
  padding: 10px;
  /* a要素内の余白 */
  box-sizing: border-box;
  background-color: #e2680f;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid #e2680f;
  transition-duration: 500ms;
  border-radius: 30px;
}

.ProList .bton:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  zoom: 1;
  /*IE*/
}

.WorkSum {
  display: inline;
  width: 100%;
  margin: 5px 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.WorkSum li {
  text-align: center;
  color: #000000;
  width: 25%;
  margin: 0 0 0 0;
  padding: 5px;
  list-style-type: none;
  display: block;
  float: left;
  box-sizing: border-box;
}

.WorkinfoBox {
  width: 33.3%;
  margin: 0 0 0 0;
  padding: 10px;
  float: left;
  box-sizing: border-box;
}

.AfBeBox {
  display: inline;
  width: 100%;
  margin: 20px 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  float: left;
}

.ListPhotoBox {
  width: 100%;
  height: 300px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.ListPhoto {
  width: 100%;
  text-align: center;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

/******お問合せフォーム***/
.ToiBox {
  width: 100%;
  max-width: 730px;
  margin: 15px 0 0 200px;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

/********/
/*フッタBOX*/
/********/
#footer {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  color: #000000;
  box-sizing: border-box;
}

.FooterImgA {
  width: 30%;
  max-width: 396px;
  position: absolute;
  left: 5%;
  top: 0;
  text-align: left;
}

.FooterImgB {
  width: 30%;
  max-width: 352px;
  position: absolute;
  right: 5%;
  top: 0;
  text-align: right;
}

.FooterImgC {
  width: 30%;
  max-width: 590px;
  position: absolute;
  left: 5%;
  bottom: 0;
  text-align: left;
}

.FooterImgD {
  width: 30%;
  max-width: 491px;
  position: absolute;
  right: 5%;
  bottom: 0;
  text-align: right;
}

#FooterBox {
  width: 100%;
  margin: 30px 0 0 0;
  padding: 0 0 0 0;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

#FooterBoxSP {
  display: none;
  width: 100%;
  line-height: 1.3;
  margin: 0 0 0 0;
  padding: 5px 0 0 0;
  color: #000000;
  text-align: left;
}

#FooterBT {
  width: 100%;
  font-size: 80%;
  margin: 10px 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  color: #000000;
}

#FooterBTSP {
  width: 100%;
  margin: 10px 0 0 0;
  color: #000000;
  padding: 0 0 0 0;
  text-align: left;
  transition: 0.5s;
  font-weight: normal;
}

#FooterBTSP a {
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  transition: 0.5s;
}

#FooterBTSP a:hover {
  color: #64b9e9;
  transition: 0.5s;
}

/**上側**/
#FooterBoxA {
  width: 70%;
  text-align: center;
  margin: 10px 0 0 0;
  padding: 10px;
  float: left;
  color: #000000;
  box-sizing: border-box;
}

#FooterBoxA a {
  color: #000000;
  font-size: 13px;
  transition: 0.5s;
  text-decoration: none;
}

#FooterBoxA a:hover {
  color: #64b9e9;
  transition: 0.5s;
}

#FooterBoxB {
  width: 30%;
  text-align: left;
  margin: 30px 0 0 0;
  padding: 10px;
  float: left;
  color: #000000;
  box-sizing: border-box;
  transition: 0.5s;
  font-weight: bold;
}

#FooterBoxB a {
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  transition: 0.5s;
  text-decoration: none;
}

#FooterBoxB a:hover {
  color: #64b9e9;
  transition: 0.5s;
}

#FooterBoxC {
  width: 30%;
  color: #000000;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

#FooterLink {
  width: 100%;
  text-align: left;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
  box-sizing: border-box;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  transition: 0.5s;
}

#FooterLink li {
  text-align: center;
  color: #ffffff;
  width: 12.5%;
  margin: 10px 0 10px 0;
  padding: 5px;
  list-style-type: none;
  display: block;
  float: left;
  color: #656565;
  box-sizing: border-box;
  border-left: 1px solid #d9d9d9;
  transition: 0.5s;
}

#FooterLink li a {
  color: #656565;
  text-decoration: none;
  transition: 0.5s;
}

#FooterLink li a:hover {
  color: #bababa;
  transition: 0.5s;
}

#FooterBoxASP {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: center;
  float: left;
  color: #ffffff;
}

#FooterBoxBSP {
  width: 100%;
  margin: 10px 0 0px 0;
  padding: 0 0 0 0px;
  color: #ffffff;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

/********/

/************/
/*グローバルNAVIブロック*/

.MainFont {
  text-align: center;
  color: #0070be; /* メニュー文字色をブルーに */
  font-size: 18px;
  transition: 0.5s;
  font-weight: bold;
  letter-spacing: 0.12em;
}

.FontMaru {
  color: #0070be;
  font-size: 10px;
}

.MainFont:hover {
  color: #005fa3;
}

.MainFontCon {
  text-align: center;
  color: #333333;
  font-size: 15px;
  transition: 0.5s;
}

.MainFontCon:hover {
  color: #555555;
}

.SubFont {
  text-align: center;
  font-size: 12px;
  transition: 0.5s;
  color: #ffffff;
  font-weight: normal;
  letter-spacing: 0.1em;
}

.MainFontSE {
  text-align: center;
  color: #000000;
  font-size: 16px;
  transition: 0.5s;
  font-weight: normal;
  letter-spacing: 0.12em;
}

.MainFontSE:hover {
  color: #82c9f2;
}

.SubFontSE {
  text-align: center;
  font-size: 12px;
  transition: 0.5s;
  color: #364d20;
  font-weight: normal;
  letter-spacing: 0.1em;
}

.GlobalWrapper {
  width: 100%;
  padding: 20px 0 0 0;
  text-align: left;
  float: right;
  position: relative;
}

.GlobalWrapperR {
  width: 100%;
  max-width: 190px;
  padding: 0 0 0 0;
  text-align: left;
  float: right;
}

.GlobalNavi {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 10px 20px 10px 10px;
  box-sizing: border-box;
  margin: 0 0 0 0;
  text-align: right;
  float: left;
}

.GlobalNavi.center {
  margin: 0;
  /* 余分なマージンを消去 */
  padding: 0;
  /* 余分なパディングを消去 */
  text-align: center;
  /* 中央寄せ */
}

.GlobalNavi li {
  display: inline-block;
  vertical-align: middle;
  margin: 0px 0 0 0;
  padding: 0 0 0 0;
  font-weight: 600;
  position: relative;
  line-height: 1;
  transition: 0.5s;
  text-align: center;
  color: #ffffff;
}

.GlobalNavi li a {
  font-size: 12px;
  text-align: center;
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  text-decoration: none;
  color: #0070be; /* 白ヘッダー上で視認できる色に */
  border-bottom: 1px solid transparent;
  transition: 0.5s;
}

.TopSpace {
  margin: 0px 0 0 0;
}

.GlobalNavi li a:hover {
  color: #005fa3; /* 濃いめのブルーに */
  border-bottom: 1px solid transparent;
}

.ContactBT {
  color: #ffffff;
  padding: 0px 10px 0px 10px;
  background-color: #b6ab88;
  border-radius: 10px;
}

/* Contact CTA buttons (replacing image buttons) */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  min-height: 64px;
  padding: 16px 22px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
  box-shadow: none;
  border: 2px solid currentColor; /* 線のあるボタン */
  background: transparent;
  box-sizing: border-box;
  margin: 8px 12px; /* ボタン間の余白（左右にも余白） */
}
.cta-btn:focus {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
.cta-btn:hover {
  box-shadow: none;
}
.cta-btn:active {
  box-shadow: none;
}

/* Icon before text using CSS mask (supported on modern browsers including iOS Safari) */
.cta-btn::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.cta-btn--mail {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.cta-btn--mail:hover {
  background: #ffffff; /* 反転 */
  color: #0a4da2;
  border-color: #0a4da2;
}
.cta-btn--mail::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-1.4 3L12 12.25 5.4 7h13.2zM20 18H4V8.5l8 6 8-6V18z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-1.4 3L12 12.25 5.4 7h13.2zM20 18H4V8.5l8 6 8-6V18z"/></svg>');
}

.cta-btn--tel {
  background: #0070be;
  color: #ffffff;
  border-color: #ffffff;
}
.cta-btn--tel:hover {
  background: #005fa3;
  color: #ffffff;
  border-color: #ffffff;
}
.cta-btn--tel::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M6.62 10.79a15.464 15.464 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.25c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.07 22 2 13.93 2 3a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M6.62 10.79a15.464 15.464 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.25c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.07 22 2 13.93 2 3a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z"/></svg>');
}

/* ContactBG上の配色: mailはアウトライン、telは塗り */
.ContactBG .cta-btn--mail {
  background: rgba(255,255,255,0.95);
  color: #0a4da2;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.ContactBG .cta-btn--mail:hover {
  background: #ffffff;
  color: #083e85;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.ContactBG .cta-btn--tel {
  background: #0070be;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.ContactBG .cta-btn--tel:hover {
  background: #005fa3;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

@media (max-width: 768px) {
  .cta-btn {
    min-height: 56px;
    padding: 14px 18px;
    max-width: 320px; /* SPは幅を制限して縦積み */
    font-size: 16px;
    border-radius: 0; /* 角丸なし */
  }
}

/* PCではボタン文言を折り返さない（レイアウト崩れ防止） */
@media (min-width: 769px) {
  .cta-btn {
    white-space: nowrap;
  }
}

#SubNavi {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

#SubNavi li {
  font-size: 10px;
  width: 20%;
  display: block;
  margin: 0 0 0 0;
  padding: 0px;
  float: left;
  font-weight: 600;
  background-color: #63843e;
  border-right: 1px solid #ffffff;
  box-sizing: border-box;
}

#SubNavi li a {
  display: block;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  text-decoration: none;
  color: #ffffff;
}

#SubNavi li a:hover {
}

/************/

/*****ニュース&FACEBOOK囲む*******/
#ALLNEWSFACEBOX {
  width: 100%;
  min-width: 1000px;
  margin: 50px 0 0 0;
  float: left;
}

.InstaBox {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: center;
  float: left;
  box-sizing: border-box;
  background-color: #f4f2f1;
}

/****ニュース******/

#NEWSWrapper {
  width: 100%;
  max-width: 1000px;
  margin: 30px auto;
  padding: 0 0 0 0;
  text-align: center;
}

/**新着情報**/
.NewsALLBox {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 20px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.NewsBoxIMG {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 0px;
  text-align: left;
  float: left;
  position: relative;
}

.NewsBox {
  width: 100%;
  margin: 50px 0 100px 0;
  padding: 0 0 0 0;
  text-align: left;
  float: left;
  position: relative;
}

.NewsMidashi {
  font-size: 24px;
  color: #6d7909;
  line-height: 1.3;
  width: 100%;
  margin: 0px 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  float: left;
  border-bottom: 3px solid #f6f6f6;
}

.NewsBoxLL {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.NewsBoxRR {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.NewsBoxL {
  width: 100%;
  margin: 0 0 0 0;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
  position: relative;
}

.NewsBoxR {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 10px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

#NewsList {
  display: inline;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
  text-align: left;
}

#NewsList li {
  text-align: left;
  font-size: 10px;
  color: #ffffff;
  width: 33.3%;
  margin: 20px 0 0 0;
  padding: 10px;
  list-style-type: none;
  overflow: hidden;
  float: left;
  box-sizing: border-box;
  transition: 0.5s;
}

#NewsList a:link,
#NewsList a:visited,
#NewsList a:hover {
  color: #ffffff;
  text-decoration: none;
  transition: 0.5s;
}

#NewsList a:hover {
  color: #7dbd48;
  text-decoration: underline;
  transition: 0.5s;
}

.NewsPhoto {
  width: 100%;
  margin: 0 0 0 0;
  float: left;
  position: relative;
}

.NewsTimeBox {
  font-size: 14px;
  color: #333;
  width: 100%;
  margin: 0 0 0 0;
  padding: 5px;
  box-sizing: border-box;
  text-align: left;
  float: left;
}

.TenpoIcon {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: left;
  position: absolute;
  left: 10px;
  top: 10px;
}

.NewsTimeBoxA {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  float: left;
  line-height: 1.2;
}

.NewsTimeBoxB {
  font-size: 24px;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  float: left;
  line-height: 1.2;
}

.NewsTextBox {
  color: #000000;
  width: 100%;
  margin: 0 0 0 0;
  text-align: left;
  float: left;
  font-size: 12px;
}

.NewsBT {
  width: 100%;
  max-width: 100px;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: right;
  font-weight: 600;
  position: absolute;
  right: 10px;
  top: 10px;
}

.NewsBT a {
  display: block;
  width: 100%;
  /* 横幅 */
  padding: 0px;
  /* a要素内の余白 */
  box-sizing: border-box;
  color: #000000;
  text-decoration: none;
}

.NewsBT a:hover {
  text-decoration: underline;
}

/**商品新着情報**/

.ItemNewsBox {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px;
  float: left;
  text-align: center;
  box-sizing: border-box;
}

#ItemNewsList {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0px 0;
  float: left;
  text-align: center;
}

#ItemNewsList li {
  text-align: left;
  font-size: 12px;
  color: #ffffff;
  width: 33.3%;
  padding: 10px;
  margin: 20px 0 0 0;
  list-style-type: none;
  overflow: hidden;
  box-sizing: border-box;
  float: left;
  transition: 0.5s;
  position: relative;
}

#ItemNewsList a:link,
#ItemNewsList a:visited,
#ItemNewsList a:hover {
  color: #000000;
  text-decoration: none;
  transition: 0.5s;
}

#ItemNewsList a:hover {
  color: #000000;
  text-decoration: underline;
  transition: 0.5s;
}

.ItemNewsBoxL {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  float: left;
  text-align: center;
  box-sizing: border-box;
}

.ItemNewsBoxR {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  float: left;
  text-align: center;
  box-sizing: border-box;
}

.ItemNewsInfo {
  width: 100%;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0;
  text-align: left;
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: flex;
  align-items: flex-end;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  opacity: 0;
}

.ItemNewsBoxL:hover .ItemNewsInfo {
  opacity: 1;
}

.ItemNewsInfoA {
  width: 100%;
  color: #ffffff;
  font-size: 14px;
  margin: 0 0 0 0;
  padding: 5px;
  float: left;
  text-align: left;
  box-sizing: border-box;
}

/**商品情報**/

.ItemInfoBoxA {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  float: left;
  text-align: left;
  box-sizing: border-box;
}

.ItemInfoBoxAL {
  width: 45%;
  margin: 0 0 0 0;
  padding: 10px;
  float: left;
  text-align: left;
  box-sizing: border-box;
}

.ItemInfoBoxAR {
  width: 55%;
  margin: 0 0 0 0;
  padding: 15px;
  float: left;
  text-align: left;
  box-sizing: border-box;
}

.ItemInfoBoxListA {
  width: 100%;
  font-size: 18px;
  margin: 10px 0 0 0;
  padding: 0px;
  float: left;
  text-align: left;
  box-sizing: border-box;
}

.ItemInfoBoxListB {
  width: 100%;
  font-size: 30px;
  margin: 10px 0 0 0;
  padding: 0px;
  float: left;
  text-align: left;
  box-sizing: border-box;
  border-bottom: 1px solid #a6a6a6;
}

.ItemInfoBoxListC {
  width: 100%;
  margin: 10px 0 0 0;
  padding: 0px;
  float: left;
  text-align: right;
  box-sizing: border-box;
  border-bottom: 1px dotted #a6a6a6;
}

.ItemInfoBoxListD {
  width: 100%;
  font-size: 16px;
  line-height: 1.8;
  margin: 10px 0 0 0;
  padding: 10px;
  float: left;
  text-align: left;
  box-sizing: border-box;
}

.ItemInfoBoxSum {
  width: 100%;
  margin: 10px 0 0 0;
  padding: 10px;
  float: left;
  text-align: left;
  box-sizing: border-box;
}

.ItemInfoBoxSum li {
  text-align: left;
  font-size: 12px;
  color: #ffffff;
  width: 25%;
  padding: 10px;
  margin: 10px 0 0 0;
  list-style-type: none;
  overflow: hidden;
  box-sizing: border-box;
  float: left;
  transition: 0.5s;
}

.ItemInfoBoxB {
  width: 100%;
  line-height: 1.8;
  margin: 10px 0 0 0;
  padding: 10px;
  float: left;
  text-align: left;
  box-sizing: border-box;
}

.ItemInfoBoxC {
  width: 100%;
  margin: 10px 0 0 0;
  padding: 10px;
  float: left;
  text-align: right;
  box-sizing: border-box;
}

.KakakuA {
  font-size: 24px;
}

.KakakuB {
  font-size: 14px;
}

/**施工事例情報**/
.WorksNewsBox {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-align: left;
  float: left;
  position: relative;
}

.WorksNewsMidashi {
  font-size: 24px;
  color: #6d7909;
  width: 100%;
  margin: 0px 0 0 0;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  float: left;
}

.WorksNewsBoxL {
  width: 45%;
  margin: 0 0 0 0;
  padding: 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
  position: relative;
}

.WorksNewsArrow {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0;
  text-align: right;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.UketukeBox {
  font-size: 14px;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0;
  text-align: left;
  position: absolute;
  top: 5px;
  left: 5px;
}

.EventArrow {
  font-size: 14px;
  color: #ffffff;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0;
  text-align: right;
  position: absolute;
  bottom: 5px;
  right: 10px;
}

.YoyakauOn {
  margin: 0 0 0 0;
  padding: 5px;
  font-weight: bold;
  box-sizing: border-box;
  text-align: center;
  color: #ffffff;
  background-color: #f18800;
}

.YoyakauOff {
  margin: 0 0 0 0;
  padding: 5px;
  font-weight: bold;
  box-sizing: border-box;
  text-align: center;
  color: #ffffff;
  background-color: #5d615a;
}

.BlackFilter {
  width: 100%;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: left;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #000000;
  filter: alpha(opacity=50);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=50)";
  /* IE 8,9 */
  -moz-opacity: 0.5;
  /* FF , Netscape */
  -khtml-opacity: 0.5;
  /* Safari 1.x */
  opacity: 0.5;
}

.WorksNewsBoxR {
  width: 55%;
  margin: 0 0 0 0;
  padding: 10px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.WorksNewsBoxCate {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px 5px 10px 5px;
  text-align: left;
  float: left;
  box-sizing: border-box;
  border-bottom: 1px solid #000000;
}

.WorksCateBox {
  width: 100%;
  max-width: 80px;
  font-size: 12px;
  color: #ffffff;
  margin: 5px 2px 0px 2px;
  padding: 5px;
  text-align: center;
  box-sizing: border-box;
  background-color: #000000;
  float: left;
}

.WorksNewsBoxRText {
  width: 100%;
  font-size: 16px;
  margin: 10px 0 0 0;
  padding: 3px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.WorksNewsBoxRBT {
  width: 20%;
  margin: 0 0 0 0;
  padding: 3px;
  text-align: center;
  float: left;
  box-sizing: border-box;
}

.WorksNewsBoxRTextA {
  line-height: 1.3;
  font-size: 18px;
  width: 100%;
  margin: 0px 0 0 0;
  padding: 3px;
  box-sizing: border-box;
  float: left;
  text-align: left;
  color: #484747;
}

.WorksNewsBoxRTextB {
  line-height: 1.3;
  font-size: 18px;
  width: 100%;
  margin: 5px 0 0 0;
  padding: 3px;
  box-sizing: border-box;
  float: left;
  text-align: left;
  color: #484747;
}

.WorksNewsBoxRTextC {
  line-height: 1.3;
  font-size: 14px;
  width: 100%;
  margin: 5px 0 0 0;
  padding: 3px;
  box-sizing: border-box;
  float: left;
  text-align: left;
  color: #484747;
}

.WorksNewsBoxRTextD {
  line-height: 1.3;
  font-size: 14px;
  color: #484747;
  width: 100%;
  margin: 10px 0 0 0;
  padding: 3px;
  box-sizing: border-box;
  float: left;
  text-align: right;
}

#WorksNewsList {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0px 0;
  float: left;
  text-align: center;
}

#WorksNewsList li {
  text-align: left;
  font-size: 12px;
  color: #ffffff;
  width: 50%;
  padding: 10px;
  margin: 20px 0 0 0;
  list-style-type: none;
  overflow: hidden;
  box-sizing: border-box;
  float: left;
  transition: 0.5s;
  position: relative;
}

#WorksNewsList a:link,
#WorksNewsList a:visited,
#WorksNewsList a:hover {
  color: #000000;
  text-decoration: none;
  transition: 0.5s;
}

#WorksNewsList a:hover {
  color: #000000;
  text-decoration: underline;
  transition: 0.5s;
}

.WorksNewsPhoto {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.WorksNewsTextBox {
  color: #000000;
  width: 100%;
  margin: 3px 0 0 0;
  text-align: left;
  float: left;
  font-size: 12px;
}

/*施工事例*/
.WorksPageBox {
  width: 100%;
  margin: 20px 0 50px 0;
  padding: 0 0 0 0;
  text-align: left;
  float: left;
  position: relative;
}

.WorksPageBoxL {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: left;
  float: left;
  position: relative;
}

.WorksPageBoxR {
  width: 100%;
  margin: 0px 0 0 0;
  padding: 5px;
  text-align: left;
  float: right;
  box-sizing: border-box;
}

#WorksPageList {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
  text-align: left;
}

#WorksPageList li {
  text-align: left;
  font-size: 10px;
  color: #000000;
  width: 25%;
  padding: 10px;
  margin: 30px 0 0 0;
  list-style-type: none;
  overflow: hidden;
  box-sizing: border-box;
  float: left;
}

#WorksPageList a:link,
#WorksPageList a:visited,
#WorksPageList a:hover {
  color: #000000;
  text-decoration: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

#WorksPageList a:hover {
  color: #5a5a5a;
  text-decoration: underline;
}

.WorksPagePhoto {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

.WorksPageCate {
  font-size: 10px;
  margin: 0 0 0 0;
  padding: 5px;
  background-color: #820000;
  color: #ffffff;
  box-sizing: border-box;
}

/****お客様の声***/
.VoiceNewsBox {
  width: 100%;
  margin: 20px 0 100px 0;
  padding: 0 0 0 0;
  text-align: left;
  float: left;
  position: relative;
}

.VoiceNewsBoxL {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

.VoiceNewsBoxR {
  width: 100%;
  margin: 5px 0 0 0;
  padding: 0px;
  text-align: left;
  float: left;
  box-sizing: border-box;
}

#VoiceNewsList {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0px 0;
  float: left;
  text-align: left;
}

#VoiceNewsList li {
  text-align: left;
  font-size: 10px;
  color: #000000;
  width: 50%;
  padding: 30px;
  margin: 0px;
  list-style-type: none;
  overflow: hidden;
  box-sizing: border-box;
  float: left;
}

#VoiceNewsList a:link,
#VoiceNewsList a:visited,
#VoiceNewsList a:hover {
  color: #000000;
  text-decoration: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

#VoiceNewsList a:hover {
  color: #5a5a5a;
  text-decoration: underline;
}

.VoiceNewsPhoto {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
}

/*縦書き*/
.Tategaki {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -o-writing-mode: vertical-rl;
  writing-mode: vertical-rl;

  text-orientation: upright;

  display: inline-block;
  padding: 1em 0;
  box-sizing: border-box;
  font-size: 1vw;
  text-align: left;
  max-height: 300px;
  line-height: 1.3;
}

.TategakiBox {
  text-align: center;
}

/*****スマホ・タブレット対応********/
@media screen and (max-width: 960px) {
  .MainFont {
    font-size: 14px;
  }

  .SubFont {
    font-size: 10px;
  }

  #headerBoxL {
  }

  #headerBoxR {
  }

  .headerBoxSub {
    display: none;
  }

  .headerBoxSubB {
    display: block;
  }

  .GlobalWrapper {
  }

  .GlobalWrapperR {
    max-width: 140px;
  }

  .GlobalNavi {
  }

  .GlobalNavi li a {
    padding: 5px 5px 5px 5px;
  }

  .FooterMapBoxR {
  }

  .TOPCABOXL {
    width: 100%;
    text-align: center;
    margin: 0 0 0 0;
    float: left;
  }

  .TOPCABOXR {
    width: 100%;
    text-align: left;
    padding: 10px;
    margin: 20px 0 0 0px;
    float: left;
    background-color: #ffffff;
    box-sizing: border-box;
    position: static;
  }

  .TOPbCABOXL {
    width: 100%;
    text-align: center;
    margin: 0 0 0 0;
    float: left;
  }

  .TOPbCABOXR {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-size: 22px;
    color: #595757;
    text-align: center;
    margin: 10px 0 0px 0;
    float: left;
  }

  .CONCEPTaBOXL {
    width: 100%;
    text-align: center;
    margin: 0 0 0 0;
    float: left;
  }

  .CONCEPTaBOXR {
    width: 100%;
    text-align: left;
    padding: 10px;
    margin: 0px 0 0 0px;
    float: left;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .CONCEPTbBOXL {
    width: 100%;
    text-align: left;
    padding: 10px;
    margin: 20px 0 0 0px;
    float: left;
    background-color: #ffffff;
    box-sizing: border-box;
    position: static;
  }

  .CONCEPTbBOXR {
    width: 100%;
    text-align: center;
    margin: 0 0 0 0;
    float: left;
  }

  .CONCEPTBG {
    width: 100%;
    text-align: center;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    float: left;
  }

  .CONCEPTBGA {
    padding: 10px;
  }

  .CONCEPTBGAL {
    width: 100%;
  }

  .CONCEPTBGAR {
    width: 100%;
  }

  .CONCEPTLIST {
    width: 100%;
    text-align: center;
    padding: 10px;
    margin: 0 0 0 0;
    float: left;
    box-sizing: border-box;
  }

  .CONCEPTLIST li {
    display: block;
    float: left;
    width: 100%;
    margin: 20px 0 20px 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
  }

  .CONCEPTLIST li:nth-child(2) {
    border-top: 1px solid #cabe9a;
    border-left: 0px solid #cabe9a;
    border-right: 0px solid #cabe9a;
  }

  .CONCEPTLIST li:nth-child(3) {
    padding: 10px 0 0 0;
    border-top: 1px solid #cabe9a;
    border-left: 0px solid #cabe9a;
    border-right: 0px solid #cabe9a;
  }

  .CONCEPTLIST li:nth-child(4) {
    padding: 10px 0 0 0;
    border-top: 1px solid #cabe9a;
    border-left: 0px solid #cabe9a;
    border-right: 0px solid #cabe9a;
  }

  .CONCEPTLISTA {
    font-size: 20px;
  }

  .CONCEPTLISTB {
    font-size: 14px;
  }

  .CONCEPTLISTC {
    width: 100%;
    text-align: center;
    padding: 5px;
    margin: 0 0 0 0;
    float: left;
    box-sizing: border-box;
  }

  .ARTBOXA {
    margin: 60px 0 0 0;
    float: left;
    box-sizing: border-box;
  }

  .ARTBOXL {
    width: 100%;
    text-align: left;
    padding: 10px;
    margin: 0 0 0 0;
    float: left;
    box-sizing: border-box;
  }

  .ARTBOXR {
    width: 100%;
    text-align: left;
    padding: 10px;
    margin: 0 0 0 0;
    float: left;
    box-sizing: border-box;
  }

  .ARTBOXRA {
    width: 100%;
    text-align: left;
    padding: 0px;
    margin: 0px 0 0 0;
    float: left;
    box-sizing: border-box;
    font-size: 24px;
    color: #820000;
  }

  .ARTBOXRB {
    margin: 0px 0 0 0;
    font-size: 14px;
  }

  .ARTBOXBA {
    font-size: 18px;
  }

  .ARTBOXBB {
    font-size: 14px;
  }

  .evecover {
    padding-top: 60%;
  }

  .EveBox li {
    width: 100%;
  }

  .EveBoxL {
    width: 100%;
  }

  .EveBoxR {
    width: 100%;
  }

  /***コンテンツボタン****/
  .ContentsBT {
    width: 50%;
    float: left;
    padding: 10px;
    margin: 0px 0 0 0;
    box-sizing: border-box;
  }

  #NewsList li {
    width: 50%;
  }

  #WorksNewsList li {
    width: 100%;
    margin: 25px 0 0 0;
  }

  .WorksNewsBoxRTextA {
    font-size: 16px;
  }

  .WorksNewsBoxRTextB {
    font-size: 14px;
  }
}

/* ==============================
	 Front page hero adjustments
	 - Full-bleed hero
	 - Remove list markers on slides
	 - Responsive height and text positioning
	 Scoped to front page to avoid side effects
	 ============================== */
body.front-page #container,
body.home #container {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
}

body.front-page .flexslider .slides,
body.front-page .flexslider .slides li,
body.home .flexslider .slides,
body.home .flexslider .slides li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Hero slide sizing */
body.front-page .hero-slide,
body.home .hero-slide {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: clamp(420px, 80vh, 860px);
  /* Ensure inner absolute media doesn't overflow */
  overflow: hidden;
}

body.front-page .hero-visual,
body.home .hero-visual {
  /* Fill the slide and stay behind text */
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  height: 100%;
}

body.front-page .hero-visual img,
body.home .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Make sure the HTML5 video behaves like a background */
body.front-page .hero-visual .hero-video,
body.home .hero-visual .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* keep overlay text clickable */
}

/* Overlay text centering and responsive tweak */
body.front-page .SlideText,
body.home .SlideText {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 2; /* above video */
}

@media (max-width: 768px) {
  body.front-page .hero-slide,
  body.home .hero-slide {
    min-height: clamp(320px, 75vh, 620px);
  }

  body.front-page .SlideText,
  body.home .SlideText {
    padding: 15px;
    top: auto;
    bottom: 40%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    width: 90%;
    max-width: 90%;
  }
}

/* ==============================
	 Company Page Styles
	 ============================== */
.company-section {
  margin-top: 80px;
}

.company-section__title {
  font-size: 32px;
  color: #0070be;
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 15px;
  border-bottom: 2px solid #0070be;
}

.company-info-list,
.company-history-list {
  width: 100%;
  border-top: 1px solid #ddd;
}

.company-info-list__row,
.company-history-list__row {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.company-info-list dt,
.company-history-list dt {
  background-color: #f7fbff;
  font-weight: bold;
  padding: 20px;
  width: 25%;
  box-sizing: border-box;
}

.company-info-list dd,
.company-history-list dd {
  padding: 20px;
  width: 75%;
  box-sizing: border-box;
  margin-left: 0;
}

.business-content-list {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

.business-content-list li {
  margin-bottom: 8px;
}

.company-access {
  display: flex;
  gap: 30px;
  align-items: center;
}

.company-access__map {
  flex: 1.2; /* 地図の幅を少し広めに */
}

.company-access__info {
  flex-basis: 40%;
  line-height: 1.8;
}

.iframe-css-company {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 aspect ratio */
  float: left;
}

.iframe-css-company iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

@media screen and (max-width: 768px) {
  .company-section {
    margin-top: 60px;
  }
  .company-section__title {
    font-size: 24px;
    margin-bottom: 30px;
  }
  .company-info-list__row,
  .company-history-list__row {
    flex-direction: column;
  }
  .company-info-list dt,
  .company-history-list dt,
  .company-info-list dd,
  .company-history-list dd {
    width: 100%;
    padding: 15px;
  }
  .company-access {
    flex-direction: column;
    gap: 20px;
  }

  .company-access__gallery {
    grid-template-columns: 1fr;
  }

  .philosophy-points {
    grid-template-columns: 1fr;
  }
  #page-top-btn {
    right: 15px;
    bottom: 75px; /* SPフッターバーとの重なりを避ける */
  }
}

/* Company Access Gallery */
.company-access__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3カラムレイアウト */
  gap: 20px;
  margin-top: 40px; /* 地図との間に余白を追加 */
}

.company-access__gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Company Philosophy Section */
.company-philosophy__content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.company-philosophy__catchphrase {
  font-size: 24px;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: bold;
  color: #0070be;
  margin-bottom: 40px;
  position: relative;
  display: inline-block;
  padding: 0 20px;
}

.company-philosophy__catchphrase::before,
.company-philosophy__catchphrase::after {
  content: "“";
  font-family: "Times New Roman", Times, serif;
  font-size: 60px;
  color: #a0cfee;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.company-philosophy__catchphrase::before {
  content: "“";
  left: -10px;
}

.company-philosophy__catchphrase::after {
  content: "”";
  right: -10px;
}

.company-philosophy__text {
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
}

.philosophy-intro {
  margin-bottom: 40px;
  text-align: center;
}

.philosophy-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.philosophy-point {
  background-color: #f7fbff;
  padding: 25px;
  border-radius: 8px;
  border-top: 3px solid #0070be;
}

.philosophy-point__title {
  font-size: 18px;
  font-weight: bold;
  color: #0070be;
  margin-bottom: 15px;
}

.philosophy-conclusion {
  text-align: center;
  font-weight: bold;
}
/* ==============================
	 Contact Page Styles
	 ============================== */
.contact-form-wrapper {
  margin-top: 60px;
}

.contact-form-lead {
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.8;
}

.form-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #ddd;
}

.form-table th,
.form-table td {
  padding: 20px;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

.form-table th {
  width: 25%;
  font-weight: bold;
  background-color: #f7fbff;
  text-align: left;
}

.form-table td {
  width: 75%;
}

.form-required {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: normal;
  color: #fff;
  background-color: #d9534f;
  border-radius: 3px;
  vertical-align: middle;
}

.form-table input[type="text"],
.form-table input[type="email"],
.form-table input[type="tel"],
.form-table textarea {
  width: 100%;
  max-width: 480px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.form-table textarea {
  max-width: 100%;
}

.form-address {
  display: flex;
  gap: 10px;
}

/* Page Top Button */
#page-top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: 50px;
  height: 50px;
  background-color: #0070be;
  border-radius: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.form-address + .form-address {
  margin-top: 15px;
}
.form-address__label {
  flex-shrink: 0;
}

.privacy-policy-check {
  margin-top: 40px;
  text-align: center;
}

#page-top-btn::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: translateY(2px) rotate(45deg);
}
.privacy-policy-check p {
  margin-bottom: 15px;
}
.privacy-policy-check a {
  color: #0070be;
  text-decoration: underline;
}
.privacy-policy-check label {
  cursor: pointer;
}
.privacy-policy-check input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
}

.submit-button-wrapper {
  margin-top: 40px;
  text-align: center;
}

.submit-button {
  display: inline-block;
  min-width: 280px;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #0070be;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.submit-button:hover {
  background-color: #005fa3;
}

#page-top-btn:hover {
  background-color: #005fa3;
  transform: translateY(-3px);
}

@media screen and (max-width: 768px) {
  .form-table th, .form-table td { width: 100%; display: block; }
  .form-table th { border-bottom: none; padding-bottom: 10px; }
  .form-table td { padding-top: 0; }
  .form-table input[type="text"], .form-table input[type="email"], .form-table input[type="tel"] { max-width: 100%; }
  .form-address { flex-direction: column; align-items: flex-start; }
}

/************************/

/*****スマホ・タブレット対応********/
@media screen and (max-width: 768px) {
  /**全体のフォント***/
  body {
    font-size: 100%;
    line-height: 1.5;
  }

  /**画像１００％表示***/
  img {
    max-width: 100%;
    height: auto;
    width/***/
		: auto;
  }

  /*コントローラ*/
  .flex-control-nav {
    display: block;
  }

  /************スマホ用ボタン表示非表示*************/
  header {
    visibility: visible;
  }

  .fix-header {
    display: none;
  }

  .fix-footer {
    display: none;
  }

  .SlideText {
    width: 100%;
  }

  .LinkBTARROW {
    font-size: 16px;
  }

  /*************************/
  /*ついてくるボタン*/
  #totop {
    display: none;
  }

  #FixBT {
    display: none;
  }

  #FixBTSP {
    display: block;
  }

  /*ヘッダ全体*/
  #headerWrapper {
    display: none;
  }

  #headerWrapperSP {
    display: block;
  }

  /*PC用グローバルナビ*/
  .GlobalWrapper {
    display: none;
  }

  /***アニメ***/
  .iosSlider {
    display: none;
  }

  .iosSliderSP {
    display: block;
  }

  /***スライド文字****/

  .title-border-rightse {
    font-size: 18px;
  }

  .TopMidashiBox {
  }

  .TopMidashiBoxL {
    width: 20%;
  }

  .TopMidashiBoxR {
    width: 80%;
  }

  .TopMidashiBoxA {
    width: 100%;
    font-size: 24px;
  }

  .TopMidashiIMGA {
    position: absolute;
    top: -50px;
    right: 0;
  }

  /***TOP店舗情報*****/

  .TopPhaBoxALL {
  }

  .TopPhaBoxL {
    width: 100%;
    padding: 10px;
    margin: 30px 0 0 0;
  }

  .TopPhaBoxR {
    width: 100%;
    padding: 10px;
    margin: 30px 0 0 0;
  }

  .TopPhaBoxB {
  }

  .TopPhaBoxMidashi {
    font-size: 24px;
  }

  .TopPhaBoxMidashiA {
  }

  /*****店舗リストボタン******/
  /***********/

  .TenpoListBT {
    width: 100%;
    margin: 0 0 0 0;
    padding: 10px;
    text-align: center;
    float: left;
    box-sizing: border-box;
  }

  .TenpoListBT li {
    list-style: none;
    float: left;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    position: relative;
    box-sizing: border-box;
  }

  /***********/
  /***********/

  /***先輩の声*****/

  .SenpaiBox {
    width: 100%;
    margin: 40px 0 0px 0;
    padding: 0 0 0 0;
    text-align: left;
    float: left;
    box-sizing: border-box;
  }

  .SenpaiBoxA {
    width: 100%;
    font-size: 20px;
    margin: 0px 0 0px 0;
  }

  .SenpaiBoxB {
    width: 100%;
    font-size: 16px;
  }

  .SenpaiBoxC {
    width: 100%;
    font-size: 16px;
    margin: 20px 0 0px 0;
    padding: 5px;
    text-align: left;
    float: left;
    box-sizing: border-box;
  }

  .SenpaiBoxD {
    font-size: 1;
  }
/* --- End of Service Page Styles --- */