@charset "utf-8";
body {
	margin: 0;
	padding: 0;
	font-family: "BIZ UDPGothic", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:100%;
    font-weight: 400;
	color: #222;
	min-width:100%;
	-webkit-text-size-adjust: 100%;
    line-height: 160%;
    background: #FFFCEF;
    overflow-x: hidden;
}
iframe, video, img { border: none; vertical-align:bottom;}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	list-style:none;
    font-size: 100%;
	box-sizing:border-box;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {
	background-image:url(../img/spacer.gif); /* AndroidページのP要素の隙間対策 */
}
h1, h2, h3, h4, h5, b { font-weight: 700;}
iframe { border: none;}
a:link {color:#1E53FF; outline:none; }
a:visited {color:#1E53FF;}
a[href^="tel:"] { text-decoration:none; pointer-events:none ; text-emphasis: none !important;}
a[href^="fax:"] { text-decoration:none; pointer-events:none ;}
/* 2025/09/30 DEL [S] */
/*
img { width: 100%; height: auto;}
*/
/* 2025/09/30 DEL [E] */

#wrapper {}
#base { position: relative; left: 0; transition: all .3s;}
.inner { margin: auto; width: 90%; max-width: 1000px;}

.pc { display:block;}
.pctb { display:block;}
.tb { display:none;}
.tbsp { display:none;}
.sp { display:none;}

@media only screen and (min-width:768px){
    a:hover {color: #333;}
    a:hover img { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;}
}
@media only screen and (max-width:768px){
    .pc { display:none;}
    .pctb { display:block;}
    .tb { display:block;}
    .tbsp { display:none;}
    .sp { display:none;}
}
@media only screen and (max-width:468px){
    body { min-width: 320px;}
    .pc { display:none;}
    .pctb { display:none;}
    .tb { display:none;}
    .tbsp { display:block;}
    .sp { display:block;}
}


/*====================================================================================================
  HEADER
====================================================================================================*/
#header { 
    position: fixed; top: 0; left:0;
    display: flex; flex-direction: column; justify-content: space-between; gap:20px;
    padding: 20px 0;
    width: 230px; height: 100%; min-height: 700px; max-height:100vh;
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.20);
    box-sizing: border-box;
    z-index: 999;
}


/* LOGO */
#header h1,
#header h1 a { margin: 0 auto; width:124px; height: 270px;}
#header h1 a {
    display: block;
	text-indent: -9999px;
	background:url("../img/logo.png") no-repeat center center;
}


/* NAV */
#header  #nav {}
#header  #nav ul li a { text-decoration: none;}
#header  #nav ul li span {
    display: block;
    margin: auto;
    max-width: 215px;
    background: url("../img/nav_line1.png") no-repeat center bottom;
}
/* 2025/03/30 DEL [S] */
/*
#header  #nav ul li:last-child span { background: none;}
*/
/* 2025/03/30 DEL [E] */
#header  #nav ul li span a {
    display: block;
    padding: 10px 0;
    font-size: 112.5%;
    font-weight: 500;
    text-align: center;
    color:#222;
}
#header  #nav ul li.on { background: url("../img/nav_on.png") no-repeat center center;}
#header  #nav ul li .sbnav {
    display: flex; flex-direction: column; justify-content: center;
    position: absolute; top: 0; left: 230px;
    width: 0; height: 100%;
    background-color:#FFCC00;
    overflow: hidden;
}
#header  #nav ul li .sbnav.on { width: 230px;}
#header  #nav ul li .sbnav ul { width: 150px; margin: 0 40px;}
#header  #nav ul li .sbnav li a {
    display: block;
    padding: 10px 0;
    font-size: 112.5%;
    font-weight: 500;
    text-align: left;
    color:#222;
    background: url("../img/nav_line2.png") no-repeat center bottom;
}
#header  #nav ul li .sbnav li:last-child a { background: none;}


/* change */
#change dl {
    position: relative;
    margin: 0 auto;
    width: 180px;
    transition: .3s;
}
#change dl+dl { top:10px;}
#change dt {
    cursor: pointer;
    padding: 0 15px;
    width: 100%;
    line-height: 40px;
    letter-spacing:-1px;
    font-size: 87.5%;
    font-weight: 600;
    background:#E4E4E4;
    border-radius: 50px;
}
#change dd {
    display: none; opacity:0; transition: .5s;
    position: absolute; top: 0; left: 150px;
    padding:7px 15px;
    width:330px;
    height: 40px;
    font-size: 13px;
    overflow: hidden;
    transition: .3s;
    background:#E4E4E4;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-left: 1px solid #fff;
}
#change dl.on dt {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#change dl.on dd {
    display:block; opacity:1;
    left: 180px;
}


