html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box}
article,aside,footer,header,nav,section{display:block}
body{line-height:1;overflow-wrap:break-word;word-wrap:break-word}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle;box-sizing:border-box}
a{margin:0;padding:0;text-decoration:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent}
a img{border-style:none}
ul,li{list-style-type:none}
hr{border:0;display:block;margin:1em 0;padding:0;height:1px}
.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}

/* ===================================
Background, text, link setting
=================================== */

html{
font-size:62.5%
}
body{
background-image:url(image/move_heart.gif); /* 背景 */
color:#483b3c; /* 文字色 */
font-size:1.3em;/* 文字の大きさ */
font-family:'Segoe UI','游ゴシック Medium','Yu Gothic Medium','游ゴシック体',YuGothic,'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
letter-spacing:.1em;
line-height:1.5;
padding:20px;
text-align:center
}
/*  Link */
a{
color:inherit
}
#rightcolumn a,aside a{
color:#b3a169;
display:inline-block;
margin:3px 3px 3px 0;
border-bottom:1px solid #ddd
}
#rightcolumn a:hover,aside a:hover{
background-image:url(image/back01.gif);
border-radius:5px;
color:#483b3c;
transition:.6s
}
#rightcolumn a.bg-none,a.bg-none{
border-bottom:0
}
#rightcolumn a.bg-none:hover,a.bg-none:hover{
background:none;
color:inherit
}
#rightcolumn .line > a{
border-bottom:0;
margin:0
}

/* ===================================
Basic
=================================== */

#wrapper{
position:relative;
text-align:left
}
#header-inner{
padding:0 0 20px 0
}
#rightcolumn-wrap{ 
float:right;
margin-left:-250px; /* (※1)と同じだけマイナス */
width:100%
}
#rightcolumn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid #483b3c;
    padding: 30px;
    margin-left: 270px; /* Adjusted to give a gap between the left and right boxes */
    min-height: 80vh;   /* Ensures the box is tall even with little text */
    box-shadow: 4px 4px 0px rgba(255, 170, 164, 0.8);
}
#leftcolumn-wrap{
float:left;
width:250px; /* 左側の幅(※1) */
}
#leftcolumn{
padding:0px 0
}

#leftcolumn h2, 
#leftcolumn #menu, 
#leftcolumn aside {
    background: rgba(255, 255, 255, 0.7);      /* White background for the box */
    border: 1px solid #483b3c; /* Matches your dashed style, or use solid */
    padding: 10px;
    margin-bottom: 20px;       /* This creates the "separation" between boxes */
    box-shadow: 4px 4px 0px rgba(255, 170, 164, 0.6); /* Optional: adds a retro 90s shadow */
}


#leftcolumn h2 {
    background-image:url(image/back01.gif);
    margin: 0;
    border: 1px dashed #483b3c; /* Adds a line under the box title */
}

/* MENUS */

#menu{
display:block;
margin:0 auto;
}

#menu h2, aside h2 {
    background-image: url(image/back01.gif); /* Keeps your pinkish header style */
    border: 1px dashed #483b3c;
    font-size: 1.2em;
    padding: .5em;
    text-align: center;
}

nav li {
  position: relative;
  margin: 10px 0;
  padding: 0; /* Ensure no padding is pushing the sub-menu down */
}

nav li > a,
nav li > span {
  display:block;
  background:#fff;
  border:1px dashed #483b3c;
  padding:6px 10px;
  margin: 0;
  text-shadow:2px 2px 1px #ccc;
}

nav li a:hover,
nav li span:hover{
background:url(image/back01.gif);
}

/* submenu */

.sub-menu li{
margin: 0; /* Remove the 10px margin inherited from 'nav li' */
text-indent: 0; /* Optional: clear this if it looks weird */
border:none;

}

.sub-menu li a {
    display: block;
    padding: 8px 15px;
    margin: 5px;
    text-indent: 0;
    background: #fff;
    border: 1px dashed #483b3c;
}

/*nav li:hover > .sub-menu {
    display: block;
}*/

