@media all and (max-width: 530px) {
.pc_only2 {
display : none;
}
}

@media all and (max-width: 640px) {
.pc_only3 {
display : none;
}
}

@media all and (min-width: 641px) {
.mobile_only2 {
display : none;
}
}


section.photo{padding:5px;}

.main_photo {
text-align:center;
  width: 100%;
  margin: 0 auto;
  padding:0;
/*  max-width: 500px;*/
}
/* 2018/06/22 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes  */


#banner {
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #banner > div.photo {
	text-align: center;
   -webkit-order: 1;
           order: 1;
   }
  
  #banner > div.banner2 {
  margin:1% 5% ;
  	text-align: center;
   -webkit-order: 2;
           order: 2;
   }

  #banner  div.banner3 {
	display: :inline;
   }

.main_photo img,#banner img {
max-width:100%;
}

/*
#banner {
margin:auto;
text-align:center;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
   display:     inline-flex;
   -webkit-flex-flow: row;
   -moz-flex-flow: row; 
   -ms-flex-flow: row;
   -o-flex-flow: row;
           flex-flow: row;
   }
 
  #banner > div.photo {
  margin-bottom:10px;
  }
  
  #banner > div.banner2 {
   }*/
   
     
  /* 2 カラム表示には狭すぎる場合 */
  @media all and (max-width: 640px) {
  
   #banner {
    -webkit-flex-flow: column;
            flex-direction: column;
   }

   #banner > div.photo, #banner > div.banner2 {
   margin-bottom:10px;
    /* ドキュメントの順番に戻す */
    -webkit-order: 0;
            order: 0;
   }
 
   #banner > div.photo, #banner > div.banner2 {
/*    min-height: 50px;
    max-height: 50px;*/
   }
  }

.stress {
font-size:130%;
font-weight:bold;
line-height:1.4em;
color:#990000;
margin-bottom:10px;
border-bottom:dotted 2px blue;
}


.dan1 {
margin: 20px auto;
padding: 5px 5px 5px 80px;
width:80%;
background-image: url("image/okurumi2.gif");
background-repeat: no-repeat;
background-position: left center;
/*border:solid blue 1px;*/
}

  /* 2 カラム表示には狭すぎる場合 */
@media all and (max-width: 640px) {
.dan1 {
width:100%;
padding: 0px;
background-image: none;
}
}

.dan2 {
margin: 20px auto;
padding: 5px 70px 5px 5px;
width:80%;
background-image: url("image/okurumi3.gif");
background-repeat: no-repeat;
background-position: right center;
}

@media all and (max-width: 640px) {
.dan2 {
width:100%;
padding: 0px;
background-image: none;
}
}

.dan13 {
width:592px;margin:10px auto;
}

.dan13 img {
max-width:98%;
}

@media all and (max-width: 640px) {
.dan13 {
width:98%;margin:10px auto;
}
}

h3.heading{
padding-left:7px;
margin-bottom:10px;
color:#669900;
font-size:24px;
font-weight:bold;
border-left:5px solid #e8e3ca;
}

.dan22 {
width:80%; height:200px; border:solid 2px #FF66CC;
margin: 15px auto;
overflow:scroll; padding:10px;
}

.dan222 {
margin: 10px auto;
padding: 5px 10px;
width:95%;
background-color:#A6EECF;
}

@media all and (max-width: 640px) {
.dan22 {
margin: 5px auto;
padding: 5px 5px;
width:98%;
}
}

img.image1 {
float: right ;
margin : 10px ;
}

img.image2 {
float : left ;
margin: 0px 5px ;
}

.kansou {
width:100%;
margin:20px auto;
}

.kansou2 {
width:70%;
margin:10px auto;
text-align:center;
border-top:solid 1px #99CCCC;
border-right:solid 3px #336699;
border-bottom:solid 3px #336699;
border-left:solid 1px #99CCCC;
background-color:#FFFFCC;
}

@media all and (max-width: 640px) {
.kansou2 {
width:100%;
padding:0;
}
}

