@charset "UTF-8";

body{
font-family:'游ゴシック';
color:#30343A;
background-color:#FBFEFF;
}
#rap{
width:1200px;
margin:0 auto;
margin-top:-50px;
}

#rap2{
width:1000px;
margin:0 auto;
}


h1{
text-align:center;
}

h1.title{
display:block;
font-size:25px;
color:#344699;
text-align:left;
padding-left:100px;
width:400px;
margin-top:20px;
margin-bottom:10px;
}


.eplanet{
font-size:17px;
}



table#top{
width:1200px;
height:100px;
}

img.logo{
margin:0 auto;
width:150px;
float:left;
padding-right:0px;
margin-left:px;
margin-top:50px;
margin-right:20px;
} 


.believe{
width:230px;
margin-left:-0px; 
margin-top: 50px;
margin-right:100px;
}

.akusesu{
width:100px;
border-left:2px #30343A solid;
margin-top:50px;
margin-right:-20px;
}

.akusesu2{
width:100px;
border-left:2px #30343A solid;
margin-top:50px;
margin-right:-20px;
}



div.clear{
float:none;
}

img.center{
display:block;
margin:0 auto;
width:1200px;
}


ul.bxslider{
display:block;
margin:0 auto;
margin-left:-40px;
}




hr{
width:1200px;
height:2px;
background-color:#344699;
margin-bottom:20px;
margin-top:0px;
}

table#info{
margin:0 auto;
width:600px;
margin-top:40px;
}
.info{
width:800px;
}

.intro{
margin-top:0px;
text-align:center;
}
.speech{
margin-top:0px;
text-align:center;
}


p.kyu{
font-family: arial;
border:1px solid #FBFEFF;
width:300px;
height:50px;
line-height: 50px;
text-align:center;
justify-content:center;
align-items:center;
color:#FBFEFF;
font-size:22px;
background-color:#344699;

}

p.open{
font-family: arial;
border:1px solid #FBFEFF;
width:300px;
height:50px;
line-height: 50px;
text-align:center;
justify-content:center;
align-items:center;
color:#FBFEFF;
font-size:22px;
background-color:#344699;

margin-top:0px;

}

table#gaiyou{
margin:0 auto;
margin-bottom:200px;
box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2);
}

td.gai1{
font-size:20px;
width:30%;
height:50px;
vertical-align:middle;
text-align:center;
background-color:rgba(52,70,153,0.2);
}
td.gai2{
font-size:20px;
width:70%;
height:50px;
vertical-align:middle;
text-align:center;
background-color:#FBFCFF
}
table#gaiyou {
  width: 1000px; /* または 100% */
  margin: 0 auto;
  box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2);
}

td.gai1 {
  width: 300px; /* 固定幅 */
}

td.gai2 {
  width: 700px; /* table widthに合うように調整 */
}



.president{
width:2000px;
}

table#president{
margin-left:0 auto;
width:1000px;
margin-bottom:200px;
background-color:#FBFCFF;
}
td.aisatsu{
color:#30343A;
text-align:left;
}
p.futoji{
margin-left: 450px;
font-size:20px;
font-weight:bold
}
span.honbun{
display:block;
font-size:20px;
text-align:left;
margin-left:30px;
}
span.katagaki{
display:block;
font-size:20px;
text-align:left;
padding-left:600px;
}

p.rinen{
font-size:20px;
}

.task1{
width:300px;
}
.task{
width:480px;
padding-left:200px;
}
.goal{
width:300px;
padding-left:200px;
}

.outstand{
background:linear-gradient(transparent 50%, #ffa64d 65%);
}


td.sl{
width:300px;
}
td.sr{
width:500px;
}
.s1{
width:250px;
}

td.sl2{
width:800px;
}
td.sr2{
padding-left:100px;
width:300px;
}

li{
list-style: none;
}


img.nensuke{
width:1000px;
margin-bottom: 100px;
}

.support1{
margin-top:50px;
border-left :solid 5px orange;
border-bottom: solid 1px gray;
/*余白をつけておきます*/
padding: 10px;
}



/*プルダウンメニュー設定**********************/


.Menu {
box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2);
width:1100px;
display: flex;
margin: 0 auto;
padding: 0;
margin-top: 40px;
margin-bottom:50px;
}

.Menu > * + * {
border-left: 2px solid white;
}

.Menu-Item {
  position: relative;
  flex: 1;
  cursor: pointer;
    width: 100%;
   padding: 0;
}




