@charset "utf-8";

/*==================================================================
style reset
==================================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
*{padding:0; margin:0;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width:auto;
}
th,td{
  overflow-wrap : break-word;
  word-wrap: break-word;
  word-break: break-all;
}
strong{
	font-weight:700;
}
img{
  max-width: 100%;
}
button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}

/*==================================================================
base
==================================================================*/

html{ height:100%;}
body{
  background:#FAF9F5;
  color:#1e1e1e;
  letter-spacing: 0.06em;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  height:100%;
}
a { text-decoration: none; color:#666666;}
a:focus,
a:hover
{ text-decoration: underline;}

*, :after, :before{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*==================================================================
common style
==================================================================*/

/* ------------------------------------------
z-index
----------------------------------------- */

header{ z-index: 9999;}
main{ z-index: 99; position: relative;}
footer{ z-index: 999; position: relative;}

.bg_fix{
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
}
#wrapper{
  position: relative;
  height:100%;
  min-height: 640px;
}

/* ------------------------------------------
bg 
----------------------------------------- */

@media (min-width: 768px) {
}

/* ------------------------------------------
skiplink 
----------------------------------------- */

#skiplink{ margin: 0; padding: 0;}
.skiplink a{
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 9999999;
  width: 100%;
}
.skiplink a:focus{
  display: block;
  left: 0;
  background: #fff;
  padding: 5px;
  text-align: center;
  border-bottom: 2px solid ;
}

/* ------------------------------------------
header
----------------------------------------- */

#header_logo{ z-index: 999; position: relative;}
#headernews{ z-index: 99;}
#search{ z-index: 9999; position: relative;}
header{
  position: fixed;
}

/* ----------------------
logo  
--------------------- */

#top_sitelogo{
  width: 140px;
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 5px;
}
#top_sitelogo a,
#top_sitelogo img{
  display: block;
}
.date_headernews{
  display: block;
}
@media (min-width: 768px) {
  #top_sitelogo{
    width: 180px;
    top: 20px;
    left: 20px;
    background-color: unset;
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
  }
}

/* ----------------------
search
--------------------- */

/* ---- trigger ---- */

#wrapper_trigger_search{
  position: fixed;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  background-color: rgba( 255, 255, 255, .75 );
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
#trigger_search{
  border: none;
  background: transparent;
  padding: 15px;
  cursor: pointer;
}
@media (min-width: 768px) {
  #wrapper_trigger_search{
    top: 20px;
    right: 20px;
    width: 77px;
    height: 77px;
  }
  #trigger_search{
    padding: 22px;
  }
}

/* ---- modal ---- */

#wrapper_search{
  position: fixed;
  width: 90%;
  max-width: 600px;
  right: -90%;
  background: rgba( 255, 255, 255, .8);
  top: 0;
  height: 100%;
  transition: .3s;
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  overflow-y: scroll;
}
#wrapper_search.is-active{
  right: 0;
  opacity: 1;
  visibility: visible;
  transition: .3s;
}

/* ---- inner_search ---- */

#inner_search{
  padding: 60px 20px;
}
.title_search{
  background-position: left center;
  background-repeat: no-repeat;
  padding: 10px 10px 10px 50px;
  border-bottom: 1px solid #A0A0A0;
  margin-bottom: 15px;
}
#title_keyword_search{ background-image: url(../images/icon_title_search_keyword.png);}
#title_category_search{ background-image: url(../images/icon_title_search_category.png);}

#keyword_search{
  padding: 0 0 20px;
}
.outerbox_form-el{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border-radius: 5px;
  padding: 0;
}
.el-freeword{
  width : calc(100% - 30px) ;
  width : -webkit-calc(100% - 30px) ;
  border: none;
  font-size: 90%;
}
.el-submit{
  width : 5em ;
  display: block;
  background: #49646C;
  padding: 7px 5px;
  color: #ffffff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  text-align: center;
  border: none;
  cursor: pointer;
}
#category_search{
  padding: 0 0 20px;
}
.section_category_search{
  padding: 10px;
  border-bottom: 1px dotted #666666;
}
.section_category_search:last-child{
  border-bottom: none;
}
.list_category_search{
  display: flex;
  flex-wrap: wrap;
  font-size: 90%;
  margin-left: 1em;
}
.list_category_search li a{
  display: inline-block;
  background-image: url(../images/icon_list.png);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 7px;
  margin-right: 1em;
}

/* ---- bg_search ---- */

#bg_search{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba( 0, 0, 0, .65 );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  visibility: hidden;
  opacity: 0;
  transition: .2s;
  z-index: 9;
}
#bg_search.is-active{
  visibility: visible;
  opacity: 1;
  transition: .2s;
}
@media (min-width: 768px) {
  .el-freeword{
    line-height: 1.5;
    font-size: 100%;
  }
}

