html {margin:0; padding:0; border:0; font-size:15pt; }

body {background-color:#fff;padding:0;margin:0;}
body * {font-size:clamp(0.8rem,2.5vw,1rem); box-sizing:border-box;}
noscript {color: red; font-size:1em; z-index: 100;}

.lt {text-align: left;}
.rt {text-align: right;}
.cen {text-align: center;}
.block {display: inline-block;}
.top {vertical-align: top;}
.flexdiv {display: flex; flex-wrap:wrap; justify-content:center;}
.blue {color: royalblue;}
.red {color:red;}
.white {color:white;}
.bold {font-weight:bold;}
.ft10 {font-size:clamp(0.5rem,2.5vw,0.7rem);}
.ft15 {font-size:clamp(0.6rem,2.5vw,0.8rem);}
.ft20 {font-size:clamp(0.8rem,2.5vw,1rem);}
.ft25 {font-size:clamp(1rem,2.5vw,1.5rem);}
.ft30 {font-size:clamp(1.2rem,2.5vw,2rem);}
.pa10 {padding:10px;}
.pa30 {padding:30px 0px;}
.ma10 {margin:10px;}
.ma20 {margin:20px;}
.hidden {visibility: hidden;}
.nowrap {white-space:nowrap;display:inline-block;}
.lightblue {background-color:#ebf4ff;}
.no-deco {text-decoration:none;}
/*	header */


#fixmenu {position:sticky;top:0;width:100%;z-index: 100;background-color:white;overflow:auto;}
#header-div {background-color: #fff;}

#title-div {display: flex; padding:5px 0px 0px 20px;}
#title-img {width:clamp(100px,20vw,200px);margin-top:15px;}

#header1 {overflow:auto;flex-grow: 1;}
#header2 {overflow:auto;flex-grow: 1;text-align:center;}
#header3 {overflow:auto;flex-grow: 1;text-align:right;padding-right:3px;}

#header-mainbox {width:clamp(250px,90vw,1200px);text-align: center; padding-top: 50px; padding-bottom: 50px; display: flex; flex-wrap:wrap; justify-content:center;margin:auto;}
#header-mainbox2 {text-align: center; padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap:wrap; justify-content:center;margin:auto;}
#header_box1 {width:clamp(320px,45%,500px);}
#header_box2 {width:clamp(320px,55%,800px);text-align:center;}


.title {font-size:clamp(1.2rem,2.5vw,2rem);font-weight:bold; color:royalblue;line-height: 150%;}
.sub_title {font-size:clamp(0.8rem,2.5vw,1.2rem);color: navy;margin-top:30px;}
#demo_img {width:clamp(300px,95%,750px);border:clamp(5px,1.5vw,12px) solid #444;border-radius:clamp(8px,1.5vw,15px);padding:5px;margin:auto;}
.demo_img_box {text-align:center;}
.demo_img_box::after {content:"〇-〇";font-size:clamp(0.5rem,2.5vw,1rem);color:#999;display:block;top:-10px;position:relative;width:clamp(320px,100%,800px);;margin:auto;height:min(3vw,25px);border-radius:0px 0px 40px 40px; background-color:#dfdfdf;border:3px solid #999;}


/* main */
#main_bg {overflow:auto;margin:auto;display:block;}
#main {margin:auto;margin-top:100px; text-align: center;padding-bottom: 50px; background-color:#eaf9f9;}
.menu {margin:auto; text-align: center;padding: 0px; background-color: #fff;}
#sec {margin:auto; text-align: center;padding:50px 0px; background-color: #ccffe5;}

.h_link {margin-right:10px;font-size:clamp(0.5rem,2.5vw,0.9rem);font-weight:bold;color:royalblue;text-decoration:none;display:content}
.h_link:hover {text-decoration:underline;}
.contents {text-align:center; background-color:white;padding:10px;width:120px;border-radius:10px;display:inline-block;}
.mltxt {overflow:auto;display:block;}

.main-offset-div {margin:-5em auto; background-color: royalblue; text-align: center; width:min(90vw,1500px); border-radius: 15px; padding:30px;color: white;display:inline-block;}
.m_txt {font-size:clamp(0.8rem,2.5vw,1.2rem);font-weight: bold;}
.main_txt {padding-top:50px;padding-bottom:30px; font-size: clamp(0.8rem,2.5vw,1.2rem);text-align: left;line-height: 180%; max-width: 1200px;margin:auto;display: inline-block;}
.t_box {width:clamp(250px,90vw,1200px);text-align: center;  padding-bottom: 50px; display: flex; flex-wrap:wrap; justify-content:center;margin:auto;}
.table1 {float:left;width:clamp(450px,50%,700px);}
.table2 {float:left;width:clamp(450px,50%,700px);} 
.table3 {display:flex;flex-wrap: wrap;justify-content: space-around; gap:20px; width:100%;max-width:750px; margin:auto;padding:10px;}

.txt_kinou {display:block;font-size:clamp(0.5rem,1.3vw,0.7rem);color:black;}
.txt_kinou2 {display:block;font-size:clamp(0.5rem,2.5vw,0.7rem);}
.content_kinou {border-radius: 15px;background-color: white;width:clamp(100px,20vw,140px); height:clamp(100px,20vw,140px); padding-top:20px;padding-bottom:10px;cursor: pointer;}
.content_kinou:hover {color:blue;text-decoration: underline;} 
.img_kinou {width:clamp(20px,8vw,40px);}
.m1 {margin-top:250px;margin-bottom: 80px;font-size:clamp(1rem,2.5vw,1.2rem);}

.btnstyle {border:5px ridge #dfdfdf; border-radius:20px; padding:10px 15px; background-color:#ffff80;font-size:14pt;color:navy;font-weight:bold;cursor:pointer;text-decoration:none;}
.btnstyle:hover {border:5px outset #cecece; background-color:royalblue;color:yellow;}


#over_dialog {display: none;position: fixed; top:0; width:100vw; height:100%;z-index: 100;background-color: rgba(0,0,0,0.5);}
#inner_dialog {width:clamp(95vw,60%,800px); height: auto; max-width:1100px;  position:relative; top:50px;  border-radius: 15px; background-color: #fff; margin:auto; text-align: center;}
#close_dialog {text-align:right;float: right; margin-top:8px; margin-right: 40px;padding:5px 10px; background-color:pink;font-size:clamp(0.6rem,2.5vw,0.8rem);border:1px solid white;border-radius: 10px; cursor: pointer;}
#close_dialog:hover {border:1px solid gray;background-color:#e5f2ff;}
#close_dialog2 {display:inline-block;margin-top:10px; margin-bottom: 10px;padding:5px 15px; background-color:pink;font-size:clamp(0.6rem,2.5vw,0.8rem);border:1px solid white;border-radius: 10px; cursor: pointer;}
#res_title {margin-top:10px;padding:5px;display: inline-block;}
#res_div{height:clamp(60vh,70vh,800px); max-height:75vh;overflow:auto;margin-bottom:8px; display: inline-block;}
.view_title {color:royalblue;text-align: left;margin:20px 0px; padding:20px; background-color: #e5fff2;border-radius: 20px;}
.view_png {width: 90%;margin:auto;}
.txt_style1 { margin:30px 10px;text-align: left;padding-left: 50px;}
.content_div {background-color: #fff; padding:20px;	}
.t_txt { color: royalblue;font-weight: bold;font-size:clamp(1rem,2.5vw,1.2rem);}
.b_style {background-color:white;border:1px solid gray;border-radius: 20px; text-align:center; margin:10px; width:clamp(30px,20vw,150px); padding-top:20px;padding-bottom:10px;font-size:clamp(0.6rem,2.5vw,0.8rem);}
.b_style img {width:clamp(20px,10vw,60px);}
.b_contaner {display:flex; flex-wrap:wrap; justify-content:center;}

#sec_table {width:clamp(300px,100%,800px);margin:auto ;}
#sec_table td, #sec_table th {display:revert;padding:5px;font-size:clamp(0.7rem,2.5vw,0.9rem);}
#entry {margin:auto; text-align: center;padding: 50px 10px; background-color: dodgerblue;color:#fff;}
.e_txt {color:#fff;padding-top:50px;padding-bottom:60px;font-size:clamp(1rem,2.5vw,1.2rem);}
.step div {padding:15px 5px;}
.entry_btn {border:3px solid #d3d3d3; border-radius:30px; background-color:white; color:royalblue;  padding:10px 25px; cursor: pointer; margin-top:30px; margin-bottom:50px;display: inline-block;}
.entry_btn:hover {background-color:royalblue;color:white;border:3px outset #d3d3d3;}
.entry_btn:active {background-color:navy;color:white;border:3px inset #d3d3d3;}
.entry_btn2 {border:3px solid #d3d3d3; border-radius:30px; background-color:#ffff80; color:royalblue; padding:3px 15px; cursor: pointer; display: inline-block;font-weight:bold;white-space:nowrap;}
.entry_btn2:hover {background-color:royalblue;color:#ffff80;border:3px outset #d3d3d3;}
.entry_btn2:active {background-color:navy;color:white;border:3px inset #d3d3d3;}

.c_table {width:clamp(350px, 45vw, 600px);border-collapse:collapse;margin:auto;}
.c_table td {width:25%;border:3px solid mediumturquoise;padding:10px;background-color:white;vertical-align:middle;height:clamp(80px, 20vh, 120px);}
.c_table img {width:clamp(20px, 15vw, 40px);}


/*   entry_form  */
#form-div {margin:auto;background-color:#e8f2fc;min-height:50vh;}
#form-before {height:250px;background-color:white;text-align:center;padding-top:50px;}
#entry_form {display:inline-block;margin:-150px auto; background-color:#fff;padding-top:30px; text-align: center; border:3px solid royalblue; border-radius: 35px; box-shadow:0px 3px 45px rgba(30,144,255,0.5);width:90vw;max-width:900px;}
.form_table {width:100%;margin:auto;}
.list {padding:clamp(5px,20px,20px);text-align: left;display:inline-block;width:85vw;max-width:800px;}
.form_table input , .form_table textarea {border:2px ridge royalblue; border-radius:20px;padding:10px;margin-top:10px;}
.list_chk{display:inline-block;width:25px;height:25px;}
.namebox {width:clamp(150px, 40vw, 200px);}

h4 {text-align: center;padding:10px; font-size:clamp(0.6rem,2.5vw,0.8rem);}
h5 {font-size:clamp(0.6rem,2.5vw,0.8rem);}
#list_1_msg ,#list_2_msg , #list_3_msg , #list_4_msg {color:red; padding-left:15px;}
#d_area {padding:10px;text-align:left;}
#d_area fieldset {border:1px solid #99b2ff; border-radius: 15px;padding:10px 10px 20px 10px;}
#d_area legend {background-color:white;display:inline-block;padding:0px 10px;margin-left:15px;}
#kiyaku {height: 300px; overflow:auto;line-height:100%; margin-top:20px; padding:8px;border:3px outset #b2c5ff; border-radius: 10px;}
#entry_chk {margin-top:30px;color:red; font-weight:bold; text-align:center;cursor:pointer;}
#entry_chk * {cursor:pointer;} 

/*   inquiry   */
#contact a { color:royalblue; cursor:pointer; text-decoration:none; display:content;font-size:clamp(0.5rem,2.5vw,0.8rem);}
#contact a:hover {text-decoration:underline;}
#contact_form {display:inline-block;margin:-150px auto; background-color:#fff;padding-top:30px; text-align: center; border:3px solid royalblue; border-radius: 35px; box-shadow:0px 3px 45px rgba(30,144,255,0.5);width:90vw;max-width:900px;}
#art_txt {text-align:left;width:clamp(200px, 80%, 600px);padding-bottom:70px; margin:auto;}


/*   detail    */
.detail_img_box {text-align:center;}
.detail_img_box::after {content:"〇-〇";font-size:clamp(0.5rem,2.5vw,1rem);color:#999;display:block;top:-10px;position:relative;width:min(87%,880px);margin:auto;height:min(4vw,30px);border-radius:0px 0px 40px 40px; background-color:#dfdfdf;border:3px solid #999;}
.detail_img {width:min(80%,800px);padding:15px; border-radius:clamp(8px,1.5vw,15px);border:clamp(8px,1.5vw,15px) solid #444;background-color:white;}

.jump {text-decoration:none;color:navy;display:block;}
.detail_btn {border:2px outset #dfdfdf; border-radius:10px; background-color:royalblue;color:white;font-size:clamp(0.6rem,2.5vw,0.8rem);text-decoration:none;padding:5px 20px;display:inline-block;font-weight:bold;}
.detail_btn:hover{background-color:white;color:navy;border:2px ridge royalblue;}


/*   footer   */
#footer {padding-top:50px;padding-bottom:10px;text-align:center;background-color:#262626;color:white;}
#copyright {text-align:right;max-width:1000px;margin:auto;width:90%;font-size:clamp(0.6rem,2.5vw,0.8rem);}
#footer_link {text-align:left;max-width:1000px;margin:auto;margin-bottom:20px;width:90%;padding:20px;background-color:#3f3f3f;}
.link {display:inline-block;padding:10px;white-space:nowrap;}
.link a {color:white;}
.link a:hover {color:#e5ebff;}



/*slider*/
.slider { width:min(95%,700px);overflow:hidden;margin:0 auto;border:5px ridge  	#84e0b2; border-radius:15px;}
.slide_box {width:min(100%,700px);height:min(300px,calc(100vw*0.4));position:relative;text-align:left;}
.slide_img1 {animation:slider1 40s 0s infinite linear;transform:translateX(-700px);}
.slide_img2 {animation:slider1 40s 10s infinite linear;transform:translateX(-700px);}
.slide_img3 {animation:slider1 40s 20s infinite linear;transform:translateX(-700px);}
.slide_img4 {animation:slider1 40s 30s infinite linear;transform:translateX(-700px);}
.slide_box * {position:absolute;top:0;width:min(100%,700px);}
@keyframes slider1 {
	0% { transform:translateX(-700px);}
	2% { transform:translateX(0);}
	25% {transform:translateX(0);}
	27% { transform:translateX(700px);}
	100% { transform:translateX(700px);}
}

.newgate_login { padding: 1px 10px; background-color:#4c0099;border-radius:5px;color:white;text-decoration:none;cursor:pointer;}
.newgate_login a {color:white;text-decoration:none;font-size:clamp(0.5rem,2.5vw,0.7rem);font-weight:bold;}


.bg_pa1 {background-image:  repeating-linear-gradient(45deg, #607dff 25%, transparent 25%, transparent 75%, #607dff 75%, #607dff), repeating-linear-gradient(45deg, #607dff 25%, #6076ff 25%, #6076ff 75%, #607dff 75%, #607dff);background-position: 0 0, 40px 40px;background-size: 80px 80px;}
.bg_pa2 {background-image:  radial-gradient(#c3ceff 1px, transparent 1px), radial-gradient(#c3ceff 1px, #ffffff 1px);background-size: 46px 46px;background-position: 0 0,23px 23px;}
.bg_pa3{background-image: radial-gradient(#ffffff 1px, #ebf4ff 1px);background-size: 25px 25px;}
.bg_pa4{background-image:  linear-gradient(#ebffed 1.1px, transparent 1.1px), linear-gradient(to right, #ebf8ed 1.1px, #dbfff0 1.1px);background-size: 40px 40px;}