@charset "UTF-8";

/*
******************
common/style.css
******************
*/
/* reset css-------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}

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

ul,
ol {
  list-style: none;
}

a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  text-decoration: none;
  color: inherit;
}

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

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

/*
*************************************************
common_css
*************************************************
*/
* {
  font-family: "ヒラギノ角ゴ ProN", sans-serif;
}

section {
  margin: 0 0 50px 0;
}

.body {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.wrap {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}

img {
  width: 100%;
}

.max_img {
  width: 100%;
}

/* header------------------------ */
header h1 {
  position: absolute;
  top: 0;
  left: 0;
}

header h1 img {
  width: 300px;
}

/*headerのロゴマークとナビ*/
.header-nav {
  display: flex;
  justify-content: space-between
}

.menu-tab {
  background-color: #ffffff;
  padding: 5px 5px 0;
  min-height: 35px;
  opacity: 0.6;
  text-align: center;
  margin-top: 18px;
  margin-right: 20px;
  width: 9em
}

.menu-tab p {
  font-size: 17px;
  font-weight: bold;
  padding-bottom: 0;
}

/* footer------------------------ */
footer {
  width: 100%;
  background: #ededed;
  padding: 20px 0;
  font-size: 12px;
  margin-top: 80px;
}

/* topへ戻る */
#page_top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #666;
  opacity: 0.6;
}

#page_top a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

#page_top a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

.pagenation {
  width: 100%;
  height: 50px;
}

.pagenation a {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #666;
  box-sizing: border-box;
}

.pagenation a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f107';
  font-size: 25px;
  color: #666;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  left: 20px;
  margin: auto;
  text-align: center;
}

/* h------------------------ */
h3 {
  font-size: 36px;
  margin-bottom: 20px;
}

h4 {
  border-bottom: 1px solid #666;
  padding: 0 0 10px 14px;
  margin: 0 0 30px 0;
  font-size: 28px;
  border-left: 5px solid #c1dd78;
}

h5 {
  font-size: 20px;
  margin-bottom: 30px;
  font-weight: bold;
  background: #ededed;
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

h6 {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

h4.ler {
  background: #d3e6f6;
  border-left: 5px solid #4694d1;
  padding: 13px 20px;
  font-size: 28px;
  border-bottom: none;
  color: #000;
}

.h4_1 {
  font-size: 25px;
  margin-bottom: 30px;
  font-weight: bold;
}

.h5_1 {
  margin: 0 0 20px 0;
  font-size: 20px;
  background: none;
  padding: 0;
}

.h5_1::before {
  content: '■';
  color: #c1dd78;
  margin: 0 5px 0 0;
}

.h5_2 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #c1dd78;
}

.h5_3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  background: none;
  padding: 0;
}

.h5_4 {
  margin: 0 0 20px 0;
  font-size: 20px;
  background: none;
  padding: 0;
}

.h5_4 a::before {
  margin: 0 5px 2px 0;
  content: url("/common/images/shared/arrow/right01.png");
}

.kaihatu {
  color: #fff;
  background: red;
  padding: 3px 10px;
  border-radius: 20px;
  position: absolute;
  right: 10px;
  top: 12px;
  font-size: 14px;
}

/* リスト */
ul.dot {
  list-style: disc;
  margin: 0 0 0 1.5em;
}

ul.dot li {
  list-style: disc;
}

ul.dot.flex_li {
  display: flex;
  justify-content: flex-start;
  list-style: disc;
  flex-wrap: wrap;
}

ul.dot.flex_li li {
  margin: 0 50px 10px 0;
  list-style: disc;
}

/* レイアウト------------------------ */
.col2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
}

.col2.center {
  justify-content: center;
}

.col2.wid {
  margin-bottom: 0px;
}

.col2.wid>div {
  width: 48%;
}

.col2 .midle {
  align-items: center;
}

.col2.midle {
  align-items: center;
}

.reflex {
  flex-flow: row-reverse;
  flex-wrap: wrap;
}

/* box------------------------ */
.box1 {
  color: #fff;
  padding: 20px;
  text-align: center;
  background: #00460f;
  font-size: 25px;
  font-weight: bold;
}

