@import url('https://fonts.googleapis.com/css2?family=Twinkle+Star&family=Yomogi&family=Zen+Kaku+Gothic+New&display=swap');

body{
color: #40241E;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:0.85em;
line-height:1.8;
background-color: #A6652D;
background-image: linear-gradient(#A67A54 2px, transparent 2px), linear-gradient(to right, #A67A54 2px, #A6652D 2px);
background-size: 40px 60px;
background-repeat: repeat;
user-select: none;  /* コピペ防止 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
a{color:#A6652D}
a:hover{color:#D9B777}

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

.text{
width:90%;
max-width:800px;
margin: 15px auto;}

header{
font-family: 'Twinkle Star', 'Yomogi', cursive;
font-size: 1.2em;
}
header a{color:#D9B777}
header a:hover{color:#D9C8A9}

.menu{text-align: center;
font-size: 1.2em;}

li {
display: inline-block;
}
li:not(:first-child)::before {
font-family: "Font Awesome 5 Free";
content: '　\f004　';
font-weight: 900;
color:#E73562;
font-size:0.3em;
position: relative;
display: inline-block;
vertical-align: middle;}

.box{
background:
linear-gradient(45deg,  transparent 10px, #D9C8A9 10px),
linear-gradient(315deg, transparent 10px, #D9C8A9 10px),
linear-gradient(225deg, transparent 10px, #D9C8A9 10px),
linear-gradient(135deg, transparent 10px, #D9C8A9 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 15px;
margin: 15px;}

h1{font-weight: bold;
color:#F2D5EA;
font-family: 'Twinkle Star', 'Yomogi', cursive;
font-size: 2em;
line-height: 1.4;
display: inline-block;
text-align: right;}
h1:before{
font-family: "Font Awesome 5 Free";
content: '\f004　\f004　\f004';
font-weight: 900;
color:#E73562;
font-size:0.3em;
padding:5px;
display: inline-block;
vertical-align: middle;}

h2{font-family: 'Twinkle Star', 'Yomogi', cursive;
position: relative;
padding: 0 65px;
text-align: center;
font-size: 20px;
}

h2:before {
position: absolute;
top: calc(50% - 1px);
left: 0;
width: 100%;
height: 2px;
content: '';
background: #40241E;
}

h2 span {
position: relative;
padding: 0 1em;
background: #D9C8A9;
}

em{
background:linear-gradient(transparent 75%, #F2D5EA 75%);
}

p{
margin: 1em;
}

p span{
font-weight: bold;
display: inline-block;
vertical-align: middle;
}
p span:before{
font-family: "Font Awesome 5 Free";
content: '\f004';
font-weight: 900;
color:#E73562;
font-size:0.3em;
padding:3px;
display: inline-block;
vertical-align: middle;
}

section{
margin-bottom: 2em;
}

.atgk{
width: 90%;
border: 3px double #40241E;
margin: 1.5em auto;
}

textarea, input{
width: 90%;
border: 1px solid #D9B777;
background: #fff;
}

footer{
text-align: center;
}

.book {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 16px;
    font-weight: normal;
    margin: 0 auto;
    max-width: 100%;
    width: 90%;
}

.book p {
    font-size: 16px;
    margin-bottom: 25px;
}

input[type], textarea {
    height: 80px;
    width: 95%;
    font-size: 12px;
    line-height: 180%;
    letter-spacing: 2px;
    color: #fff;
    background: rgba(217,183,119,.5);
    border: solid 1px #A6652D;
        -webkit-appearance: none;
    border-radius: 3px;
    box-shadow: none;
    margin: 3px 0;
    padding: 3px;
}

input[type=text ]{
    height: auto;
    width: 100px;
}

input[type=submit]{
    height: auto;
    width: 80px;
    cursor: pointer;
    text-shadow: none;
    background: #A6652D;
    font-weight: 200;
}

summary {
  list-style: none; /* 三角を非表示 */
  cursor: pointer;
  position: relative;
  padding: 10px 35px 10px 20px;
}

summary::-webkit-details-marker {
  display: none;
}

.newiine_btn {
    height: auto !important;
    width: 50px !important;
    cursor: pointer !important;
    background: #A6652D !important;
    border: solid 1px #A6652D !important;
    color: #d9c8a9 !important;
    font-weight: 200 !important;
    font-family: 'Dosis', 'Noto Sans JP', 'メイリオ', sans-serif !important;
    padding: 5px 10px !important;
    margin: 3px 0 !important;
    text-align: center !important;
    display: inline-block !important;
    border-radius: 5px !important;
    -webkit-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
}

.newiine_btn:hover {
    background: #A6652D !important;
    color: #fff !important;
    -webkit-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
}

/* 追加: 外部CSSの強制上書き */
.newiine_btn,
.newiine_btn * {
    background: #A6652D !important;
    border-color: #A6652D !important;
    color: #d9c8a9 !important;
}

/* スクロールバーのカスタマイズ */
html {
  scrollbar-width: thin;
  scrollbar-color: #A6652D #D9C8A9; /* サム: ブラウン、トラック: 薄いベージュ */
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: #D9C8A9; /* 薄いベージュ */
  border: none;
}

::-webkit-scrollbar-thumb {
  background: #A6652D; /* ブラウン */
  border-radius: 5px;
}