@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

html,body{height: 100%;}
body::after{content: "";display: block;width: 100%;height: 100%;
    position: fixed;top: 0;left: 0;z-index: -1;
    background-color: #FFDEE9;
    background-image: linear-gradient(225deg, #FFDEE9 14%, #B5FFFC 100%);
	background-size: 200% 200%;animation: bggradient 20s ease infinite;}
@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

a,a img{color: #0071bc;transition: .4s;}
a:hover{text-decoration: none;}

.wrap{max-width: 1000px;margin: 0 auto;padding: 3em 5%;}

@media (min-width:801px){
    .pc_none{display: none;}
}
@media (max-width:800px){
	body{font-size: 14px;}
    .sp_none{display: none;}
}

/* ---------------------------------------------
	共通パーツ
--------------------------------------------- */
/* -- フォント -- */
.f_serif{font-family: 'Noto Serif JP', serif;color: #535353;}

.f_14{font-size: 0.875rem;}
.f_18{font-size: 1.125rem;}
.f_24{font-size: 1.5rem;}
.f_28{font-size: 1.75rem;}
.f_36{font-size: 2.25rem;}

.f_red{color: #ad2727;}

/* 強調 */
.b_f{font-weight: bold;background: linear-gradient(transparent 60%, #fdf690 60%);}

/* 罫線 */
hr{margin: 0.5em 0;border-width: 1px 0 0 0;border-style: dashed;border-color: #ccc;}

/* 見出し */
h2{font-size: 1.5rem; margin-bottom: 1rem;}

/* -- ボックス -- */
.box_wr{background: #fff;border-radius: 15px;padding: 2rem;border: 2px solid #535353;}

/* -- flex 2分割 -- */
@media (min-width:801px){
    .flex_2{display: flex;justify-content: space-between;}
    .flex_2>*{width: calc(50% - 1rem);}
    /* 逆順 */
    .flex_2r{display: flex;flex-direction: row-reverse;justify-content: space-between;}
    .flex_2r>*{width: calc(50% - 1rem);}
}
@media (max-width:800px){
    .flex_2>*:first-child,.flex_2r>*:first-child{margin-bottom: 1em;}
}

/* -- flex 3分割（改行可） -- */
@media (min-width:801px){
    .flex_3{display: flex;flex-wrap: wrap;}
    .flex_3>*{margin-left: 21px;width: calc(33.3% - 14px);}
    .flex_3>*:nth-child(3n+1){margin-left: 0;}
    .flex_3>*:nth-child(n+4){margin-top: 1.5rem;}
}
@media (max-width:800px){
    .flex_3>*:nth-child(n+2){margin-top: 2rem;}
}

/* table */
table{width: 100%;}
table,td,th{border-collapse: collapse;}
th{font-weight: bold;}
tr>*{padding: 1rem;}
@media (min-width:801px){
    tr>*{border-bottom: 1px solid #ccc;height: 4rem;}
    tr:last-child>*{border-bottom: none;}
    th{border-right: 1px dashed #bbbbbb;}
}
@media (max-width:800px){
    th,td{display: block;width: 100%;text-align: left;border: none;}
    th{box-sizing: border-box;font-size: 1.125rem;padding: 0.5rem;margin-top: 1rem;border-bottom: 3px solid #535353;}
}


/* ---------------------------------------------
	header
--------------------------------------------- */
header{text-align: center;height: 40vh;background: url(../img/note2.jpg) no-repeat center / cover;position: relative;}
header>*{position: absolute;left:0;bottom:50%;transform: translate(0, 50%);width: 100%;font-size: 1.5rem;line-height: 2;letter-spacing: .03em;font-family: 'Noto Serif JP', sans-serif;}

@media (max-width:800px){
    header{height: 60vh;}
}


/* ---------------------------------------------
	footer
--------------------------------------------- */
footer{text-align: center;color: #888;margin-top: 3rem;}


/* ---------------------------------------------
	main
--------------------------------------------- */
/* content */
.content h2{padding: 1rem 2rem;
    border-left: 6px double #535353;}

/* profile */
.prof{position: relative;margin-top: 100px;padding-top: calc(1rem + 100px);}
.prof_r{text-align: center;position: absolute;top: -100px;left: 0;width: 100%;}
.prof_r img{border-radius: 50%;}

/* work */
.work h2{text-align: center;background: #fff;padding: 1rem 2rem;font-weight: bold;
    border-top: 3px solid #535353;border-bottom: 3px solid #535353;}
.work h3{margin-bottom: 1.8rem;font-weight: bold;font-size: 1.2rem;background-color: #ffffff8f;padding: 0.5rem 1rem;color: #616573;border-radius: 5px;}

.work a{display: block;background: #fff;padding: 1.5rem; border-radius: 15px;}
.work a:hover{box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);}

/* modal */
.modalbox{max-width: 1000px;}
.modalbox img{border: 1px #ccc solid;margin: 1rem 0;}
.modalbox h4{margin-bottom: 0.5rem;position: relative;font-size: 1.5rem;font-weight: bold;}
.modalbox h4::after {
    content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 8px;
    background: -webkit-repeating-linear-gradient(-45deg, #adece7, #adece7 2px, #fff 2px, #fff 4px);
    background: repeating-linear-gradient(-45deg, #adece7, #adece7 2px, #fff 2px, #fff 4px);}
.modalbox h5{margin: 0.5rem 0 1rem;position: relative;padding: 0.6em;background: #daf1ef;font-weight: bold;border-radius: 5px;}
.modalbox .flex_2>div>p{margin-top: 1rem;}
.modalbox li{padding-left: 1rem;position: relative;}
.modalbox li::before{content: "・";position: absolute;top: 0;left: 0;}


/* ---------------------------------------------
	ログイン画面
--------------------------------------------- */
#login{display: flex;align-items: center;justify-content: center;height: 100%;margin: 0 5%;}

/* ボタン */
#login input[type="submit"]{
	transition: .2s;background : linear-gradient(246deg, #92e6f9 0%, #2b9eec 100%);border-radius : 8px;
    display:inline-block;color:#fff;padding:0.5em 3em;text-decoration:none;box-shadow: 0 0 5px rgba(0,0,0,0.2);}
#login input[type="submit"]:hover{box-shadow: 0 3px 15px rgba(0,0,0,0.3);}