@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:#FAF5EC;
  color:#000;
  letter-spacing: 0.06em;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  height:100%;
}
a { text-decoration: none; color:#005F5F;}
a:hover{ color:#258BA2;}
a:focus{ text-decoration: underline;}

.article-content a{ color:#005F5F;}
.article-content a:hover{ text-decoration: underline;}

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

/*==================================================================
layout class
==================================================================*/

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

/* ------------------------------------------
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 ;
}

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

#wrapper_globalnavi_sp{ position: relative; z-index: 900;}
#bg_globalnavi{ position: relative; z-index: 800;}

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

header{
  position: relative;
}

/* ----------------------
sitelogo
--------------------- */

#sitelogo{
  width: 150px;
  margin: 0 auto;
  padding: 40px 0 0;
}
#sitelogo a{ display: block;}

@media (min-width: 768px) {
  #sitelogo{
    width: 230px;
    padding: 20px 0 10px;
  }
}

/* ----------------------
globalnavi
--------------------- */

/* ---- for PC ---- */

#globalnavi{
  display: none;
  background: #F3E9D4;
}
#list_globalnavi{
  display: flex;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
}
#list_globalnavi li{
  flex: 1;
  text-align: center;
  padding: 8px 0;
}
#globalnavi a{
  color: #000;
  display: block;
  padding: .6em 0;
  border-left: 1px solid #DEC48B;
  transition: .3s;
}
#list_globalnavi li:last-child a{
  border-right: 1px solid #DEC48B;
}
#globalnavi a:hover,
#globalnavi a:focus{
  color: #258BA2;
  transition: .3s;
}

@media (min-width: 960px) {
  #globalnavi{
    display: block;
  }
}

/* ---- for smartphone ---- */

#wrapper_globalnavi_sp{
  position: fixed;
  width: 300px;
  right: -300px;
  background: #ECDCBB;
  top: 0;
  height: 100%;
  transition: .3s;
  opacity: 0;
  visibility: hidden;
}
#wrapper_globalnavi_sp a{
  color: #000;
}
#wrapper_globalnavi_sp a:hover,
#wrapper_globalnavi_sp a:focus{
  color: #258BA2;
  text-decoration: underline;
  transition: .3s;
}
#globalnavi_sp{
  padding: 80px 20px;
}
#list_globalnavi_sp li{
  border-bottom: 1px solid #DEC48B;
  padding: 10px;
}
#wrapper_globalnavi_sp.is-active{
  right: 0;
  opacity: 1;
  visibility: visible;
  transition: .3s;
}
#bg_globalnavi{
  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;
}
#bg_globalnavi.is-active{
  visibility: visible;
  opacity: 1;
  transition: .2s;
}

@media (min-width: 960px) {
  #globalnavi_sp{
    display: none;
  }
}

/* ---- btn_gnav ---- */

#wrapper_trigger_globalnavi{
  position: relative;
}
#wrapper_trigger_globalnavi.-inactive{
  z-index: 599;
}
.btn_gnav {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border: none;
  z-index: 999;
  background: #00B2B2;
  cursor: pointer;
  transition: .2s;
}
.btn_gnav.is-active{  
  background: rgba(51,51,51,.75);
}
.btn_gnav.is-active .btn_gnav_line {
  background-color: transparent;
  transition: .2s;
}
.btn_gnav.is-active .btn_gnav_line::before {
  top: 0;
  transform: rotate(45deg);
  background-color: #ffffff;
}
.btn_gnav.is-active .btn_gnav_line::after {
  top: 0;
  transform: rotate(-45deg);
  background-color: #ffffff;
}
.btn_gnav_line {
  display: block;
  height: 2px;
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  transition: .2s;
  background-color: #ffffff;
}
.btn_gnav_line:before,
.btn_gnav_line:after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  transition: inherit;
  background-color: #ffffff;
}
.btn_gnav_line:before {
  top: -10px;
}
.btn_gnav_line:after {
  top: 10px;
}

@media (min-width: 960px) {
  #trigger_globalnavi{
    visibility: hidden;
    display: none;
  }
}

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

