@charset "euc-jp";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi Maru:wght@400&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

body {
	margin: 0;
	padding: 0;
	font-family: 'Kosugi Maru', 'Noto Sans JP', "Yu Gothic", YuGothic, "¥Ò¥é¥®¥Î³Ñ¥´ Pro", "Hiragino Kaku Gothic Pro", "¥á¥¤¥ê¥ª", "Meiryo", sans-serif;
	font-size:100%;
    font-weight: 400;
	line-height:180%;
    letter-spacing: 1px;
	color: #3E3A39;
}
img { border: none; vertical-align:bottom;}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0; padding: 0;
	font-size: 100%;
	list-style:none;
	box-sizing:border-box;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {

}
iframe { border: none;}
a:link {color:#06F; outline:none; }
a:visited {color:#06F;}
a:hover {color: #333;}
a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
#wrapper {}
i.material-icons { vertical-align: middle;}
.pc {display:block;}
.sp {display:none;}

#content { position:relative;}
#content::before { position:relative; transition:.3s; opacity: 0;}
#content.pull_bg::before { 
    display: block; clear: both; content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; background:rgba(0,0,0,0.5); 
    z-index: 99999;
}

@media only screen and (max-width:800px){
	body { min-width:375px; font-size:100%;}
	#header { width:100%;}
	#content{ width:100%;}
	#footer { width:100%;}
	#wrapper { background:#fff; border-top:none; overflow:hidden;}
	#base { width:100%; margin:0 !important;}
	.pc { display:none !important;}
	.sp { display:block !important;}
}

/* sns */
.sns a.sns_x { background: url("../img/sns_x_b.png") no-repeat center center;}
.sns a.sns_line { background: url("../img/sns_line.png") no-repeat center center;}
.sns a { display: block; width: 25px; height:25px; text-indent: -9999px; background-size:100% auto !important;}
@media only screen and (min-width:800px){
    .sns a:hover {opacity: 0.7;}
 }

/* 2024/10/08 add */
.footer_sns{float:right;clear:both;margin-right:10px;}
ul.sns2 { float: left; margin-left: 20px; padding:0;}
ul.sns2 li { float: left;}
ul.sns2 li+li { margin-left: 15px;}
.sns2 a.sns_x2 { background: url("../img/sns_x_b.png") no-repeat center center;}
.sns2 a.sns_line2 { background: url("../img/sns_line.png") no-repeat center center;}
.sns2 a { display: block; width: 40px; height:40px; text-indent: -9999px; background-size:100% auto !important;}
@media only screen and (min-width:800px){
    .sns2 a:hover {opacity: 0.7;}
 }

/*====================================================================================================
  HEADER
====================================================================================================*/
#header { position: relative; overflow: hidden;}

/* logo */
#header h1,
#header h1 a { display: block; width: 200px; height: 150px; transition: 0.3s;}
#header h1 { float:left;}
#header h1 a { text-indent: -9999px; background:url("../img/logo.png") no-repeat center center; background-size: 110px auto;}

/* change */
#header #change { position: absolute; top: 20px; right:40px;}
#change ul.bg_txt { float: left;}
#change ul.bg_color { float:left;  font-size: 87.5%; font-weight: 500; overflow: hidden;}
#change ul.bg_color li { float:left;}
#change ul.bg_color li+li { margin-left:5px;}
#change ul.bg_color li a {
	display:block;
	width:23px;
	line-height:23px;
    text-align: center;
	color:#fff;
    text-decoration: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#change ul.bg_color li a:hover { opacity: 0.7;}
#change ul.bg_color li:nth-child(1) { line-height:23px;}
#change ul.bg_color li:nth-child(2) a { background:#000000;}
#change ul.bg_color li:nth-child(3) a { background:#007BC7;}
#change ul.bg_color li:nth-child(4) a { background:#EFEFEF; color:#444;}
#change ul.txt_size { float:left; padding-left: 20px; font-size:87.5%; overflow: hidden;}
#change ul.txt_size li { float:left;}
#change ul.txt_size li+li { margin-left:5px;}
#change ul.txt_size li a {
	display:block;
	width:42px;
	line-height:25px;
    text-align: center;
	color:#222;
    background:#EFEFEF;
    border: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
    text-decoration: none;
}
#change ul.txt_size li:nth-child(1) { line-height:25px;}
#change ul.sns { float: left; margin-left: 20px; padding:0;}
#change ul.sns li { float: left;}
#change ul.sns li+li { margin-left: 15px;}

/* picknav */
#header #pick_nav { position: absolute; top: 60px; right:40px;}
#header #pick_nav ul li { float: left; width:70px; transition:.3s;}
#header #pick_nav ul li+li { margin-left: 5px;}
#header #pick_nav ul li a { display:block; width: 100%; height: 70px; background-size:100% auto !important; text-indent:-9999px;  transition:.3s;}
#header #pick_nav ul li:nth-child(1) a { background:#B9404C url( "../img/nav_top.png") no-repeat center center;}
#header #pick_nav ul li:nth-child(2) a { background:#595757 url( "../img/nav_howto.png") no-repeat center center;}
#header #pick_nav ul li:nth-child(3) a { background:#595757 url( "../img/nav_search.png") no-repeat center center;}
#header #pick_nav ul li:nth-child(4) a { background:#595757 url( "../img/nav_kiku.png") no-repeat center center;}

/* nav */
/* #header #nav { position: relative; top: 50px; float: left; width:calc(100% - 600px); } */
#header #nav { position: relative; top: 70px; float: left; width:calc(100% - 600px); }
#header #nav ul {}
#header #nav ul li { float: left; text-align: center; transition: 0.3s;}
#header #nav ul li + li { margin-left: 40px;}
#header #nav ul li a { 
    position: relative;
    display: block;
/*    font-size:20px; */
/*    font-size:130%; */
    font-size:120%;
    font-weight:bold;
    color: #323030;
    line-height: 120%;
    letter-spacing: -0.5px;
    text-decoration: none;
    transition:.3s;
}
#header #nav ul li a::after { 
    position: absolute; left: 0; bottom: -15px;
    display: block; clear: both; content:"";
    width: 0; height: 3px;
    background: #007197;
    transition: 0.3s;
}


