@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
pre{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  display:block;
  vertical-align: baseline;
  background: transparent;
  font-size:14px;
  line-height: 160%;
  font-weight: normal;
  word-wrap: break-word;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: pre-wrap;      /* CSS3 */
  word-wrap: break-word;      /* IE 5.5+ */
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
*{
  box-sizing:border-box;
}
html{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}
body {
  font-size:14px;
  line-height: 140%;
  padding:0px;
  margin:0 auto;
  max-width: 100%;
  width: 100%;
  /*font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.min_font{
  font-family: "ヒラギノ明朝 Pro W3","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}
.bold{
    font-weight: 700;
}

body p{ font-size:14px;padding: 0px; margin: 0px; max-height: 100%;}
body a,body img{ border:none; }
img {vertical-align: bottom;}
table {border-collapse: collapse;border:0px;table-layout: fixed;}
tbody{width: 100%;}
tr,th,td{padding:0px;word-wrap: break-word;word-break: break-all;}
ul{ margin:0px; padding:0px;}
li{ list-style:none;}
.clear{ clear:both; }
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
	clear:both;
}
clearfix {
	*zoom: 1;
}

h1,h2,h3,h4,h5,p,span { margin:0;padding: 0;font-size: 14px;font-weight: normal;line-height:100%; max-height: 100%;word-wrap: break-word;word-break: break-all;}

figure{margin: 0;}


input[type="radio"] {border: 0px!important;}
input[type="radio"],input[type="submit"],label{cursor:pointer;}

input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  word-break: break-all;
  word-wrap: break-word;
  border: 1px solid #333;
}
select::-ms-expand {display: none;/* IE11対策 セレクトボタンのデフォルト非表示*/}

a{
  display: inline-block;
  cursor: pointer;
}

.radio_input{
  display: none;
}
.radio_input + label{
   position: relative;
    display: inline-block;
    padding: 0px 3px 3px 34px;
    cursor: pointer;
    margin-right: 48px;
}
.radio_input + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 50%;
}

.radio_input:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #3498db;
  border-radius: 50%;
}

/* 以下チェックボックス */

.checkbox_input{
display: none;
}
.checkbox_input + label{
   position: relative;
    display: inline-block;
    padding: 5px 3px 3px 34px;
    cursor: pointer;
    margin-right: 48px;
}
.checkbox_input + label::before{
 position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 17px;
    height: 17px;
    margin-top: -9px;
    background: #fff;
    border: 1px solid #ccc;
}

.checkbox_input:checked + label::after{
    position: absolute;
    content: '';
    top:11px;
    left: 3px;
    width: 13px;
    height: 5px;
    border-left: 2px solid #3498db;
    border-bottom: 2px solid #3498db;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* チェックボックス */


/* アコーディオン */
.accordion{
  position: relative;
  display: inline-block;
  padding-right: 20px;
}

.accordion_content {
  display: none;
}
/* アコーディオン */

/* 矢印 */
.arrow::after {
	/* デフォルト 下 */
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #3498db;
    border-right: solid 2px #3498db;
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition: 0.3s;
    position: absolute;
    top: -2px;
    bottom: 0;
    right: 0;
  margin: auto;
}

.arrow_top::after {
	/* 上 */
	-ms-transform: rotate(-45deg);
   	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition: 0.3s;
}

.arrow_r::after {
	/* 右 */
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.3s;
}

.arrow_l::after {
	/* 左 */
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    transition: 0.3s;
}
/* 矢印 */



/* SNS */
.fab {
    font-family: 'Font Awesome 5 Brands';
}
.fa, .fas, .far, .fal, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.social-share.text-white a {
    /* color: #fff; */

}
.social-share a{
     font-size: 30px;
}
/* フェイスブック */
.fa-facebook:before {
    content: "\f09a";
}
.fa-facebook-square:before {
    content: "\f082";
}
.fa-twitter:before {
    content: "\f099";
}
.fa-instagram:before {
    content: "\f16d";
}
.fa-instagram:before {
    content: "\f167";
}


/********* ドロップナビ **********/

ul.drop_nav{
  zoom:1;
}
.drop_nav li{
  width:160px;
  height:34px;
  line-height:34px;
  float: left;
}
ul.drop_sub{
  width:160px;
  z-index:1000;
  top:35px;
  left:0px;
}
ul.drop_sub li{
  padding:0px;
  height:35px;
}
ul.drop_sub a{
  width:160px;
  height:34px;
  line-height:34px;
}

/********* モーダルウィンドウ **********/

iframe{border: none;}
.modal_window {display: none;}

#modal_bg {
z-index: 40000;
background-image: url("../img/common/modal_bg.png");
background-repeat: repeat;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed !important;
position: absolute;
top: 0px;
left: 0px;
display: none;


}
.modal_bg_close{
width: 100%;
height: 100vh;
display: block;
z-index: 1001;
position: absolute;
top: 0;
left: 0;
z-index: 333;
}

