@charset "UTF-8";
/* CSS Document */
/* ナビゲーションのホバー時にアンダーラインを入れるcss */
ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
ul li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 0.5px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
ul li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

/* h1の見出しのホバー時にアンダーラインを入れるcss */
.midasi h1{
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.midasi h1::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 0.5px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;/* 右から出る */
  transition: transform .3s;
}
.midasi h1:hover::after {
  transform-origin: right top;/* 左へ消える */
  transform: scale(1, 1);
}

.midasi{
	text-align:center;/* h1の見出しを中央揃えにした */
}

.midasi h1{
	-ms-writing-mode: tb-rl;/* h1を縦書きにする（IE用） */
	writing-mode: vertical-rl;/* h1を縦書きにする */
}


.p_tate{
	text-align:center;/* 縦書きを中央揃え */
}

.p_tate2{
	-ms-writing-mode: tb-rl;/* pを縦書きにする（IE用） */
	writing-mode: vertical-rl;/* pを縦書きにする */
	display: inline-block;/*本文中央揃えのためにインラインブロック*/
	height:215px;
	color:#000;
}






/*写真にflexbox適用 */
.ry {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;/*ボックスを複数行に配置する*/
}

/* ２０％で一列に配置 */
.sy{width:calc(20%);
background-color:;/*余白の大きさを知りたいときに入れる*/
}


/* １０００以下は１００％で一列に配置 →　3/1変更。2300以下全て一列にする。実質全て一列*/
@media (max-width: 2300px) {
	.sy{
		width: calc(100% - 10px);
		margin: 5px;
		}
	}




/*about headerにflexbox適用 */
header{
	display:flex;
	justify-content:flex-end;
}

ul{
	display:flex;
	align-items:center;
	
}


/*liの間隔調整 */
li{padding-right:55px;
}


/*800px以下でliの間隔調整 */
@media screen and (max-width:800px) {
	li{
		padding-right:25px;
		font-size:0.9em;/*文字サイズ調整*/
}
}

/*550px以下でliの間隔調整 */
@media screen and (max-width:570px) {
	li{
		padding-right:15px;
		font-size:0.8em;/*文字サイズ調整*/
}
}


/*450px以下でliの間隔調整 */
@media screen and (max-width:450px) {
	li{
		padding-right:2px;
		font-size:0.8em;/*文字サイズ調整*/
}

}


/*428px以下でliの間隔調整 */
@media screen and (max-width:428px) {
	li{
		padding-right:1.3px;
		font-size:0.8em;/*文字サイズ調整*/
}

}


/*395px以下でliの間隔調整 */
@media screen and (max-width:395px) {
	li{
		padding-right:0.9px;
		font-size:0.7em;/*文字サイズ調整*/
}
    .img_re_size{
    width:60%;/*画像サイズ調整*/
    height:50%;/*画像サイズ調整*/
	}
}


/*330px以下でliの間隔調整 */
@media screen and (max-width:330px) {
	li{
		padding-right:9.5px;
		font-size:0.6em;/*文字サイズ調整*/
}
    nav li a{
	   line-height:1.3;/*縦並びの画像とテキストの間隔調整*/
   }
    .img_re_size{
    width:60%;/*画像サイズ調整*/
    height:50%;/*画像サイズ調整*/
	}
}


/*800px以下での左右余白調整（念のため入れただけ） */
@media screen and (max-width:800px) {
	header{
    margin:0;
    padding: 0;
}
}


/*左右余白調整 */
.aboutbox{
    margin: 6em 6em;
    padding: 0;
}

/*800px以下での左右余白調整 */
@media screen and (max-width:800px) {
	.aboutbox{
    margin:0;
    padding: 0;
}
}


.yohaku{
	margin-bottom:80px;/*小見出しと文章の間に余白をつけた*/
}

@media (max-width: 500px) {
	.yohaku{
		margin-bottom:40px;/*500以下は余白を小さくする*/
	}
}



/* h1のフォンサイズを調整。かつ色も黒に変更 */
h1{
	font-size:30px;
	color:#000;
}

/*400以下はh1を小さくした */
@media screen and (max-width:400px) {
	h1{
    font-size:25px;
	color:#000;
}
}