.sub-menu {
  display: none;
  position: absolute;
  z-index: 50;
  left: calc(100% + 5px);
  top: 0px; /* Changed from 0 to -1px to align with the parent's top border */
  
  background: #fff;
  border: 1px solid #483b3c;
  
  white-space: nowrap;
  width: max-content;
  margin: 5px; /* Ensure no default margins are applied */
  padding: 5px;
  box-shadow: 4px 4px 0px #8a324c;
}

/*  Menu Arrows>」
------------------------------ */
nav li span:after{
border-top:3px solid #483b3c; /* 色 */
border-right:3px solid #483b3c; /* 色 */
content:"";
display:block;
margin-top:-5px;
position:absolute;
height:5px;width:5px;
top:50%;right:10px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
transition:.5s
}
nav li span.open:after{
-ms-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg)
}
/* Open Menu Buttons Hide
------------------------------ */
#open{display:none}

/* ===================================
Link to the top of the page
=================================== */

#pagetop{
background:#ffd8d5;
border-radius:30px;
box-sizing:border-box;
color:#fff;/* 色 */
display:block;
font-size:13px;
letter-spacing:normal;
line-height:20px;
padding-top:12px;
position:fixed;
text-align:center;
height:40px;width:40px; /* 大きさ */
bottom:-80px;
z-index:10
}
#pagetop:before{
content:"";
display:block;
border-left:2px solid #fff;
border-top:2px solid #fff;
position:absolute;
top:10px;left:16px;
height:6px;width:6px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
#pagetop:hover{
background:rgba(102,102,102,.9)
}
#fl{
margin-top:80px;
text-align:center
}
#fl a{
background:#ffd8d5;
border-radius:5px;
display:inline-block;
margin:20px 0;
padding:3px
}

/* ===================================
index
=================================== */

.indexbox {

border:1px dashed #483b3c;
margin:0px auto;
padding:20px;
text-align:center;
max-width:500px
}
.indexbox a:hover, span:hover {
background-image:url(image/back01.gif);
}

/* ===================================
Headings, borders, lines
=================================== */

h1{
font-size:1.3em;
letter-spacing:.1em;
margin:0 0 10px;
text-shadow:5px 5px 1px #ccc
}
h2{
background-image:url(image/back01.gif);
border:1px dashed;
font-size:1.2em;
margin:20px 0 20px -20px;
padding:.5em;
text-shadow:2px 2px 1px #ffb7b0
}
#leftcolumn h2{
margin:20px 0
}
#leftcolumn > h2:first-child,#rightcolumn h2:first-child{
margin-top:0
}
h3{
border-bottom:1px dashed;
font-size:1.2em;
margin:20px 0;
text-shadow:2px 2px 1px #ccc
}
h2 + h3{
margin-top:0
}
dt{
background:#483b3c;
border-radius:5px;
color:#fff;
clear:both;
font-weight:700;
float:left;
margin:0 0 5px;
padding:2px 5px;
width:12em /*Adjusted by the number of characters */
}
dd{
border-bottom:dotted 1px;
margin:0 0 5px 14em; /* dtのwidthに2足してます */
padding:2px 0
}
em{
background:#fdcf80;
background:-webkit-linear-gradient(rgba(253,207,128,0) 50%, #fdcf80 0%);
background:linear-gradient(rgba(253,207,128,0) 50%, #fdcf80 0%);
font-style:normal;
font-weight:700
}
input,textarea{
background:#fff;
border:1px dashed;
margin:3px 0;
width:250px
}
textarea{
height:50px
}
#leftcolumn input,#leftcolumn textarea{
width:100%
}
hr{
border-top:1px solid #ccc
}
.marker{
background:#ffd8d5;
border-radius:3px;
padding:1px 5px
}
.dcline{
border-left:5px solid #ffd8d5;
margin:8px 0;
padding:3px 3px 3px 10px
}
.textbox{
border:1px dashed;
margin:10px 0;
padding:3px;
text-align:center
}
.title{
color:#ffaaa4;
font-size:1.5em;
font-weight:700;
margin:2em 0
}
/*  Multi-line right just
------------------------------ */
.r-justified{
text-align:right
}
.r-justified p{
display:inline-block;
text-align:left
}
.inline{
display:inline-block
}
/*  Lines under the characters
------------------------------ */
/* bodyのfont-sizeを変更したら数値を変更 */
/* 2.6 = font-size:1.3 x line-height:2 */
.line{
padding-bottom:0.1em;
background-color:#fff;
background-image:-webkit-linear-gradient(left, #fff 1.1px, rgba(255,255,255,0) 1px), -webkit-linear-gradient(top, #ccc 1.1px, rgba(204,204,204,0) 1px);
background-image:linear-gradient(to right, #fff 1.1px, rgba(255,255,255,0) 1px), linear-gradient(to bottom, #ccc 1.1px, rgba(204,204,204,0) 1px);
background-size:2px 2.6rem;
line-height:2
}

/* ===================================
横幅800pxで切り替え
=================================== */

@media screen and (max-width: 800px){
dt{float:none;clear:none}
dd{margin-left:20px}
input,textarea{width:100%}
img{max-width:100%;height:auto} /* 画像の縮小表示 */
}

/* ===================================
スマホ、タブレット用
横幅600pxで切り替え
=================================== */

@media screen and (max-width: 600px){
body{
padding:15px;
font-size:1.5em
}
#header-inner{
padding:0;
min-height:60px; /* メニューを開くボタン分 */
margin-right:60px /* メニューを開くボタン分 */
}
#rightcolumn{
padding:20px 10px 50px
}
#leftcolumn{
background:rgba(255,255,255,.7);
padding:10px
}
h1{
font-size:1.2em
}
#rightcolumn h2{
margin:20px -10px
}
/*  文字の下の線
------------------------------ */
/* bodyのfont-sizeを変更したら数値を変更 */
/* 3 = font-size:1.5 x line-height:2 */
.line{
background-size:2px 3rem;
line-height:2
}

