@charset "UTF-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,
legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}

html {
  overflow: auto;
}
body {
  -webkit-print-color-adjust: exact;
  overflow:hidden;
  font-size: 16px;
  line-height:1.6;
  color:#222222;
  font-feature-settings: "palt";
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

input,select,textarea,button{
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

body,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dd,dt{
  margin:0;
  padding:0;
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
}


a {text-decoration: none; color:#494949;}
a:hover {text-decoration: none;}
/*a img:hover { opacity: 0.9; -moz-opacity: 0.9;}*/
a img {
  border-style:none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

button{
  background-color: transparent;
  border: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

textarea{
  resize: vertical;
  min-height: 3em;
  max-height: 25em;
  height: 10em;
}

button:focus,
input:focus,
select:focus,
textarea:focus{
  outline: none;
}
button:hover{
  cursor:pointer;
}

table{
  border-collapse: collapse;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


/* jqスクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
  }
  
  .fade-in-up {
  transform: translate(0, 50px);
  }
  
  .fade-in-down {
  transform: translate(0, -50px);
  }
  
  .fade-in-left {
  transform: translate(-50px, 0);
  }
  
  .fade-in-right {
  transform: translate(50px, 0);
  }

  
  .scroll-in {
  opacity: 1;
  transform: translate(0, 0);
  }
  /*追加*/ 
.poyoyon2 {
  animation: poyoyon2 1s ease-in-out 1 forwards;
}
 
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}

/*--------------------------------------------------------
定数 ※個別設定
--------------------------------------------------------*/

/*透かし文字*/
{
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
a{
  transition: 1.0s ;
}

a:hover{
  opacity: 0.7;
}

/*共通設定*/
.pc-none{
  display: none;
}

.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}
.in_row{
  width:1000px;
  margin:0 auto;
  text-align:center;
}
.in_row1200{
  width:1200px;
  margin:0 auto;
}

/* IE hack */
_:-ms-input-placeholder, :root 
.boxsample {
  display: flex; /* 子要素をflexboxで揃える */
  flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
  justify-content: center; /* 子要素をflexboxにより中央に配置する */
  align-items: center;  /* 子要素をflexboxにより中央に配置する */
}
/*firefox hack*/
@-moz-document url-prefix() {
  div.boxsample{
  -webkit-border-radius: 5px;/* for Safari and Chrome */
  -moz-border-radius: 5px; /* for Firefox */
  -o-border-radius: 5px; /* for opera */
  border-radius: 5px;
  }
}



/* -----------------------------------
  **. Loader
------------------------------------- */
/*loading circle*/
#loading{
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    margin:auto;
}
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right:0;
    bottom:0;
    background: #fff;
    z-index: 1999;
}

@keyframes rotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}


.loader {
  z-index: 2000;
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
}

.loader div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  opacity: .8;
}

.one {
  border-top: 1px solid #3bb7e0;
  animation: rotate-left 1s linear infinite;
}

.two {
  border-right: 1px solid #eaeaea;
  animation: rotate-right 1s linear infinite;
}

.three {
  border-bottom: 1px solid #5EC6EB;
  animation: rotate-right 1s linear infinite;
}

.four {
  border-left: 1px solid #21B7ED;
  animation: rotate-right 1s linear infinite;
}

@keyframes rotate-left {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotate-right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------
ヘッダー
--------------------------------------------------------*/
header {
  border-top:10px solid #3bb7e0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  border-bottom:1px solid #f4f4f4;
  height:83px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
div.head_wrap{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
div.logo{
  padding:0 0 0 0px;
}
.globalMenuSp{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.globalMenuSp ul{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.globalMenuSp ul li{
  font-size:14px;
  padding:0 20px 0;
  box-sizing:border-box;
  border-left:1px solid #4d4d4d;
}
.globalMenuSp ul li:first-child{
  border-left:none;
}
.globalMenuSp ul li a{
  font-weight:bold;
}

div.head_mail_btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:110px;
  height:83px;
  background:#3bb7e0;
  box-shadow:brown;
  font-size:14px;
  color:#fff;
}
div.head_mail_btn a{
  display:block;
  color:#fff;
}
div.head_mail_btn a:before{
  display:block;
  font-family: 'Font Awesome 5 Free';
  content: "\f0e0";
}

div.kv{
  margin-top:83px;
  width:100%;
  height:650px;
  background-image:url(../images/kv.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  display:flex;
  align-items:center;
  justify-content:center;
}
div.kv_in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}
.kv_l{
  text-align:left;
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  padding:0;
}
.kv_r{
  text-align:right;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.kv_l h1{
  font-size:48px;
  line-height:1.25;
  align-items:left;
  margin:0;
  padding:0 0 40px 0;
  color:#fff;
}
.kv_l h2{
  font-size:18px;
  line-height:1.66;
  align-items:left;
  color:#fff;
  margin:0;
  padding:0;
}




/*--------------------------------------------------------
フッター
--------------------------------------------------------*/
.footer{
  width:100%;
  height:auto;
  background:#222;
}
.footer_in{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  height:100%;
  padding:40px 0;
  box-sizing:border-box;
}
div.foot_l{
  width:50%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-direction:column;
}
div.foot_r{
  width:50%;
  height:100%;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
ul.foot_navi{
  width:70%;
  margin:20px 0 0;
  text-align:left;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  flex-wrap:wrap;
}
ul.foot_navi li{
  width:50%;
  list-style:none;
  padding:10px 0 0;
}
ul.foot_navi li a{
  color:#fff;
}
div.foot_contact{
  padding:20px 0 0 0;
}
div.foot_contact h3{
  text-align:left;
  font-size:18px;
  color:#fff;
}
ul.foot_contact_list{
  margin:0px 0 0;
}
ul.foot_contact_list li{
  padding:10px 0 0;
  text-align:left;
  color:#fff;
}

.foot_contact_btn{
  margin:0 auto;
  display:block;
  width:194px;
  height:44px;
  background:#3bb7e0;
  border-radius:5px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  color:#fff;
}
div.copy{
  text-align:center;
  padding:20px 0 20px;
}
div.copy h5{
  font-size:12px;
}





/* 回転するアニメーション */
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* このクラスをつけると回転を無限に繰り返します */
.anime-fuwafuwa {
  animation: 3s fuwafuwa infinite;
}

/*page top*/
#page_top{
  width: 69px;
  height: 39px;
  border-radius: 5px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: #0064b2;
  opacity: 0.8;
}
#page_top a{
  position: relative;
  display: block;
  width: 70px;
  height: 40px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 32px;
  color: #fff;
  position: absolute;
  width: 32px;
  height: 32px;
  top: 0;
  bottom: 15px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}



/*--------------------------------------------------------
コンテンツ
--------------------------------------------------------*/
div.title_area{
  width: 100%;
}
div.title_area h2{
  font-size: 36px;
  line-height:1.2;
  letter-spacing:0.1em;
  padding-bottom:20px;
  color:#3bb7e0;
}
div.title_area p{
  margin:0 auto;
  padding-top:10px;
  text-align:left;
  line-height:1.75;
}
.t_left{
  text-align:left !important;
}

div.top_news{
  background:#f8f8f8;
  width:100%;
  padding:40px 0;
}
div.top_news_in{
  border-radius:5px;
  padding:35px;
  box-sizing:border-box;
}
ul.news_list{
  width:100%;
  height:200px;
  overflow:auto;
}
ul.news_list li{
  border-bottom:1px solid #4d4d4d;
  text-align:left;
  font-szie:14px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:20px 15px;
  box-sizing:border-box;
}
div.news_date{
  padding:0 20px 0 0;
  text-align:left;

}
div.news_date span{
  background:#3bb7e0;
  color:#fff;
  font-size:12px;
  padding:2px 3px;
  display:inline-block;
}

div.sv{
  width:100%;
  padding:40px 0;
}
div.sv_wrap{
  margin:60px auto 0;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-direction:column;
}
div.sv_box{
  width:100%;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  margin-bottom:40px;
}
div.sv_box_in{
  margin:0;
  height:100%;
  padding:0 0px 0 40px;
  box-sizing:border-box;
}
div.sv_box_in h2{
  font-size:48px;
  line-height:1.1;
  text-align:left;
  color:#3bb7e0;
  padding:0px 0;
}
div.sv_box_in h3{
  text-align:left;
  font-size:36px;
  padding:30px 0;
}
div.sv_box p{
  text-align:left;
  padding:0px 0 40px;
  line-height:1.7;
  font-size:14px;
}
.sv_contact_btn{
  display:block;
  width:194px;
  height:44px;
  background:#3bb7e0;
  border-radius:5px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  color:#fff;
  margin:0 auto;
}
div.sv_box2{
  width:100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  margin-bottom:40px;
}
div.sv_box2 img{
  margin-left:auto;
}
div.sv_box_in2{
  margin:0;
  height:100%;
  padding:0 0px 0 0px;
  box-sizing:border-box;
}

div.sv_box_in2 h2{
  font-size:48px;
  line-height:1.1;
  text-align:left;
  color:#00b7b7;
  padding:0px 0;
}
div.sv_box_in2 h3{
  text-align:left;
  font-size:36px;
  padding:30px 0;
}
div.sv_box_in2 p{
  text-align:left;
  padding:0px 0 40px;
  line-height:1.7;
  font-size:14px;
}
.cl_green{
  background:#00b7b7 !important;
}













/*//////////////////////////////////
//下層ページ
//////////////////////////////////*/

div.kv_low{
  margin-top:83px;
  width:100%;
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8f8f8;
}
div.low_title{
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
}
div.low_title h1{
  font-size: 36px;
  order:2;
  font-weight:normal;
}
div.low_title h2{
  font-weight:normal;
  font-size: 48px;
  order:1;
  color:#3bb7e0;
}


div.low_contents{
  padding: 60px 0 60px;  
}
.privacy_faq dt::before{
  content:'・' !important;
}

.privacy_faq dd::before{
  content:'・' !important;
}

.tokute_wrap{
  padding: 40px 0 20px;
}
table.toku_tb{
  width: 60%;
  border-collapse: collapse;
  margin: 0 auto;
}
table.toku_tb th{
  border-collapse: collapse;
  width: 35%;
  padding: 20px;
  font-size: 14px;
  text-align: right;
  border-bottom: 1px solid #ccc;
  font-weight: normal;
}
table.toku_tb td{
  border-collapse: collapse;
  width: 65%;
  padding: 20px;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

dl.privacy_faq{
  margin:20px auto;
  padding:10px;
  box-sizing:border-box;
}
dl.privacy_faq dt{
  font-size:16px;
  padding:10px 0 10px;
  text-align:left;
  font-weight:500;
  font-weight:bold;
}
dl.privacy_faq dd{
  font-size:14px;
  text-align:left;
}


/*ec*/
.ec_bg{
  background-image:url(../images/sv_bg.jpg) !important;
  background-size:cover;
  background-repeat:no-repeat;
}
div.ec_wrap{
  margin:40px auto;
  border-radius:10px;
  background:#f4f4f4;
  padding:40px;
  box-sizing:border-box;
}
div.ec_wrap h2{
  font-size:30px;
  padding:0 0 40px;
}
ul.ec_list{
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  flex-wrap:wrap;
}
ul.ec_list li{
  width:50%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 10px;
  box-sizing:border-box;
}
div.ec_l{
  width:35%;
}
div.ec_r{
  width:65%;
  padding:10px;
  box-sizing:border-box;
}
div.ec_r p{
  text-align:left;
}
div.ec_text{
  padding:40px 10px 0;
  box-sizing:border-box;
}
div.ec_text p{
  text-align:left;
}
div.ec_contact p{
  padding:20px 0 ;
}
div.ec_wrap2{
  margin:40px auto;
  border-radius:10px;
  background:#f4f4f4;
  padding:40px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ec_in{
  width:50%;
}
.ec_in p{
  text-align:left;
}
.ec_mole{
  width:50%;
  text-align:center;
}
.ec_mole img{
  margin-bottom:15px;
}

/*ad*/
.ad_bg{
  background-image:url(../images/ad_bg.jpg) !important;
  background-size:cover;
  background-repeat:no-repeat;
}
ul.ad_list{
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:column;
}
ul.ad_list li{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 0;
  box-sizing:border-box;
}
div.ad_l{
  width:30%;
}



/*inquiry*/
div.inquiry_area{
  padding: 60px 0 60px;  
}
div.inquiry_wrap{
  padding: 0px 0 0;
}

.r_tx{
  color: red;
}
/*input text design*/
.form-text{
  width: 100%;
  font-weight: normal;
  border: 1px solid #00b7b7;
  border-radius: 5px;
  padding: 12px;
  box-sizing: border-box;
  font-size: 16px;
}
.form-textarea{
  width: 100%;
  height: 250px;
  font-weight: normal;
  border: 1px solid #00b7b7;
  border-radius: 5px;
  padding: 12px;
  box-sizing: border-box;
  font-size: 16px;
}
.form-textmini{
  width: 30%;
  font-weight: normal;
  border: 1px solid #00b7b7;
  border-radius: 5px;
  padding: 12px;
  box-sizing: border-box;
  font-size: 16px;
}
.form-select01{
  width: 100%;
  font-weight: normal;
  border: 1px solid #00b7b7;
  border-radius: 5px;
  padding: 12px;
  box-sizing: border-box;
  font-size: 16px;
}
.form-select02{
  width: 20%;
  font-weight: normal;
  border: 1px solid #00b7b7;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  font-size: 14px;
  background: #fff;
}

/* チェックボックス03 */
input[type=checkbox] {
    display: none;
}
.form-checkbox {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 8px 30px 0;
    position: relative;
    width: auto;
}
.form-checkbox::before {
    background: #fff;
    border: 1px solid #3bb7e0;
    border-radius: 3px;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    left: 0;
    margin-top: -8px;
    position: absolute;
    top: 50%;
}
.form-checkbox::after {
    border-right: 6px solid #3bb7e0;
    border-bottom: 3px solid #3bb7e0;
    content: '';
    display: block;
    height: 20px;
    left: 7px;
    margin-top: -16px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    width: 9px;
}
input[type=checkbox]:checked + .form-checkbox::before {
    border-color: #666;
}
input[type=checkbox]:checked + .form-checkbox::after {
    opacity: 1;
    transform: rotate(45deg) scale3d(1,1,1);
}



.sv-btn{
  margin: 10px auto;
  width: 80%;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 5px;
  background: orange;
  color: #fff;
  font-size: 20px;
  text-align: center;
  transition: 1.0s ;
  border: none;
  box-shadow: 2px 2px 4px #494949;
}
.sv-btn:hover{
  opacity: 0.8;
}

.address_box{
  padding: 5px 0 5px;
}
::placeholder {
  font-weight: normal;
  color: #cccccc;
}
div.btn_row{
  padding: 20px 0 20px;
}
.submit-btn{
  width: 25%;
  padding: 15px;
  border-radius: 5px;
  background: #3bb7e0;
  color: #fff;
  font-size: 20px;
  text-align: center;
  transition: 1.0s ;
  border: none;
  box-shadow: 2px 2px 4px #494949;
}
.submit-btn:hover{
  opacity: 0.8;
}
.order-btn{
  width: 30%;
  padding: 25px;
  border-radius: 5px;
  background: #00b7b7;
  color: #fff;
  font-size: 20px;
  text-align: center;
  transition: 1.0s ;
  border: none;
  box-shadow: 2px 2px 4px #494949;
}
.order-btn:hover{
  opacity: 0.8;
}
.order-prev-btn{
  width: 30%;
  padding: 25px;
  border-radius: 5px;
  background: #494949;
  color: #fff;
  font-size: 20px;
  text-align: center;
  transition: 1.0s ;
  border: none;
  box-shadow: 2px 2px 4px #494949;
}
.order-prev-btn:hover{
  opacity: 0.8;
}

.err_tx{
  color: red;
}

.disabled-submit{
  filter: grayscale(100%);
}
.disabled-submit:hover{
  transform: translateY(0) !important;
  opacity: 1 !important;
  cursor: no-drop;
}
.disabled-input{
  background: #eaeaea;
}
/*order*/
table.order_tb{
  width: 80%;
  border-collapse: collapse;
  margin: 40px auto 20px;
}
table.order_tb th{
  border-collapse: collapse;
  width: 30%;
  padding: 15px 20px 15px;
  font-size: 16px;
  text-align: right;
  font-weight:normal;

}
table.order_tb td{
  border-collapse: collapse;
  padding: 15px 20px 15px;
  font-size: 16px;
  text-align: left;

  font-weight: bold;
}
.order_td01{
  text-align: center !important;
}
table.order_tb td .item_wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 5px 0;
}

h3.order_title{
  font-size: 20px;
  padding: 10px 0 10px;
  background: #3bb7e0;
  color: #fff;
}
h3.order_title span{
  font-size: 14px;
  color: #fff;
  font-weight: normal;
}
h3.order_title span a{
  color: yellow;
}
.error_box{
  display: none;
  width: 80%;
  padding: 15px;
  text-align: left;
  margin: 10px auto;
  /*border: 2px solid red;*/
  background:#ffffe0;
  font-size: 14px;
  color: red;
}
.error_box2{
  display: none;
  width: 80%;
  padding: 15px;
  text-align: left;
  margin: 10px auto;
  border-radius: 10px;
  border: 2px solid red;
  font-size: 14px;
  color: red;
}