/* ------------------------------------------
headernews
----------------------------------------- */

#headernews{
  position: fixed;
  bottom: 10px;
  left: 10px;
  background-color: rgba(255,255,255,.75);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 10px;
  font-size: 85%;
  z-index: 999;
}
@media (min-width: 768px) {
  .wrapper_index #headernews{
    top: 20px;
    bottom: unset;
    left: 20px;
    min-height: 77px;
    padding-left: 200px;
  }
}

/* ------------------------------------------
footer
----------------------------------------- */

#footer{
  background-image: url(../images/bg_footer.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff;
  padding: 20px 0;
  border-top: 3px solid #ffffff;
}
.wrapper_index #footer{
  margin-top: -200px;
}
#footer-content{
  padding: 20px 20px 10px;
}
#wrapper_footerlogo{
  width: 240px;
  min-width: 240px;
}
#footerlogo{
  width: 210px;
}
#footer_site_description{
  padding: 0px 12px 10px;
  font-size: 85%;
}
#footer_site_description span{
  display: block;
}

@media (min-width: 640px){
  #footer-content{
    display: flex;
  }
  .inner_footer-content{
    padding: 0 20px;
    border-left: 1px solid #bbbbbb;
  }
}
@media (min-width: 960px){
  .wrapper_index #footer{
    margin-top: -250px;
  }
}

/* ----------------------
list_footermenu
--------------------- */

#list_footermenu{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0;
  margin: 0 12px;
  /*
  border-top: 1px solid #BBBBBB;
  border-bottom: 1px solid #BBBBBB;
  */
}
#list_footermenu a{
  color: #222222;
  display: inline-block;
  background-image: url(../images/icon_list.png);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 7px;
  font-size: 85%;
  margin-right: 1.5em;
}


/* ----------------------
address copy
--------------------- */

address{
  font-style: normal;
  padding: 15px 12px;
  font-size: 85%;
}
address span{
  display:inline-block;
  padding: 0;
  line-height: 1.7;
}
.copy{
  display:block;
  text-align: left;
  padding: 10px 30px;
  font-size: 80%;
}
@media (min-width: 768px) {
  .copy{
    text-align: center;
  }
}
@media (min-width: 960px) {
  address{
    border-bottom: none;
  }
}
@media (min-width: 1280px) {
  address{
    font-size: 95%;
  }
}


/*==================================================================
common class
==================================================================*/

/* ------------------------------------------
title
----------------------------------------- */

.title_common{
  font-size: 150%;
  padding: 1em 0.5em 1em;
}

/* ------------------------------------------
common button
----------------------------------------- */

.box_btn_archive{
  padding: 10px;
}

/* ----------------------
close button
--------------------- */

.trigger_close_common{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background: rgba(255,255,255,.75);
  border: none;
  padding: 40px 15px 10px;
}
.txt_close_common{
  font-size: 75%;
  color: #222222;
}
.btn_close_common_line {
  display: block;
  height: 2px;
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  background-color: transparent;
  transition: 0.4s;
}
.btn_close_common_line:before,
.btn_close_common_line:after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  transition: inherit;
  background-color: #000000;
}
.btn_close_common_line:before {
  top: 5px;
  transform: rotate(45deg);
}
.btn_close_common_line:after {
  top: 5px;
  transform: rotate(-45deg);
}

/* ----------------------
button style 
--------------------- */

.wrap_btn_more_c{
  text-align: center;
  padding: 10px;
}
.btn_more{
  display:inline-block;
  padding:0.5em;
  text-align:center;
  border: 1px solid #ababab;
  border-radius: 100px;
  transition: .3s
}
.btn_more:hover,
.btn_more:focus{
  background-color: #ffffff;
  transition: .3s;
  -webkit-filter: drop-shadow(0 0 4px rgba(0,0,0,.4));
  filter: drop-shadow(0 0 4px rgba(0,0,0,.4));
}
.btn_more span{
  display:inline-block;
  text-align:center;
  padding: 0 35px;
  background-image: url(../images/bg_icon_yajirushi01.png);
  background-repeat: no-repeat;
  background-position: right center;
}
.btn_more_ichiran{
  display:inline-block;
  text-align:center;
  background: #DEDEDE;
  transition: .3s;
  height: 35px;
}
.btn_more_ichiran:hover,
.btn_more_ichiran:focus{
  background-color: #ffffff;
  transition: .3s;
  -webkit-filter: drop-shadow(0 0 4px rgba(0,0,0,.4));
  filter: drop-shadow(0 0 4px rgba(0,0,0,.4));
}
.btn_more_ichiran span{
  display:inline-block;
  text-align:center;
  padding: 5px;
}
.btn_more_ichiran span img{
  display:block;
}
.c-button{
  border:none;
  display:inline-block;
  min-width:10em;
  padding:5px 0;
  text-align:center;
  cursor:pointer;
  border-radius:3px;
}
.c-button-inquiry{
  min-width:14em;
  padding:5px 0;
  text-align:center;
  cursor:pointer;
  border-radius:5px;
  font-size: 90%;
  transition: .3s;
}
.c-button-inquiry:hover,
.c-button-inquiry:focus{
  background-color: #ffffff;
  transition: .3s;
  -webkit-filter: drop-shadow(0 0 4px rgba(0,0,0,.4));
  filter: drop-shadow(0 0 4px rgba(0,0,0,.4));
}
.c-button span{ padding:0 25px}

