@charset "UTF-8";

/*=============================
　common → 共通★骨組み
　style → 共通★修飾
　pagename* → 各ページ
　2020.09.07........... ver0.0
=============================*/

/* ========== 下層ページ共通要項（個別設定は各ページcss） ====== */

/* iosバグ調整 */
.ios .mainVisual::after,
.ipad .mainVisual::after,
.ipod .mainVisual::after,
.iphone .mainVisual::after {
  background-attachment: inherit;}

/* パンくずリスト */
.breadcrumb { padding: .5rem 0rem;}
.breadcrumb li { font-size: 10px;color:#fafafa;}
@media (min-width: 576px) {
  .breadcrumb { padding: .75rem 1rem;}
  .breadcrumb li { font-size: 12px;} 
}

h1 { 
  padding: 0 1.8rem;
  margin-bottom: 1rem;}

.txt_title_pagetitle {
  font-size: .6rem;
  color: #000;
  margin-bottom: 0;}
.title_pagetitle {
  position: relative;
  width: 6rem;
  margin-top: -10rem;
  padding: 1rem .2rem;
  background-color:rgba(255,253,253,.9);}
@media (min-width: 768px) {
  .title_pagetitle {
    width: 8rem;}
}
@media (min-width: 992px) {
  .txt_title_pagetitle {
    font-size: 1.4rem;}
  .title_pagetitle {
    width: 16rem;
    margin-top: -15rem;
    padding: 2rem .2rem;}
}

.header-content {
  height: 80px;
  display: flex;
  justify-content: center;}
.header-content img {
  max-width: inherit;
  min-width: 100%;
  height: 100%;}
@media (min-width: 768px) {
  .header-content {
    height: 150px;}
}
@media (min-width: 992px) { 
  .header-content {
    height: 300px;}
}


.txt_main {
  display: flex;
  justify-content: center;
}
.txt_main_img {
  position: relative;
  margin: auto;
  padding-bottom: 1rem;
  z-index: 99;}
@media (min-width: 768px) {
  .txt_main_img {
    width: 62px;}
}
@media (min-width: 992px) { 
  .txt_main_img {
    width: 86px;
    margin: auto;
    margin-bottom: 2rem;}}

.top-bg_img {
  background: url(../images/bg_mon20.svg) no-repeat -56px -84px;
  background-size: 56%;}

.bg_mon20 {position: relative;}
.bg_mon20::before {
    content: '';
    background: url(../images/bg_mon20.svg);
    width: 40vw;
    height: 40vw;
    position: absolute;
    bottom: 0;
    right: -50px;
    z-index: -1;}
@media (min-width: 992px){
.bg_mon20::before {
  width: 400px;
  height: 400px;}}


.txt_be-01 h4::before {
  content: "\e903";
  font-size: .8em;
  font-family: 'logo' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}




/*=============================
　 基本レイアウトBOX 
=============================*/

.contact_info .ico-accent-mark {
  text-align: center;
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin: 0px auto 10px;}

[class^="box_img_0"] {
  width: 100%;
  height: 200px;
  margin-bottom: 40px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;}
@media (min-width: 576px) {
  [class^="box_img_0"] {
    height: 400px;
    margin-bottom: 0;
    flex: 0 1 50%;} 
}
@media (min-width: 768px) {
  .box_img_right { order: 2;}
}


@media (min-width: 992px) {
  [class^="box_img_0"] {
    max-width: 600px;
    margin-left: auto;}
  .box_img_02,
  .box_img_04,
  .box_img_06,
  .box_img_08 {
    margin-left: 0;
    margin-right: auto;}
}


.box_img_left::before {
  left: -15px;
  background: url("../images/img_kumo-left.svg");
  background-repeat: no-repeat;}
.box_img_right::before {
  right: -15px;
  background: url("../images/img_kumo-right.svg");
  background-repeat: no-repeat;}
.box_img_left::before,
.box_img_right::before {
  content: '';
  opacity: .3;
  position: absolute;
  top: -38%;
  background-size: contain;
  width: 200px;
  height: 100px;}

.txt_box_01 { 
  margin-bottom: 100px;
  padding: 40px 15px 20px;}
.box_01-txt {
  color: #fafafa;
  position: relative;
  z-index: 99;}

@media (min-width: 576px) {
  .txt_box_01 { 
    display: flex;
    padding: 40px 0 20px;}
  .box_01-txt {
    width: 77%;
    margin: 0 auto 30px;} 
}
@media (min-width: 768px) {
  .txt_box_01 {
    margin-bottom: 160px;}
  .box_txt_right .box_01-txt {
    width: 92%;
    margin: 0 auto 30px 20px;}
  .box_txt_left .box_01-txt {
    width: 92%;
    margin: 0 20px 10px auto;}
}
@media (min-width: 992px) { 
    .box_01-txt {
      width: 90%;}
}

.box_txt_01 {position: relative;}

.pic_box_left,
.pic_box_right {
  width: 40%;
  position: absolute;
  top: -25%;}
.pic_box_right { right: -8%;}
.pic_box_left { left: -8%;}

@media (min-width: 768px) {
  .box_txt_01 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 0 1 50%;}
  .bg_pattern_04 .box_txt_01 {
    margin: auto;
    flex: 0 1 100%;}
  .pic_box_right {
    top: -42%;}
  .pic_box_left {
    top: -56%;}
  .box_txt_right .ico-accent-mark,
  .box_txt_right .title_box01 {
    padding-left: 30px;
    margin: 0;
    text-align: left;}
  .box_txt_left .ico-accent-mark,
  .box_txt_left .title_box01 {
    padding-left: 20px;
    margin: 0 20px 0 auto;
    width: 88%;
    text-align: left;}
  .box_txt_left .title_box01::after {
    left: -20%; }
}
@media (min-width: 992px) { 
  .flex_box_01 { max-width: 520px; width: 520px;}
  .bg_pattern_02 .flex_box_01,
  .box_txt_left .flex_box_01 { margin: 0 0 0 auto;}
  .box_txt_left .title_box01::after { left: -25%;}
}



[class^="pic_box_"] img {
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
}

.ico-accent-mark {
  line-height: inherit;
   margin-right: .5em;}

.title_box02 span {
  display: inline;
  font-size: 1em;}
.title_box02 {
  height: 80px;
  line-height: 2;
  margin-bottom: 0;
  position: relative;}


@media (min-width: 768px) {
  .box_txt_right .btn {
    margin: 15px auto 0px 20px; }
  .box_txt_left .btn {
    margin: 15px auto 0px 30px; }
}



.title_box01 span {
  display: block;
  font-size: 1.2rem;}
.title_box01 {
  height: 80px;
  line-height: 2;
  margin-top: 30px;
  margin-bottom: 0;
  position: relative;}
.title_box01::after {
  content: '';
  background: url("../images/bg_titlebuck.svg") no-repeat top center;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -50%;
  left: 12%;}
@media (min-width: 768px) {
  .box_txt_right .title_box01::after {
    background-position: top left;
    left: 2%;}
  .box_txt_right .btn {
    margin: 15px auto 0px 20px; }
  .box_txt_left .btn {
    margin: 15px auto 0px 30px; }
}
@media (min-width: 992px) { 
  .title_box01::after {
    left: 5%;}
}