.Menu-Item-Label {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 15px;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#344699;
  color: #FBFEFF;
   
}


.SubMenu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 100%;  /* ← 親の下にぴったり配置 */
  width: 85%; /* ← 自分の幅に合わせる場合は適宜調整 */
  background-color: rgba(52,70,153,0.5);
  z-index: 9999;
  transition: opacity 0.6s ease-in-out, visibility 0.8s ease-in-out; /* ゆっくり表示 */
}

.Menu-Item:hover .SubMenu {
  visibility: visible;
  opacity: 1;
  transform: none; /* ← ずらさない */
}

.SubMenu-Item {
  width: 100%;
  padding: 16px;
  display: flex;
  
  align-items: center;
  color: #FBFEFF;
      z-index: 100;
}

.SubMenu > * + * {
  border-top: 1px solid #fff;
}




/*プルダウンメニュー設定* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑  */


h2{ 
box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2);
color:white;
font-size:20px;
background-color:rgba(52,70,153,0.8);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

h3{
border-bottom: 2px solid black;
color:black;
font-size:20px;
}



a{
color:white;
text-decoration:none;
}

#content{
    width:1000px;
    margin:0 auto;
    padding-left:0px;
    min-height:100%;
    overflow:hidden;
    margin-bottom:100px;
}
#left{
    width:600px;
    padding-bottom:3276px;
    margin-bottom:-3076px;
    float:left;
    height:auto;
}
#right{
    width:300px;
    float:right;
    padding-bottom:3276px;
    margin-bottom:-3276px;
    margin-top: 40px;
}
.infohead{
border-bottom: 2px solid #30343A;
height:50px;
text-align:left;
}

.info1{
height:100px;
border-left:5px solid #344699;
}

a.info2{
height:100px;
color:#30343A;
display:block;
}

a.info2:hover{
background-color:#CCFFFF;
}

#clear{
    clear:both;
}


.activity{
margin-left:50px;
margin-bottom:50px;
}
.traffic{
width:400px;
text-align:center;
}
.sports{
width:400px;
text-align:center;
margin-left:50px;
}
.kyoto{
text-align:center;
width:400px;
margin-top:30px;
}
.setubun{
text-align:center;
width:400px;
margin-top:30px;
margin-left:50px;
}
.kakizome{
text-align:center;
width:400px;
margin-top:30px;
}
.bousai{
text-align:center;
width:400px;
margin-top:30px;
margin-left:50px;
}
.tanabata{
text-align:center;
width:400px;
margin-top:30px;
}
.usj{
text-align:center;
width:400px;
margin-top:30px;
margin-top:30px;
margin-left:50px;
}

.activ{
margin-top:2px;
border:1px solid #FBFEFF;
width:400px;
height:30px;
text-align:center;
justify-content:center;
align-items:center;
color:#FBFEFF;
font-size:20px;
background-color:#344699;
box-shadow:0 4px 8px 4px rgba(0, 0, 0, 0.2);
}

.activ2{
margin-top:2px;
margin-left:50px;
border:1px solid #FBFEFF;
width:400px;
height:30px;
text-align:center;
justify-content:center;
align-items:center;
color:#FBFEFF;
font-size:20px;
background-color:#344699;
box-shadow:0 4px 8px 4px rgba(0, 0, 0, 0.2);
}




ol{
padding-left:30px;
line-height:50px;
}




table#toi{
margin-top:20px;
margin-bottom:20px;
margin-left:100px;
}
td.field{
width:100px;
height:30px;
vertical-align:middle;
color:#30343A;
text-align:left;
}
table#toi td.info{
width:500px;
height:30px;
}
input.m{
font-size:20px;
width:30em;
height:30px;
border:1px #344699 solid;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
textarea.m{
font-size:20px;
border:1px #344699 solid;
width:30em;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}





img.picture{
width:400px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}


p.entrance
{border-left :solid 5px orange;
border-bottom: solid 1px gray;
/*余白をつけておきます*/
padding: 10px;
}



.course{
border-collapse:collapse;
margin-left:50px;
text-align:center;
}
.course1{
height:50px;
width:100px;
border:1px #30343A solid;
}
.course2{
width:350px;
border:1px #30343A solid;
}
.course3{
width:600px;
border:1px #30343A solid;
}


table#classtime{
border-collapse:collapse;
margin-left:50px;
text-align:center;
margin-bottom:200px;
}
.time1{
height:50px;
border:1px #30343A solid;
width:200px;
}
.time2{
height:50px;
border:1px #30343A solid;
width:300px;
}
.time3{
border:1px #30343A solid;
width:300px;
}


