@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}


html {
  font-size: 100%;
}
body {
  color: #2b2a27;
  font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif;
}
img {
  max-width: 100%;
  pointer-events: none;
}
ul {
  list-style: none;
}
a {
  color: #2b2a27;
}



/*==================================================
スライダーのためのcss
===================================*/


/*画像の横幅を100%にしてレスポンシブ化*/
img{
  width: 100%;
  height: auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/

.gallery{
  margin:0 0 5px 0;
}

.gallery li{
list-style:none;
}

/*矢印の設定*/


/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
  z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.choice-btn li{
  cursor: pointer;
  outline: none;
  background:#333;
  width:25%!important;
}

.choice-btn li img{
  opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
  opacity: 1;/*選択されているものは透過しない*/
}

/*========= レイアウトのためのCSS ===============*/

/*エリア全体を中央寄せ*/
.wrapper{
  width:94%;
  max-width:900px;
  margin:0 auto;
}

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

a{
  color: #333;
}

a:hover,
a:active{
  text-decoration: none;
}

h3{
  text-align: center;
  font-size:1vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin:30px 0;
}

p{
  margin:30px 0;
  word-wrap : break-word;
}


/*-------------------------------------------
Katasiki
-------------------------------------------*/
.katasiki h3 {
  margin-top: 100px;
 
}
.katasiki table {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
 
  margin-bottom: 100px;
  
}

table {
  border-collapse: collapse;
  text-align: center;
}

th, td {
  text-align: center;
  padding: 5px;
  border: 1px solid #333;
}

th {
  background-color: #b0c4de;
  color: #000;
}


/*-------------------------------------------
お問い合わせボタン
-------------------------------------------*/
.side_btn{
  margin-top: 20px;
  padding:10px 0;
  display:flex;
  justify-content:center;
}

.side_btn a {
  display: inline-block;
  font-size: 0.875rem;
  padding: 18px 60px;
  text-decoration: none;
  text-align: center;
  color: #FFF;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px;
  border: 3px solid #D8412C;
  background: -moz-linear-gradient(top, #A91E0E, #A91E0E 80%, #8F180C);
  background: -webkit-gradient(linear, left top, left bottom, from(#A91E0E), color-stop(0.8, #A91E0E), to(#8F180C));
  background-color: #8F180C;
  text-decoration: none;
  font-size: 1.0rem;
  font-size: 10px;
  letter-spacing: 1px;
}


.side_btn a:hover {
  background: -moz-linear-gradient(top, #D22411, #C52210 80%, #C52210);
  background: -webkit-gradient(linear, left top, left bottom, from(#D22411), color-stop(0.8, #C52210), to(#C52210));
  background-color: #C52210;
}
.side_btn a .bigtxt {
  font-size: 1.8rem;
  font-size: 18px;
  font-weight: normal;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #BE3A2C;
  margin-right: 5px;
  margin-bottom: 2px;
  margin-left: 5px;
}

.side_btn span {
  font-size: 16px;
  color: #DE948B;
}


/*-------------------------------------------
Button
-------------------------------------------*/
.btn {
  text-align: center;
  margin-bottom: 80px;
  margin-top: 100px;
}
/*
「display: inline-block;」でaタグに幅と高さを持たせる。
paddingでボタンのサイズを調整。
*/
.btn a {
  display: inline-block;
  border: solid 1px #2b2a27;
  font-size: 0.875rem;
  padding: 18px 60px;
  text-decoration: none;
}




/*-------------------------------------------
Footer
-------------------------------------------*/
#footer {
  font-size: 0.75rem;
  padding: 20px;
  text-align: center;
}
/*
リンクはul、liタグで記述
SNSのリンク集という、一つの意味をもったリスト群になるので、ul、liタグでグルーピング
※リストタグを使用しなくても問題ないが、使用した方が検索エンジンに対して
より適切に意味を伝えることができると考えリストタグを選択しています。
*/
#footer .sns {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
#footer .sns li {
  margin: 0 10px;
}



/*-------------------------------------------
お問い合わせフォーム
-------------------------------------------*/


#hp_base {
  width: 1000px;
   margin-top: 30px;
}

#content {
  width: 760px;
  margin-right: 5px;
  margin-top: 10px;
  margin-left: 120PX;
}

#content h3 {
  font-size: 1.4rem;
  font-size: 14px;
  line-height: 3.0rem;
  line-height: 30px;
  color: #FFFFFF;
  padding-left: 15px;
  margin-top: 0px;
  font-weight: normal;
  background-color: #444444;
  margin-bottom: 10px;
  display: block;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: #DDD;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  letter-spacing: 1px;
}

#content h3 span {
  font-size: 10px;
  color: #999;
  padding-left: 20px;
  letter-spacing: 2px;
}

#content p {
  line-height: 2.2rem;
  line-height: 22px;
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

#content .cont_box {
  margin-bottom: 20px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 0px;
  background-color: #FFF;
  padding: 10px;


}