@media only screen and (min-width:800px){
    #header #pick_nav ul li a:hover { opacity: 0.7;}
    #header #nav ul li:hover a::after { width: 100%; }
    #change ul.txt_size li a:hover { opacity: 0.7;}
    #change ul.sns li a:hover { opacity: 0.7;}
}    

@media only screen and (max-width:1415px){
    #header #nav ul li a { font-size:110%; }

}

@media only screen and (max-width:1365px){
    #header #nav ul li a { font-size:100%; }
    #header #nav ul li + li { margin-left: 20px;}

}




/* @media only screen and (max-width:1170px){ */
@media only screen and (max-width:1260px){
    #header #nav { width:calc(100% - 500px);}
    #header #nav ul li + li { margin-left: 20px;}
}
/* @media only screen and (max-width:1100px){ */
@media only screen and (max-width:1150px){
    #header h1,
    #header h1 a {  width: 150px;}
    #header #nav { top:70px; width:calc(100% - 450px); }
    #header #nav ul li + li { margin-left: 10px;}
/*    #header #nav ul li a { font-size:18px; } */
    #header #nav ul li a { font-size:110%; }
/*    #header #pick_nav ul li { width:60px;}
    #header #pick_nav ul li { width:60px;}
    #header #pick_nav ul li a { height: 60px;}    
}
@media only screen and (max-width:1030px){
/*    #header #nav { top:70px; width:calc(100% - 420px);} */
    #header #nav { top:70px; width:calc(100% - 400px);}
/*    #header #nav ul li a { font-size:16px; } */
/*    #header #nav ul li a { font-size:100%; } */
    #header #nav ul li a { font-size:100%; }
    #header #pick_nav ul li { width:50px;}
    #header #pick_nav ul li a { height: 50px;}    
}



@media only screen and (max-width:980px){
    #header h1,
    #header h1 a {  width: 120px;}
    #header #nav { top:70px; width:calc(100% - 350px);}
    #header #nav ul li a { font-size:90%; }
    #header #pick_nav ul li { width:40px;}
    #header #pick_nav ul li a { height: 50px;}  
}

