#toTopHover {
    background: url(img/ui.totop.png) no-repeat left -51px;
    width: 51px;
    height: 51px;
    display: block;
    overflow: hidden;
    float: left;
}
#toTop {
    z-index: 1555;
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 66px;
    right: 10px;
    overflow: hidden;
    width: 51px;
    height: 51px;
    border: 0;
    text-indent: -999px;
    background: url(img/ui.totop.png) no-repeat left top;
}
.box_100_100 {

  height: 100px;
  width: 100px; /*  width: 120px; */
  margin: 0px;

  padding: 0px;
  border: 1px solid #000;

  color:red;
  background: none;
  text-align: center;

 


  /*  フォントのサイズ  */
  font-size: 10px;
}
* {
	margin:0;
	padding:0;
}
body{
  background: #FFFFE0;

  /*  フォントの種類  */
  font-family: -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  
  /*  フォントのサイズ  */
  font-size: 1rem;
  
  /*  フォントの色  */
  color: #333;
  
  /* 文字間隔の調整の設定 */
  letter-spacing: 1.5px;
  
  /* 行間の設定 */
  line-height: 1.75;

}


/*──────────────────────────────*/
html {
  font-size: 14px;
  background: #FFFFE0;
}

/* iPhone・スマホ 縦 */
 
@media screen and (min-width:480px) { 
    /*　iPhone・スマホ iPhone 横　*/
  html {
    font-size: 8px;
  }
  p {
    color:red;
  }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　iPad・タブレット 　*/
  html {
    font-size: 12px;
  }
  p {
    color:gray;
  }
}
@media screen and (min-width:1024px) {
    /*　PC　*/
  html {
    font-size: 16px;
  }
  p {
    color:black;
  }
}
/*■*/
.wrapper_1200 {
  max-width: 1200px;

  margin: 0 auto;
  margin-top: 0px;
padding-top: 50px;
/*
  background: silver;
*/
}

.wrapper_1000 {
  max-width: 1000px;

  margin: 0 auto;
  margin-top: 0px;
padding-top: 50px;
/*
  background: silver;
*/
}