#content table.table_info {
  width: 94%;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: 10px;
  margin-left: auto;

}
#content table td {
  padding: 8px;
  border: 1px solid #DDD;

}

#content table td.td_head {
  background: -moz-linear-gradient(top, #FFF, #F9EEE3 5%, #FFF9EE 30%, #FFF9EE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.05, #F9EEE3), color-stop(0.3, #FFF9EE), to(#FFF9EE));
  /*background-color: #FFF9EE;*/
  background-color: #eefbff;
  text-align: right;
  white-space: nowrap;
  color: #333333;
  border-right-width: 4px;
  border-right-color: #BE4943;
}

#content table td.td_odd {
  background: -moz-linear-gradient(top, #FFF, #EEE 5%, #FFF 30%, #FFF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.05, #EEE), color-stop(0.3, #FFF), to(#FFF));
  background-color: #FFFFFF;
  text-align: left;
}

.td_head .eng {
  margin: 0px;
  padding: 0px;
  font-size: 1.0rem;
  font-size: 10px;
  color: #D38C85;
}

.chui {
  color: #CA3313;
}

input.form_btn {
  color: #FFF;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 3px 0px;
  border: 3px solid #D8412C;
  background: -moz-linear-gradient(top, #A91E0E, #A91E0E 80%, #8F180C);
  background: -webkit-gradient(linear, left top, left bottom, from(#A91E0E), color-stop(0.8, #A91E0E), to(#8F180C));
  background-color: #8F180C;
  letter-spacing: 1px;
}

input.form_btn:hover {
  background: -moz-linear-gradient(top, #D22411, #C52210 80%, #C52210);
  background: -webkit-gradient(linear, left top, left bottom, from(#D22411), color-stop(0.8, #C52210), to(#C52210));
  background-color: #C52210;
  cursor: pointer;
}
/*-------------------------------------------
メール送信完了ページ
-------------------------------------------*/


.kanryou {
   text-align: center;
   margin-top: 30px;
}

.kanryou strong {
  color: red;
  font-size: 1.5em;
  margin-top: 30px;

}


/*-------------------------------------------
お問い合わせフォーム（メディアスクリーン）
-------------------------------------------*/

@media screen and (max-width:720px){

#content {
  width: 460px;
  margin-right: 5px;
  margin-top: 10px;
  margin-left: 10PX;

}

#content h3{
  width: 490px;
}
 #hp_base {
  width: 100%;
  min-width: 320px;
}

#main {
  width: 98%;
  padding-top: 1%;
  padding-right: 1%;
  padding-left: 1%;
}
.wrapper h3{
  font-size: 1em;
}

.katasiki h3{
  font-size: 1em;
  margin-bottom: 220px;
  margin-top: 40px;
}
.katasiki table {
  display: flex;
  width: 94%;
  margin-left: 15px;
  
  align-items: center;
  justify-content: center;
  margin-top: 120px;
}
.side_box{
  margin-top: 250px;
}

  




/*-- /max:720 --*/

}

@media screen and (min-width: 720px){ 

  #hp_base {
  width: 96%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 1px;
  padding-bottom: 1px;
}
#main {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

#content {
  width: 70%;
 /* float: right;*/
}

/*-- /min:720 --*/

}
@media screen and (max-width: 800px){

  .katasiki h3{
  font-size: 1em;
  margin-bottom: 220px;
  margin-top: 40px;
}
.katasiki table {
  display: flex;
  width: 55%;
  margin-left: 80px;
  
  align-items: center;
  justify-content: center;
  margin-top: 120px;
}


}
@media screen and (min-width: 1000px){

  #content table td {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;

}

#hp_base {
  width: 1000px;
}

#content {
  width: 760px;
  margin-right: 5px;
  margin-top: 10px;
 
}

/*-- /min:1000 --*/

}


@media only screen and (max-width:460px){

 

  #content table td.td_head {
  text-align: left;
  border-right-width: 1px;
  border-bottom-color: #930;
  }
  #content table.table_menu th {
  text-align: left;
  font-size: 1.2rem;
  font-size: 12px;
  border-right-width: 1px;
  }
  #content table.table_menu td {
  font-size: 1.2rem;
  font-size: 12px;
  }
  #content .table_menu strong {
  font-size: 1.4rem;
  font-size: 14px;
  }

  /*-- /max:460 --*/
}