@media only screen and (max-width:865px){
    #header h1,
    #header h1 a {  width: 115px;}
    #header #nav { top:70px; width:calc(100% - 330px);}
    #header #nav ul li a { font-size:90%; }
    #header #pick_nav ul li { width:35px;}
    #header #pick_nav ul li a { height: 50px;}  
}

@media only screen and (max-width:840px){
    #header #nav ul li a { font-size:80%; }
}


@media only screen and (max-width:800px){
    #header { overflow: hidden; border-bottom: 1px solid #ddd;}
    #header h1,
    #header h1 a { display: block; width: 130px; height: 85px;}
    #header h1 a {  background-size:auto 55px;}
    #header #change { top: 28px; right: 90px;}
    #header #change .bg_color,
    #header #change .txt_size { display: none;}
    #header #pick_nav { display: none;}
    #header .nav_btn {
        position: absolute; top:0; right:0; cursor: pointer;
        width:85px; height: 85px;
    }
    #header .nav_btn span {
        display: inline-block;
        position: absolute; left:0; right: 0; margin:auto;
        width:30px; height: 3px;
        background: #323030;
        border-radius: 3px;
        transition: all .3s;
    }
    #header .nav_btn span:nth-of-type(1) {top:30px;}
    #header .nav_btn span:nth-of-type(2) {top:40px;}
    #header .nav_btn span:nth-of-type(3) {top:50px;}
    #header .nav_btn.active span:nth-of-type(1) { top:40px; transform:rotate(-45deg);}
    #header .nav_btn.active span:nth-of-type(2) { opacity: 0;}
    #header .nav_btn.active span:nth-of-type(3) { top:40px; transform:rotate(45deg);}
/*    #header .nav_btn small { display: block; position: absolute; bottom:10px; width: 85px; text-align: center; color: #323030; font-size: 10px; letter-spacing: 3px;} */
    #header .nav_btn small { display: block; position: absolute; bottom:10px; width: 85px; text-align: center; color: #323030; font-size: 10px; letter-spacing: 3px;}
    #header #nav { clear: both; display: none; position:static; float: none; width: 100%;}
    #header #nav ul { background: #007197;}
    #header #nav ul li { float:none; margin: 0 !important; text-align:left; width: 100%;}
    #header #nav ul li br { display: none;}
    #header #nav ul li a { 
        position: relative;
        display: block;
        padding: 5% ;
        font-weight:bold;
        color: #fff;
        line-height:130%;
        letter-spacing: 0;
        text-decoration: none;
        border-radius: 0;
        border-bottom: 1px solid #fff;
    }
}    


/*====================================================================================================
  CONTENT
====================================================================================================*/
#content { clear:both;}


/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { font-weight:bold; }
#footer a { color: #3E3A39; text-decoration: none;}
#footer .f_cont1 { background: #3FBCCF;}
/*#footer .f_cont2 { background: #BEE3E8; padding: 60px 2%;} */
#footer .f_cont2 { background: #BEE3E8; padding: 60px 2% 15px;}
#footer .f_cont3 { background: #FFF; padding: 20px 2%; overflow: hidden;}
#footer .cont { margin: auto; width: 96%; max-width: 800px; overflow: hidden;}

/* kazari */
#footer .kazari { position: relative; margin: auto; width: 96%; max-width: 1300px;}
#footer .kazari span{ position:absolute; }
#footer .kazari span:nth-child(1) { top: -55px; left: 0;}
#footer .kazari span:nth-child(1) img { width: 180px; height: auto;}
#footer .kazari span:nth-child(2) { top: -40px; right: 0;}
#footer .kazari span:nth-child(2) img { width: 120px; height: auto;}

/* logo */
#footer .logo { font-size: 30px; font-weight: 900; color: #fff; text-align: center; line-height: 100px;}
#footer .logo span + span { padding-left: 30px;}

/* address */
#footer .add { text-align: center; text-align: center;}
#footer .add span { display: inline-block;}

/* mid */
#footer .mid { 
    margin:50px auto; text-align: center;
    font-size: 20px; line-height: 36px;
    background: #fff; border-radius: 50px;
}