.btn{
	display: block;
	margin: 0 auto;
	position: relative;
	text-align: center;
	text-decoration: none;
	background-color:#f0f0f0;
  border-radius: 100px;
  border: 1px solid #dedede;
}
.btn:after{
	bottom: 0;
	content: "";
	height: 10px;
	margin: auto;
	position: absolute;
	right: 15px;
	top: 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	vertical-align: middle;
	width: 10px;
	border-right: 2px solid #151515;
	border-top: 2px solid #151515;
}
.btn a{
  display: block;
	padding: 10px 30px 10px 20px;
}


/* ----------------------
link 
--------------------- */

.btn_link{
  color: #FFFFFF;
  background: #037491 url(../images/link_arrow_blue.png) no-repeat right center;
  /*
  padding-right: 25px;
  */
}
.icon_link{
  background-image: url(../images/icon_footer_link.png);
  background-repeat: no-repeat;
  background-position: right center;
  padding: 5px 20px 5px 5px;
}

/* ----------------------
hrBox 
--------------------- */

.hrBox { background: none repeat scroll 0 0 #000001; clear: both; height: 0;}
.hrBox hr.clear {
    border: 0 solid #FFFFFE;
    color: #FFFFFE;
    display: none;
    height: 0;
    line-height: 0.1em;
    margin: 0;
    padding: 0;
}
.clear{ clear: both;}

.container{ width:100%; background-color:#DDD;}

/* ------------------------------------------
common parts
----------------------------------------- */

.clear{ clear:both;}
.disp_blk{ display: block;}
.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.outerbox_btn_link01{
  text-align: center;
}
.btn_link01{
  background-image: url(../images/icon_link_mid.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  padding: 8px 17px 12px;
  display: inline-block;
  margin: 0 auto;
  min-width: 130px;
  text-align: center;
}
.btn_link02{
  background-image: url(../images/icon_link_short.png);
  background-repeat: no-repeat;
  background-position: right center;
  padding: 3px 40px 3px 0;
  display: inline-block;
}

/* ----------------------
news list 
--------------------- */
.update-date{ display: block;}
.c-link{ display: block;}

@media (min-width: 768px){
  .update-date{ display: inline-block; margin-right: 2em;}
  .c-link{ display: inline-block;}
}

/* ----------------------
text-size 
--------------------- */

.txt_larger{ font-size: larger;}
.txt_135{ font-size: 135%;}

/* ----------------------
text-align 
--------------------- */

.txt_r{ text-align:right;}
.txt_c{ text-align:center;}
.txt_l{ text-align:left;}

/* ----------------------
blk-align 
--------------------- */

.blk_r{ margin: 0 0 0 auto}
.blk_c{ margin: 0 auto;}
.blk_l{ margin: 0 auto 0 0}

/* ----------------------
form 
--------------------- */
.text_w_1em{ width:1em;}
.text_w_2em{ width:2em;}
.text_w_3em{ width:3em;}
.text_w_4em{ width:4em;}
.text_w_5em{ width:5em;}
.text_w_6em{ width:6em;}
.text_w_7em{ width:7em;}
.text_w_8em{ width:8em;}
.text_w_9em{ width:9em;}
.text_w_10em{ width:10em;}
.text_w_11em{ width:11em;}
.text_w_12em{ width:12em;}
.text_w_13em{ width:13em;}
.text_w_14em{ width:14em;}
.text_w_15em{ width:15em;}
.text_w_16em{ width:16em;}
.text_w_17em{ width:17em;}
.text_w_18em{ width:18em;}
.text_w_19em{ width:19em;}
.text_w_20em{ width:20em;}

.text_s_s{ line-height:0.85; font-size:85%;}
.text_s_l{ line-height:1.5; font-size:150%;}


/* ------------------------------------------
slides, thumbnails
----------------------------------------- */

/* ----------------------
zoom 
--------------------- */

@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

@keyframes zoomUp { /* 1.15倍させる指定 */
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}
.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.img_zoom_slide {
  -webkit-animation: zoomUp 12s ease-in-out 0s infinite alternate;
  animation: zoomUp 12s ease-in-out 0s infinite alternate;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.img_zoom_slide30 {
  -webkit-animation: zoomUp 30s ease-in-out 0s infinite alternate;
  animation: zoomUp 30s ease-in-out 0s infinite alternate;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* ----------------------
mouse over action 
--------------------- */

.box_img_hover {
  display: inline-block;
  overflow: hidden;
}
.img_hover,
.img_zoom {
  display: block;
  transition: .45s ease;
}
.img_hover:hover {
  -webkit-filter: drop-shadow(0px 7px 7px rgba(0,0,0,.7));
  filter: drop-shadow(0px 7px 7px rgba(0,0,0,.7));
}
.img_zoom:hover {
  transform: scale(1.1);
}
.img_opacity {
  display: block;
  transition: .45s ease;
  opacity: 1;
}
.img_opacity:hover,
.img_opacity:focus{
  opacity: 0.8;
}
.link_img_zoom{
  display: block;
}
.link_img_zoom:hover .img_zoom {
  transform: scale(1.1);
}
.hover_link_dshadow{
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: .3s;
}
.hover_link_dshadow:hover,
.hover_link_dshadow:focus{
  -webkit-filter: drop-shadow(0 0 4px rgba(0,0,0,.4));
  filter: drop-shadow(0 0 4px rgba(0,0,0,.4));
  transition: .3s;
}

/* ----------------------
underline 
--------------------- */

.line {
  padding-bottom: 5px;
  position: relative;
  display: block;
}
.line::before {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 2px;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .35s;
}
.line:hover::before,
.line:focus::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
.line_color01::before { background: #666666;}
.line_color02::before { background: #ffffff;}
.line_color03::before { background: #000000;}
.line_color04::before { background: #666666;}

/* ----------------------
marker 
--------------------- */

.marker {
  position: relative;
  z-index: 1;
}
.marker::before {
  background: #666666;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .35s;
  z-index: -1;
}
.marker:hover {
  color: #fff;
}
.marker:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/* ------------------------------------------
bg_common,popup_common
----------------------------------------- */

#popup_common{
  position: fixed;
  top: 40px;
  right: 10%;
  bottom: 40px;
  left: 10%;
  visibility: hidden;
  opacity: 0;
  transition: .2s;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  max-width: 800px;
  background-color: rgba( 255, 255, 255, .85 );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

#popup_common.is-active{
  visibility: visible;
  opacity: 1;
  transition: .2s;
}
#inner_popup_common{
  padding: 20px;
}
@media (min-width: 960px) {
  #popup_common{
    top: 100px;
    right: unset;
    bottom: 100px;
    left: 50%;
    margin-left: -400px;
  }
}
#bg_common{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba( 0, 0, 0, .65 );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  visibility: hidden;
  opacity: 0;
  transition: .2s;
  z-index: 9999;
}
#bg_common.is-active{
  visibility: visible;
  opacity: 1;
  transition: .2s;
}

#title_kiyaku{
  font-size: 125%;
  border-bottom: 2px solid #bbbbbb;
  padding: 20px 0 0;
}
#kiyaku{
  background-color: #ffffff;
  padding: 25px;
}
#list_kiyaku li{
  border-bottom: 1px dotted #666666;
  padding: 10px 0;
  font-size: 85%;
}
#wrapper_btn_download{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0 0;
}
#wrapper_btn_download li{
  width: 50%;
}

