@charset "UTF-8";

/* html68行目の下にする背景 */
.aaa
{
	background-image: url("../img/background.jpg");
	background-attachment: fixed;
	background-size: 100%;
}

div.cleafix:after,
{
	content:" ";
	display: block;
	clear: both;
}

 /* イラスト全体共通 */
#oimo img
{
	/* display: block; */
	/* width: 100%; stylecssにあるから */
	background-repeat: no-repeat;
	/*
	margin:10px;
	float:left;
	padding:20px; */
}

/*レスポンシブ42*/
@media(max-width:599px){
    main{
        width:90%;
        padding-top:100px;
    }
}

@media(min-width:600px) and (max-width:959px){
    main{
        padding-top:120px;
    }
}


/*--------------------------------
	   ↓イラストの仕掛け↓
-------------------------------- */
/* 大阪先生イラスト↓ */
.baseH{  /* 表示領域のデザイン(適当) */
  margin: 55px auto 20px;
}
.baseH,

.coverH{  /* 画像を背景イメージとして表示するための設定 */
  overflow: hidden;
  background: transparent no-repeat;
  background-size: cover;
}

/*
.coverH{  /* 二つの画像の大きさを合わせる設定 (必要かどうかわからん)
  width: 500%;
  height: 500%;
}*/
/* ↑35~50は大阪先生のみに入力している↑ */

.sample-image-01 /* div.coverH に表示する画像_趣味 */
{
	width: 250px;
	height: 290px;
	background-image: url("../img/osaka_shumi.png");
}

.sample-image-02 /* div.baseH に表示する画像_正面 */
{
	width: 250px;
	height: 290px;
	background-color: #fff;
	background-image: url("../img/osaka_shoumen.png");
	/* #oimoimgに入れたけどおかしくなったらこれ復活
	 background-repeat: no-repeat; */
}

.effectH-opacity /* 透明度を変更するエフェクトの設定 */
{
	opacity: 1;
	transition: .5s;
}

.effectH-opacity:hover /* マウスオーバー時の設定 */
{
	opacity: 0;
}
/* 大阪先生終わり↑ */

/* 境先生イラスト↓ */
  .sample-image-03 /* div.coverH に表示する画像_趣味 */
  {
	  width: 250px;
	  height: 290px;
	  background-image: url("../img/sakai_shumi.png");
  }
  
  .sample-image-04 /* div.baseH に表示する画像_正面 */
  {
	  width: 250px;
	  height: 290px;
	  background-color: #fff;
	  background-image: url("../img/sakai_shoumen.png");
	  /* #oimoimgに入れたけどおかしくなったらこれ復活
	   background-repeat: no-repeat; */
  }
  /* 境先生終わり↑ */

/* 東先生イラスト↓ */
  .sample-image-05 /* div.coverH に表示する画像_趣味 */
  {
	  width: 250px;
	  height: 290px;
	  background-image: url("../img/azuma_shumi.png");
  }
  
  .sample-image-06 /* div.baseH に表示する画像_正面 */
  {
	  width: 250px;
	  height: 290px;
	  background-color: #fff;
	  background-image: url("../img/azuma_shoumen.png");
	  /* #oimoimgに入れたけどおかしくなったらこれ復活
	   background-repeat: no-repeat; */
  }
  /* 東先生終わり↑ */

  /* 高槻先生イラスト↓ */
  .sample-image-07 /* div.coverH に表示する画像_趣味 */
  {
	  width: 250px;
	  height: 290px;
	  background-image: url("../img/takatuki_shumi.png");
  }
  
  .sample-image-08 /* div.baseH に表示する画像_正面 */
  {
	  width: 250px;
	  height: 290px;
	  background-color: #fff;
	  background-image: url("../img/takatuki_shoumen.png");
	  /* #oimoimgに入れたけどおかしくなったらこれ復活
	   background-repeat: no-repeat; */
  }
  /* 高槻先生終わり↑ */

/* 枚方先生イラスト↓ */
  .sample-image-09 /* div.coverH に表示する画像_趣味 */
  {
	  width: 250px;
	  height: 290px;
	  background-image: url("../img/hirakata_shumi.png");
  }
  
  .sample-image-10 /* div.baseH に表示する画像_正面 */
  {
	  width: 250px;
	  height: 290px;
	  background-color: #fff;
	  background-image: url("../img/hirakata_shoumen.png");
	  /* #oimoimgに入れたけどおかしくなったらこれ復活
	   background-repeat: no-repeat; */
  }
  /* 枚方先生終わり↑ */


