@charset "UTF-8";
/*コメントアウトはこうして書く bodyの{colorを: blackに}*/

body{
	font-family: Quicksand,游ゴシック体,objektiv-mk2,ryo-gothic-plusn,Helvetica,sans-serif;
	color: grey;
	background-color: white;
	margin: 0px;
	text-align: center;
}

.wrapper	{
	margin: 5px 20px;
	padding: 5px;
}


#content {
}



.BeforeScroll	{
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 300ms;
	padding: 10px ;
	margin: auto;
	font-size: 90% ;
	font-weight: normal;
	border-left: solid 2px lightgrey;
	border-right: solid 2px lightgrey;
	border-radius: 15px;
	max-width: 420px;
}

.AfterScroll	{
	opacity : 1;
	transform : translate(0, 0);
	padding: 10px ;
	margin: auto;
	font-size: 90% ;
	font-weight: normal;
	border-left: solid 2px lightgrey;
	border-right: solid 2px lightgrey;
	border-radius: 15px;
	max-width: 420px;
}

.text	{
		display: inline-block;
}

article {
	padding: 10px 0px;
}

footer {
	padding: 20px;
	font-size: 80%
}

nav	{
	text-align: right;
	font-weight: bold;
}

nav li {
	display: inline;
	margin-right: 10px;
}

h1	{
	font-weight: normal;
	/*スマホ表示の際に文章がバラバラにならないように*/
	font-size: 130%
}

h1 a	{
	color: red;
}

h2	{
	font-weight: normal;
	/*スマホ表示の際に文章がバラバラにならないように*/
	font-size: 120%
}

h3 {
	font-weight: normal;
	margin-bottom: 5px
}


.year {
	margin-top: 0px;
	margin-bottom: 0px
}

#section2	{
	margin-bottom: 40px
}

#section3, #section4	{
	max-width: 420px;
	display: inline-block;
}

#section4	{
	text-align: left;
}

hr {
	margin-top: 40px;
	max-width: 420px;
}

a {
	/*黒点を消す*/
	text-decoration: none;
	color: black;
	font-weight: : bold;
}

a:hover {
  color: grey;
}

.welcome {
	/*スマホ表示の際に文章がバラバラにならないように*/
	display: inline-block;
	font-size: 120%
}


img {
	max-width: 100%;
	height: auto;
}

@media only screen and (max-width: 694px) {
    #profile {
        text-align: center;
    }
}


.outerlink{
	/*主にコンタクトのリンクがオレンジになるように*/
	color: orange;
}

.newtitle {
	color: pink;
}

#diary {
	border-bottom: double 6px #87CEFA;
	color: lightgreen
}

#my_centered_buttons {
	display: flex;
	justify-content: center;
	padding: 0px;
 }

/* accordion */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.important {
	color: red;
}