.modal_box {
z-index: 50000;
position: fixed !important;
top: 0px;
left: 0px;
display: none;
overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 width: 100vw;
height: 100vh;
}


.modal_box table, .modal_box tr {width: 100%;height: 100%;}

.modal_box td {
height: 100%;
vertical-align:middle;
}

.modal_box .pop_inner {
position: relative;
background-color:#FFF;
margin: 0 auto;
z-index: 1002;
width: 61%;
min-width: 700px;
max-width: 855px;
height: auto;
min-height: 420px;
border-radius: 12px;
}

.modal_btn_next,
.modal_btn_prev{
  width: 50px;
    height: 50px;
     top: 47%;
    background-repeat: no-repeat;
    background-position: center;
}

.modal_btn_next a,
.modal_btn_prev a{
    display: block;
    height: 50px;
    width: 100%;
    display: block;
    top: 0vh;
    right: 50%;
    height: 100vh;
}

.modal_btn_next {
    position: fixed;
    top: 0vh;
    right: 50%;
    height: 100vh;
    right: 16px;
}

.modal_btn_prev.arrow_l::after,
.modal_btn_next.arrow_r::after {
    width: 50px;
    height: 50px;
   
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}
.modal_btn_prev.arrow_l::after{
 left: 14px;
}
.modal_btn_next.arrow_r::after{
   right: 14px;
}

.modal_btn_prev{
    position: fixed;
    left: 0;
    top: 0vh;
    height: 100vh;
}

.modal_close {
cursor: pointer;
display: none;
position: absolute;
right: 32px;
top: 32px;
width: 17px;
height: 17px;
font-size: 20px;
z-index: 33333333;
background-size: 17px;
background-image: url("../img/common/modal_close.png");
text-align: left;
line-height: 20px;
}

/* 以下スマホ設定 */
@media screen and (max-width: 767px) {
.modal_box .pop_inner
{
    width: 87%;
    min-width: 300px;
    max-width: 335px;
    /*height: auto;*/
    margin: 80px auto;
}
.modal_btn_next{
 margin-right: -52% !important;
}
.modal_btn_prev{
 margin-left: -53% !important;
}
#modal_bg {height: 100vh;}
.iPhone #modal_bg,
.iPhone .modal_box,
.iPhone .modal_arrows,
.iPhone .modal_btn_next a,
.iPhone .modal_btn_prev a,
.iPhone .modal_bg_close {height: 100%;}

.modal_close
{
    right: 21px;
    top: 25px;
}

}


/********* ナビ **********/

#nav_menu{
    background: #ccc;
    position: fixed;
    top: 0;
    display: none;
    width: 100%;
    height: 100vh;
}

.iPhone #nav_menu,.iPhone #nav_menu .nav_inner{
    height: 100%;
}
#nav_menu .nav_inner{
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
#nav_menu ul li{
       margin-bottom: 40px;
}
#nav_menu ul li a{
    display: block;
    font-size: 20px;
    padding: 30px 0;

}

/* PC版 768px以上に適応 */
@media screen and (min-width: 768px) {
    #nav_menu .nav_inner{
        /*スクロールバー重複対策*/
        width: calc(100% + 17px);
        padding-right: 17px;
        overflow-y: scroll;
    }
}


.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 50px;
  height: 44px;
}
.menu-trigger span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 3px;
  background-color: #000;
  border-radius: 3px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 20px;
 /* width: 80%; */
 text-align: right;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
  /* width: 60%; */
   text-align: right;
}
.menu-trigger.active span{
  background-color: #fff;
}
.menu-trigger.active span:nth-of-type(1) {
  width: 100%;
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
    width: 100%;
}
.menu-trigger.active span:nth-of-type(3) {
    width: 100%;
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(-20px) rotate(45deg);
}

