@charset "utf-8";


/*==========
CONTENTS WORKS ID:1709
==========*/
/*config*/
:root {
    --template-fluid02-image-size:500px;  /*画像の高さ*/
    --template-fluid02-image-bg:#fff; /*画像の背景色*/
    --template-fluid02-text-bg:rgba(244, 243, 243, 0.9); /*テキストボックスの背景色*/
    --template-fluid02-text-font:#353535; /*テキストボックスの文字色*/
}
.template-fluid02-box{
    position:relative;
}
/* template-fluid02-image-left */
.template-fluid02-image-left{
    background:var(--template-fluid02-image-bg); 
    height:var(--template-fluid02-image-size); 
    text-align: left;
    margin-bottom: 8vmax;
}
.template-fluid02-image-left img{
    width: 80% !important;
    height:100% !important;
    object-fit: cover;
}
.template-fluid02-text-right {
    position: absolute;
    width: 50%;
    right: 5%;
    bottom:-5vmax;
    z-index: 2;
    padding:3em;
    text-align: left;
    background:var(--template-fluid02-text-bg); 
    color:var(--template-fluid02-text-font); 
}

/* template-fluid02-image-right */
.template-fluid02-image-right{
    background:var(--template-fluid02-image-bg); 
    height:var(--template-fluid02-image-size); 
    text-align: right;
    margin-bottom: 8vmax;
}
.template-fluid02-image-right img{
    width: 80% !important;
    height:100% !important;
    object-fit: cover;
}
.template-fluid02-text-left {
    position: absolute;
    width: 50%;
    left: 5%;
    bottom:-5vmax;
    z-index: 2;
    padding:3em;
    text-align: left;
    background:var(--template-fluid02-text-bg); 
    color:var(--template-fluid02-text-font); 
}

.template-fluid02-box h3 {
  color: #0077e7;
  background: none !important;
  border-left: 0px !important;
  padding: 5px 0px !important;
  font-size: 35px !important;
}

.template-80 {
  margin-right: 80px;
  margin-left: 80px;
}