header{

  height: 50px; /* 高さ */
  width: 100%; /* 領域の幅 */


  margin: 0 auto;
  display: flex;
  color:white;

  background: linear-gradient(#F7C242,#FFFFFF, #F7C242);
background-size: auto 50px;
/* background-size: cover; */
/* background-size: contain; */

  position: fixed; /* ヘッダーを固定(これが重要) */
  top: 5px; /* 固定する位置 */
  left: 0; /* 固定する位置 */
  right: 0;  /* 固定する位置 */

}

.container {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 10px;

  width: auto;

  background-color: #fceabc;



}


footer{
  height: 30px;
  width: 100%;
  text-align:center;
  background-color: #F7C242;
}
.opn_header01{

  height: 50px; /* 高さ */
  width: 100%; /* 領域の幅 */

  max-width: auto;
  margin: 0 auto;
  display: flex;
  color:white;

  background:  linear-gradient(#FFEEFF, #fceabc);
/*
  background:  none;
*/
background-size: auto 50px;
  position: fixed; /* ヘッダーを固定(これが重要) */
  top: 5px; /* 固定する位置 */
  left: 0; /* 固定する位置 */
  right: 0;  /* 固定する位置 */

}

.opn_header_left{
  display: flex;
  background-color: none; /* lime; */
  max-width: 1000px;
  min-width: 200px;
  width: 100%;
  margin: 0 auto;
  flex: 1 1 1;
  text-align: right;
}
.opn_header_center{
  display: flex;
  width: 30%;
 
  max-width: 150px;
  min-width: 50px;
  text-align: center;
color: black; 
  background-color: none; /*  gray;  */
  margin: 0px auto;
margin: 5px 3px;
  flex: 1 1 auto;
  border: 1px solid   none;
}
.opn_header_right{
  display: flex;
  background-color: none; /* skyblue; */
  width: 100%;
  margin: 0 auto;
  flex: 1 1 1;
  text-align: left;
}
.main{
/*
  background-color: yellow; 
*/

  display: flex;
  width: 100%;
  top: 0; 
  flex-wrap: wrap;
  margin: 0 auto;
  /*
  text-align: center;
  */
}
.content{
  flex: 1;

  height: 153px;
  padding: 50px 0;
  margin: 55px;
  /* padding: 10px; */
}
.left{
/*
  background-color: white; 
*/
max-width: 20%;
min-width: 200px;
width: auto;
  margin: 0px auto;
  flex: 1 1 1;
  text-align: center;
}
.center{
width: auto;
max-width: 700px;
/*
  background-color: gray; 
*/
  margin: 0 auto;
  flex: 1 1 auto;
  border: 0px solid   gray; ;
}
.right{
/*
  background-color: white;
 */
max-width: 20%;
min-width: 200px;
width: auto;
  margin: 0px auto;
  flex: 1 1 1;
  text-align: center;
}
.side {
  margin: 10px auto;
  background: orange;
  width: 20%;
  min-width: 100px;
  border-radius: 10px; /*角丸*/
}
.opn_note01_wrap{
  background: #fff;
  padding: 2em 2em 1em;
  width: 80%;
  margin: 30px auto;
  box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.7);
}
.opn_note01{
  background-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #ddd 97%,
      #ddd 100%
    );
  background-size:100% 2em;
  line-height:2;
}
.opn_note01 p{
  margin-bottom:1.7em;
    font-size: 1.2em;
    line-height: 1.7;
  /*  フォントの色  */
  color: dimgray;
}
.opn_note02_wrap{
  background: none;
  padding: 2em 2em 1em;
  width: 80%;
  margin: 30px auto;
/*
  box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.7);
*/
}
.opn_note02{
/*
  background-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #ddd 97%,
      #ddd 100%
    );
*/
  background-size:100% 2em;
  line-height:2;
}
.opn_note02 p{
  margin-bottom:1.7em;
    font-size: 1.2em;
    line-height: 1.7;
  /*  フォントの色  */
  color: dimgray;
}

.opn_list001_wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin: 30px;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}

.opn_list001:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #F44336;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -1px;                  /* 位置調整 */
    margin-right: 15px;          /* 余白指定 */
}
.opn_list002_wrap{
 /* この要素はflexコンテナとなり、子要素は自動的にflexアイテムとなる */
  display: flex;

  /* 横並びに表示する */
  flex-direction: row;
  /* 画面幅に収まらない場合は折り返す */
  flex-wrap: wrap;


  width:95%;

	margin: 20px auto;
	padding: 0;
	list-style: none;
}
.opn_list002{

  width: 300px;


	padding: 8px 20px 6px;
	border: 1px solid #ddd;

    background-color: #F4F4F4;  /* 背景色指定 */

}
.opn_list002:not(:first-child){
	border-left: none; /* 最初の項目以外の左枠線を削除 */
}
/* -------------------------------------------ポラロイド写真 */
.opn_photo01_wrap {
  border : 1px solid #fff;
  width: 400px;
  /*max-width: 500px;*/
  margin: 10px 10px 10px;
  text-align: center;
  padding:  0px 0px 0px 0px;        /* 余白指定 */
  background: #e6e6fa;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
}/* ------------------------------------------- */
.opn_photo01_wrap p {
  text-align: center;
 /* width: 420px;*/
  bottom: 0px;
  font-family: 'Kaushan Script', cursive;
  color: #756F61;
  font-size:21px;
  line-height:21px; /*3.0;*/
  margin-bottom: 1.2em;
    border:  solid 0px;                             /* 枠線指定 */
    display:  inline-block;                         /* インラインブロックにする */
  border-radius: 0px 0px 0px 0px; /*角丸*/
}/* ------------------------------------------- */
.opn_photo01 {
 background: linear-gradient(to right, rgba(255, 233, 173, 1) 40%, rgba(255, 255, 225, 0) ) ); 
    background-repeat:  no-repeat;                              /* 背景の繰り返し設定 */
    background-position: right;             /* 背景の位置指定 */
    background-size:cover ;
  margin: 5% 5% 10px 20px ;
  margin: 5% 5% 5% 5% ;
    text-align:  center;    /* 文字中央寄せ */
    padding:  0px 0px 0px 0px ;        /* 余白指定 */
    padding:  8px 8px 0px 8px ;        /* 余白指定 */ 
    border: solid 3px #e6e6fa;      /* 枠線指定 */
  border-radius: 0px 0px 0px 0px; /*角丸*/
}/* ------------------------------------------- */
.opn_photo01 img {
    padding:  1px 1px 1px 1px ;        /* 余白指定 */
  border: 0px solid #e6f6fa;
  width: 100%;
 box-shadow:inset 0 0.5px 1px 1px rgba(0,0,0,0.5);
}/* ------------------------------------------- */