#change .cate_lang dd p { display: inline;}
#change .cate_lang dd p + p { margin-left:10px;}
#change ul.bg_color { float:left; overflow: hidden;}
#change ul.bg_color li {float:left;}
#change ul.bg_color li.mid {float:left; margin-right:7px;}
#change ul.bg_color li+li { margin-left:3px;}
#change ul.bg_color li a {
	display:block;
	width:30px;
	line-height:25px;
    text-align: center;
	color:#fff;
    text-decoration: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#change ul.bg_color li:nth-child(1) { line-height:25px;}
#change ul.bg_color li:nth-child(2) a { background:#333333;}
#change ul.bg_color li:nth-child(3) a { background:#3233ff;}
#change ul.bg_color li:nth-child(4) a { background:#ffffff; color:#444;}
#change ul.txt_size { float:left; overflow: hidden; margin-left: 20px;}
#change ul.txt_size li { float:left;}
#change ul.txt_size li+li { margin-left:3px;}
#change ul.txt_size li.mid {float:left; margin-right:7px;}
#change ul.txt_size li a {
	display:block;
	width:42px;
	line-height:25px;
    text-align: center;
	color:#444;
    background:#fff;
    border: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
    text-decoration: none;
}
#change ul.txt_size li a:hover { opacity: 0.7;}
#change ul.txt_size li:nth-child(1) { line-height:25px;}
@media only screen and (min-width:1100px){
    #header  #nav ul li span a:hover { background: url("../img/nav_on.png") no-repeat center center;}
    #header  #nav ul li .sbnav a:hover { text-decoration: underline;}
    #change dt:hover { opacity: 0.7;}
    #change ul.bg_color li a:hover { opacity: 0.7;}
    #header  #nav ul li .sbnav { transition: .3s;}
}
@media only screen and (max-width:1100px){
    #header {
        position:fixed;
        padding: 0;
        width:100%; height:80px; min-height: inherit;
        box-shadow:none;
        border-left:none;
    }


    /* LOGO */
    #header h1,
    #header h1 a { margin:0; width:150px; height:80px;}
    #header h1 { margin-left: 20px;}
    #header h1 a {
        display: block;
        text-indent: -9999px;
        background:url("../img/logo2.png") no-repeat center center;
        background-size: 100% auto;
    }


    /* nav */
    #header .nav_btn {
        cursor: pointer;
        position: absolute; top:0; right:0;
        width:80px; height:80px;
    }
    #header .nav_btn span {
        display: inline-block;
        position: absolute; left:0; right: 0; margin:auto;
        width:40px; height: 6px;
        background:#006400;
        border-radius: 3px;
        transition: all .3s;
    }
    #header .nav_btn span:nth-of-type(1) {top:23px;}
    #header .nav_btn span:nth-of-type(2) {top:37px;}
    #header .nav_btn span:nth-of-type(3) {top:52px;}
    #header .nav_btn.active span:nth-of-type(1) { top:37px; transform:rotate(-45deg);}
    #header .nav_btn.active span:nth-of-type(2) { opacity: 0;}
    #header .nav_btn.active span:nth-of-type(3) { top:37px; transform:rotate(45deg);}
    #header #nav {
        display: none;
        position: absolute; top: 80px; right: 0;
        width:100%; max-height:calc( 100vh - 80px);
        padding:30px;
        background:#FFCC00;
        overflow: auto;
        z-index: 9;
    }
    #header #nav ul { padding:15px 20px; background: #fff; border-radius: 10px;}
/* 2025/03/30 DEL [S] */
/* debugg
    #header #nav ul li:last-child { background:none;}
*/
/* 2025/03/30 DEL [E] */
    #header #nav ul li.pull { border-bottom: 1px solid #ddd;}
    #header #nav ul li span { max-width:none;}    
    #header #nav ul li .sbnav { display: none; position: static; margin: 0; width: 100% !important; height: auto; border-radius: 0; background:#FFFCEF;}
    #header #nav ul li .sbnav ul { position: static; margin: 0; width: 100%; height: auto; padding:25px; background: none;}
    #header #nav ul li .pull { position:relative; background: url("../img/pull_off.png") no-repeat 96% center; background-size: 20px auto;}
    #header #nav ul li .pull.on { background: url("../img/pull_on.png") no-repeat 96% center; background-size: 20px auto;}


    /* change */
    #header .set_btn {
        cursor: pointer;
        position: absolute; top:0; right:80px;
        width:80px; height:80px;
        background: url("../img/b_setting.png") no-repeat center center;
        background-size: 70% auto;
    }
    #change {
        display:none;
        position: absolute; top: 80px; right: 0;
        width:100%;
        padding:0;
        background:#FFCC00;
        z-index: 9;
    }
    #change .change_container { padding: 30px 30px 60px;}
    #change dl { width:96%;}
    #change dt { border-radius:0; background: none; border-bottom: 2px solid #000;}
    #change dd {
        display: block; opacity:1;
        position:static;
        padding:15px;
        width:100%;
        height:auto;
        font-size: 13px;
        overflow: hidden;
        transition: .3s;
        background:none;
        border-radius: 0;
        border-left:none
    }
    #change .cate_lang dd a { color: #222;}
}


