@charset "UTF-8";

body {
background-color:#FFFFFF;
}


.img-container{
    display: flex;/* flexbox */
    width: 800px;
    justify-content: center; /* 水平方向 */
    align-items: center; /* 垂直方向 */
    margin-left: 60px;
}


img.mr-3{
    width: auto;
    height: 200px;
    margin-bottom: 50px;
    margin-top: 30px;
}


.img-container02{
    display: flex;/* flexbox */
    width: 800px;
    justify-content: center; /* 水平方向 */
    align-items: center; /* 垂直方向 */
    margin-left: 60px;
}


img.mr-4{
    width: auto;
    height: 250px;
    margin-bottom: 50px;
    margin-top: 30px;
}

p.title{
    color: #6EA8E8;	
}


 /* --- 親要素 ------------------------ */
.imgArea {
    display    : inline-block;
    position   : relative;
    margin-left: 30vw;
    margin-top: 40px;		
}
 /* --- 文字BOX(子要素) ------------------ */
.over {
  position   : absolute;                   /* 親要素からの絶対位置 */
  box-sizing : border-box;
  white-space: nowrap;                     /* 折返しなし */
  display    : inline-block;               /* 文字囲みのBOXにする */
  color      : #ffffff;    /* 文字色（透明度） */
  top        : 50%;                        /* 親要素からの上位置 */
  left       : 50%;                        /* 親要素からの左位置 */
  transform  : translate(-50%, -50%);      /* 文字BOXの位置ずらし */
  font-size  : 18pt;                       /* 文字サイズ */
  font-weight: bold;                       /* 太字 */
  line-height: 1em;                        /* 1行の高さ */
}

img.go2:hover {
   opacity: 0.5;
}

img.go2{
    width: 200px;
}

.go{
    margin-left: 6vw;
    margin-bottom: 60px;	
}


img.retrn:hover {
   opacity: 0.5;
}

img.retrn{
    width: 100px;
}

.retrn2{
    margin-left: 5vw;
    margin-bottom: 60px;	
}