@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Noto+Serif+JP&family=Zen+Antique&display=swap');

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

:root{
--main-color: #f58f98; /* アクセントカラー */
}

html{
  scroll-behavior: smooth;
}

body{
background: #fff;
color: #333;
font-family: 'Noto Serif JP', serif;
font-size: 0.8em;
line-height: 1.5;
}

a{
text-decoration: none;
color: #000;
font-weight: bold;
border-bottom: 3px double var(--main-color);
}

.wrp{
width:90%;
max-width:600px;
margin:15px auto;
}

header{
margin: 30px auto 5px;
}

h1 {
font-family: 'Zen Antique', serif;
position: relative;
padding-top: 30px;
padding-left: 30px;
font-size: 2em;
font-weight: 400;
letter-spacing:0;}

h1::before {
content: attr(data-en);
position: absolute;
transform: rotate(-7deg);
color: rgba(245,143,152,0.5); /* 英字タイトルの色 */
top: 0;
left: 0;
font-size: 1.5em;
font-weight: 400;
font-family: 'Fredericka the Great', cursive;
letter-spacing:0;
z-index: -1;
}

h2{
font-family: 'Zen Antique', serif;
color: var(--main-color);
font-size: 2em;
line-height:2 ;
}

h3 {
font-family: 'Zen Antique', serif;
font-size:1.6em;
color: #000;
border:2px solid var(--main-color);
border-radius:30px;
margin-bottom: 30px;
padding: 1em;
text-align: center;
background: url(back.png) no-repeat right bottom/cover;
background-color:rgba(255, 255, 255,0.5);
background-blend-mode:lighten;
}

p{
padding: 20px;}

.menu{
margin: 10px 40px;
}

.menu a{
font-family: 'Zen Antique', serif;
color: #fff;
font-size:1em;
background: var(--main-color);
border:3px double #fff;
margin: 5px;
padding: 5px 1em;
}
.menu a:hover{
color: var(--main-color);
background: #fff;
border:3px double var(--main-color);
}

.box{
border:2px solid var(--main-color);
border-radius:30px;
margin-bottom: 30px;
background: url(back.png) no-repeat right bottom/cover;
background-color:rgba(255, 255, 255,0.5);
background-blend-mode:lighten;
}

.text{
line-height: 1.8;
width: 95%;
margin: 1em auto;
}

.atgk{
border: double 3px var(--main-color);
margin: 1em 1em 0 1em;
padding: 0.5em;
}

.mark{
font-size: 1.1em;
background: var(--main-color);
color: #fff;
padding: 0 1em;
}

em{
background:linear-gradient(transparent 60%, #ecec66 60%);
font-weight: bold;
padding: 0 0.2em;
}

.page_top_btn {
position: fixed;
bottom: 10px;
right: 10px;
font-weight: bold;
padding: 1em;
text-align: center;
background: var(--main-color);
color: #fff;
border-radius:30px;
transition: 0.3s0;
}

footer{
text-align: center ;
margin: 50px auto 20px;
}