/* -------------------------------------------ポラロイド写真 */
.opn_photo02_wrap {
      padding:7px;
      border:1px solid #ccc;
      background:#fff;






}/* ------------------------------------------- */
.opn_photo02_wrap p {
  text-align: center;
 /* width: 420px;*/
  bottom: 0px;
  font-family: 'Kaushan Script', cursive;
  color: #756F61;
  font-size:21px;
  line-height:21px; /*3.0;*/
  margin-bottom: 1.2em;
    border:  solid 0px;                             /* 枠線指定 */
    display:  inline-block;                         /* インラインブロックにする */
  border-radius: 0px 0px 0px 0px; /*角丸*/
}/* ------------------------------------------- */
.opn_photo02 {
      max-width:300px;
      margin:0 auto;
  margin: 5% 5% 5% 5% ;
      box-sizing:border-box;/* borderとpaddingをwidthに含める */
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      -ms-box-sizing:border-box;


}/* ------------------------------------------- */
.opn_photo02 img {
      width:100%;
      height:auto;
      vertical-align:top;

}/* ------------------------------------------- */

/* -------------------------------------------写真の上に文字 */
.opn_photo03_wrap {
  position: relative;
}/* ------------------------------------------- */
.opn_photo03_wrap p {
  position: absolute;
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 2em;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 0;
  left: 0;

}/* ------------------------------------------- */
.opn_photo03 img {
      width:100%;
      height:auto;
      vertical-align:top;
}/* ------------------------------------------- */
.top-line{
	width:100%;
	height:5px;
	background:black;
  position: fixed; /* 位置をを固定(これが重要) */
  top: 0; /* 固定する位置 */
  left: 0; /* 固定する位置 */
  right: 0;  /* 固定する位置 */
}
.bottom-line{
width:100%;
	height:5px;
	background:black;

  position: fixed; /* 位置をを固定(これが重要) */
 /*   position: absolute;←絶対位置*/
    bottom: 0; /*下に固定*/
}

.dummy-line{
	width:100%;
	height:5px;
	background:red;

}
.dummy-line_h50{
	width:100%;
	height:50px;
	background:none;

}
/*■メニュー用ボタン*/
.button {
  flex: 1 1 auto;
  height: 30px;
  width: 20%; /*  width: 120px; */
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 1px;
  margin-right: 1px;
  padding: 0px;
  border: 1px solid #f7f7f7;
  text-align: center;
  text-transform: none;
  position: relative;
  overflow: hidden;
  transition: .3s;
  color:red;
  background: #DDDDDD;
  border-radius: 5px; /*角丸*/

}
.button:after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 1px;
/*   background: red;マウスを重ねたときのアンダーライン */
  background: red;

  color:red;
}
.button:hover {
  cursor: pointer;
  border: 1px solid gray; /* マウスを重ねたときの枠 */
  color:red;

}
.button:hover:after {
  width: 100%;
  left: 0;
  color:yellow;
}