#wrapper{height:auto;width:auto}
#rightcolumn-wrap{float:none;margin-left:0}
#rightcolumn{margin-left:0}
#leftcolumn{float:none}
a:hover,nav span:hover,#rightcolumn a:hover{background:none;border-radius:0;color:inherit}

/* ===================================
スマホ、タブレット用メニュー
=================================== */

/*  スライド
------------------------------ */
#leftcolumn-wrap{
background:#fff;
line-height:2;
margin:0;
padding:70px 10px 20px; /* メニューボタン分空ける */
position:fixed;
height:100%;width:300px; /* (*1)同じにする */
top:0;right:0;
-ms-transform:translate(300px); /* (*1)同じにする */
-webkit-transform:translate(300px); /* (*1)同じにする */
transform:translate(300px); /* (*1)同じにする */
transition:.3s;
z-index:1000
}
#side-bg{
background:rgba(51,51,51,.5)/* 周りの背景色 */
}
/*  メニューを開くボタン
------------------------------ */
#open{
background-image:url(image/back01.gif);
border:1px dashed #483b3c;
display:inline-block;
position:absolute;
text-align:center;
height:50px;width:50px; /* 大きさ */
top:0;right:0;
z-index:1001
}
#leftcolumn{height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
#leftcolumn-wrap.open{-ms-transform:translate(0);-webkit-transform:translate(0);transform:translate(0)}
#side-bg{display:none;position:fixed;height:100%;width:100%;top:0;left:0;z-index:999;cursor:pointer}
#open.buttonclose{position:fixed;top:15px;right:15px}
.open-text{font-size:12px;position:absolute;bottom:0;left:0;width:100%}
#open-icon,#open-icon:before,#open-icon:after{background:#483b3c} /* 線の色 */
#open-icon{display:block;margin:-1px 0 0 -10px;position:absolute;top:20px;left:50%;height:2px;width:20px}
#open-icon:before,#open-icon:after{content:"";display:block;position:absolute;top:50%;left:0;height:2px;width:20px;transition:.3s}
#open-icon:before{margin-top:-8px}
#open-icon:after{margin-top:6px}
#open .close{background:transparent}
#open .close:before,#open .close:after{margin-top:0}
#open .close:before{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
#open .close:after{-ms-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}
}