#oimo p
{
	font-size: 16px;
	margin: 37px;
	text-align:justify;
	width: auto;
	padding: 18px;
}

#oimo h1 
{
	color:#250d00;
	font-size: 57px;
	font-weight: bold;
	text-align: center;
	line-height: 1.0;
	padding: 20px 20px  20px 50px;
	/*margin: 115px 0 0 0;*/
}

#oimo h2 
{
	color:#250d00;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.6;
	margin: 20px;
	padding: 0px;
	display: inline-block; /* 下の線の長さ */
	letter-spacing:0.5em; 
	width: 300px;
}

#oimo h3 
{
	color:#250d00;
	font-size:1.2em;
	font-weight:normal;
	margin-bottom:30px;
	padding:4px;
}

/* レスポンシブ243 */
@media(max-width:599px){
	#oimo p
	{
		margin-top: 10px;
	}
    #oimo h1{
        font-size:30px;
        width:80%;
    }
    #oimo h2{
        font-size:15px;
        width:70%;
        padding:12px;
	}
	#oimo h3{
        font-size:15px;
        width:100%;
        padding:10px;
		margin-bottom:10px;
    }
}

@media(min-width:600px) and (max-width:959px){
    #oimo p
	{
		margin: 30px 0 0 100px;
		margin-left: 100px;
	}#oimo h1{
        font-size:35px;
        width:60%;
    }
    #oimo h2{
        font-size:20px;
        width:100%;
        padding:16px;
	}
	#oimo h3{
        font-size:20px;
        width:100%;
        padding:16px;
    }
}

/*
h4 {
	color:#250d00;
	font-size:1.2em;
	font-weight:normal;
	line-height:1.2;
	display:inline-block;
	margin-bottom:4px;
	padding:4px;
}
*/

/*flexbox*/
.flex
{
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
}

.flex .sbox
{
	width: 40%;
}
.flex .lbox{
	width: 60%;
}

#oimo article
{
	margin: 0 auto;
}

/* レスポンシブ306 */
@media(max-width:599px){
	.flex
{
	
flex-direction: column;

}

.flex .sbox
{
	width: 100%;
}
.flex .lbox{
	width: 100%;
}
    p {
        margin:20px auto;
    }
}

@media(min-width:600px) and (max-width:959px){
    p {
        margin:30px auto;
    }
    article{
        padding:30px;
    }
}

/*------------------------
		TOP戻るボタン
-------------------------*/
footer
{
	text-align:center;
	padding:20px 0;
	margin:0;
}

#page-top /* winkの位置 */
{
    position: fixed;
	display: none;
    bottom: 20px;
    right: -30px;
	z-index: 80;
}

#page-top a 
{
    background-image: url("img/wnk_bird.png");
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}



/* 先頭文字ふわぁー 344*/
a.p:hover {
    position: relative;
	text-decoration: none;
	background-image: 50px;
	width: 50px;
}

a.p span { 
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
}

a.p:hover span {
    border: none;
    display: block;
	width: 100px;
	/* 文字 */
}

/* winkとり_レスポンシブ415 */
@media(max-width:599px)
{	
#page-top a 
{
    width: 70px;
    text-align: center;
    display: block;
    border-radius: 5px;
}
a.p:hover
{
    position: relative;
	text-decoration: none;
	background-image: 50px;
	width: 50px;
}

a.p span
{ 
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
}

a.p:hover span
{
    border: none;
    display: block;
	width: 70px;
	/* 文字 */
}

}

@media(min-width:600px) and (max-width:959px){
    p {
        margin:30px auto;
    }
    article{
        padding:30px;
    }
}


/* ------------------------
		先頭へ文字 
---------------------------*/
/* animation  先頭文字*/
@keyframes slidein {
	from	{transform:translateY(150%);}
	to		{transform:translateY(0%);}
}

@keyframes imgopacity {
	from	{opacity:0.0;}
	to		{opacity:1.0;}
}

#page-top img:first-child /* 文字の現れる速さ */
{
	animation-duration: 1s;
	animation-name: imgopacity,slidein;
} 


/* ------------------------------------------
	CLEARFIX
--------------------------------------------- */
section:after,
.gridarea:after,
#navarea:after 
{
	content:" ";
	display: block;
	clear: both;
}

.clearfix:after
{
	content:" ";
	display: block;
	clear :both;
}

.menu:before,
.menu:after
{
	content: " ";
	display: table;
}

.menu:after
{
	clear: both;
}

.menu
{
	*zoom: 1;
}