.kansou3 {
margin:15px auto;
padding:0;
max-width:750px;
	overflow: hidden; /* heightを戻す */
}

.float_370 {
float:left;
margin:0;
padding:0;
width:370px;
/*height:370;*/
max-width: 100%;
}

.float_370 img {
  width: 370px;
  margin:0;
padding:0;
}

.float_370_2 {
float:left;
margin:0;
padding:0;
width:370px;
/*height:370;*/
max-width: 100%;
}


.float_370_2 img {
  width: 370px;
  max-width: 100%;
}


@media all and (max-width: 812px) {
.float_370_2 {
margin-top: calc(calc( 100% - 520px ) * -1 );
margin-left: calc(calc( 380px - 100% ) * -1 );
}
}

@media all and (max-width: 640px) {
.kansou3 {
margin:15px auto;
padding:0;
width:100%;
text-align:center;
}
}

@media all and (max-width: 640px) {
.float_370,
.float_370_2 {
float:none;
width:100%;
/*width:370px;
height:370px;*/
margin:0 auto 15px auto;
padding:0;
text-align:center;
/*border:solid blue 1px;*/
}
}


@media screen and (max-width:640px) {
	.demo-txt01:after {
		content:attr(data-label);
		display:block;
		text-align:left;
		margin: 10px 0px;
		padding: 4px 4px;
		font-size: 18px;
		color:blue;
		white-space: pre-wrap;
			border:outset 3px #003366;
		    position: relative; /*http://www.mk2-style.com/blog/archives/1387*/
    background-color: #ffffe7;
    background-image:
    linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
    background-size: 100% 1.5em;
    line-height:1.5em;
	}
	.demo-txt01 img {
		display:none;
	}
}


	.float_370_a {
		float:left;
	}
	.float_370_2_a {
		float:left;
	}

@media screen and (max-width:640px) {
	.float_370_a {
		float:none;
	}
	.float_370_2_a {
		float:none;
	}
}

.dan11 {
margin: 20px auto;
background-image: url("image/okurumi2.gif");
background-repeat: no-repeat;
background-position: left center;
text-align:left;
}

.merit {
font-weight:bold;color:#cc0099;font-size:110%;
margin: 0px ; 
padding-left: 85px;
list-style:disc;
}

.merit1 {
line-height:1.6em;
}

@media screen and (max-width:640px) {
.dan11 {
margin: 20px auto;
background-image: none;
text-align:left;
}

.merit {
font-weight:bold;color:#cc0099;font-size:110%;
margin: 0px ; 
padding-left: 10px;
list-style:disc;
}
}

.dan112 {
width:100%;
/*height:17em;*/
/*overflow:hidden;*/
margin:10px auto;
}

.dan113 {
float:left;
width:48%;
margin:5px auto;
padding : 0;
text-align:center;
/*border:solid blue 1px;*/
}

@media screen and (max-width:640px) {
.dan113 {
float:none;
width:95%;
margin:5px auto;
padding : 0;
text-align:center;
/*border:solid blue 1px;*/
}
}

.tbl {
margin:0;
text-align:center;
border : solid blue 2px;
width:100%;
}

.tbl caption {
font-size:18px;
font-weight:bold;
text-align:center;
color:#990000;
}


.tbl tr,.tbl th,.tbl td {
border-right:dotted blue 1px;border-bottom:solid blue 2px;
padding:2px 5px;
}

.wid30 {
width:30%;
}

.wid40 {
width:40%;
}

.wid40_2 {
width:40%;
}


@media screen and (min-width:760px) {
.wid40_2 {
width:30%;
}
}


/*試算表関係*/

.shisan {
width : 85% ;
margin : 10px ;
}

.shisan2 {
width : 48%;
float: right;
margin : 5px auto;
padding : 0;
/*border:solid blue 1px;*/
}


@media screen and (max-width:640px) {
.shisan2 {
width : 95%;
float: none;
margin : 5px auto;
padding : 0;
/*border:solid blue 1px;*/
}}