/*====================================================================================================
  CONTENT
====================================================================================================*/
#main_cont { clear:both; padding-left:230px;}
@media only screen and (max-width:1100px){
     #main_cont { padding-left:0; }
}


/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { 
	clear:both;
	position: relative;
    background: #74A245;
}
#footer::before {
    position: absolute; top: -125px;
    display: block; clear: both; content:"";
    width: 100%; height: 125px;
    background: url("../img/footer.png") repeat-x center top;
}
#footer .inner { display: flex; gap:40px 20px; padding: 40px 0;}
#footer .cont { width: calc(50% - 10px); align-self: flex-end;}


/* ADDRESS */
#footer .add {
    display: flex; flex-direction: column; gap:10px;
    color: #fff;
}
#footer .add p:nth-child(1) { font-size: 125%; font-weight: 600;}
#footer .add dl { display: flex; flex-wrap: wrap; font-size: 75%; line-height: 160%;}
#footer .add dt { width: 65px;}
#footer .add dd { width:calc(100% - 65px);}


/* NAV */
#footer .f_nav1 { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 15px; text-align: center; line-height:100%;}
/* #footer .f_nav1 li + li::before { padding: 0 8px; content: "|"; color:#fff;} */
#footer .f_nav1 li + li::before { padding: 0 8px; color:#fff;}

#footer .f_nav1 li span { padding: 0 8px; color:#fff;}

#footer .f_nav1 li a { font-size: 87.5%; color: #fff; text-decoration:none; }
#footer .f_nav2 { display: flex; gap:5px;}
#footer .f_nav2 li {
    width: calc(50% - 2.5px);
    background: #fff url("../img/arrow_b.png") no-repeat 95% center;
    background-size: 13px auto;
}
#footer .f_nav2 li a {
    display: block;
    padding: 10px 15px;
    color: #222;
    text-align: center;
    text-decoration: none;
}


/* COPYRIGHT */
#footer .copy { padding: 20px 0; text-align: center; color: #fff;}
@media only screen and (min-width:767px){
    #footer .f_nav1 li a:hover { text-decoration: underline;}
    #footer .f_nav2 li:hover { opacity: 0.7;}
}
@media only screen and (max-width:1065px){
    #footer .inner { flex-direction: column;}
    #footer .cont { width:100%;}
}
@media only screen and (max-width:768px){
    #footer::before {
        top: -80px; height: 80px;
        background-size: 768px auto;
    }
    #footer .inner { flex-direction: column;}
    #footer .cont { width:100%;}
    #footer .f_nav1 li { line-height: 180%;}
    #footer .f_nav1 li:first-child::before,
    #footer .f_nav1 li:nth-child(2)::after,
/*    #footer .f_nav1 li:last-child::after { padding: 0 8px; content: "|"; color:#fff;} */
    #footer .f_nav1 li:last-child::after { padding: 0 8px; color:#fff;}
    #footer .copy { font-size: 75%;}
}
@media only screen and (max-width:468px){
    #footer::before {
        top: -50px; height: 50px;
        background-size: 468px auto;
    }
}



/*====================================================================================================
  FIX CONTENT
====================================================================================================*/
#page,
#page a { display:block; width:120px; height:125px;}
/* 2025/09/30 UPD [S] */
/*
#page { position: fixed; bottom:40px; right:20px; z-index: 999999; transition: .3s;}
*/
#page { position: fixed; bottom:40px; right:20px; z-index: 999; transition: .3s;}
/* 2025/09/30 UPD [E] */
#page a {
    text-indent: -9999px;
    background:url("../img/pagetop.png") no-repeat;
    background-size: 100% auto;
}
@media only screen and (min-width:767px){
    #page:hover { bottom:40px; opacity: 0.7;}
}
@media only screen and (max-width:768px){
    #page,
    #page a { display:block; width:70px; height:70px;}
    #page a { background-size: 100% auto;}
}


/*====================================================================================================
  COLOR eto..
====================================================================================================*/
.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #000099;}
.purple { color: #660099;}
.pink { color: #FF6699;}
.red { color: #FF0000;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #68ad70;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 115%; line-height: 140%;}
.small { font-size: 80%;}
.underline { text-decoration: underline;}
.line-through { text-decoration: line-through;}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}