.menu_s{
    position: fixed;
    right: 10px;
    top: 12px;
    z-index: 333333;
    width: 50px;
    height: 44px;
}
@media screen and (min-width: 768px) {

.menu_s{ bottom: 0;
       transform: scale(0.6);}
#top .menu_s .nav_button{
    margin-top: 55px;
}
}

/* SP版 768px未満に適応*/
@media screen and (max-width: 767px) {
  .menu_s{    top: 10px;
       transform: scale(0.5);}
.iph5 .menu_s{
    top: 4px;
}

}


/********* スクロール **********/
.scroll_area{
  position: absolute;
  bottom: 0;
  right: 0;
}
.scroll_area p{
   font-size: 14px;
    margin: 0 auto;
    color: #fff;
}
.scroll_ber {
    width: 1px;
    height: 77px;
    margin: 17px auto 0;
    background-color:transparent;
    position: relative;
    overflow: hidden;
}

.scroll_ber::before {
  content: '';
  width: 1px;
 height: 100px;
  margin: 17px auto 0;
  background-color: #fff;
  position: absolute;
  top: -20px;
  left: 0;
  -webkit-animation: scroll 1s ease 0s infinite normal;
  animation: scroll 1s ease 0s infinite normal;
}



/********* 全画面 **********/
html,
.full_page,
.full_page #wrap,
.full_page #mainview,
.full_page #mainview .main_inner{
width: 100%;
height: 100%;
    min-height: 100%;
}
.full_page #mainview{
    position: relative;
}
.full_page #mainview{
    background-image: url("../../img/sli/sli_1.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.full_page #mainview .main_inner{
      justify-content: center;
    align-items: center;

}
.full_page #mainview .cnt{
text-align: center;
}


/* スライダ周り */
.effect_slide .swiper-slide {
    width: auto;
}

/* ムービーエリア */
.movie {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.movie iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/* PROGRESS */
#progress-box {
   width: 100%;
       height: 20px;
   background: #c5c5c5;
   position: relative;
}
#progress-bar {
   width: 0;
       height: 20px;
   background: #00cab9;
   position: absolute;
   left: 0;
   top: 0;
}

/*--------------------
 ◎共通設定 
 --------------------*/
body{font-size:12px;line-height: 166%;text-align: left; -webkit-text-size-adjust: 100%;}
a:link{color:#000000; text-decoration:none;}
a:visited{color:#000000; text-decoration:none;}
a:active{color:#000000; text-decoration:none;}
a:hover{color:#000000; text-decoration:none;}
#wrap { width: 100%;position: relative;}

img{
max-width: 100%;
height: auto;
width :auto;
}
.lazy{opacity: 0;}
.tel_no,.no-link{opacity: 1 !important;}
.sp{
  display:none;
}
.pc{
  display:block;
}
.sect .sect_inner{
  width: 980px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
.tel_no{
  cursor: default;
}
.sp{
  display:block;
}
.pc{
   display:none !important;
}
.sect .sect_inner{
  width: 86.6%;
  margin: 0 auto;
}
}
/* フェードイン */
.q_filter {position: fixed; height: 100%; width: 100%; top: 0; left: 0; background-color: #fff; z-index: 100000000; overflow: hidden; }
.q_filter .q_inner{position: relative; height: 100%; width: 100%; display: flex;align-items: center;justify-content: center;}
.q_filter .q_inner .imgs{position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 43px; height: 11px; }
.q_filter .q_inner .imgs img{width: 43px; height: 11px; }
/* display:flex;使用 */
.flex_areas,
.flex_area{display: flex;justify-content: space-between;flex-wrap: wrap;}
/*▼widht指定で真ん中配置でも、左寄せになります。幅は変えてください*/
.flex_areas article{width: 300px;}
.flex_areas::after {content: "";display: block;width: 300px;}
/* コンテンツ幅用指定 */
.cnt_wrap {
    width: 650px;
    padding: 0 50px;
    margin: 0 auto 0;
    box-sizing: content-box;
}

header{
  /* width: 100%; */
  height: 80px;
  position: absolute;
  left: 0;
  top: 0; 
}
.clone-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: 0.5s;
  transform: translateY(-100%);
}
.is-show {
  transform: translateY(0);
    transition: 0.5s;
}
header{
    position: absolute;
}
header.is-show{
    position: fixed;
}
.under header{
    position: fixed;
}

/*背景画像固定*/
body.ignoreScroll
{
    overflow-y:hidden ;
}