.button a {
text-decoration:none;
}
/*■メニュー用ボタン001*/
.btn_001 {
  flex: 1 1 auto;
  height: 30px;
  width: auto;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 1px;
  margin-right: 1px;
  padding: 0px;
  border: 1px solid #f7f7f7;
  text-align: center;
  text-transform: none;
  position: relative;
  overflow: hidden;
  transition: .3s;
  color:red;
  background: gold;
  border-radius: 3px; /*角丸*/

}
.btn_001:after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 1px;
  background: black;
  color:red;
}
.btn_001:hover {
  cursor: pointer;
  border: 3px solid white;
  color:red;

}
.btn_001:hover:after {
  width: 100%;
  left: 0;
  color:red;
}

.btn_001 a {
text-decoration:none;
}
p {
    font-size: 1.5rem;
    color: #333;
    line-height: 1.7;
    margin-bottom: 2.2em;
}

p.txt_right {
    color: #16;
    text-align: right;    /* 文字右寄せ */
}

p.txt_center {
    color: #505050;
    text-align: center;    /* 文字中央寄せ */
}

p.txt_left {
    color: #16;
    text-align: left;    /* 文字左寄せ */
}
.txt01-div{
    font-size: 100%;
    color: #434343;
    line-height: 1.7;
    margin-bottom: 2.2em;
}

.info01-div{
    font-size: 100%;
    color: #434343;
    line-height: 1.7;
    margin: 1em;
padding: 10px;


  background: #F4F2ED;
  width: auto;
  min-width: 200px;
  border-radius: 10px; /*角丸*/
}