.fee{
border-collapse:collapse;
margin-left:50px;
text-align:center;
}
.fee1{
height:50px;
width:158px;
border:1px #30343A solid;
}
fee3{
width:158px;
border:1px #30343A solid;
}


.purple{
background-color:rgba(52,70,153,0.2);
}

.support{
font-size:30px;
text-emphasis: circle #4d9bc1;
}

.q{
margin-top:30px;
}

.simplemap{
width:800px;
padding-left:100px;
margin-bottom:100px;
}

.map{
height:400px;
padding-left:200px;
}





div.smaho{
display:none;
}



.logo2{
margin-left:0 auto;
width:auto;
    }

.siryo{
text-align: center;
font-size:30px;
}

.op1{
color:#30343A;
text-align: center;
line-height: 50px;
}

p.footer{
color:white;
}

#footer{
position:relative;
text-align-last: center;
}



.Menu-Item2 {
position: relative;
flex: 1;
cursor: pointer;
width: 100%;
padding: 0;
}

.Menu-Item-Label2 {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 15px;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FBFEFF;  
}
.SubMenu2 {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 50px;
  width:84%;
  background-color: rgba(52,70,153,0.5);
      z-index: 1000;
}

.SubMenu-Item2 {
  width: 30%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FBFEFF;
z-index: 100;
}

.SubMenu2 > * + * {
  border-top: 1px solid #fff;
}

.Menu-Item2:hover .SubMenu2 {
  transition: all 1.5s;
  visibility: visible;
  transform: translateY(22px);
}

a.SubMenu-Item-Link2{
display:block;
z-index:9999;  
transition: opacity 0.6s ease-in-out, visibility 0.8s ease-in-out; /* ゆっくり表示 */
}


.dor{
color:#30343A;
font-size:30px;
text-align: center;
}
.dor1{
background: linear-gradient(transparent 40%, #f5ff00 60%);
}


table#hostel_image{
align-items: cent;
width:1000px;
margin-left: 150px;
}



.shoes{
width:200px;
}



@media screen and (max-width:768px){

#rap{
max-width: 100%;
width:450px;
margin:0 auto;
}
#rap2{
max-width: 100%;

}


 .main-header {
    
    background-color: #fff;
    color: #22704f;
    text-align: center;
    padding: 1rem 1rem 1rem 1rem;
    font-weight: bold;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 影を強めて浮き立たせる */ 
}

    
    
    
    
    

    
img.slogo{
max-width: 58%;
width:300px;
margin-right:2px;
margin-top: -10px;
margin-left: -15px;
float:left;
} 


img.sicon2{
max-width: 12%;
background-color:#344699 ;
width:55.2.px;
margin-left: 1px;
margin-top:-10px;
margin-bottom:5px;
float:left;
}
    
img.sicon3{
max-width: 12%;
background-color:#344699 ;
width:55.2px;
margin-left: 1px;
margin-top:-10px;
margin-bottom:5px;
float:left;
}
    
 
 ul.iconsub{
margin-left:30px;
padding-left: 70px;
margin-top: 0;
margin-bottom: 0;
}
    
li.iconsub{
text-align: center;
background-color:#344699;
color:#FBFEFF;
list-style: none;
border-bottom: 1px solid white;
font-size: 10px;
font-weight: 50;
width: 20%;  
}
    
    
    
    
    
    
     
div.pc{
display:none;
}


.ste{
font-size:10.5px;
}

img.center{
display:block;
margin:0 auto;
width:450px;
max-width: 100%;
margin-top:75px;
}

    
ul.bxslider{
margin-top:-20px;
margin-bottom:10px;
    display:block;
    z-index:1;
}

table#em{
max-width: 100%;
margin:0 auto;

height:300px;
}   
.em{
max-width:100%
margin-right:50px;
}

   

.skyu{
color:#30343A;
max-width:100%;
margin:0 auto;
vertical-align: center;
text-align: center;
line-height:200px;
font-size:22px;
height:180px;
background-color:rgba(52,70,153,0.1); 
}
    

.sface{
max-width: 100%;
display:block;
height:180px;
margin:0 auto;
}
.svoice{
max-width: 100%;
display:block;
height:180px;
margin:0 auto;
}  
.syoutube{
max-width: 100%;
text-align: center;
display:block;
    }

    