/* nav1 */
#footer .f_nav1 ul { float: left; padding-right: 20px; letter-spacing: -0.5px;}
#footer .f_nav1 ul li { line-height:200%;}
#footer .f_nav1 ul.chilled_nav { font-size: 80%;}
#footer .f_nav1 ul.parent_nav li span { position: relative; top: 2px; font-size: 20px; font-weight: 900; content:" - ";}
#footer .f_nav1 ul.chilled_nav li span { margin-right: 5px;}

/* nav2 */
#footer .f_nav2 { float: left; font-size: 87.5%;}
#footer .f_nav2 span { display: inline-block;}
#footer .f_nav2 span + span::before { content:"¡¿";}

/* copy */
#footer .copy { float: right;}
@media only screen and (min-width:800px){
    #footer a:hover { color:#1F9DB0;}
} 
@media only screen and (max-width:800px){
    #footer .f_cont2 { padding: 5% 2%;}
    #footer .f_cont3 { padding: 5% 0 95px;}
    #footer .logo { padding: 5%0 ; font-size: 24px; line-height: 130%;}
    #footer .logo span { display: block;}
    #footer .logo span + span { padding-left:0;}
    #footer .add { text-align: center; text-align: center;}
    #footer .add span { display: inline-block;}
    #footer .mid { margin:5% auto; font-size:112.5%; }
    #footer .f_nav1 ul { display:none;}
    #footer .f_nav2 { float:none; padding: 0 0 20px; font-size:80%; text-align: center;}
    #footer .copy { float:none; padding-top:2%;  text-align: center; border-top: 1px solid #ddd;}
} 


/*====================================================================================================
  FIX CONTENT
====================================================================================================*/
#page,
#page a { display:block; width:40px; height:40px;}
#page { position: fixed; bottom:40px; right:20px; z-index: 999999; transition: .3s;}
#page a { text-indent: -9999px; background:#3FBCCF url(../img/page_top.png) no-repeat; background-size: 100% auto;}
#fix_cont { display: none;}
@media only screen and (min-width:800px){
    #page:hover { bottom:40px; opacity: 0.7;}
} 
@media only screen and (max-width:800px){
    #page,
    #page a { display:block; width:35px; height:35px;}
    #page { bottom:90px;}
    #fix_cont { display: block; position: fixed; left: 0; bottom: 0; width: 100%; background: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15); z-index: 99999;}
    #fix_cont li { float: left; width: 25%;}
    #fix_cont li+li a { border-left:1px solid #ddd;}
    #fix_cont li a { display:block; width: 100%; height: 85px; background-size: 70px auto !important; text-indent:-9999px; }
    #fix_cont li:nth-child(1) a { background:#B9404C url( "../img/nav_top.png") no-repeat center center;}
    #fix_cont li:nth-child(2) a { background:#595757 url( "../img/nav_howto.png") no-repeat center center;}
    #fix_cont li:nth-child(3) a { background:#595757 url( "../img/nav_search.png") no-repeat center center;}
    #fix_cont li:nth-child(4) a { background:#595757 url( "../img/nav_kiku.png") no-repeat center center;}
}