#btn_download{
  background-color: #93DFD0;
  border: 1px solid #5CBCA9;
  border-radius: 100px;
  cursor: pointer;
  padding: 7px 15px;
  margin: 0 auto;
  font-size: 85%;
  transition: .3s;
  width: 90%;
  display: block;
  text-align: center;
  color: #222222;
  min-height: 3em;
}
#btn_cancel{
  background-color: #cccccc;
  border: 1px solid #aaaaaa;
  border-radius: 100px;
  cursor: pointer;
  padding: 7px 15px;
  margin: 0 auto;
  font-size: 85%;
  transition: .3s;
  width: 90%;
  display: block;
  text-align: center;
  color: #222222;
  min-height: 3em;
}
#btn_download:hover,
#btn_download:focus{
  background-color: #bef3e9;
  transition: .3s;
}
#btn_cancel:hover,
#btn_cancel:focus{
  background-color: #dedede;
  transition: .3s;
}
@media (max-width: 768px) {
  #popup_common{
    overflow: scroll;
  }
  #inner_popup_common{
    width: 90%;
  }
  #kiyaku{
    height: 16em;
    overflow-y: scroll;
  }
  #wrapper_btn_download{
    display: unset;
    padding: 20px 0 0;
  }
  #wrapper_btn_download li{
    width: 100%;
    padding: 10px 0 0;
  }
}

@media(min-width: 768px){
  a[href^="tel:"]{
      pointer-events: none;
      color: #000000;
  }
}