.entrance{
max-width: 100%;
font-size:10px;
}
ol{
max-width: 100%;
font-size:10px;
line-height:20px;
}
img.picture{
width:200px;
    }

div.pc{
display:none;
}
div.smaho{
max-width: 100%;
display:block;
}
    
h2{ 
max-width: 100%;
box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2);
color:white;
font-size:15px;
background-color:#344699；

}

h3{
max-width: 100%;
color:black;
font-size:15px;
margin-left:5px;
}

table#sinfo{
max-width: 100%;
font-size:15px;
margin-top:20px;
margin-bottom:20px;
}
.infohead{
max-width: 100%;
border-bottom: 2px solid #30343A;
height:10px;
margin-bottom:20px;
}

td.sinf{
max-width: 100%;
height:100px;
color:#30343A;
vertical-align:middle;
padding-bottom:5;
padding-top:5;
}

a.slink{
max-width: 100%;
border-left:2px solid #344699;
display:block;
color:#30343A;
height:80px;
background-color:#CCFFFF;
}
    

td.menu{
    border:2px white solid;
    width:100px;
    height:20px;

    vertical-align:middle;
    text-align:center;
    background-color:#344699;
    color:white;
    }
a.menu{
    display:block;
    color:white;
    font-size:10px;
    text-decoration:none;
    width:150px;
    height:10px;
    background-color:#344699;
    line-height:10px;
}
    
    


    
input.m{
font-size:20px;
width:15em;
height:30px;
border:1px hotpink solid;
}
textarea.m{
font-size:20px;
border:1px hotpink solid;
width:15em;
}
    
/********************************/
    div#smenu{
       margin-top: 40px;
    }    
    
    .details-summary {
	cursor: pointer;
	transition: 0.3s;
	padding: 6px;
	border-radius: 6px;
	font-size: 12px;
        background-color:#4169e1;
        color :#FBFEFF;
        border: 1px solid white;
       margin: 0 auto;
        width: 300px;
        padding: 2px;}
	/* ホバー時のスタイル */
	&:hover {
		cursor: pointer;
		background-color: #bee1de;
	}

    /* ▼ details（スマホ用ドロワー）の暴発防止 ------------------ */

/* summary をしっかり固定し、タップ時に閉じにくくする */
details summary {
  touch-action: manipulation;   /* ← スマホの誤操作を防ぐ */
  user-select: none;            /* ← 強引な範囲選択を防ぐ */
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* 青い枠対策 */
}

/* summary をタップしても揺れたりスクロールで閉じないように */
/* ▼ 勝手に閉じるのを防ぐ & でも自分で閉じられる設定 */
details[open] > summary {
  pointer-events: auto !important;   /* 自分でタップした時だけ閉じる */
}

details > * {
  pointer-events: auto !important;   /* 中のリンクは普通にタップ可能 */
}

/* ▼ スマホで勝手に閉じる不具合の対策（最重要） */
details {
  touch-action: manipulation;         /* タップ操作の誤動作防止 */
  -webkit-tap-highlight-color: transparent;
}

    
	/* タブフォーカス時のスタイル */
	&:focus-visible {
		outline: dashed #00a5a0;
	}

   
    
    ul.smahosub{
        margin-left:30px;
        padding-left: 70px;
        margin-top: 0;
        margin-bottom: 0;
        
    }
    
li.smahosub{
background-color:#344699;
color:#FBFEFF;
list-style: none;
border-bottom: 1px solid white;
font-size: 10px;
font-weight: 500;
width: 70%;  
}
    
    
 /***********************/

  
.gakusei{
color:#FBFEFF;
}

    

table#gaiyou{
width:100%;
color: #30343A;
max-width: 100%;
margin-left: 3px;
margin-right: 3px;
margin:0 auto;
margin-bottom:50px;
box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2);
}

td.gai1{
max-width:0%;
font-size:15px;
color: #30343A;
height:20px;
vertical-align:middle;
text-align:center;
}
    
td.gai2{
max-width:0%;
color: #30343A;
font-size:15px;
height:20px;
vertical-align:middle;
text-align:center;
background-color:#FBFCFF
}

table#gaiyou {
width:100%;
max-width:100%; /* または 100% */
  margin: 0 auto;
  box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2);
}

    
    
    
    

    
img.president{
width:1000px !important;
}

