@CHARSET "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/*
土
c9af81

オレンジ
FFBD37

水
5E99FF

ワイン
9e3052
*/


.spbr{
  display:none;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html { scroll-behavior: smooth;}

body{
  font-size:1rem;
  line-height:1.6rem;
  font-family:"Noto Sans JP", "メイリオ", sans-serif;
  color:#000000;
  background-image:url(pic/back.jpg);
  background-position:top center;
}

body#body3rd{
  background-image:url(pic/back3.jpg);
}

a[href]{
  text-decoration: none;
  color:#EE4478;
}

a[href]:hover{
  color:#FF9462
}

#allbox{
  display:block;
  margin:auto;
  width:60%;
  max-width: 900px;
  min-width: 600px;
  background-color:#ffffff;
  padding:60px 16px 32px 16px;
}

#pageerrorbox{
  font-size:2rem;
  text-align:center;
  background-color:#ffffff;
  width:80%;
  margin:32px auto;
  border-radius: 16px;
  padding:32px;
  font-weight:600;
}

#header{
  position:fixed;
  left:0;
  top:0;
  display: flex;
  justify-content: center;
  width:100%;
  height:50px;
  z-index:2;
  background-color:#ffffff;
  box-shadow:0 2px 2px rgba(60,0,0,0.3);
}

.topbutton{
  display: flex;
  align-items:center;
  justify-content: center;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  width:150px;
  height:40px;
  margin:0 2px;
  background-color:#ffffff;
  border-bottom:4px solid #9e3052;
}

.topbutton:hover{
  background-color:#FFF1B3;
}

#bottom{
  position:fixed;
  left:0;
  bottom:0;
  background-color:#ffffff;
  width:100%;
  box-shadow:0 -2px 2px rgba(60,0,0,0.3);
  z-index:2;
  font-size:0.9rem;
  font-family: "Mplus 1p";
  font-weight: 500;
  text-align:center;
}

.centering{
  text-align: center;
}

.expandfont{
  font-size:1.3em;
  font-weight: 700;
}

.redfont{
  color:#ff3322;
}

.pagelinkbutton{
  border:2px solid #ff3322;
  color:#9e3052;
  text-decoration: none;
  padding:0 8px;
  margin:0 4px;
  border-radius: 8px;
  font-size:0.9rem;
}

a.linkbutton{
  display: inline-block;
  background-color: #ff3322;
  padding: 8px 16px;
  margin: 8px;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
}

a.linkbutton:hover{
  background-color: #FFF075;
}

#menubuttons a{
  cursor: pointer;
}

.titlepicture{
  display: block;
  width:100%;
  padding:0;
  height:auto;
  margin:auto;
  pointer-events: none;
}

.titlepicture2{
  display: block;
  width:100%;
  height:auto;
  margin:auto;
  pointer-events: none;
  max-width: 600px;
}

.titlepicture3{
  display: block;
  width:100%;
  height:auto;
  margin:auto;
  pointer-events: none;
  max-width: 600px;
}

.profpicture{
  display: block;
  width:100%;
  height:auto;
  margin:auto;
  pointer-events: none;
  max-width: 300px;
}

.wordbox{
  margin: 32px auto;
  padding: 0 16px 16px 16px;
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
}

.wordbox:nth-child(odd){
  border: 6px solid #FFAA00;
}

.wordbox:nth-child(even){
  border: 6px solid #5E99FF;
}

.wordbox:nth-child(odd) .subtitlebox{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background-color: #FFAA00;
  color: #ffffff;
  padding: 16px;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 -17px 16px -17px;
}

.wordbox:nth-child(even) .subtitlebox{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background-color: #5E99FF;
  color: #ffffff;
  padding: 16px;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 -17px 16px -17px;
}

.wordbox:nth-child(odd) .detailbox{
  margin:8px;
  padding:16px;
  border: 2px solid #FFAA00;
}

.wordbox:nth-child(even) .detailbox{
  margin:8px;
  padding:16px;
  border: 2px solid #5E99FF;
}

.newswrapbox{
  border:2px solid #eeeeee;
}

.newsbox{
  display: flex;
}

.newsbox div{
  padding: 2px 8px;
}

.newsbox:nth-child(even){
    
}

.newsbox:nth-child(odd){
  background-color:#eeeeee;
}

.nolinebox{
  margin: 32px auto;
  width: calc(100% - 128px);
  max-width: 800px;
}

.formbutton{
  display: flex;
  justify-content: space-around;
}

a.squarebuttonbox{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  display: flex;
  align-items:center;
  justify-content: center;
  width:200px;
  height:200px;
  border:8px solid #FFB8B9;
  background-color:#FF6B6B;
  color:#ffffff;
  border-radius: 16px;
  padding:16px;
  font-size: 18px;
  line-height:1.8em;
  font-weight: bold;
}

a.squarebuttonbox:hover{
  background-color:#FFE8C0;
}

input[type="text"]{
  background-color:#FFFCA4;
  padding:8px;
  width:80%;
}

textarea{
  background-color:#FFFCA4;
  padding:8px;
  width:80%;
  line-height:1.5em;
}

.linkbutton{
  color:#ffffff;
  text-align:center;
  background-color:#FF9C9C;
}

.linkbutton:hover{
  color:#000000;
  background-color:#FFF5B6;
}

a.squarebutton{
  display:block;
  width:70%;
  margin:auto;
  padding:16px;
  color:#000000;
  background-color:#D5C1A1;
  border-radius: 16px;
  text-align:center;
}

a.squarebutton:hover{
  background-color:#FCB94F;
  color:#000000;
}

.errorbox{
  margin-top:16px;
  border: 8px solid #ff0000;
  padding:16px;
  font-weight: bold;
}

.chapter{
  border-right:3px solid #80683E;
  border-bottom:3px solid #80683E;
  background-color:#E16D6B;
  border-radius: 16px;
  padding:4px;
  text-align: center;
  width:300px;
  color:#ffffff;
  font-weight: 700;
  margin-bottom:16px;
}