.box2 {
  padding: 20px;
  background: rgb(213, 243, 252);
  box-sizing: border-box;
}

.box3 {
  background: #8bba2d;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  font-weight: bold;
}

.box4 {
  border-radius: 10px;
  border: 3px solid #8bba2d;
  margin: 0 0 40px 0;
  background: rgb(244, 250, 231);
}

.box4 .col2 {
  align-items: center;
}

.box4 p {
  padding: 30px 0 30px 30px;
}

.box4 img {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.movie div.col2>div {
  width: 22%;
}

.movie img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.movie img:hover {
  opacity: 0.6;
}

/* fade------------------------ */
.effect-fade {
  opacity: 0;
  transform: translate(0, 45px);
  transition: all 1000ms;
}

.effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

/* table------------------------ */
table {
  width: 100%;
}

table,
tr,
th,
td {
  border: 1px solid #666;
  font-size: 14px;
}

th,
td {
  padding: 4px 2px;
  vertical-align: middle;
  font-weight: normal;
}

td {
  text-align: center;
}

table.mtb1 th,
table.mtb1 td {
  padding-top: 7px;
  padding-bottom: 7px;
}

table.no_brd,
.no_brd tr,
.no_brd th,
.no_brd td,
.no_brd tbody {
  border: none;
  font-size: 16px;
}

table.no_brd.note,
.no_brd.note tr,
.no_brd.note th,
.no_brd.note td,
.no_brd.note tbody {
  font-size: 12px;
}

.no_brd th,
.no_brd td {
  padding: 0px;
  vertical-align: top;
}

.no_brd td {
  text-align: left;
}

.no_brd .wid {
  white-space: nowrap;
  width: 100px;
}

.red {
  color: red;
}

.green {
  color: #2e653a;
}

.blue {
  color: #036eb8;
}

.txt_c {
  text-align: center;
}

.txt_l {
  text-align: left;
}

.txt_r {
  text-align: right;
}

.txt_b {
  font-weight: bold;
  margin: 0 0 20px 0;
}

.txt120 {
  font-size: 120%;
}

.note {
  font-size: 12px;
}

.bg_g {
  background: #daebc4;
}

.bg_b {
  background: #f5f2e9;
}

.bg_h {
  background: #ededed;
}

.bg_th {
  background: #f1a3a3;
}

.bg_td {
  background: #fff5f5;
}

.ico {
  background: #8fc31f;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  padding: 5px;
  display: inline-block;
}

/* mail------------------------ */
.mail {
  color: #46b2e7;
}

.mail:hover {
  text-decoration: underline;
}

/*
*************************************************
事例common
*************************************************
*/
/* main------------------------ */
.main {
  position: relative;
  min-height: 300px;
  margin: 0 0 30px 0;
}

.main .wrap {
  min-height: 240px;
}

.main .wrap div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* min-height: 240px;*/
  justify-content: flex-end;
}

.main h2 {
  color: #fff;
  display: block;
  width: 100%;
  font-size: 210%;
  margin: 20px 0 0 0;
}

.main h2 span {
  font-size: 12px;
  display: block;
  width: 100%;
  margin: 0;
}

/* menu------------------------ */
.menu {
  display: flex;
  width: 100%;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
}

.menu li {
  width: 33.3333333%;
  text-align: center;
}