table#president{
max-width:100%;
margin-left:3px;
margin-right:3px;
margin-bottom:50px;
background-color:#FBFCFF;
}
td.aisatsu{
max-width: 100%;
color:#30343A;
text-align:left;
}
p.futoji{
margin-left:60px;
font-size:15px;
font-weight:bold
}
span.honbun{
display:block;
font-size:15px;
text-align:left;
margin-left:40px;
}
span.katagaki{
display:block;
font-size:15px;
padding-left:80px;
} 
    
    
    
    
    
p.rinen{
font-size:15px;
}


.task1{
max-width:%;
width:150px;
}
.task{
float:right;
max-width:%;
width:300px;
padding-left:2px;
}
.goal{
max-width:%;
width:200px;
padding-left:10px;
}   

    
img.nensuke{
max-width:100%;
width:450px;
margin-bottom: 50px;
}
    
    
.activ{
width:100%;
font-size:18px;
background-color:#344699;
color:#FBFEFF;
height:30px;
}
.activ2{
margin-left:0px;
border:1px solid #FBFEFF;
width:100%;
height:30px;
text-align:center;
justify-content:center;
align-items:center;
color:#FBFEFF;
font-size:18px;
background-color:#344699;
box-shadow:0 4px 8px 4px rgba(0, 0, 0, 0.2);
}

.activity{
max-width:100%;
font-size:10px;
margin-left:0px;
margin-bottom:50px;
}
.traffic{
width:180px;
text-align:center;
}
.sports{
width:180px;
text-align:center;
margin-left:1px;
}
.kyoto{
text-align:center;
width:180px;
margin-top:30px;
}
.setubun{
text-align:center;
width:180px;
margin-top:30px;
margin-left:1px;
}
.kakizome{
text-align:center;
width:180px;
margin-top:30px;
}
.bousai{
text-align:center;
width:180px;
margin-top:30px;
margin-left:1px;
}
.tanabata{
text-align:center;
width:180px;
margin-top:30px;
}
.usj{
text-align:center;
width:180px;
margin-top:30px;
margin-left:1px;
}

.snyugaku{
font-size:15px;
} 
    
img.picture{
width:400px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
  
.course{
max-width:100%;
font-size:15px;
border-collapse:collapse;
margin-left:10px;
text-align:center;
}
.course1{
height:20px;
width:100px;
border:1px #30343A solid;
}
.course2{
width:150px;
border:1px #30343A solid;
}
.course3{
width:300px;
border:1px #30343A solid;
}


.sent{
margin-left:-15px;
max-width:100%;
font-size:15px;
}
ol.list{
margin-left:-15px;
width:360;
max-width:100%;
font-size:15px;
}
    
table#classtime{
max-width:100%;
margin-left:10px;
font-size:15px;
border-collapse:collapse;

text-align:center;
margin-bottom:100px;
}
.time{
margin-left:10px;
border-collapse:collapse;
text-align:center;
}
.time1{
height:10px;
border:1px #30343A solid;

}
.time2{
height:10px;
border:1px #30343A solid;

}
.time3{
height:10px;
border:1px #30343A solid;

}

.fee{
max-width: 100%;
margin-left:10px;
font-size:15px;
border-collapse:collapse;
text-align:center;
}
.fee1{
height:10px;
width:75px;
border:1px #30343A solid;
}


    
    
   
.s1{
width:200px;
}    
.sr{
font-size:15px;
}
td.sl{
width:150px;
}
td.sr{
width:500px;
}
.s1{
width:150px;
}
td.sl2{
width:400px;
font-size:15px;
}
td.sr2{
padding-left:20px;
width:150px;
}
table#facilitate{
margin-bottom: 10px;
margin-top:10px;
    }
    
    
    
p.entrance{
line-height:5px;
font-size:15px;
border-left :solid 3px orange;
border-bottom: solid 1px gray;
/*余白をつけておきます*/
padding: 10px;
}
.support{
font-size:20px;
text-emphasis: circle #4d9bc1;
}

.support1{
line-height:5px;
font-size:15px;
margin-top:50px;
border-left :solid 3px orange;
border-bottom: solid 1px gray;
/*余白をつけておきます*/
padding: 10px;
}

    
    
    
    

.place{
font-size:15px;
 }
.simplemap{
max-width:100%;
width:370px;
padding-left:0px;
margin-bottom:30px;
}