.ts-div{
  display: flex;

  width: 80%;

margin: 0px 5px;  
}
.ts_h001 {
    background: linear-gradient(transparent 60%, #ffff66 60%);
}

.ts_h001 {

  color: #6594e0;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #6594e0;
}
h1 {
		margin: 0.5em 0em 0.5em 0em;
		white-space: nowrap;
		font-weight: bold;
		
font-size: 150%;
		font-size: 1.5rem;
		
color: #507CAA;
  font-family: 'Kaushan Script', cursive;
	}
	h2 {
/*
		border-width: 1px;
		border-color: #82A5FF;
		border-style: solid;
		background-color: #82A5FF;
		margin: 0.5em 0em 0.2em 0em;
		padding: 0.2em 0.5em 0.1em 0.5em;
		white-space: nowrap;
		*/
　/* font-size: 120%; */
/*
		font-size: 1rem;
color: #507CAA;
		background: url('./img/back.png') repeat-x 0px -2px;
		box-shadow: 3px 3px 3px #DFEAFD;
		-moz-box-shadow: 3px 3px 3px #DFEAFD;
		-webkit-box-shadow: 3px 3px 3px #DFEAFD;
		-o-box-shadow: 3px 3px 3px #DFEAFD;
		-ms-box-shadow: 3px 3px 3px #DFEAFD;
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		-o-border-radius: 8px;
		-ms-border-radius: 8px;
*/
	}

	h3 {
		border-width: 0px 0px 2px 0px;
		border-color: #FFFFFF #FFFFFF #BDD3FF #FFFFFF;
		border-color: #FFFFFF #FFFFFF #BBBBBB #FFFFFF;
		border-style: dotted;
		margin: 0.5em 0em 0.5em 1em;
		padding: 0.2em 0.5em 0em 0.5em;
		white-space: nowrap;
		font-size: 120%;
		color: #333333;
	}
h4 {
  padding: .0em .75em;
  border: 0px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 30px;
  margin-bottom: 3px;
}
h5 {
  padding: .0em .75em;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 40px;
  margin-bottom: 3px;
}
h6 {
  padding: .0em .75em;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 50px;
  margin-bottom: 3px;
}
.opn_con001 {
		  border: 1px solid   gray;
  margin: 0 auto;
  padding: 10px;
  font-size: 0.7rem;
/*
  display: flex;
justify-content: center;
  align-items: start;
  align-content: center;
  flex-wrap: wrap;
  background: #eff0eb;
  width: auto;
  max-width: 100%;
  margin: 0px auto;
  min-height: 10vh;
  width:auto;
  max-width: 800px;
  min-width: 400px;
  background-color: none; 
  flex: 1 1 auto;
*/
}

.opn_con001 p {
  font-size: 1.1rem;
		
  margin: 0 auto;
  padding: 10px 30px;

color:red;

/*
  border: 1px solid   gray;
  display: flex;
justify-content: center;
  align-items: start;
  align-content: center;
  flex-wrap: wrap;
  background: #eff0eb;
  width: auto;
  max-width: 100%;
  margin: 0px auto;
  min-height: 10vh;
  width:auto;
  max-width: 800px;
  min-width: 400px;
  background-color: none; 
  flex: 1 1 auto;
*/
}
.box_free{
  display: flex;
  justify-content: center;
  align-items: start;
  align-content: center;
  flex-wrap: wrap;
  background: #eff0eb;
  width: auto;
  max-width: 100%;
  margin: 0px auto;
  min-height: 10vh;

}
.logo01{
background: url('img/logo01.png');
background-size: cover;

  width: 180px;
  width: 20%;
/**/
  height: 250px;

/**/
  margin: 0px 20px 0px 0px;

}
.top-img {

    background: url('img/index.png');
    background-repeat:  no-repeat;      /* 画像の繰り返しを指定  */
    background-position:center center; /* 画像の表示位置を指定  */


     width:100%;                             /* 横幅のサイズを指定    */
   height:400px;                             /*  縦幅のサイズを指定    */



/*  height: 70px; */
  border : 1px solid #7E57C2;
  margin: 0px;
  text-align:left;
  color: 		pink;/*  フォントの色 */
  border-radius: 10px; /*角丸*/



}

/*──────────────────────────────*/
.bg_001 {
 /*
■ 背景画像を複数指定　","で各種オプションも指定可能 
■ background-size: 100% auto
■ 横幅を100%　縦幅auto
■ padding:余白指定 をすることで背景画像を表示する高さを確保する
上下のサイズを足した高さになる
背景に文字を配置する場所により調整する
*/
 background: linear-gradient(to right, rgba(255, 255, 255, 1)20% , rgba(255, 210, 131, 0.1) ) , url(img/bg001.jpg); 

    background-repeat:  no-repeat;                              /* 背景の繰り返し設定 */
    background-position: right;             /* 背景の位置指定 */
  width: auto;
 background-size:100%; /*contain ;*/


    text-align:  left;    /* 文字中央寄せ */
    padding:  20% ;        /* 余白指定 */
    border: solid 0px;      /* 枠線指定 */
}

.bg_001-text {
    border:  solid 0px;                             /* 枠線指定 */
    display:  inline-block;                         /* インラインブロックにする */
    padding: 10px 30px;                             /* 余白指定 */
    background-color: rgba(255, 210, 131, 0.1);    /*  背景色指定 */
  border-radius: 0px 20px 20px 0px; /*角丸*/


    font-size: 100%;
    color: #333;
    line-height: 1.7;
    margin-bottom: 2.2em;

}
p.resizeimg img {
 width: 100%; 
  margin: 0% auto;
}

.p_resizeimg {
 width: 20%; 
}
.p_resizeimg img {
  margin-top: -5px;
 width: 100%; 
}


.p_img_001 {
 width: 100%; 
  text-align: center;
  margin: 0 auto;
}
.p_img_001 img {
  margin-top: 0px;
 width: 100%; 
 max-width: 100px; 
}

.p_img_002 {
 width: 100%; 
 max-width: 100px; 
  text-align: center;
  margin: 0 auto;
}

.p_img_002 img {
  margin-top: 0px;
 width: 100%; 
 max-width: 100px; 
}

.p_img_wrap {
  margin: 0 auto;
 width: 90%; 
 min-width: 100px; 

  border: 1px solid   gray;
  background-color: skyblue;
}
.box_free{
  display: flex;
  justify-content: center;
  align-items: start;
  align-content: center;
  flex-wrap: wrap;
  background: #eff0eb;
  width: auto;
  max-width: 100%;
  margin: 0px auto;
  min-height: 10vh;

}/* ------------------------------------------- */
.photo_frame {
/* .photo_box ポラロイド写真box */

border : 1px solid #fff;
width: 400px;
  /*max-width: 500px;*/
  margin: 10px 10px 10px;
  text-align: center;
    padding:  0px 0px 0px 0px;        /* 余白指定 */
  background: #e6e6fa;
box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
}/* ------------------------------------------- */
.photo_frame p {
  text-align: center;
 /* width: 420px;*/
  bottom: 0px;
  font-family: 'Kaushan Script', cursive;
  color: #756F61;
  font-size:21px;
  line-height:21px; /*3.0;*/
  margin-bottom: 1.2em;

    border:  solid 0px;                             /* 枠線指定 */
    display:  inline-block;                         /* インラインブロックにする */

  /*   background-color: rgba(255, 255, 255, 0.5); */   /*  背景色指定 */
  border-radius: 0px 0px 0px 0px; /*角丸*/

}/* ------------------------------------------- */
.photo_box {
 /*
■ 背景画像を複数指定　","で各種オプションも指定可能 
■ background-size: 100% auto
■ 横幅を100%　縦幅auto
■ padding:余白指定 をすることで背景画像を表示する高さを確保する
上下のサイズを足した高さになる
背景に文字を配置する場所により調整する
*/
 background: linear-gradient(to right, rgba(255, 233, 173, 1) 40%, rgba(255, 255, 225, 0) ) ); 

/* 
 background: linear-gradient(to right, rgba(255, 233, 173, 1) 40%, rgba(255, 255, 225, 0) ) , url(img/img001.jpg); 
 */

    background-repeat:  no-repeat;                              /* 背景の繰り返し設定 */
    background-position: right;             /* 背景の位置指定 */
    background-size:cover ;
  margin: 5% 5% 10px 20px ;
  margin: 5% 5% 5% 5% ;
    text-align:  center;    /* 文字中央寄せ */
    padding:  0px 0px 0px 0px ;        /* 余白指定 */
    padding:  8px 8px 0px 8px ;        /* 余白指定 */ 
  /*   padding:  420px 0px 0px ;   */      /* 余白指定 */
    border: solid 3px #e6e6fa;      /* 枠線指定 */
  border-radius: 0px 0px 0px 0px; /*角丸*/

}/* ------------------------------------------- */
.photo_box img {
    padding:  1px 1px 1px 1px ;        /* 余白指定 */
  border: 0px solid #e6f6fa;

  width: 100%;

 box-shadow:inset 0 0.5px 1px 1px rgba(0,0,0,0.5);
}/* ------------------------------------------- */
.opn_con002 {
		  border: 1px solid   black;
  margin: 10px 10px;
  padding: 10px;
  font-size: 0.7rem;
/*
  display: flex;
justify-content: center;
  align-items: start;
  align-content: center;
  flex-wrap: wrap;
  background: #eff0eb;
  width: auto;
  max-width: 100%;
  margin: 0px auto;
  min-height: 10vh;
  width:auto;
  max-width: 800px;
  min-width: 400px;
  background-color: none; 
  flex: 1 1 auto;
*/
}