/*====================================================================================================
  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: #339900;}
.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;}


/*====================================================================================================
  MODAL
====================================================================================================*/
.modal { 
    display:none;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background:rgba(0,0,0,0.50);
    z-index: 9999;
}
.modal .cont { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    margin: auto; width:80vw; height:80vh; max-width: 1200px;
    background:#BEE3E8; border-radius: 0;
}
.modal .search_cont1{ padding: 40px 0; background: #fff; position: relative; }
.modal .search_cont2 { padding:3%; height:calc(80vh - 130px); overflow: auto;}
.modal .search_box { margin: auto; width: 96%; max-width: 800px; overflow: hidden;}
.modal .search_box::after { display: block; clear: both; content:"";}
.modal .search_box .mid { 
    float: left;
    width: 225px;
    height: 50px;
    text-indent: -9999px;
    background: url("../img/tit_mokutekibetu.png") no-repeat left center;
    background-size: 225px auto;
}
.modal .search_box .search { float:right; width: calc(100% - 250px);}
.modal .search_box input.sa_txt {
	width:100%;
	height:50px;
    font-size: 112.5%;
    padding-left: 20px;
    font-family: 'Kosugi Maru', sans-serif;
	box-sizing: border-box;
    border: 5px solid #E6E6E6;
    border-radius:10px;
}
.modal .search_box input.sa_bo {
    cursor: pointer;
	position: absolute; top: 0; right:0;
    width:130px; height:130px;
	text-indent: -9999px;
	background:#727171 url("../img/nav_search.png") no-repeat center center;
	background-size:100% auto;
	border:none;
}
.modal .search_box input.sa_bo:hover { opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5;}
.modal .search_box input.sa_bo:hover { opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5;}

.modal .search_link {margin: auto; width: 96%; max-width: 820px; overflow: hidden;}
.modal .search_link li {
    float: left;
    margin:1%;
    box-shadow: 3px 3px 5px 1px  rgba(0,0,0,0.40);
    border-radius:10px;
}
.modal .search_link li a {
    display: block;
    padding:25px  22px;
    min-height: 80px;
    color: #595757;
    font-size:20px;
    line-height: 130%;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-decoration: none;
    background: #fff url("../img/arrow1.png") no-repeat 95% center;
    background-size: 20px auto;
    border:3px solid #3FBCCF;
    border-radius:10px;
    box-sizing: border-box;
}
.modal .search_link li a small { display: block; font-size:15px; text-indent: -10px;}
.modal .search_link li.col1 { width: 98%;}
.modal .search_link li.col2 { width: 48%;}
.modal .search_link li.col3 { width: 31.3%;}
.modal .search_link li.col1 a { background-position:97% center;}
.modal .search_link li.col2 a { background-position:95% center;}
.modal .search_link li.col3 a { background-position:93% center;}
.modal .b_close {
    display: block;
    cursor: pointer;
    position: absolute; top:-40px; right: 0;
    width: 30px; height: 30px;
    color: #fff;
    background:none;
    border: none;
}
.modal .b_close span {
    display: inline-block;
    position: absolute; left:0; right: 0; margin:auto;
    width:30px; height: 4px;
    background: #fff;
    border-radius: 3px;
    transition: all .3s;
}
.modal .b_close span:nth-of-type(1) { top:15px; transform:rotate(-45deg);}
.modal .b_close span:nth-of-type(2) { top:15px; transform:rotate(45deg);}
@media only screen and (min-width:800px){
    .modal .b_close:hover { opacity: 0.7;}
    .modal .search_link li a:hover { color: #fff; background-color:#3FBCCF;}
}
@media only screen and (max-width:1380px){
    .modal .search_box { margin: 0 50px; width: calc(100% - 200px);}
}    
@media only screen and (max-width:960px){
    .modal .cont { top:60px; bottom:inherit; width:90vw; height:75vh; }
    .modal .search_cont1{ padding:15px 10px;}
    .modal .search_cont2 { padding:15px 10px; height:calc(75vh -  120px); overflow: auto;}
    .modal .search_box { margin: 0 0 0 7px; width: calc(100% - 80px);}
    .modal .search_box .mid { float: none; width:140px; height:40px; background-size: 100% auto; }
    .modal .search_box .search { float:none; width:90%;}
    .modal .search_box input.sa_txt { font-size:87.5%; padding-left:10px;}
    .modal .search_box input.sa_bo {
        top:25px; right:15px;
        width:80px; height:80px;
        text-indent: -9999px;
        background-size:100% auto;
    }
    .modal .search_box input.sa_bo:hover { opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5;}
    .modal .search_box input.sa_bo:hover { opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5;}

    .modal .search_link li { float:none; margin: 4% 0; width:98% !important;}
    .modal .search_link li a {
        display: block;
        padding:15px 35px 15px 15px !important;
        min-height:auto;
        font-size:100%;
        background-position:97% center !important;
    }
    .modal .search_link li a small { font-size:13px; text-indent: -8px;}
}


.hide {
	display:none;
}

.pdf_download{
	border-top:3px solid #3FBCCF;
	padding-top:10px;
}

.pdf_download p{
	font-size:90%;
	line-height:1.3em;
}

.pdf_download a {
	font-size:90%;
}