@charset 'utf-8';

*{
 border: 0;
 margin: 0;
 padding: 0;
}


.footer {
 background-color:#FFBD4C;
 height:20px;
 color:white;
 text-align:center;S
}

*::-webkit-input-placeholder {
    color: #fff;
}
*:-moz-placeholder {
    color: #fff;
}
*::-moz-placeholder {
    color: #fff;
}
*:-ms-input-placeholder {
    color: #fff;
}

.textbox {
  margin-top: 0px;
  font-family: cursive;
  border: 1px solid #acacac;
  color: #fff;
  opacity: .7;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  width: 400px;
  height:100px;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  font-size: 16px;
  outline: none;
  background-color: #acacac;
}

.textbox:focus {
  width: 500px;
  outline: none;
}

.button {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 13pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 14px 61px;   /* 余白       */
  background    : #999999;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #999999;    /* 枠の指定 */
}
.button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #999999;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

/*===============================================
画面の横幅が980px以上
===============================================*/

@media screen and (min-width: 980px){

/* ナビゲーション */


nav{
 background-color:#FFBD4C;
 height:48px;
}

.inner{
 max-width:100%;
 margin:0 auto;
 width:980px;
}
nav>.flex{
  align-items: center;
  height:50px; 
}
.flex {
  display: flex;
  justify-content: space-between;
}

.flex li{
  margin-left:30px;
  margin-right:8px;
  list-style:none;
  font-weight: bold;
}
.logo a{
 color:white;
 font-size:20px;
 font-weight:bold;
} 
li a{
  color:white;
  text-decoration:none;
}

/* トップ画 */

.image {
 display: block;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 max-width:100%;
 width:980px;

}


/* CONTENTS */

.container {
 display:flex;
 max-width:100%;
 width:980px;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 flex-wrap: wrap;
}


.container .topic{
 display:flex;
 width: 30%;
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFBD4C;
}


.container .topic .title{
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 12px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FFBD4C;
    color: #ffffff;
    font-weight: bold;
}

.container .topic p{
    margin: 0; 
    padding: 0;
}

.container .topic a:link { color: #000; text-decoration-line:none;}
.container .topic a:visited { color: #000; text-decoration-line:none;}
.container .topic a:hover { color: #000; text-decoration-line:none;}
.container .topic a:active { color: #000; text-decoration-line:none;}



.container .topic img{
 max-width:100%;
}

.container .profile img{
 max-width:100%;
}



.container .profile{
 display:flex;
 width: 45%;
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: none;
}





.bio{
 max-width:100%;
 width:900px;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.bio p {
    font-weight:bold;
    margin: 0; 
    padding: 10px;
}



.mys{
 max-width:100%;
 width:900px;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
}

.mys p {
    font-weight:bold;
    margin: 0; 
    padding: 10px;
}

.mybox {
	border: 5px solid #eee;	/* 線の太さ・種類・色 */
	margin: 10px; /* 外側の余白 */
	padding: 10px 0 10px 0; /* 内側の余白 */
	position: relative;
	z-index: 0;
}
.mybox:before {
	background-color: #f0b8bf;	/* ワインポイントの色 */
	content: '';
	display: block;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 5px;
	height: 5px;
	z-index: 1;
}




.information {
 display:flex;
 max-width:80%;
 width:500px;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 flex-wrap: wrap;
}


.information .link{
 display:flex;
 width: 20%;
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: none;
}


.information .link p{
    margin: 0; 
    padding: 0;
}

.information .link a:link { color: #000; text-decoration-line:none;}
.information .link a:visited { color: #000; text-decoration-line:none;}
.information .link a:hover { color: #000; text-decoration-line:none;}
.information .link a:active { color: #000; text-decoration-line:none;}



.information .link img{
 max-width:80%;
}


}
/*===============================================
画面の横幅が979px以下
===============================================*/

@media screen and (max-width: 979px){

/* ナビゲーション */


nav{
 background-color:#FFBD4C;
 height:100px;
}

.inner{
 width:100%;
 margin:0 auto;
}
nav>.flex{
  align-items: center;
  height:100px; 
}
.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
}

.flex li{
  margin-left:10px;
  margin-right:8px;
  list-style:none;
  font-weight: bold;
}

.logo{
 width:100%;}

.logo a{
 color:white;
 font-size:20px;
 font-weight:bold;
} 

li a{
  color:white;
  text-decoration:none;
}

/* トップ画 */

.image {
 display: block;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 width:100%;

}


/* CONTENTS */

.container {
 display:flex;
 width:95%;
 margin-top: 10px;
 margin-left: auto;
 margin-right: auto;
 flex-wrap: wrap;
}


.container .topic{
 display:flex;
 width: 90%;
 height: 50%;
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFBD4C;
}


.container .topic .title{
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 12px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FFBD4C;
    color: #ffffff;
    font-weight: bold;
}

.container .topic p{
    margin: 0; 
    padding: 0;
}

.container .topic a:link { color: #000; text-decoration-line:none;}
.container .topic a:visited { color: #000; text-decoration-line:none;}
.container .topic a:hover { color: #000; text-decoration-line:none;}
.container .topic a:active { color: #000; text-decoration-line:none;}



.container .topic img{
 width:100%;
}

.container .profile img{
 max-width:100%;
}



.container .profile{
 display:flex;
 width: 100%;
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: none;
}





.bio{
 max-width:100%;
 width:900px;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.bio p {
    font-weight:bold;
    margin: 0; 
    padding: 10px;
}


.mys{
 max-width:100%;
 width:900px;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
}

.mys p {
    font-weight:bold;
    margin: 0; 
    padding: 10px;
}

.mybox {
	border: 5px solid #eee;	/* 線の太さ・種類・色 */
	margin: 10px; /* 外側の余白 */
	padding: 10px 0 10px 0; /* 内側の余白 */
	position: relative;
	z-index: 0;
}
.mybox:before {
	background-color: #f0b8bf;	/* ワインポイントの色 */
	content: '';
	display: block;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 5px;
	height: 5px;
	z-index: 1;
}




.information {
 display:flex;
 max-width:90%;
 width:500px;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 flex-wrap: wrap;
}


.information .link{
 display:flex;
 width: 20%;
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: none;
}


.information .link p{
    margin: 0; 
    padding: 0;
}

.information .link a:link { color: #000; text-decoration-line:none;}
.information .link a:visited { color: #000; text-decoration-line:none;}
.information .link a:hover { color: #000; text-decoration-line:none;}
.information .link a:active { color: #000; text-decoration-line:none;}



.information .link img{
 max-width:90%;
}




}