.opn_con002 p {
  font-size: 1.1rem;
		  border: 1px solid   black;
  margin: 0 auto;
  padding: 10px 30px;

color:red;

/*
  display: flex;
justify-content: center;
  align-items: start;
  align-content: center;
  flex-wrap: wrap;
  background: #eff0eb;
  width: auto;
  max-width: 100%;
  margin: 0px auto;
  min-height: 10vh;
  width:auto;
  max-width: 800px;
  min-width: 400px;
  background-color: none; 
  flex: 1 1 auto;
*/
}
.opn_photo_div1 {
  position: absolute;
  top: 20%;
  left: 20%;
      width:30%;
  border: 1px solid #f7f7f7;
}

.opn_photo_div2 {
  position: absolute;
  top: 20%;
  left: 20%;
  border: 1px solid #f7f7f7;
}/* -------------------------------------------写真の上に文字 */
.opn_photo03_wrap {

  position: relative;
}/* ------------------------------------------- */
.opn_photo03_wrap p {
  position: absolute;

  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;

  color: pink;/*文字は白に*/
color: rgba(255, 192, 203, 0.6);
  font-weight: bold; /*太字に*/
  font-size: 400%;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/


}/* ------------------------------------------- */
.opn_photo03_wrap img {
      width:100%;
      height:auto;
      vertical-align:top;

}
.opn_photo03_ｔｘｔ_tr{
/* -------------------------------------------文字列　上　右 うまくいってない*/
  position: absolute;
  top: 0%;
  left: 50%;
  -ms-transform: translate(30%,10%);
  -webkit-transform: translate(30%,10%);
  transform: translate(30%,10%);
  margin:0;
  padding:0;
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 400%;/*サイズ*/
  font-family :Quicksand, sans-serif;/*Google Font*/

  }