.map{
max-width:100%;
width:370px;
height:200px;
padding-left:0px;
}
    
    
table#toi{
max-width:100%;
margin-top:20px;
margin-bottom:20px;
margin-left:1px;
}
td.field{
width:100px;
height:30px;
vertical-align:middle;
color:#30343A;
text-align:right;
font-size:15px;
}
table#toi td.info{
width:100px;
height:30px;
}
input.m{
font-size:10px;
width:25em;
height:30px;
border:1px #344699 solid;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
textarea.m{
font-size:10px;
border:1px #344699 solid;
width:25em;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
}

p.footer{
vertical-align: center;
font-size:12px;
color:#FBFEFF;
}



.dor{
color:#30343A;
font-size:20px;
text-align: center;
}


.infotitle{
font-size:25px;
}



html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

tabl {
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  word-break: break-word;
}

@media screen and (max-width:768px){
  #rap, table#top, img.center {
    width: 100%;
    max-width: 100%;
  }
}

/* =========================================
   ▼ 言語切替アイコン（.mainicon / .subicon）設定
   ========================================= */

/* =========================================
   ▼ スマホ上部アイコン統一デザイン
   ========================================= */

/* /* 左のロゴ */
img.slogo {
  float: left;
  width: 300px;
  margin-right: 10px;

  margin-top: -10px;
}

/* アイコン3個共通 */
img.sicon1 {
  float: left;
  width: 55px;
  height: auto;
  margin-top: -5px;
  margin-right: 4px;
  background-color: #344699;
  cursor: pointer;
}

/* 言語アイコンのメイン画像 */
.icon-container > #showImageBtn {
  width: 55px;
  height: auto;
  display: block;
  float: left;
  margin-top: -5px;
  margin-right: 4px;
  background-color: #344699;
  cursor: pointer;
  object-fit: contain;
}

/* 言語アイコン用コンテナ */
.icon-container {
  position: relative;
  float: left;
  z-index: 9999 !important;
}

/* ▼ 英語版アイコン（固定表示） */
.hidden-image {
  position: fixed;
  top: 80px;                 /* ← ここで高さを調整。元画像の真下に合わせてOK */
  left: 90%;
  transform: translateX(-50%);
  display: none;
  text-align: center;
  z-index: 99999;
}

/* 出てくる画像（英語版アイコン） */
.hidden-image img.sicon1 {
  width: 55px;
  height: auto;
  border-radius: 2px;
  background-color: transparent;
  float: none;
}

/* スマホ時（全体をやや縮小） */
@media screen and (max-width:768px) {
  img.slogo {
    width: 55%;
    margin-top: -10px;
    margin-left: -0px;
  }
  img.sicon1,
  .icon-container > #showImageBtn {
    width: 45px;
    margin-top: -8px;
  }
  .hidden-image img.sicon1 {
    width: 45px;
  }
    
    
.smaho-header {
  position: fixed !important; /* ← これ必須 */
  top: 0;
  left:-12px;
  width: 100%;
  z-index: 999999 !important;
  background: #ffffff;
  padding: 5px 0;
  margin-left:20px;
}

}

/* =====================================================
   ライトボックス（中央表示・最大1000px・ふわっと）
   ===================================================== */

/* 背景オーバーレイ */
#lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999999;

  display: flex;
  justify-content: center;
  align-items: center;

  /* 非表示状態 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 表示状態 */
#lightbox-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* 中央ボックス */
.lightbox-box {
  position: relative; /* ×ボタン基準 */
  background: #ffffff;

  max-width: 1000px;
  width: 90%;
  max-height: 90vh;
  padding: 20px;

  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);

  /* ふわっと表示 */
  transform: scale(0.96);
  transition: transform 0.3s ease;
}

/* 表示時の拡大 */
#lightbox-overlay.show .lightbox-box {
  transform: scale(1);
}

/* 画像 */
.lightbox-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* × 閉じるボタン */
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 14px;

  font-size: 28px;
  line-height: 1;
  border: none;
  background: none;
  color: white;
  cursor: pointer;

  padding: 4px 8px;
}

.lightbox-close:hover {
  color: white;
}

/* スマホ調整 */
@media screen and (max-width: 768px) {
  .lightbox-box {
    max-width: 95%;
    padding: 16px;
  }

  .lightbox-close {
    color: white;
    font-size: 32px;
    top: 8px;
    right: 10px;
  }
    

}

/* 言語アイコンが他要素に隠れないよう調整 */
html, body {
  overflow-x: hidden;
}



/* 言語アイコン本体のクリックをリンクに通さない */
#showImageBtn {
  pointer-events: auto;
  position: relative;
  z-index: 99999; /* 最前面に確実に出す */
}

/* 下のリンク画像よりも優先表示（クリック遮断用） */
.hidden-image {
  pointer-events: auto;
  z-index: 99998;
}