.menu a {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  display: block;
  /* padding: 14px; */
  background: #666;
  transition: all .4s;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu li.active a,
.menu li a:hover {
  background: #000;
}

/* パンくず------------------------ */
.branch {
  display: flex;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.branch li {
  margin: 0 10px 0 0;
  padding: 0 20px 0 0;
  font-size: 12px;
  display: inline-block;
  position: relative;
}

.branch li a {
  font-size: 12px;
  color: #666;
  display: inline-block;
}

.branch li a::after {
  content: '›';
  color: #666;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  font-size: 1em;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.branch li a:hover {
  text-decoration: underline;
}

/* リード------------------------ */
.read {
  display: flex;
  margin-bottom: 30px;
  align-items: center;
  flex-wrap: wrap;
}

.read>div:first-child {
  width: 30%;
  margin-right: 2%;
}

.read>div:last-child {
  width: 68%;
}

.read img {
  width: 100%;
}

.read p {
  font-size: 26px;
}

/*
*************************************************
事例_各TOPページ
*************************************************
*/
.item_list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

.item_list>div {
  width: 22%;
}

.item_list img {
  width: 100%;
  margin-bottom: 10px;
}

.item_list h3 {
  font-size: 18px;
  margin-bottom: 23px;
  min-height: 3em;
}

.item_list p {
  font-size: 16px;
  line-height: 1.7em;
  margin-bottom: 14px;
}

.item_list ul {
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.item_list ul li {
  padding-left: 1em;
  text-indent: -.7em;
  margin-bottom: 8px;
}

.item_list ul li::before {
  content: "● ";
  color: #c1dd78;
  font-size: 10px;
}

.item_list a {
  transition: all .4s;
}

.item_list a:hover {
  opacity: 0.6;
}

.txt120per {
  font-size: 120%;
}

.txt140per {
  font-size: 140%;
}

/*
*************************************************
PC用css
*************************************************
*/
@media only screen and (min-width: 769px) {
  .sp {
    display: none;
  }

  .w3 {
    width: 3%;
  }

  .w5 {
    width: 5%;
  }

  .w6 {
    width: 6%;
  }

  .w8 {
    width: 8%;
  }

  .w10 {
    width: 10%;
  }

  .w19 {
    width: 19%;
  }

  .w20 {
    width: 20%;
  }

  .w22 {
    width: 22%;
  }

  .w26 {
    width: 26%;
  }

  .w28 {
    width: 28%;
  }

  .w30 {
    width: 30%;
  }

  .w32 {
    width: 32%;
  }

  .w34 {
    width: 34%;
  }

  .w35 {
    width: 35%;
  }

  .w36 {
    width: 36%;
  }

  .w38 {
    width: 38%;
  }

  .w40 {
    width: 40%;
  }

  .w42 {
    width: 42%;
  }

  .w46 {
    width: 46%;
  }

  .w45 {
    width: 45%;
  }

  .w48 {
    width: 48%;
  }

  .w50 {
    width: 50%;
  }

  .w52 {
    width: 52%;
  }

  .w56 {
    width: 56%;
  }

  .w58 {
    width: 58%;
  }

  .w60 {
    width: 60%;
  }

  .w64 {
    width: 64%;
  }

  .w66 {
    width: 66%;
  }

  .w68 {
    width: 68%;
  }

  .w70 {
    width: 70%;
  }

  .w80 {
    width: 80%;
  }

  .w90 {
    width: 90%;
  }

  .w100 {
    width: 100%;
  }

  .mt0 {
    margin-top: 0px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .mt20 {
    margin-top: 20px;
  }

  .mt30 {
    margin-top: 30px;
  }

  .mt40 {
    margin-top: 40px;
  }

  .mt50 {
    margin-top: 50px;
  }

  .mt60 {
    margin-top: 60px;
  }

  .mt70 {
    margin-top: 70px;
  }

  .mt80 {
    margin-top: 80px;
  }

  .mt90 {
    margin-top: 90px;
  }

  .mt100 {
    margin-top: 100px;
  }

  .mb0 {
    margin-bottom: 0px;
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .mb20 {
    margin-bottom: 20px;
  }

  .mb30 {
    margin-bottom: 30px;
  }

  .mb40 {
    margin-bottom: 40px;
  }

  .mb50 {
    margin-bottom: 50px;
  }

  .mb60 {
    margin-bottom: 60px;
  }

  .mb70 {
    margin-bottom: 70px;
  }

  .mb80 {
    margin-bottom: 80px;
  }

  .mb90 {
    margin-bottom: 90px;
  }

  .mb100 {
    margin-bottom: 100px;
  }

  .mr10 {
    margin-right: 10px;
  }

  .mr20 {
    margin-right: 20px;
  }
}

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

  /* common------------------------------ */
  .pc {
    display: none !important;
  }

  footer {
    text-align: center;
  }

  .w10sp {
    width: 10%;
  }

  .w20sp {
    width: 20%;
  }

  .w30sp {
    width: 30%;
  }

  .w40sp {
    width: 40%;
  }

  .w50sp {
    width: 50%;
  }

  .w60sp {
    width: 60%;
  }

  .w70sp {
    width: 70%;
  }

  .w80sp {
    width: 80%;
  }

  .w90sp {
    width: 90%;
  }

  .w100sp {
    width: 100%;
  }

  .mt0sp {
    margin-top: 0px;
  }

  .mt10sp {
    margin-top: 10px;
  }

  .mt20sp {
    margin-top: 20px;
  }

  .mt30sp {
    margin-top: 30px;
  }

  .mt40sp {
    margin-top: 40px;
  }

  .mt50sp {
    margin-top: 50px;
  }

  .mt60sp {
    margin-top: 60px;
  }

  .mt70sp {
    margin-top: 70px;
  }

  .mt80sp {
    margin-top: 80px;
  }

  .mt90sp {
    margin-top: 90px;
  }

  .mt100sp {
    margin-top: 100px;
  }

  .mb0sp {
    margin-bottom: 0px;
  }

  .mb10sp {
    margin-bottom: 10px;
  }

  .mb20sp {
    margin-bottom: 20px;
  }

  .mb30sp {
    margin-bottom: 30px;
  }

  .mb40sp {
    margin-bottom: 40px;
  }

  .mb50sp {
    margin-bottom: 50px;
  }

  .mb60sp {
    margin-bottom: 60px;
  }

  .mb70sp {
    margin-bottom: 70px;
  }

  .mb80sp {
    margin-bottom: 80px;
  }

  .mb90sp {
    margin-bottom: 90px;
  }

  .mb100sp {
    margin-bottom: 100px;
  }

  .pb60sp {
    padding-bottom: 60px;
  }

  .rotate {
    transform: rotate(90deg);
  }

  /* headerー------------------------------ */
  header h1 img {
    width: 50%;
  }

  /* footer------------------------------ */
  footer {
    padding: 20px 0;
    margin-top: 30px;
  }

  /* メイン画像------------------------------ */
  .main {
    min-height: 430px;
    margin-bottom: 30px;
  }

  /* レイアウト------------------------------ */
  .wrap {
    position: relative;
    margin: 0 auto;
    width: 90%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .col2 {
    flex-wrap: wrap;
  }

  .col2.revers,
  .revers {
    flex-wrap: wrap-reverse;
  }

  .col2>div .col2 {
    display: block;
  }

  .col2>div {
    width: 100%;
  }

  .col2.wid>div {
    width: 100%;
  }

  /* menu------------------------------ */
  .menu {
    display: block;
    width: 100%;
  }

  .menu li {
    width: 100%;
    text-align: center;
  }

  .menu a {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    border-bottom: 1px solid #fff;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* パンくず------------------------------ */
  .branch li {
    margin-bottom: 5px;
  }

  /* 事例TOP------------------------------ */
  .item_list {
    display: block;
    margin-bottom: 20px;
  }

  .item_list>div {
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid #666;
    padding-bottom: 20px;
  }

  .item_list>div.bdr_bm_none {
    margin-bottom: 0px;
    border-bottom: none;
  }

  .movie div.col2>div {
    width: 100%;
  }

  /* table------------------------------ */
  .scroll table {
    width: 100%;
  }

  .scroll {
    overflow: auto;
    white-space: nowrap;
  }

  .scroll::-webkit-scrollbar {
    height: 5px;
  }

  .scroll::-webkit-scrollbar-track {
    background: #F1F1F1;
  }

  .scroll::-webkit-scrollbar-thumb {
    background: #BCBCBC;
  }

  .read {
    display: block;
  }

  .read>div:first-child {
    width: 100%;
    margin-right: 0;
  }

  .read>div:last-child {
    width: 100%;
  }
}

@media all and (-ms-high-contrast: none) {

  /* IE10 以降 */
  .main h2 {
    margin: 116px 0 0 0;
  }

  .main_read {
    margin-top: 120px;
  }
}