.opn_photo03_ｔｘｔ_tc{
/* -------------------------------------------文字列　上　中央 */
  position: absolute;
  top: 0%;
  left: 50%;
  -ms-transform: translate(-50%,10%);
  -webkit-transform: translate(-50%,10%);
  transform: translate(-50%,10%);
  margin:0;
  padding:0;
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 300%;/*サイズ*/
  font-family :Quicksand, sans-serif;/*Google Font*/

  }
.opn_photo03_ｔｘｔ_tl{
/* -------------------------------------------文字列　上　左 */
  position: absolute;
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 300%;/*サイズ*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 3%;
  left: 3%;
  }
.opn_photo03_ｔｘｔ_cl{
/* -------------------------------------------文字列　中央　左 */
  position: absolute;
  top: 50%;
  left: 0%;
  -ms-transform: translate(10%,-50%);
  -webkit-transform: translate(10%,-50%);
  transform: translate(10%,-50%);
  margin:0;
  padding:0;

  color: pink;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 300%;/*サイズ*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  }
.opn_photo03_ｔｘｔ_bl{
/* -------------------------------------------文字列　下　左 */
  position: absolute;
  top: 100%;
  left: 0%;
  -ms-transform: translate(10%,-90%);
  -webkit-transform: translate(10%,-90%);
  transform: translate(10%,-90%);
  margin:0;
  padding:0;

  color: pink;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 300%;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  }

* ------------------------------------------- */
.opn_wrap001 { /* 幅100% */
  width: 100%; /* 領域の幅 */
  margin: 0 auto;
  padding: 0px;
  background: linear-gradient(#F7C242,#FFFFFF, #F7C242);
  background-color: red;
  text-align: center;
}
.opn_wrap002 { /* 幅80% */
  margin: 0 auto;
  width: 80%; /* 領域の幅 */
  margin: 0 auto;
  padding: 0px;
  background: none;/*linear-gradient(orange,#FFFFFF, orange);*/
  background-color: none;

  text-align: center;
}
.opn_wrap003 { /* 幅50% */
  margin: 0 auto;
  width: 50%; /* 領域の幅 */
  margin: 0 auto;
  padding: 0px;
  background: linear-gradient(orange,#FFFFFF, orange);
  background-color: red;
}
.opn_wrap004 { /* 幅20% */
  margin: 0 auto;
  width: 20%; /* 領域の幅 */
  margin: 0 auto;
  padding: 0px;
  background: linear-gradient(orange,#FFFFFF, orange);
  background-color: red;
}