#footer{
  position: relative;
  z-index: 99999;
}
#inner_footer{
  margin: 0 auto;
  position: relative;
  width: 100%;
}
#footerlogo{
  width: 140px;
  margin: 0 auto;
  padding: 20px 0;
}
address{
  font-style: normal;
  padding: 0 20px 15px;
  font-size: 85%;
  text-align: center;
}
address .el_address{
  display:block;
  padding: 0;
  line-height: 1.7;
}
#copyright{
  text-align: center;
  padding: 5px 10px;
  font-size: 75%;
  background-color: #F3E9D4;
}
@media (min-width: 640px) {
  #inner_footer{
    display: flex;
    max-width: 600px;
    padding: 60px 0 45px;
  }
  #footerlogo{
    width: 175px;
  }
  address{
    padding: 20px;
    font-size: 100%;
    text-align: left;
  }
}
@media (min-width: 640px) {
  #inner_footer{
    display: flex;
    max-width: 600px;
    padding: 90px 0 75px;
  }
}


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

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

.title_common{
  font-size: 150%;
  padding: 1em 0.5em 1em;
}
.title_section{
  text-align: center;
  font-weight: normal;
  margin-bottom: 30px;
}
.title_section_main{
  text-shadow: -1px -1px 0 #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px 1px 1px #fff,-1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px 1px 1px #fff;
  font-size: 175%;
  color: #333333;
  font-weight: normal;
}
.title_section_sub{
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  font-size: 90%;
  color: #00B2B2;
  display: block;
  font-weight: normal;
}
.title_sub_section{
  color: #00B2B2;
  font-size: 135%;
  text-align: center;
  padding-bottom: 5px;
  background: url(../images/border_title_sub_section.gif) no-repeat bottom center;
  margin-bottom: 1em;
}
@media (min-width: 640px) {
  .title_section_main{
    font-size: 210%;
  }
  .title_section_main.second{
    font-size: 170%;
  }
  .title_section_sub{
    font-size: 100%;
  }
}
@media (min-width: 1280px) {
  .title_section_main{
    font-size: 260%;
  }
  .title_section_main.second{
    font-size: 200%;
  }
  .title_section_sub{
    font-size: 120%;
  }
}

/* ------------------------------------------
common block
----------------------------------------- */

.c_block{
  padding: 60px 0;
}
@media (min-width: 640px) {
  .c_block{
    padding: 80px 0;
  }
}

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

.wrapper_c_btn_link{
  text-align: center;
}
.c_btn_link{
  display: inline-block;
  background-color: #00B2B2;
  border-radius: 50px;
  text-align: center;
  color: #ffffff;
  padding: .5em 2em .5em 1.5em;
  margin: 1em auto 0;
  background-image: url(../images/arrow_link_white.png);
  background-repeat: no-repeat;
  background-position: right center;
  transition: .3s;
}
.c_btn_link_ichiran{
  margin: 1em 0;
}
.c_btn_link:hover{
  color: #ffffff;
  background-color: #007171;
  transition: .3s;
}
.c_btn_link:focus{
  color: #ffffff;
  text-decoration: underline;
  background-color: #007171;
  transition: .3s;
}

/* ----------------------
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;
  color: #222222;
  border-radius: 5px;
  font-size: 85%;
  margin: 0 0 0 auto;
}
.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 25px 5px 5px;
  background-image: url(../images/bg_icon_yajirushi02.png);
  background-repeat: no-repeat;
  background-position: right center;
}
.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;
}

/* ----------------------
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: .25s ease-out;
}
.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.2);
}
.link_img_zoom span{
  display: block;
  overflow: hidden;
}
.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: #258BA2;}
.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);
}

#goog-gt-tt{
  margin-top: 100px!important;
  margin-left: 50px!important;
}

/* ------------------------------------------
ijusoudan:相談ページリンクボタン
----------------------------------------- */

#btn_ijusoudan{
  display: block;
  position: fixed;
  left: 0;
  top: 90px;
  z-index: 9999999;
  width: 50px;
}

@media (min-width: 640px) {
  #btn_ijusoudan{
    width: unset;
  }
}